feat(EquilibriumWidget): recolor supply

Use gradient instead of simple color.
Use classname to avoid coloring unit.
Give class fn more descriptive name.
Lift stateless fn out of component.

src/mainsite/components/EquilibriumWidget/index.tsx

@@ -113,6 +113,24 @@ const BurnMarkers: FC<{ burnMarkers?: BurnMarkers }> = ({ burnMarkers }) => {
   );
 };
 
+const supplyColorClass = (
+  equilibriumSupply: number | undefined,
+  ethSupply: number | undefined,
+) => {
+  if (equilibriumSupply === undefined || ethSupply === undefined) {
+    return undefined;
+  }
+
+  const baseClass = "text-transparent bg-gradient-to-r bg-clip-text";
+
+  const colorClass =
+    equilibriumSupply < ethSupply
+      ? "from-orange-400 to-yellow-300"
+      : "from-cyan-300 to-indigo-500";
+
+  return `${baseClass} ${colorClass}`;
+};
+
 const EquilibriumWidget = () => {
   const burnRates = useBurnRates();
   const supplyProjectionInputs = useSupplyProjectionInputs();
@@ -314,18 +332,6 @@ const EquilibriumWidget = () => {
       ? ((nowMarker - STAKING_MIN) / STAKING_RANGE) * 100
       : undefined;
 
-  function getTextSizeClass(
-    equilibriumSupply: number | undefined,
-    ethSupply: number | undefined,
-  ) {
-    const baseClass = "text-2xl md:text-3xl";
-    const colorClass =
-      (equilibriumSupply ?? 0) < (ethSupply ?? 0)
-        ? "text-orange-200"
-        : "text-blue-400";
-    return `${baseClass} ${colorClass}`;
-  }
-
   return (
     <WidgetErrorBoundary title="supply equilibrium">
       <WidgetBackground
@@ -362,10 +368,11 @@ const EquilibriumWidget = () => {
               </WidgetTitle>
               <MoneyAmount
                 amountPostfix={nonStakingBurnFraction === 0 ? "" : "M"}
-                textSizeClass={getTextSizeClass(
+                className={supplyColorClass(
                   equilibriums?.supplyEquilibrium,
                   ethSupply,
                 )}
+                textSizeClass="text-2xl md:text-3xl"
               >
                 {equilibriums !== undefined
                   ? Format.formatOneDecimal(

yarn.lock

@@ -1020,9 +1020,9 @@ camelcase-css@^2.0.1:
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
 caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001426:
-  version "1.0.30001570"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001570.tgz"
-  integrity sha512-+3e0ASu4sw1SWaoCtvPeyXp+5PsjigkSt8OXZbF9StH5pQWbxEjLAZE3n8Aup5udop1uRiKA7a4utUk/uoSpUw==
+  version "1.0.30001680"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz"
+  integrity sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==
 
 [email protected]:
   version "3.0.0"