styling

SeaSaltyFunk · Aug 6, 2021 · 533368a · 533368a
1 parent 6c19868
commit 533368a
Show file tree

Hide file tree

Showing 41 changed files with 536 additions and 236 deletions.
diff --git a/components/ffAssetOverview/ffAssetOverview.module.css b/components/ffAssetOverview/ffAssetOverview.module.css
@@ -43,7 +43,7 @@
 
 .balanceIcon {
   color: #fff;
-  border: 1px solid #fff;
+  border: 1px solid rgba(255,255,255,0.2);
   border-radius: 50%;
   padding: 12px;
   font-size: 60px !important;

diff --git a/components/ffAssets/ffAssets.module.css b/components/ffAssets/ffAssets.module.css
@@ -10,13 +10,13 @@
   width: calc(100% - 48px);
   max-width: 1356px;
   display: flex;
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  border: 1px solid rgba(104, 108, 122, 0.25);
   position: absolute;
-  top: 240px;
+  top: 252px;
   left: 24px;
   right: 24px;
   margin: auto;
-  padding: 24px 0px;
+  padding: 0 0 20px 0px;
 }
 
 .title {
@@ -25,6 +25,18 @@
 }
 
 .tableContainer {
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  border: 1px solid rgba(104, 108, 122, 0.25);
   margin: 0 auto;
 }
+
+@media screen and (max-width: 1200px) {
+  .container {
+    margin-top: -60px;
+  }
+}
+
+@media screen and (max-width: 960px) {
+  .container {
+    margin-top: 117px;
+  }
+}
diff --git a/components/ffAssets/ffAssetsTable.js b/components/ffAssets/ffAssetsTable.js
@@ -144,7 +144,7 @@ const useStyles = makeStyles((theme) => ({
     padding: '24px',
     width: '100%',
     flexWrap: 'wrap',
-    borderBottom: '1px solid rgba(128, 128, 128, 0.32)',
+    borderBottom: '1px solid rgba(104, 108, 122, 0.25)',
     background: 'radial-gradient(circle, rgba(63,94,251,0.7) 0%, rgba(47,128,237,0.7) 48%) rgba(63,94,251,0.7) 100%',
   },
   assetInfoError: {
@@ -155,7 +155,7 @@ const useStyles = makeStyles((theme) => ({
     padding: '24px',
     width: '100%',
     flexWrap: 'wrap',
-    borderBottom: '1px solid rgba(128, 128, 128, 0.32)',
+    borderBottom: '1px rgba(104, 108, 122, 0.25)',
     background: '#dc3545',
   },
   infoField: {

diff --git a/components/ffClaim/ffClaim.js b/components/ffClaim/ffClaim.js
@@ -37,6 +37,7 @@ export default function ffClaim() {
       setLoading(true)
       stores.dispatcher.dispatch({ type: FIXED_FOREX_CLAIM_VESTING_REWARD, content: {}})
     // }
+
   }
 
   return (

diff --git a/components/ffClaim/ffClaim.module.css b/components/ffClaim/ffClaim.module.css
@@ -11,7 +11,7 @@
 }
 
 .lpOptionsContainer {
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  border: 1px solid rgba(104, 108, 122, 0.25);
   margin: 0 auto;
   display: flex;
   align-items: center;
@@ -63,8 +63,6 @@
   top: 12px;
 }
 
-
-
 .lpOption:nth-child(1):hover > div {
   color: #fff !important;
 }
@@ -73,3 +71,9 @@
   font-size: 60px !important;
   font-weight: bold !important;
 }
+
+@media screen and (max-width: 1200px) {
+  .container {
+    margin-bottom: 48px;
+  }
+}
diff --git a/components/ffCurveLiquidity/ffCurveLiquidity.js b/components/ffCurveLiquidity/ffCurveLiquidity.js
@@ -447,6 +447,7 @@ export default function ffCurveLiquidity({ asset }) {
             <Button
               variant='contained'
               size='large'
+              className={classes.buttonOverride}
               color='primary'
               disabled={ depositLoading || !coin0DepositApprovalNotRequired || !coin1DepositApprovalNotRequired }
               onClick={ onDeposit }
@@ -463,6 +464,7 @@ export default function ffCurveLiquidity({ asset }) {
               variant='contained'
               size='large'
               color='primary'
+              className={classes.buttonOverride}
               disabled={ depositLoading }
               onClick={ onWithdraw }
               >

diff --git a/components/ffCurveLiquidity/ffCurveLiquidity.module.css b/components/ffCurveLiquidity/ffCurveLiquidity.module.css
@@ -2,7 +2,7 @@
   width: calc(100% - 48px);
   max-width: 1356px;
   display: flex;
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  border: 1px solid rgba(104, 108, 122, 0.25);
   position: absolute;
   top: 240px;
   left: 0;
@@ -13,7 +13,7 @@
 
 .topLeftButton {
   border-top-left-radius: 10px !important;
-  border-bottom: 1px solid rgba(128, 128, 128, 0.25) !important;
+  border-bottom: 1px solid rgba(104, 108, 122, 0.25) !important;
 }
 
 .bottomLeftButton {
@@ -117,7 +117,7 @@
   display: grid;
   grid-gap: 12px;
   grid-template-columns: 1fr;
-  border-left: 1px solid rgba(128, 128, 128, 0.8);
+  border-left: 1px solid rgba(104, 108, 122, 0.25);
   padding: 0px 24px;
   width: 240px;
 }
@@ -154,7 +154,7 @@
 .button {
   border-radius: 0px !important;
   flex: 1;
-  border-right: 1px solid rgba(128, 128, 128, 0.25) !important;
+  border-right: 1px solid rgba(104, 108, 122, 0.25) !important;
   transition: none !important;
   opacity: 0.5;
 }
@@ -175,11 +175,18 @@
   display: grid;
   grid-gap: 12px;
   grid-template-columns: 1fr;
-  border-left: 1px solid rgba(128, 128, 128, 0.8);
+  border-left: 1px solid rgba(104, 108, 122, 0.25);
   padding: 0px 24px;
   width: 240px;
 }
 
 .extraTF {
   padding-bottom: 12px;
 }
+
+.buttonOverride {
+  background: #114DF0 !important;
+  color: #FFF !important;
+  font-weight: 700 !important;
+  box-shadow: none !important;
+}
diff --git a/components/ffGauges/ffGauges.js b/components/ffGauges/ffGauges.js
@@ -69,7 +69,7 @@ export default function ffGauges() {
       </div>
       <div className={ classes.actionButtons }>
         <Button
-          className={ classes.actionButton }
+          className={ classes.buttonOverride }
           variant='contained'
           size='large'
           color='primary'

diff --git a/components/ffGauges/ffGauges.module.css b/components/ffGauges/ffGauges.module.css
@@ -2,10 +2,10 @@
   width: calc(100% - 48px);
   max-width: 1356px;
   display: flex;
-  padding: 24px 0px;
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  padding: 0 0 20px 0px;
+  border: 1px solid rgba(104, 108, 122, 0.25);
   position: absolute;
-  top: 240px;
+  top: 252px;
   left: 0;
   right: 0;
   margin: auto;
@@ -49,3 +49,11 @@
   font-size: 20px !important;
   color: #da0052 !important;
 }
+
+.buttonOverride {
+  background: #114DF0 !important;
+  color: #FFF !important;
+  font-weight: 700 !important;
+  box-shadow: none !important;
+  width: 216px;
+}
diff --git a/components/ffLPOptions/ffLPOptions.js b/components/ffLPOptions/ffLPOptions.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Paper, Typography, Button, TextField, InputAdornment, CircularProgress } from '@material-ui/core';
+import { Paper, Grid, Typography, Button, TextField, InputAdornment, CircularProgress } from '@material-ui/core';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import Skeleton from '@material-ui/lab/Skeleton';
 import { useRouter } from "next/router";
@@ -27,42 +27,51 @@ export default function ffLPOptions({ asset }) {
     <div className={ classes.container}>
       <Typography variant="h5" className={ classes.title}>LP Opportunities</Typography>
       <Paper elevation={0} className={ classes.lpOptionsContainer }>
-        <div className={ classes.lpOption } onClick={ () => { localNav('curve') } }>
-          <div className={ classes.lpOptionTitle }>
-            <img className={ classes.lpOptionIcon } src='/images/Curve.png' alt='Curve Logo' width={ 60 } height={ 60 } />
-            <div>
-              <Typography className={ classes.lpOptionName }>Curve.fi</Typography>
-              <Typography className={ classes.lpOptionDescription }>Pool LP</Typography>
+
+        <Grid container spacing={0}>
+          <Grid item lg={4} xs={12}>
+            <div className={ classes.lpOption1 } onClick={ () => { localNav('curve') } }>
+              <div className={ classes.lpOptionTitle }>
+                <img className={ classes.lpOptionIcon } src='/images/Curve.png' alt='Curve Logo' width={ 60 } height={ 60 } />
+                <div>
+                  <Typography className={ classes.lpOptionName }>Curve.fi</Typography>
+                  <Typography className={ classes.lpOptionDescription }>Pool LP</Typography>
+                </div>
+              </div>
+              {
+                <div className={ classes.activeIcon }></div>
+              }
             </div>
-          </div>
-          {
-            <div className={ classes.activeIcon }></div>
-          }
-        </div>
-        <div className={ classes.lpOption } onClick={ () => { navigate(`https://app.sushi.com/add/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/${asset ? asset.address : ''}`) } }>
-          <div className={ classes.lpOptionTitle }>
-            <img className={ classes.lpOptionIcon } src='/images/Sushi.png' alt='Sushi Logo' width={ 60 } height={ 60 } />
-            <div>
-              <Typography className={ classes.lpOptionName }>Sushi</Typography>
-              <Typography className={ classes.lpOptionDescription }>Pair LP</Typography>
+          </Grid>
+          <Grid item lg={4} xs={12}>
+            <div className={ classes.lpOption2 } onClick={ () => { navigate(`https://app.sushi.com/add/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/${asset ? asset.address : ''}`) } }>
+              <div className={ classes.lpOptionTitle }>
+                <img className={ classes.lpOptionIcon } src='/images/Sushi.png' alt='Sushi Logo' width={ 60 } height={ 60 } />
+                <div>
+                  <Typography className={ classes.lpOptionName }>Sushi</Typography>
+                  <Typography className={ classes.lpOptionDescription }>Pair LP</Typography>
+                </div>
+              </div>
+              {
+                <div className={ classes.activeIcon }></div>
+              }
             </div>
-          </div>
-          {
-            <div className={ classes.activeIcon }></div>
-          }
-        </div>
-        <div className={ classes.lpOption } onClick={ () => { navigate('https://yearn.fi/lend') } }>
-          <div className={ classes.lpOptionTitle }>
-            <img className={ classes.lpOptionIcon } src='/images/yearn-fi.svg' alt='Yearn.fi logo' width={ 60 } height={ 60 } />
-            <div>
-              <Typography className={ classes.lpOptionName }>Yearn.fi</Typography>
-              <Typography className={ classes.lpOptionDescription }>Lend LP</Typography>
+          </Grid>
+          <Grid item lg={4} xs={12}>
+            <div className={ classes.lpOption3 } onClick={ () => { navigate('https://yearn.fi/lend') } }>
+              <div className={ classes.lpOptionTitle }>
+                <img className={ classes.lpOptionIcon } src='/images/yearn-fi.svg' alt='Yearn.fi logo' width={ 60 } height={ 60 } />
+                <div>
+                  <Typography className={ classes.lpOptionName }>Yearn.fi</Typography>
+                  <Typography className={ classes.lpOptionDescription }>Lend LP</Typography>
+                </div>
+              </div>
+              {
+                <div className={ classes.activeIcon }></div>
+              }
             </div>
-          </div>
-          {
-            <div className={ classes.activeIcon }></div>
-          }
-        </div>
+          </Grid>
+        </Grid>
       </Paper>
     </div>
   );

diff --git a/components/ffLPOptions/ffLPOptions.module.css b/components/ffLPOptions/ffLPOptions.module.css
@@ -11,31 +11,33 @@
 }
 
 .lpOptionsContainer {
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  border: 1px solid rgba(104, 108, 122, 0.25);
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-evenly;
   cursor: pointer;
 }
 
-.lpOption:nth-child(1):hover {
+.lpOption1:hover {
   background: #f8b701;
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
 }
 
-.lpOption:nth-child(2):hover {
+.lpOption2:hover {
   background: #cd65ae;
 }
 
-.lpOption:nth-child(3):hover {
+.lpOption3:hover {
   background: #1162df;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
 }
 
-.lpOption {
+.lpOption1,
+.lpOption2,
+.lpOption3 {
   position: relative;
   flex: 1;
   display: flex;
@@ -73,3 +75,47 @@
   right: 12px;
   top: 12px;
 }
+
+@media screen and (max-width: 1200px) {
+  .container {
+    margin-top: 30px;
+  }
+
+  .lpOption1 {
+    background: #f8b701;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    border-bottom-left-radius: 0;
+  }
+
+  .lpOption1:hover {
+    background: #f8b701;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    border-bottom-left-radius: 0;
+  }
+
+  .lpOption2 {
+    background: #cd65ae;
+  }
+
+  .lpOption3 {
+    background: #1162df;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    border-top-right-radius: 0px;
+  }
+
+  .lpOption3:hover {
+    background: #1162df;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    border-top-right-radius: 0px;
+  }
+}
+
+@media screen and (max-width: 960px) {
+  .container {
+    margin-top: 240px;
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -37,6 +37,7 @@ export default function ffClaim() { @@
           setLoading(true)
           stores.dispatcher.dispatch({ type: FIXED_FOREX_CLAIM_VESTING_REWARD, content: {}})
         // }
       }
       return (
@@ Expand Down @@