From cfd43c789d935f32d733bcc462b274ff0102e22b Mon Sep 17 00:00:00 2001
From: Cooper Ransom <cooperransom08@outlook.com>
Date: Tue, 26 Mar 2024 13:14:57 -0400
Subject: [PATCH] Use useIsMobile to only show the text on large displays

---
 src/components/layout/BrandPill.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/layout/BrandPill.tsx b/src/components/layout/BrandPill.tsx
index c38fe63c..09b1067c 100644
--- a/src/components/layout/BrandPill.tsx
+++ b/src/components/layout/BrandPill.tsx
@@ -2,13 +2,14 @@ import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 
 import { Icon, Icons } from "@/components/Icon";
+import { useIsMobile } from "@/hooks/useIsMobile";
 
 export function BrandPill(props: {
   clickable?: boolean;
-  // hideTextOnMobile?: boolean;
   backgroundClass?: string;
 }) {
   const { t } = useTranslation();
+  const isMobile = useIsMobile();
 
   return (
     <div
@@ -21,6 +22,14 @@ export function BrandPill(props: {
       )}
     >
       <Icon className="text-2xl" icon={Icons.MOVIE_WEB} />
+      <span
+        className={[
+          "font-semibold text-white",
+          isMobile ? "hidden sm:block" : "",
+        ].join(" ")}
+      >
+        {t("global.name")}
+      </span>
     </div>
   );
 }