From 89532493033369a76cb98d4c381630c023ecbea0 Mon Sep 17 00:00:00 2001
From: man0s <95379755+losman0s@users.noreply.github.com>
Date: Sat, 9 Sep 2023 17:16:34 +0800
Subject: [PATCH] fix(mfi-v2-ui): use chartreuse as accent

---
 .../src/components/Footer/Footer.tsx          | 26 +++++++++----------
 .../src/components/Navbar/Navbar.tsx          |  2 +-
 .../src/components/OverlaySpinner.tsx         |  2 +-
 apps/marginfi-v2-ui/src/pages/index.tsx       |  2 +-
 apps/marginfi-v2-ui/src/pages/points.tsx      |  2 +-
 apps/marginfi-v2-ui/src/styles/globals.css    |  4 +--
 6 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/apps/marginfi-v2-ui/src/components/Footer/Footer.tsx b/apps/marginfi-v2-ui/src/components/Footer/Footer.tsx
index 6595de0785..5dac2f1708 100644
--- a/apps/marginfi-v2-ui/src/components/Footer/Footer.tsx
+++ b/apps/marginfi-v2-ui/src/components/Footer/Footer.tsx
@@ -70,7 +70,7 @@ const LendZoomControl: FC = () => {
     <div className="flex gap-4 items-center justify-center border-r border-[#4E5257] pr-4">
       <div className="flex items-center h-full">
         <SvgIcon onClick={() => setLendZoomLevel(1)} viewBox="0 0 17 17">
-          <svg fill="#868E95" className={`cursor-pointer ${lendZoomLevel === 1 && "fill-[#7fff00]"} hover:fill-[#7fff00] text-lg`}>
+          <svg fill="#868E95" className={`cursor-pointer ${lendZoomLevel === 1 && "fill-[#DCE85D]"} hover:fill-[#DCE85D] text-lg`}>
             <path
               strokeWidth={1.5}
               d="M1 1h3v3h-3v-3zM5 4h3v-3h-3v3zM9 4h3v-3h-3v3zM13 1v3h3v-3h-3zM1 8h3v-3h-3v3zM5 8h3v-3h-3v3zM9 8h3v-3h-3v3zM13 8h3v-3h-3v3zM1 12h3v-3h-3v3zM5 12h3v-3h-3v3zM9 12h3v-3h-3v3zM13 12h3v-3h-3v3zM1 16h3v-3h-3v3zM5 16h3v-3h-3v3zM9 16h3v-3h-3v3zM13 16h3v-3h-3v3z"
@@ -80,7 +80,7 @@ const LendZoomControl: FC = () => {
       </div>
       <div className="flex items-center h-full">
         <SvgIcon onClick={() => setLendZoomLevel(2)} viewBox="0 0 16 16">
-          <svg fill="#868E95" className={`cursor-pointer ${lendZoomLevel === 2 && "fill-[#7fff00]"} hover:fill-[#7fff00] text-lg`}>
+          <svg fill="#868E95" className={`cursor-pointer ${lendZoomLevel === 2 && "fill-[#DCE85D]"} hover:fill-[#DCE85D] text-lg`}>
             <path
               strokeWidth={1.5}
               d="M1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2zM1 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V7zM1 12a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2z"
@@ -90,7 +90,7 @@ const LendZoomControl: FC = () => {
       </div>
       <div className="flex items-center h-full">
         <SvgIcon onClick={() => setLendZoomLevel(3)} viewBox="0 0 16 16">
-          <svg fill="#868E95" className={`cursor-pointer ${lendZoomLevel === 3 && "fill-[#7fff00]"} hover:fill-[#7fff00] text-lg`}>
+          <svg fill="#868E95" className={`cursor-pointer ${lendZoomLevel === 3 && "fill-[#DCE85D]"} hover:fill-[#DCE85D] text-lg`}>
             <path
               strokeWidth={1.5}
               d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"
@@ -117,11 +117,11 @@ const LendUnitControl: FC = () => {
           "& .MuiSwitch-switchBase": {
             "&.Mui-checked": {
               "& .MuiSwitch-thumb": {
-                backgroundColor: "#7fff00",
+                backgroundColor: "#DCE85D",
               },
               "& + .MuiSwitch-track": {
-                backgroundColor: "#7fff00",
-                color: "#7fff00",
+                backgroundColor: "#DCE85D",
+                color: "#DCE85D",
               },
             },
           },
@@ -141,7 +141,7 @@ const QuickLinks: FC = () => (
       rel="noopener noreferrer"
       className="p-0 m-0 h-full flex justify-center items-center"
     >
-      <svg fill="#868E95" width="23" height="21" className="cursor-pointer hover:fill-[#7fff00]">
+      <svg fill="#868E95" width="23" height="21" className="cursor-pointer hover:fill-[#DCE85D]">
         <path d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"></path>
       </svg>
     </Link>
@@ -151,7 +151,7 @@ const QuickLinks: FC = () => (
       rel="noopener noreferrer"
       className="p-0 m-0 h-full flex justify-center items-center"
     >
-      <TwitterIcon className="pb-1 text-xl cursor-pointer hover:fill-[#7fff00] text-[#868E95]" />
+      <TwitterIcon className="pb-1 text-xl cursor-pointer hover:fill-[#DCE85D] text-[#868E95]" />
     </Link>
     <Link
       href="https://t.me/mrgncommunity"
@@ -159,7 +159,7 @@ const QuickLinks: FC = () => (
       rel="noopener noreferrer"
       className="p-0 m-0 h-full flex justify-center items-center"
     >
-      <TelegramIcon className="pb-1 text-xl cursor-pointer hover:fill-[#7fff00] text-[#868E95]" />
+      <TelegramIcon className="pb-1 text-xl cursor-pointer hover:fill-[#DCE85D] text-[#868E95]" />
     </Link>
     <Link
       href="https://docs.marginfi.com/"
@@ -167,7 +167,7 @@ const QuickLinks: FC = () => (
       rel="noopener noreferrer"
       className="p-0 m-0 h-full flex justify-center items-center"
     >
-      <AutoStoriesOutlinedIcon className="pb-1 text-xl cursor-pointer hover:fill-[#7fff00] text-[#868E95]" />
+      <AutoStoriesOutlinedIcon className="pb-1 text-xl cursor-pointer hover:fill-[#DCE85D] text-[#868E95]" />
     </Link>
     <Link
       href="https://mrgn.grafana.net/public-dashboards/a2700f1bbca64aeaa5582a90dbaeb276?orgId=1&refresh=1m"
@@ -175,7 +175,7 @@ const QuickLinks: FC = () => (
       rel="noopener noreferrer"
       className="p-0 m-0 h-full flex justify-center items-center"
     >
-      <InsightsIcon className="pb-1 text-xl cursor-pointer hover:fill-[#7fff00] text-[#868E95]" />
+      <InsightsIcon className="pb-1 text-xl cursor-pointer hover:fill-[#DCE85D] text-[#868E95]" />
     </Link>
     <Link
       href="https://github.com/mrgnlabs"
@@ -183,7 +183,7 @@ const QuickLinks: FC = () => (
       rel="noopener noreferrer"
       className="p-0 m-0 h-full flex justify-center items-center"
     >
-      <GitHub className="pb-1 text-xl cursor-pointer hover:fill-[#7fff00] text-[#868E95]" />
+      <GitHub className="pb-1 text-xl cursor-pointer hover:fill-[#DCE85D] text-[#868E95]" />
     </Link>
     <Link
       href="https://marginfi.canny.io/mrgnlend"
@@ -191,7 +191,7 @@ const QuickLinks: FC = () => (
       rel="noopener noreferrer"
       className="p-0 m-0 h-full flex justify-center items-center"
     >
-      <QuestionMark className="pb-1 text-xl cursor-pointer hover:fill-[#7fff00] text-[#868E95]" />
+      <QuestionMark className="pb-1 text-xl cursor-pointer hover:fill-[#DCE85D] text-[#868E95]" />
     </Link>
   </div>
 );
diff --git a/apps/marginfi-v2-ui/src/components/Navbar/Navbar.tsx b/apps/marginfi-v2-ui/src/components/Navbar/Navbar.tsx
index 093a7a21ab..21b7bcadcc 100644
--- a/apps/marginfi-v2-ui/src/components/Navbar/Navbar.tsx
+++ b/apps/marginfi-v2-ui/src/components/Navbar/Navbar.tsx
@@ -236,7 +236,7 @@ const Navbar: FC = () => {
                   } UXP`}
             </div>
 
-            <Link href={"/points"} className="whitespace-nowrap">
+            <Link href={"/points"} className={`${router.pathname === "/points" ? "hover-underline-static" : "hover-underline-animation"} whitespace-nowrap`}>
               {connected && currentFirebaseUser
                 ? `${groupedNumberFormatterDyn.format(Math.round(userPointsData.totalPoints))} points`
                 : "points"}
diff --git a/apps/marginfi-v2-ui/src/components/OverlaySpinner.tsx b/apps/marginfi-v2-ui/src/components/OverlaySpinner.tsx
index cd32e3337b..81e48fa50b 100644
--- a/apps/marginfi-v2-ui/src/components/OverlaySpinner.tsx
+++ b/apps/marginfi-v2-ui/src/components/OverlaySpinner.tsx
@@ -15,7 +15,7 @@ const OverlaySpinner: FC<OverlaySpinnerProps> = ({ fetching }) => (
       display: fetching ? "block" : "none",
     }}
   >
-    <PuffLoader color="#7fff00" size={30} />
+    <PuffLoader color="#DCE85D" size={30} />
   </div>
 );
 
diff --git a/apps/marginfi-v2-ui/src/pages/index.tsx b/apps/marginfi-v2-ui/src/pages/index.tsx
index 2817a13d78..ff607d8341 100644
--- a/apps/marginfi-v2-ui/src/pages/index.tsx
+++ b/apps/marginfi-v2-ui/src/pages/index.tsx
@@ -66,7 +66,7 @@ const Home = () => {
             text={`Read-only view of ${shortenAddress(
               selectedAccount.address.toBase58()
             )} (owner: ${shortenAddress(walletAddress)}) - All actions are simulated`}
-            backgroundColor="#7fff00"
+            backgroundColor="#DCE85D"
           />
         )}
         {walletAddress && marginfiAccountCount > 1 && (
diff --git a/apps/marginfi-v2-ui/src/pages/points.tsx b/apps/marginfi-v2-ui/src/pages/points.tsx
index d9a5552134..0e2f587ad7 100644
--- a/apps/marginfi-v2-ui/src/pages/points.tsx
+++ b/apps/marginfi-v2-ui/src/pages/points.tsx
@@ -335,7 +335,7 @@ const Points: FC = () => {
                       target="_blank"
                       rel="noopener noreferrer"
                       style={{ textDecoration: "none", color: "inherit" }}
-                      className="hover:text-[#7fff00]"
+                      className="hover:text-[#DCE85D]"
                     >
                       {`${row.id.slice(0, 5)}...${row.id.slice(-5)}`}
                       <style jsx>{`
diff --git a/apps/marginfi-v2-ui/src/styles/globals.css b/apps/marginfi-v2-ui/src/styles/globals.css
index 7a554cd9a0..904e99a4c1 100644
--- a/apps/marginfi-v2-ui/src/styles/globals.css
+++ b/apps/marginfi-v2-ui/src/styles/globals.css
@@ -73,7 +73,7 @@ a {
   height: 2px;
   bottom: 0;
   left: 0;
-  background-color: #7fff00;
+  background-color: #DCE85D;
   transform-origin: center;
   transition: transform 0.25s ease-out;
 }
@@ -91,7 +91,7 @@ a {
   height: 2px;
   bottom: 0;
   left: 0;
-  background-color: #7fff00;
+  background-color: #DCE85D;
   transform-origin: center;
   transition: transform 0.25s ease-out;
 }