Merge pull request #224 from mrgnlabs/man0s/ui-touchups-2

Man0s/UI touchups 2
mrgnlabs · Sep 7, 2023 · 4160bad · 4160bad · vercel · Sep 7, 2023
2 parents 3c52ab9 + 8300c5e
commit 4160bad
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 29 deletions.
diff --git a/apps/marginfi-v2-ui/src/components/Footer/Footer.tsx b/apps/marginfi-v2-ui/src/components/Footer/Footer.tsx
@@ -64,13 +64,13 @@ const HotkeysInfo: FC = () => {
 };
 
 const LendZoomControl: FC = () => {
-  const setLendZoomLevel = useUserProfileStore((state) => state.setLendZoomLevel);
+  const [lendZoomLevel, setLendZoomLevel] = useUserProfileStore((state) => [state.lendZoomLevel, state.setLendZoomLevel]);
 
   return (
     <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 glow-on-hover text-lg">
+          <svg fill="#868E95" className={`cursor-pointer ${lendZoomLevel === 1 && "fill-[#7fff00]"} hover:fill-[#7fff00] 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 glow-on-hover text-lg">
+          <svg fill="#868E95" className={`cursor-pointer ${lendZoomLevel === 2 && "fill-[#7fff00]"} hover:fill-[#7fff00] 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 glow-on-hover text-lg">
+          <svg fill="#868E95" className={`cursor-pointer ${lendZoomLevel === 3 && "fill-[#7fff00]"} hover:fill-[#7fff00] 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"
@@ -114,15 +114,14 @@ const LendUnitControl: FC = () => {
         onChange={(_, checked) => setDenominationUSD(checked)}
         sx={{
           color: "#868E95",
-          "& .MuiSwitch-thumb": {
-            backgroundColor: "#868E95",
-          },
           "& .MuiSwitch-switchBase": {
-            "& + .MuiSwitch-track": {
-              backgroundColor: "#868E95",
-              color: "#868E95",
-              "&.Mui-checked": {
-                backgroundColor: "#868E95",
+            "&.Mui-checked": {
+              "& .MuiSwitch-thumb": {
+                backgroundColor: "#7fff00",
+              },
+              "& + .MuiSwitch-track": {
+                backgroundColor: "#7fff00",
+                color: "#7fff00",
               },
             },
           },
@@ -142,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 glow-on-hover">
+      <svg fill="#868E95" width="23" height="21" className="cursor-pointer hover:fill-[#7fff00]">
         <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>
@@ -152,47 +151,47 @@ 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 glow-on-hover text-[#868E95]" />
+      <TwitterIcon className="pb-1 text-xl cursor-pointer hover:fill-[#7fff00] text-[#868E95]" />
     </Link>
     <Link
       href="https://t.me/mrgncommunity"
       target="_blank"
       rel="noopener noreferrer"
       className="p-0 m-0 h-full flex justify-center items-center"
     >
-      <TelegramIcon className="pb-1 text-xl cursor-pointer glow-on-hover text-[#868E95]" />
+      <TelegramIcon className="pb-1 text-xl cursor-pointer hover:fill-[#7fff00] text-[#868E95]" />
     </Link>
     <Link
       href="https://docs.marginfi.com/"
       target="_blank"
       rel="noopener noreferrer"
       className="p-0 m-0 h-full flex justify-center items-center"
     >
-      <AutoStoriesOutlinedIcon className="pb-1 text-xl cursor-pointer glow-on-hover text-[#868E95]" />
+      <AutoStoriesOutlinedIcon className="pb-1 text-xl cursor-pointer hover:fill-[#7fff00] text-[#868E95]" />
     </Link>
     <Link
       href="https://mrgn.grafana.net/public-dashboards/a2700f1bbca64aeaa5582a90dbaeb276?orgId=1&refresh=1m"
       target="_blank"
       rel="noopener noreferrer"
       className="p-0 m-0 h-full flex justify-center items-center"
     >
-      <InsightsIcon className="pb-1 text-xl cursor-pointer glow-on-hover text-[#868E95]" />
+      <InsightsIcon className="pb-1 text-xl cursor-pointer hover:fill-[#7fff00] text-[#868E95]" />
     </Link>
     <Link
       href="https://github.com/mrgnlabs"
       target="_blank"
       rel="noopener noreferrer"
       className="p-0 m-0 h-full flex justify-center items-center"
     >
-      <GitHub className="pb-1 text-xl cursor-pointer glow-on-hover text-[#868E95]" />
+      <GitHub className="pb-1 text-xl cursor-pointer hover:fill-[#7fff00] text-[#868E95]" />
     </Link>
     <Link
       href="https://marginfi.canny.io/mrgnlend"
       target="_blank"
       rel="noopener noreferrer"
       className="p-0 m-0 h-full flex justify-center items-center"
     >
-      <QuestionMark className="pb-1 text-xl cursor-pointer glow-on-hover text-[#868E95]" />
+      <QuestionMark className="pb-1 text-xl cursor-pointer hover:fill-[#7fff00] text-[#868E95]" />
     </Link>
   </div>
 );

diff --git a/apps/marginfi-v2-ui/src/components/Navbar/AirdropZone.tsx b/apps/marginfi-v2-ui/src/components/Navbar/AirdropZone.tsx
@@ -60,7 +60,7 @@ const AirdropZone: FC = () => {
 
   return (
     <div>
-      <span className="glow-on-hover" onClick={open}>
+      <span onClick={open}>
         Airdrop
       </span>
       <Modal open={isOpen} onClose={close} aria-labelledby="title" aria-describedby="description">

diff --git a/apps/marginfi-v2-ui/src/components/Navbar/Navbar.tsx b/apps/marginfi-v2-ui/src/components/Navbar/Navbar.tsx
@@ -110,7 +110,7 @@ const Navbar: FC = () => {
 
   return (
     <header>
-      <nav className="fixed w-full top-0 h-[64px] z-20">
+      <nav className="fixed w-full top-0 h-[64px] z-20 bg-[#0F1111]">
         <div className="w-full top-0 flex justify-between items-center h-16 text-sm font-[500] text-[#868E95] z-10 border-b-[0.5px] border-[#1C2125] px-4">
           <div className="h-full w-1/2 flex justify-start items-center z-10 gap-4 lg:gap-8">
             <Link

diff --git 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="glow-on-hover"
+                      className="hover:text-[#7fff00]"
                     >
                       {`${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
@@ -60,13 +60,6 @@ a {
   animation: pulse 1.8s infinite;
 }
 
-.glow-on-hover:hover {
-  text-shadow: 0 0 10px #DCE85D, 0 0 30px #DCE85D;
-  filter: drop-shadow(0 0 10px #DCE85D) drop-shadow(0 0 30px #DCE85D);
-  color: #DCE85D !important;
-  fill: #DCE85D !important;
-}
-
 .hover-underline-static {
   display: inline-block;
   position: relative;