Merge pull request #233 from k0beLeenders/stake-mobile-temp

feat(mfi-v2-ui): LST staking mobile design
mrgnlabs · Sep 12, 2023 · c2edf8d · c2edf8d
2 parents d125ee9 + d45b6dc
commit c2edf8d
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 44 deletions.
diff --git a/apps/marginfi-v2-ui/src/components/Navbar/Navbar.tsx b/apps/marginfi-v2-ui/src/components/Navbar/Navbar.tsx
@@ -224,13 +224,10 @@ const Navbar: FC = () => {
               }}
               badgeContent={"e"}
               invisible={!showBadges}
-              className="hidden md:block"
             >
               <Link
                 href={"/stake"}
-                className={`${
-                  router.pathname === "/stake" ? "hover-underline-static" : "hover-underline-animation"
-                } hidden md:block`}
+                className={router.pathname === "/stake" ? "hover-underline-static" : "hover-underline-animation"}
               >
                 stake
               </Link>

diff --git a/apps/marginfi-v2-ui/src/components/Staking/StakingCard/StakingCard.tsx b/apps/marginfi-v2-ui/src/components/Staking/StakingCard/StakingCard.tsx
@@ -10,7 +10,7 @@ interface StakingCardProps {}
 export const StakingCard: FC<StakingCardProps> = ({}) => {
   return (
     <>
-      <div className="relative flex flex-col gap-2 rounded-xl bg-[#1C2023] px-8 py-6 w-[480px]">
+      <div className="relative flex flex-col gap-2 rounded-xl bg-[#1C2023] px-8 py-6 max-w-[480px] w-full">
         <div className="flex flex-row justify-between w-full">
           <Typography className="font-aeonik font-[400] text-lg">Deposit</Typography>
           <div className="flex flex-row gap-2 my-auto">

diff --git a/apps/marginfi-v2-ui/src/components/Staking/StakingStats.tsx b/apps/marginfi-v2-ui/src/components/Staking/StakingStats.tsx
@@ -11,49 +11,47 @@ interface StakingStatsProps {
 export const StakingStats: FC<StakingStatsProps> = ({ tvl, projectedApy }) => {
   return (
     <div className="h-full rounded-xl font-[500] p-[10px]">
-      <div className="flex flex-row justify-center gap-8 w-full min-w-1/2 mt-[20px]">
-        <div className="h-full">
-          <div>
-            <Typography
-              color="#868E95"
-              className="font-aeonik font-[300] text-xs flex gap-1"
-              gutterBottom
-              component="div"
-            >
-              TVL
-            </Typography>
-            <Typography color="#fff" className="font-aeonik font-[500] text-lg md:text-xl" component="div">
-              {tvl ? (
-                `$${numeralFormatter(tvl)}`
-              ) : (
-                <Skeleton variant="rectangular" animation="wave" className="w-1/3 rounded-md top-[4px]" />
-              )}
-            </Typography>
-          </div>
+      <div className="flex flex-col sm:flex-row justify-center gap-0 sm:gap-8 w-full min-w-1/2 mt-[20px] bg-[#171C1F] sm:bg-transparent rounded-xl">
+        <div className="flex flex-row sm:flex-col justify-between p-3 sm:p-0 gap-1">
+          <Typography
+            color="#868E95"
+            className="font-aeonik font-[400] text-base flex gap-1 my-auto"
+            gutterBottom
+            component="div"
+          >
+            TVL
+          </Typography>
+          <Typography color="#fff" className="font-aeonik font-[500] text-xl" component="div">
+            {tvl ? (
+              `$${numeralFormatter(tvl)}`
+            ) : (
+              <Skeleton variant="rectangular" animation="wave" className="w-1/3 rounded-md top-[4px]" />
+            )}
+          </Typography>
         </div>
+
         <DividerLine />
-        <div className="h-full">
-          <div>
-            <Typography
-              color="#868E95"
-              className="font-aeonik font-[300] text-xs flex gap-1"
-              gutterBottom
-              component="div"
-            >
-              Projected APY
-            </Typography>
-            <Typography color="#fff" className="font-aeonik font-[500] text-lg md:text-xl" component="div">
-              {projectedApy ? (
-                percentFormatterDyn.format(projectedApy)
-              ) : (
-                <Skeleton variant="rectangular" animation="wave" className="w-1/3 rounded-md top-[4px]" />
-              )}
-            </Typography>
-          </div>
+
+        <div className="flex flex-row sm:flex-col justify-between p-3 sm:p-0 gap-1">
+          <Typography
+            color="#868E95"
+            className="font-aeonik font-[400] text-base flex gap-1 my-auto"
+            gutterBottom
+            component="div"
+          >
+            Projected APY
+          </Typography>
+          <Typography color="#fff" className="font-aeonik font-[500] text-xl" component="div">
+            {projectedApy ? (
+              percentFormatterDyn.format(projectedApy)
+            ) : (
+              <Skeleton variant="rectangular" animation="wave" className="w-1/3 rounded-md top-[4px]" />
+            )}
+          </Typography>
         </div>
       </div>
     </div>
   );
 };
 
-const DividerLine = () => <div style={{ width: "1px", borderLeft: "1px solid #555" }} />;
+const DividerLine = () => <div className="hidden sm:block" style={{ width: "1px", borderLeft: "1px solid #555" }} />;
diff --git a/apps/marginfi-v2-ui/src/pages/stake.tsx b/apps/marginfi-v2-ui/src/pages/stake.tsx
@@ -7,7 +7,7 @@ const StakePage = () => {
   return (
     <>
       <PageHeader text={"$LST"} />
-      <div className="flex flex-col h-full justify-center content-center pt-[64px] sm:pt-[16px] gap-4">
+      <div className="flex flex-col h-full justify-center content-center pt-[64px] sm:pt-[16px] gap-4 mx-4">
         <StakingStats tvl={1250} projectedApy={0.5215} />
         <StakingCard />
       </div>