Merge pull request #55 from Anchor-Protocol/fix/mobile-layout

Feat: Mobile Layout
Anchor-Protocol · Mar 18, 2021 · b4a4496 · b4a4496 · vercel · Mar 18, 2021
2 parents f0075de + 5026e5c
commit b4a4496
Show file tree

Hide file tree

Showing 12 changed files with 464 additions and 111 deletions.
diff --git a/app/src/pages/borrow/components/Overview.tsx b/app/src/pages/borrow/components/Overview.tsx
@@ -1,22 +1,24 @@
 import {
   APY,
+  BorrowAPR,
   BorrowValue,
   CollateralValue,
-  BorrowAPR,
 } from '@anchor-protocol/icons';
-import { IconSpan } from '@terra-dev/neumorphism-ui/components/IconSpan';
-import { InfoTooltip } from '@terra-dev/neumorphism-ui/components/InfoTooltip';
-import { Section } from '@terra-dev/neumorphism-ui/components/Section';
-import { Tooltip } from '@terra-dev/neumorphism-ui/components/Tooltip';
 import {
   AnimateNumber,
   demicrofy,
   formatRate,
   formatUSTWithPostfixUnits,
 } from '@anchor-protocol/notation';
 import { Rate, uUST } from '@anchor-protocol/types';
-import big, { Big, BigSource } from 'big.js';
+import { IconCircle } from '@terra-dev/neumorphism-ui/components/IconCircle';
+import { IconSpan } from '@terra-dev/neumorphism-ui/components/IconSpan';
+import { InfoTooltip } from '@terra-dev/neumorphism-ui/components/InfoTooltip';
+import { Section } from '@terra-dev/neumorphism-ui/components/Section';
+import { TooltipIconCircle } from '@terra-dev/neumorphism-ui/components/TooltipIconCircle';
 import { useConstants } from 'base/contexts/contants';
+import big, { Big, BigSource } from 'big.js';
+import { screen } from 'env';
 import { BorrowLimitGraph } from 'pages/borrow/components/BorrowLimitGraph';
 import { useMarket } from 'pages/borrow/context/market';
 import { apr as _apr } from 'pages/borrow/logics/apr';
@@ -77,9 +79,9 @@ function OverviewBase({ className }: OverviewProps) {
           </div>
           <div>
             <CircleOnly>
-              <Circle>
+              <IconCircle>
                 <CollateralValue />
-              </Circle>
+              </IconCircle>
             </CircleOnly>
           </div>
         </div>
@@ -109,9 +111,9 @@ function OverviewBase({ className }: OverviewProps) {
                   </InfoTooltip>
                 </IconSpan>
               </p>
-              <Circle>
+              <IconCircle>
                 <BorrowValue />
-              </Circle>
+              </IconCircle>
             </LabelAndCircle>
           </div>
         </div>
@@ -138,30 +140,28 @@ function OverviewBase({ className }: OverviewProps) {
             %
           </div>
           <div>
-            <Circles style={{ marginLeft: -20, marginRight: -30 }}>
+            <Circles>
               <div>
-                <Tooltip
+                <TooltipIconCircle
+                  style={{ cursor: 'help' }}
                   title="The annualized rate of current interest on loans in USD"
                   placement="top"
                 >
-                  <Circle style={{ cursor: 'help' }}>
-                    <BorrowAPR />
-                  </Circle>
-                </Tooltip>
+                  <BorrowAPR />
+                </TooltipIconCircle>
                 <p>
                   Borrow APR
                   <b>{formatRate(apr)}%</b>
                 </p>
               </div>
               <div>
-                <Tooltip
+                <TooltipIconCircle
+                  style={{ cursor: 'help' }}
                   title="Annual percentage yield determined by ANC rewards given to borrowers where the principal is taken to be the loan amount"
                   placement="top"
                 >
-                  <Circle style={{ cursor: 'help' }}>
-                    <APY />
-                  </Circle>
-                </Tooltip>
+                  <APY />
+                </TooltipIconCircle>
                 <p>
                   Distribution APR
                   <b>
@@ -189,25 +189,16 @@ function OverviewBase({ className }: OverviewProps) {
   );
 }
 
-export const Circle = styled.div`
-  border-radius: 50%;
-  background-color: ${({ theme }) => theme.backgroundColor};
-  display: inline-grid;
-  min-width: 56px;
-  max-width: 56px;
-  min-height: 56px;
-  max-height: 56px;
-  place-content: center;
-  color: ${({ theme }) => theme.dimTextColor};
-`;
-
 export const CircleOnly = styled.div`
   text-align: right;
 `;
 
 export const Circles = styled.div`
   display: flex;
 
+  margin-left: -20px;
+  margin-right: -30px;
+
   > div {
     flex: 1;
 
@@ -229,6 +220,19 @@ export const Circles = styled.div`
       margin-right: 10px;
     }
   }
+
+  @media (max-width: 1400px) {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  @media (max-width: ${screen.mobile.max}px) {
+    flex-direction: column;
+
+    > :last-child {
+      margin-top: 10px;
+    }
+  }
 `;
 
 export const LabelAndCircle = styled.div`
@@ -246,7 +250,7 @@ export const Overview = styled(OverviewBase)`
     box-shadow: 0 8px 14px -8px rgba(0, 0, 0, 0.07);
     border-radius: 22px;
     padding: 35px 40px;
-    height: 238px;
+    height: auto;
 
     display: grid;
     grid-template-rows: 20px 100px 1fr;

diff --git a/app/src/pages/earn/components/InterestSection.tsx b/app/src/pages/earn/components/InterestSection.tsx
@@ -1,21 +1,20 @@
-import {
-  APYChart,
-  APYChartItem,
-} from '@anchor-protocol/webapp-charts/APYChart';
 import {
   AnimateNumber,
   demicrofy,
   formatRate,
   formatUST,
 } from '@anchor-protocol/notation';
 import { Rate, UST } from '@anchor-protocol/types';
-import { useConstants } from 'base/contexts/contants';
+import {
+  APYChart,
+  APYChartItem,
+} from '@anchor-protocol/webapp-charts/APYChart';
 import { IconSpan } from '@terra-dev/neumorphism-ui/components/IconSpan';
 import { InfoTooltip } from '@terra-dev/neumorphism-ui/components/InfoTooltip';
-import { Label } from '@terra-dev/neumorphism-ui/components/Label';
 import { Section } from '@terra-dev/neumorphism-ui/components/Section';
 import { Tab } from '@terra-dev/neumorphism-ui/components/Tab';
-import { Tooltip } from '@terra-dev/neumorphism-ui/components/Tooltip';
+import { TooltipLabel } from '@terra-dev/neumorphism-ui/components/TooltipLabel';
+import { useConstants } from 'base/contexts/contants';
 import big from 'big.js';
 import { currentAPY } from 'pages/earn/logics/currentAPY';
 import { useAPYHistory } from 'pages/earn/queries/apyHistory';
@@ -119,9 +118,13 @@ export function InterestSection({ className }: InterestSectionProps) {
       </h2>
 
       <div className="apy">
-        <Tooltip title="Annual Percentage Yield" placement="top">
-          <Label className="name">APY</Label>
-        </Tooltip>
+        <TooltipLabel
+          className="name"
+          title="Annual Percentage Yield"
+          placement="top"
+        >
+          APY
+        </TooltipLabel>
         <div className="value">
           <AnimateNumber format={formatRate}>{apy}</AnimateNumber>%
         </div>

diff --git a/app/src/pages/earn/queries/apyHistory.ts b/app/src/pages/earn/queries/apyHistory.ts
@@ -58,7 +58,7 @@ export function useAPYHistory(): MappedQueryResult<
   const variables = useMemo(() => {
     return mapVariables({
       //timestampMax: (Date.now() - 1000 * 60 * 60 * 24) as JSDateTime,
-      timestampMax: (Date.now() - 1000 * 60 * 30) as JSDateTime,
+      timestampMax: (Date.now() - 1000 * 60 * 60) as JSDateTime,
     });
   }, []);
 

diff --git a/app/src/pages/gov/components/AncUstLpStakeOverview.tsx b/app/src/pages/gov/components/AncUstLpStakeOverview.tsx
@@ -1,15 +1,14 @@
-import { Label } from '@terra-dev/neumorphism-ui/components/Label';
-import { Tooltip } from '@terra-dev/neumorphism-ui/components/Tooltip';
 import {
   demicrofy,
   formatANCWithPostfixUnits,
   formatLP,
 } from '@anchor-protocol/notation';
+import { uANC, uUST } from '@anchor-protocol/types';
+import { TooltipLabel } from '@terra-dev/neumorphism-ui/components/TooltipLabel';
 import {
   rulerLightColor,
   rulerShadowColor,
 } from '@terra-dev/styled-neumorphism';
-import { uANC, uUST } from '@anchor-protocol/types';
 import big, { Big } from 'big.js';
 import { useANCPrice } from 'pages/gov/queries/ancPrice';
 import { useClaimableAncUstLp } from 'pages/gov/queries/claimableAncUstLp';
@@ -64,29 +63,29 @@ function AncUstLpStakeOverviewBase({ className }: AncUstLpStakeOverviewProps) {
   return (
     <ul className={className}>
       <li>
-        <Tooltip title="Stakable ANC-UST LP tokens" placement="top">
-          <Label>Stakable</Label>
-        </Tooltip>
+        <TooltipLabel title="Stakable ANC-UST LP tokens" placement="top">
+          Stakable
+        </TooltipLabel>
         <p>
           {ancUstLp?.stakable ? formatLP(demicrofy(ancUstLp.stakable)) : 0} LP
         </p>
       </li>
       <li>
-        <Tooltip
+        <TooltipLabel
           title="Quantity of staked ANC-UST LP tokens from the ANC-UST LP staking pool"
           placement="top"
         >
-          <Label>Staked</Label>
-        </Tooltip>
+          Staked
+        </TooltipLabel>
         <p>{ancUstLp?.staked ? formatLP(demicrofy(ancUstLp.staked)) : 0} LP</p>
       </li>
       <li>
-        <Tooltip
+        <TooltipLabel
           title="Quantity of claimable rewards from ANC-UST LP staking pool"
           placement="top"
         >
-          <Label>Reward</Label>
-        </Tooltip>
+          Reward
+        </TooltipLabel>
         <p>
           {ancUstLp?.reward
             ? formatANCWithPostfixUnits(demicrofy(ancUstLp.reward))
@@ -145,4 +144,31 @@ export const AncUstLpStakeOverview = styled(AncUstLpStakeOverviewBase)`
   }
 
   margin-bottom: 56px;
+
+  @media (max-width: 500px) {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(3, 90px);
+
+    li {
+      &:not(:last-child) {
+        border-right: 0;
+        border-bottom: 1px solid
+          ${({ theme }) =>
+            rulerShadowColor({
+              intensity: theme.intensity,
+              color: theme.backgroundColor,
+            })};
+      }
+
+      &:not(:first-child) {
+        border-left: 0;
+        border-top: 1px solid
+          ${({ theme }) =>
+            rulerLightColor({
+              intensity: theme.intensity,
+              color: theme.backgroundColor,
+            })};
+      }
+    }
+  }
 `;
diff --git a/app/src/pages/gov/components/Overview/index.tsx b/app/src/pages/gov/components/Overview/index.tsx
@@ -10,9 +10,9 @@ import { ChevronRight } from '@material-ui/icons';
 import { BorderButton } from '@terra-dev/neumorphism-ui/components/BorderButton';
 import { IconSpan } from '@terra-dev/neumorphism-ui/components/IconSpan';
 import { InfoTooltip } from '@terra-dev/neumorphism-ui/components/InfoTooltip';
-import { Label } from '@terra-dev/neumorphism-ui/components/Label';
 import { Section } from '@terra-dev/neumorphism-ui/components/Section';
 import { Tooltip } from '@terra-dev/neumorphism-ui/components/Tooltip';
+import { TooltipLabel } from '@terra-dev/neumorphism-ui/components/TooltipLabel';
 import big, { Big } from 'big.js';
 import { Circles } from 'components/Circles';
 import { screen } from 'env';
@@ -176,12 +176,12 @@ function OverviewBase({ className }: OverviewProps) {
         </Circles>
         <h2>Anchor (ANC)</h2>
         <div className="staking-apy">
-          <Tooltip
+          <TooltipLabel
             title="Annualized ANC staking return based on the ANC distribution and staking ratio"
             placement="top"
           >
-            <Label>APR</Label>
-          </Tooltip>
+            APR
+          </TooltipLabel>
           <span style={{ display: 'inline-block', minWidth: 80 }}>
             <AnimateNumber format={formatRate}>
               {govRewards && govRewards.length > 0
@@ -228,9 +228,9 @@ function OverviewBase({ className }: OverviewProps) {
         </h2>
         <div className="lp-labels">
           <div>
-            <Tooltip title={ancUstLpAprTooltip} placement="top">
-              <Label>APR</Label>
-            </Tooltip>
+            <TooltipLabel title={ancUstLpAprTooltip} placement="top">
+              APR
+            </TooltipLabel>
             <p>
               <AnimateNumber format={formatRate}>
                 {lpRewards && lpRewards.length > 0
@@ -241,12 +241,12 @@ function OverviewBase({ className }: OverviewProps) {
             </p>
           </div>
           <div>
-            <Tooltip
+            <TooltipLabel
               title="Total quantity of ANC-UST LP tokens staked"
               placement="top"
             >
-              <Label>Total Staked</Label>
-            </Tooltip>
+              Total Staked
+            </TooltipLabel>
             <p>
               <AnimateNumber format={formatUTokenDecimal2}>
                 {lpStakingState?.total_bond_amount

diff --git a/app/src/pages/gov/rewards.anc-governance.tsx b/app/src/pages/gov/rewards.anc-governance.tsx
@@ -188,6 +188,10 @@ export const RewardsAncGovernance = styled(RewardsAncUstLpBase)`
   // under tablet
   @media (max-width: ${screen.tablet.max}px) {
     header {
+      h1 {
+        font-size: 32px;
+      }
+
       margin-bottom: 20px;
     }
   }

diff --git a/app/src/pages/gov/rewards.anc-ust-lp.tsx b/app/src/pages/gov/rewards.anc-ust-lp.tsx
@@ -269,6 +269,10 @@ export const RewardsAncUstLp = styled(RewardsAncUstLpBase)`
   // under tablet
   @media (max-width: ${screen.tablet.max}px) {
     header {
+      h1 {
+        font-size: 32px;
+      }
+
       margin-bottom: 20px;
 
       grid-template-columns: 1fr;