feat(mfi-v2-xnft): xNft styling updates WIP (DON'T MERGE YET)

apps/marginfi-v2-ui/src/components/common/PageHeader.tsx

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from "react";
-import { Login } from "@mui/icons-material";
+import { WalletOutlined } from "@mui/icons-material";
 import { useUiStore } from "~/store";
 import { useWalletContext } from "~/hooks/useWalletContext";
 import { Mobile } from "~/mediaQueries";
@@ -10,32 +10,32 @@ interface PageHeaderProps {
 }
 
 const PageHeader: FC<PageHeaderProps> = ({ children }) => {
-  const { connected, openWalletSelector } = useWalletContext();
+  const { connected } = useWalletContext();
   const [setIsWalletDrawerOpen, isFetchingData] = useUiStore((state) => [
     state.setIsWalletDrawerOpen,
     state.isFetchingData,
   ]);
 
   return (
     <div className="flex w-full h-[90px] sm:h-[60px] justify-center items-center border-solid border-[#1C2125] border-y-[1px] bg-[url('/WaveBG3.png')]">
-      <div className="w-[90%] sm:w-4/5 sm:max-w-7xl flex flex-row justify-between items-center border-solid font-aeonik font-normal text-2xl sm:text-3xl">
+      <div className="w-full px-4 sm:w-4/5 sm:max-w-7xl flex flex-row justify-between items-center border-solid font-aeonik font-normal text-2xl sm:text-3xl">
         <div className="flex gap-4 justify-center items-center">
           <Mobile>
-            <Mrgn className={`w-[18px] ${isFetchingData ? "animate-pulse" : ""}`} />
+            <Mrgn className={`w-[24px] ${isFetchingData ? "animate-pulse" : ""}`} />
           </Mobile>
           <div>{children}</div>
         </div>
         <Mobile>
           <div className="flex justify-center items-center gap-3">
             {!connected && (
-                <div
-                  className="flex justify-center items-center cursor-pointer bg-transparent rounded-2xl border-[1px] border-white text-base px-2 font-[300]"
-                  onClick={() => {
-                    setIsWalletDrawerOpen(true);
-                  }}
-                >
-                  connect
-                </div>
+              <div
+                className="flex justify-center gap-1.5 items-center cursor-pointer bg-white rounded-md border-[1px] border-white transition hover:bg-transparent text-black text-base px-3 py-1"
+                onClick={() => {
+                  setIsWalletDrawerOpen(true);
+                }}
+              >
+                <WalletOutlined className="text-lg" /> Connect
+              </div>
             )}
           </div>
         </Mobile>

apps/marginfi-v2-ui/src/components/common/icons/Discord.tsx

@@ -0,0 +1,9 @@
+import React, { FC, SVGProps } from "react";
+
+const Discord: FC<SVGProps<SVGSVGElement>> = ({ color = "#868E95", ...props }) => (
+  <svg fill={color} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36" {...props}>
+    <path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z" />
+  </svg>
+);
+
+export { Discord };

apps/marginfi-v2-ui/src/components/desktop/Footer/Footer.tsx

@@ -3,12 +3,8 @@ import { useUserProfileStore } from "~/store";
 import Switch from "@mui/material/Switch";
 import { useRouter } from "next/router";
 import SvgIcon from "@mui/material/SvgIcon";
-import TwitterIcon from "@mui/icons-material/Twitter";
-import TelegramIcon from "@mui/icons-material/Telegram";
-import AutoStoriesOutlinedIcon from "@mui/icons-material/AutoStoriesOutlined";
-import InsightsIcon from "@mui/icons-material/Insights";
 import Link from "next/link";
-import { GitHub, QuestionMark } from "@mui/icons-material";
+import { EXTERNAL_QUICK_LINKS } from "~/config/navigationLinks";
 
 type FooterConfig = { hotkeys: boolean; zoom: boolean; unit: boolean; links: boolean };
 
@@ -147,64 +143,11 @@ const LendUnitControl: FC = () => {
 
 const QuickLinks: FC = () => (
   <div className="flex gap-4 items-center justify-center pt-1 border-r border-[#4E5257] pr-4">
-    <Link
-      href="https://discord.gg/mrgn"
-      target="_blank"
-      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-[#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>
-    <Link
-      href="https://twitter.com/marginfi"
-      target="_blank"
-      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-[#DCE85D] 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 hover:fill-[#DCE85D] 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 hover:fill-[#DCE85D] 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 hover:fill-[#DCE85D] 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 hover:fill-[#DCE85D] 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 hover:fill-[#DCE85D] text-[#868E95]" />
-    </Link>
+    {EXTERNAL_QUICK_LINKS.map((link, i) => (
+      <Link key={i} href={link.href} target="_blank" rel="noopener noreferrer" className="w-[15px] flex justify-center items-center">
+        <link.Icon className="w-full h-full pb-1 text-xl cursor-pointer hover:fill-[#DCE85D] text-[#868E95]" />
+      </Link>
+    ))}
   </div>
 );
 

apps/marginfi-v2-ui/src/components/desktop/Points/PointsOverview.tsx

@@ -12,10 +12,10 @@ interface PointsOverviewProps {
 export const PointsOverview: FC<PointsOverviewProps> = ({ userPointsData }) => {
   return (
     <>
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 max-w-[800px] mx-auto w-full">
-        <Card className="bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
+      <div className="grid grid-cols-2 gap-5 max-w-[800px] mx-auto w-full">
+        <Card className="bg-[#131619] h-24 rounded-xl" elevation={0}>
           <CardContent>
-            <Typography color="#868E95" className="font-aeonik font-[300] text-base flex gap-1" gutterBottom>
+            <Typography color="#868E95" className="font-aeonik font-[300] text-sm sm:text-base flex gap-1" gutterBottom>
               Total Points
               <div className="self-center">
                 <MrgnTooltip
@@ -34,33 +34,37 @@ export const PointsOverview: FC<PointsOverviewProps> = ({ userPointsData }) => {
               </div>
             </Typography>
             <Typography color="#fff" className="font-aeonik font-[500] text-3xl" component="div">
-              {userPointsData.totalPoints > 0 ? (
+              {userPointsData ? (
                 numeralFormatter(userPointsData.totalPoints)
               ) : (
                 <Skeleton variant="rectangular" animation="wave" className="w-1/3 rounded-md top-[4px]" />
               )}
             </Typography>
           </CardContent>
         </Card>
-        <Card className="bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
+        <Card className="bg-[#131619] h-24 rounded-xl" elevation={0}>
           <CardContent>
-            <Typography color="#868E95" className="font-aeonik font-[300] text-base" gutterBottom>
+            <Typography color="#868E95" className="font-aeonik font-[300] text-sm sm:text-base" gutterBottom>
               Global Rank {/* TODO: fix that with dedicated query */}
             </Typography>
             <Typography color="#fff" className="font-aeonik font-[500] text-3xl" component="div">
-              {userPointsData.userRank && userPointsData.userRank > 0 ? (
-                `#${groupedNumberFormatterDyn.format(userPointsData.userRank)}`
+              {userPointsData ? (
+                userPointsData.userRank ? (
+                  `#${groupedNumberFormatterDyn.format(userPointsData.userRank)}`
+                ) : (
+                  "-"
+                )
               ) : (
                 <Skeleton variant="rectangular" animation="wave" className="w-1/3 rounded-md top-[4px]" />
               )}
             </Typography>
           </CardContent>
         </Card>
       </div>
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-5 max-w-[800px] mx-auto w-full">
-        <Card className="bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
+      <div className="grid grid-cols-2 sm:grid-cols-3 gap-5 max-w-[800px] mx-auto w-full">
+        <Card className="bg-[#131619]  h-24 rounded-xl" elevation={0}>
           <CardContent>
-            <Typography color="#868E95" className="font-aeonik font-[300] text-base flex gap-1" gutterBottom>
+            <Typography color="#868E95" className="font-aeonik font-[300] text-sm sm:text-base flex gap-1" gutterBottom>
               Lending Points
               <div className="self-center">
                 <MrgnTooltip
@@ -79,17 +83,17 @@ export const PointsOverview: FC<PointsOverviewProps> = ({ userPointsData }) => {
               </div>
             </Typography>
             <Typography color="#fff" component="div" className="font-aeonik font-[500] text-2xl">
-              {userPointsData.depositPoints > 0 ? (
+              {userPointsData ? (
                 numeralFormatter(userPointsData.depositPoints)
               ) : (
                 <Skeleton variant="rectangular" animation="wave" className="w-1/3 rounded-md top-[4px]" />
               )}
             </Typography>
           </CardContent>
         </Card>
-        <Card className="bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
+        <Card className="bg-[#131619] h-24 rounded-xl" elevation={0}>
           <CardContent>
-            <Typography color="#868E95" className="font-aeonik font-[300] text-base flex gap-1" gutterBottom>
+            <Typography color="#868E95" className="font-aeonik font-[300] text-sm sm:text-base flex gap-1" gutterBottom>
               Borrowing Points
               <div className="self-center">
                 <MrgnTooltip
@@ -108,17 +112,17 @@ export const PointsOverview: FC<PointsOverviewProps> = ({ userPointsData }) => {
               </div>
             </Typography>
             <Typography color="#fff" className="font-aeonik font-[500] text-2xl" component="div">
-              {userPointsData.borrowPoints > 0 ? (
+              {userPointsData ? (
                 numeralFormatter(userPointsData.borrowPoints)
               ) : (
                 <Skeleton variant="rectangular" animation="wave" className="w-1/3 rounded-md top-[4px]" />
               )}
             </Typography>
           </CardContent>
         </Card>
-        <Card className="bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
+        <Card className="bg-[#131619] h-24 rounded-xl" elevation={0}>
           <CardContent>
-            <Typography color="#868E95" className="font-aeonik font-[300] text-base flex gap-1" gutterBottom>
+            <Typography color="#868E95" className="font-aeonik font-[300] text-sm sm:text-base flex gap-1" gutterBottom>
               Referral Points
               <div className="self-center">
                 <MrgnTooltip
@@ -137,7 +141,11 @@ export const PointsOverview: FC<PointsOverviewProps> = ({ userPointsData }) => {
               </div>
             </Typography>
             <Typography color="#fff" className="font-aeonik font-[500] text-2xl" component="div">
-              {userPointsData.referralPoints > 0 ? numeralFormatter(userPointsData.referralPoints) : "-"}
+              {userPointsData ? (
+                numeralFormatter(userPointsData.referralPoints)
+              ) : (
+                <Skeleton variant="rectangular" animation="wave" className="w-1/3 rounded-md top-[4px]" />
+              )}
             </Typography>
           </CardContent>
         </Card>