Change frozen banner design

packages/frontend/src/styles/style.css

@@ -1,3 +1,24 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  /* For Webkit-based browsers (Chrome, Safari and Opera) */
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* For IE, Edge and Firefox */
+  .scrollbar-hide {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
 @font-face {
   font-family: 'Inter';
   font-style: normal;
@@ -154,18 +175,3 @@
 * {
   font-feature-settings: 'tnum' on, 'calt' off;
 }
-
-/* For Webkit-based browsers (Chrome, Safari and Opera) */
-.scrollbar-hide::-webkit-scrollbar {
-  display: none;
-}
-
-/* For IE, Edge and Firefox */
-.scrollbar-hide {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

packages/frontend/src/view/components/page/FreezeBanner.tsx

@@ -14,21 +14,21 @@ export function FreezeBanner({
 
   if (freezeStatus === 'freezable') {
     return (
-      <div className="sticky top-0 z-50 flex items-center justify-center gap-4 bg-brand px-6 py-0.5 text-center text-white">
+      <InfoBanner>
         <span>
           This exchange can be frozen due to inactivity of the operator.
         </span>
         <a href="/freeze" className="underline">
           Read more
         </a>
-      </div>
+      </InfoBanner>
     )
   }
   if (freezeStatus === 'frozen') {
     return (
-      <div className="sticky top-0 z-50 flex items-center justify-center gap-4 bg-red-500 px-6 py-0.5 text-center text-white">
+      <WarningBanner>
         <span>This exchange is frozen and no longer operates normally. </span>
-      </div>
+      </WarningBanner>
     )
   }
   return null
@@ -39,22 +39,9 @@ function DydxSunsetFreezeBanner({
 }: {
   freezeStatus: FreezeStatus
 }) {
-  if (freezeStatus === 'freezable') {
-    return (
-      <div className="sticky top-0 z-50 flex items-center justify-center gap-4 bg-brand px-6 py-0.5 text-center text-white">
-        <span>
-          dYdX v3 is undergoing a planned shutdown and the operator is inactive.
-          Currently, anyone can freeze the exchange.
-        </span>
-        <a href="/freeze" className="underline">
-          Read more
-        </a>
-      </div>
-    )
-  }
   if (freezeStatus === 'frozen') {
     return (
-      <div className="sticky top-0 z-50 flex items-center justify-center gap-4 bg-red-500 py-1.5 text-center text-white">
+      <WarningBanner>
         <span>
           ⚠️ dYdX v3 has been discontinued and the exchange contracts are
           frozen. Use the{' '}
@@ -63,9 +50,52 @@ function DydxSunsetFreezeBanner({
           </a>{' '}
           functionality to withdraw your funds.
         </span>
-      </div>
+      </WarningBanner>
     )
   }
 
-  return null
+  return (
+    <InfoBanner>
+      {freezeStatus === 'freezable' ? (
+        <>
+          <span>
+            dYdX v3 is undergoing a planned shutdown and the operator is
+            inactive. Currently, anyone can freeze the exchange.
+          </span>{' '}
+          <a href="/freeze" className="underline">
+            Read more
+          </a>
+        </>
+      ) : (
+        <>
+          <span>
+            dYdX v3 is scheduled to shut down on October 28th at 12:05 P.M. UTC.
+          </span>{' '}
+          <a
+            href="https://dydx.exchange/blog/v3-product-sunset"
+            target="_blank"
+            className="underline"
+          >
+            Read more
+          </a>
+        </>
+      )}
+    </InfoBanner>
+  )
+}
+
+function InfoBanner({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="text-balance sticky top-0 z-50 bg-brand px-6 py-0.5 text-center text-sm leading-tight text-white md:text-lg md:leading-normal">
+      {children}
+    </div>
+  )
+}
+
+function WarningBanner({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="text-balance sticky top-0 z-50 bg-yellow-300 px-6 py-0.5 text-center text-sm leading-tight text-black md:text-lg md:leading-normal">
+      {children}
+    </div>
+  )
 }