style changes

HrikB · HrikB · commit dbca3b340dca · 2023-06-20T08:17:11.000-07:00
diff --git a/dapp-oeth/src/components/MissionControl.js b/dapp-oeth/src/components/MissionControl.js
@@ -16,7 +16,7 @@ const MissionControl = ({}) => {
 
         @media (max-width: 767px) {
           .swap-contain {
-            padding: 0 8px;
+            padding: 0 12px;
           }
         }
       `}</style>
diff --git a/dapp-oeth/src/components/Nav.js b/dapp-oeth/src/components/Nav.js
@@ -66,7 +66,6 @@ const DappLinks = ({ page }) => {
         .link-contain {
           font-size: 16px;
           border-radius: 56px;
-          margin-right: 8px;
         }
 
         .link-contain.last {
@@ -888,7 +887,7 @@ const Nav = ({ isMobile, locale, onLocale, page }) => {
 
         @media (max-width: 799px) {
           .navbar .nav-container {
-            padding: 0 8px;
+            padding: 0 12px;
           }
         }
       `}</style>
diff --git a/dapp-oeth/src/components/buySell/BalanceHeader.js b/dapp-oeth/src/components/buySell/BalanceHeader.js
@@ -205,7 +205,18 @@ const BalanceHeader = ({
               justify-content: space-between;
               align-items: center;
               border-bottom: 0;
-              border-top: 1px solid black;
+            }
+
+            .containBig {
+              border-radius: 4px 4px 0 0;
+            }
+
+            .containSmall {
+              border-top: 1px solid #101113;
+            }
+
+            .containSmallTop {
+              border-radius: 0 0 4px 4px;
             }
 
             .containBig .title {
@@ -245,7 +256,7 @@ const BalanceHeader = ({
             }
 
             .stat .big {
-              font-size: 20px;
+              font-size: 24px;
             }
 
             .stat .small {
@@ -380,7 +391,7 @@ const BalanceHeader = ({
               );
               -webkit-background-clip: text;
               -webkit-text-fill-color: transparent;
-              font-size: 20px;
+              font-size: 24px;
               margin-bottom: 0;
             }
           }
@@ -621,7 +632,7 @@ const BalanceHeader = ({
           .balance-header {
             align-items: center;
             text-align: center;
-            padding: 0px 8px;
+            padding: 0px 12px;
             min-height: 80px;
           }
 
diff --git a/dapp-oeth/src/components/buySell/ContractsTable.js b/dapp-oeth/src/components/buySell/ContractsTable.js
@@ -792,6 +792,10 @@ const ContractsTable = () => {
           .contracts-main {
             padding-bottom: 16px;
           }
+
+          .contracts-wrapper {
+            border-radius: 4px;
+          }
         }
       `}</style>
     </div>
diff --git a/dapp-oeth/src/components/buySell/SettingsDropdown.js b/dapp-oeth/src/components/buySell/SettingsDropdown.js
@@ -125,8 +125,8 @@ const SettingsDropdown = ({ setPriceToleranceValue, priceToleranceValue }) => {
         }
 
         .settings-icon {
-          width: 22px;
-          height: 22px;
+          width: 16px;
+          height: 16px;
           cursor: pointer;
         }
 
diff --git a/dapp-oeth/src/components/buySell/SwapCurrencyPill.js b/dapp-oeth/src/components/buySell/SwapCurrencyPill.js
@@ -81,6 +81,8 @@ const CoinImage = ({ small, coin }) => {
 
         @media (max-width: 799px) {
           .coin-image {
+            width: 24px;
+            height: 24px;
             margin-right: 8px;
           }
         }
@@ -353,9 +355,10 @@ const CoinSelect = ({
 
           @media (max-width: 799px) {
             .coin-select {
+              font-size: 16px;
               width: fit-content;
               min-height: 32px;
-              padding: 4px;
+              padding: 6px 4px;
               margin-top: 16px;
             }
           }
@@ -399,7 +402,7 @@ const CoinSelect = ({
         .coin-select {
           padding: 4px;
           border-radius: 30px;
-          border: solid 1px #141519;
+          border: solid 0px;
           color: #fafbfb;
           background-color: rgba(255, 255, 255, 0.1);
           cursor: pointer;
@@ -436,15 +439,17 @@ const CoinSelect = ({
 
         @media (max-width: 799px) {
           .coin-select {
+            font-size: 16px;
             width: fit-content;
             min-height: 32px;
-            padding: 4px;
+            padding: 6px 4px;
             margin-top: 16px;
           }
 
           .coin {
             color: #fafbfb;
             margin-right: 8px;
+            font-size: 16px;
           }
         }
       `}</style>
@@ -814,6 +819,7 @@ const SwapCurrencyPill = ({
           font-size: 32px;
           color: #fafbfb;
           background-color: transparent;
+          padding: 0;
         }
 
         .expected-value {
diff --git a/dapp-oeth/src/components/buySell/_PillArrow.js b/dapp-oeth/src/components/buySell/_PillArrow.js
@@ -48,14 +48,14 @@ const PillArrow = ({ swapMode, setSwapMode }) => {
           <img
             src={assetRootPath('/images/splitarrow.svg')}
             alt="swap arrow"
-            style={{ height: 25, width: 14 }}
+            style={{ height: 23, width: 12 }}
           />
         </div>
       </div>
       <style jsx>{`
         .pill-arrow {
-          width: 46px;
-          height: 46px;
+          width: 32px;
+          height: 32px;
           border: 1px solid #141519;
           background-color: #1e1f25;
           border-radius: 50px;
@@ -66,13 +66,13 @@ const PillArrow = ({ swapMode, setSwapMode }) => {
         .border-divider {
           height: 10px;
           background-color: #1e1f25;
-          width: 40px;
+          width: 24px;
           z-index: 1;
         }
 
         .caret-background {
-          width: 46px;
-          height: 46px;
+          width: 32px;
+          height: 32px;
           border: solid 1px #141519;
           background-color: transparent;
           z-index: 2;
diff --git a/dapp-oeth/src/components/wrap/BalanceHeaderWrapped.js b/dapp-oeth/src/components/wrap/BalanceHeaderWrapped.js
@@ -186,7 +186,7 @@ const BalanceHeaderWrapped = ({
             }
 
             .stat .big {
-              font-size: 20px;
+              font-size: 24px;
             }
 
             .stat .small {
@@ -321,7 +321,7 @@ const BalanceHeaderWrapped = ({
               );
               -webkit-background-clip: text;
               -webkit-text-fill-color: transparent;
-              font-size: 20px;
+              font-size: 24px;
               margin-bottom: 0;
             }
           }

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ const MissionControl = ({}) => {`
`16`	`16`
`17`	`17`	`@media (max-width: 767px) {`
`18`	`18`	`.swap-contain {`
`19`		`- padding: 0 8px;`
	`19`	`+ padding: 0 12px;`
`20`	`20`	`}`
`21`	`21`	`}`
`22`	`22`	`}</style>
Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,6 @@ const DappLinks = ({ page }) => {`
`66`	`66`	`.link-contain {`
`67`	`67`	`font-size: 16px;`
`68`	`68`	`border-radius: 56px;`
`69`		`- margin-right: 8px;`
`70`	`69`	`}`
`71`	`70`
`72`	`71`	`.link-contain.last {`
`@@ -888,7 +887,7 @@ const Nav = ({ isMobile, locale, onLocale, page }) => {`
`888`	`887`
`889`	`888`	`@media (max-width: 799px) {`
`890`	`889`	`.navbar .nav-container {`
`891`		`- padding: 0 8px;`
	`890`	`+ padding: 0 12px;`
`892`	`891`	`}`
`893`	`892`	`}`
`894`	`893`	`}</style>
Original file line number	Diff line number	Diff line change
`@@ -792,6 +792,10 @@ const ContractsTable = () => {`
`792`	`792`	`.contracts-main {`
`793`	`793`	`padding-bottom: 16px;`
`794`	`794`	`}`
	`795`	`+`
	`796`	`+ .contracts-wrapper {`
	`797`	`+ border-radius: 4px;`
	`798`	`+ }`
`795`	`799`	`}`
`796`	`800`	`}</style>
`797`	`801`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -125,8 +125,8 @@ const SettingsDropdown = ({ setPriceToleranceValue, priceToleranceValue }) => {`
`125`	`125`	`}`
`126`	`126`
`127`	`127`	`.settings-icon {`
`128`		`- width: 22px;`
`129`		`- height: 22px;`
	`128`	`+ width: 16px;`
	`129`	`+ height: 16px;`
`130`	`130`	`cursor: pointer;`
`131`	`131`	`}`
`132`	`132`
Original file line number	Diff line number	Diff line change
`@@ -186,7 +186,7 @@ const BalanceHeaderWrapped = ({`
`186`	`186`	`}`
`187`	`187`
`188`	`188`	`.stat .big {`
`189`		`- font-size: 20px;`
	`189`	`+ font-size: 24px;`
`190`	`190`	`}`
`191`	`191`
`192`	`192`	`.stat .small {`
`@@ -321,7 +321,7 @@ const BalanceHeaderWrapped = ({`
`321`	`321`	`);`
`322`	`322`	`-webkit-background-clip: text;`
`323`	`323`	`-webkit-text-fill-color: transparent;`
`324`		`- font-size: 20px;`
	`324`	`+ font-size: 24px;`
`325`	`325`	`margin-bottom: 0;`
`326`	`326`	`}`
`327`	`327`	`}`