From acededce3263657aaaeffad3a2cc7c13cf044500 Mon Sep 17 00:00:00 2001
From: Demari C <demaricameron@outlook.com>
Date: Sun, 30 May 2021 11:01:12 -0400
Subject: [PATCH] Updated Menu and styling

---
 src/components/Menu/index.tsx                 |  3 ++
 src/components/SearchModal/CurrencySearch.tsx |  2 +-
 src/pages/Pool/styleds.tsx                    |  1 +
 src/pages/RemoveLiquidity/index.tsx           | 42 ++++++++++---------
 src/style/Global.ts                           |  3 +-
 5 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index 012ac70..2f10a02 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -59,6 +59,9 @@ const Menu: React.FC = (props) => {
             <a className="nav_link" href="https://www.binance.org/en/bridge">
               <li>Bridge</li>
             </a>
+            <a className="nav_link" href={`${origin}/bsc/farms`}>
+              <li>Farms</li>
+            </a>
             {/* <NavLink className="nav_link" to="/soku" activeClassName="active">
               <li>SOKU</li>
             </NavLink> */}
diff --git a/src/components/SearchModal/CurrencySearch.tsx b/src/components/SearchModal/CurrencySearch.tsx
index a97ebb4..73ba4bd 100644
--- a/src/components/SearchModal/CurrencySearch.tsx
+++ b/src/components/SearchModal/CurrencySearch.tsx
@@ -184,7 +184,7 @@ export function CurrencySearch({
       <Separator />
 
       <div style={{ flex: '1' }}>
-        <AutoSizer disableWidth style={{ border: '1px solid red' }}>
+        <AutoSizer disableWidth>
           {({ height }) => (
             <CurrencyList
               height={height}
diff --git a/src/pages/Pool/styleds.tsx b/src/pages/Pool/styleds.tsx
index 04c0011..c0fdb9e 100644
--- a/src/pages/Pool/styleds.tsx
+++ b/src/pages/Pool/styleds.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 
 export const Wrapper = styled.div`
   position: relative;
+  padding: 0 1rem;
 `
 
 export const ClickableText = styled(Text)`
diff --git a/src/pages/RemoveLiquidity/index.tsx b/src/pages/RemoveLiquidity/index.tsx
index 46dd727..4d98ce9 100644
--- a/src/pages/RemoveLiquidity/index.tsx
+++ b/src/pages/RemoveLiquidity/index.tsx
@@ -14,6 +14,8 @@ import useI18n from 'hooks/useI18n'
 import { AutoColumn, ColumnCenter } from '../../components/Column'
 import TransactionConfirmationModal, { ConfirmationModalContent } from '../../components/TransactionConfirmationModal'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
+import CardNav from '../../components/CardNav'
+
 import DoubleCurrencyLogo from '../../components/DoubleLogo'
 import { AddRemoveTabs } from '../../components/NavigationTabs'
 import { MinimalPositionCard } from '../../components/PositionCard'
@@ -50,8 +52,8 @@ const OutlineCard = styled.div`
 `
 
 const Body = styled.div`
-  padding-left: 24px;
-  padding-right: 204px;
+  // padding-left: 24px;
+  // padding-right: 204px;
 `
 
 export default function RemoveLiquidity({
@@ -359,8 +361,8 @@ export default function RemoveLiquidity({
 
   function modalBottom() {
     return (
-      <>
-        <RowBetween>
+      <div style={{ background: '#E9EAEB', width: '100%', padding: '20px' }}>
+        <RowBetween style={{ padding: '0.5rem' }}>
           <Text color="textSubtle">{`LP ${currencyA?.symbol}/${currencyB?.symbol}`} Burned</Text>
           <RowFixed>
             <DoubleCurrencyLogo currency0={currencyA} currency1={currencyB} margin />
@@ -369,13 +371,13 @@ export default function RemoveLiquidity({
         </RowBetween>
         {pair && (
           <>
-            <RowBetween>
+            <RowBetween style={{ padding: '0.5rem' }}>
               <Text color="textSubtle">{TranslateString(1182, 'Price')}</Text>
               <Text>
                 1 {currencyA?.symbol} = {tokenA ? pair.priceOf(tokenA).toSignificant(6) : '-'} {currencyB?.symbol}
               </Text>
             </RowBetween>
-            <RowBetween>
+            <RowBetween style={{ padding: '0.5rem' }}>
               <div />
               <Text>
                 1 {currencyB?.symbol} = {tokenB ? pair.priceOf(tokenB).toSignificant(6) : '-'} {currencyA?.symbol}
@@ -383,10 +385,14 @@ export default function RemoveLiquidity({
             </RowBetween>
           </>
         )}
-        <Button disabled={!(approval === ApprovalState.APPROVED || signatureData !== null)} onClick={onRemove}>
+        <Button
+          style={{ background: '#04bbfb', width: '100%' }}
+          disabled={!(approval === ApprovalState.APPROVED || signatureData !== null)}
+          onClick={onRemove}
+        >
           {TranslateString(1136, 'Confirm')}
         </Button>
-      </>
+      </div>
     )
   }
 
@@ -448,6 +454,8 @@ export default function RemoveLiquidity({
 
   return (
     <>
+      <CardNav />
+
       <AppBody>
         <AddRemoveTabs adding={false} />
         <Wrapper>
@@ -490,28 +498,28 @@ export default function RemoveLiquidity({
                       </Flex>
                       <Flex justifyContent="space-around">
                         <Button
-                          variant="tertiary"
+                          style={{ background: '#04bbfb', color: '#fff' }}
                           scale="sm"
                           onClick={() => onUserInput(Field.LIQUIDITY_PERCENT, '25')}
                         >
                           25%
                         </Button>
                         <Button
-                          variant="tertiary"
+                          style={{ background: '#04bbfb', color: '#fff' }}
                           scale="sm"
                           onClick={() => onUserInput(Field.LIQUIDITY_PERCENT, '50')}
                         >
                           50%
                         </Button>
                         <Button
-                          variant="tertiary"
+                          style={{ background: '#04bbfb', color: '#fff' }}
                           scale="sm"
                           onClick={() => onUserInput(Field.LIQUIDITY_PERCENT, '75')}
                         >
                           75%
                         </Button>
                         <Button
-                          variant="tertiary"
+                          style={{ background: '#04bbfb', color: '#fff' }}
                           scale="sm"
                           onClick={() => onUserInput(Field.LIQUIDITY_PERCENT, '100')}
                         >
@@ -636,14 +644,14 @@ export default function RemoveLiquidity({
                   </Flex>
                 </div>
               )}
-              <div style={{ position: 'relative' }}>
+              <div style={{ position: 'relative', paddingTop: '20px' }}>
                 {!account ? (
                   <ConnectWalletButton />
                 ) : (
                   <RowBetween>
                     <Button
                       onClick={onAttemptToApprove}
-                      variant={approval === ApprovalState.APPROVED || signatureData !== null ? 'success' : 'primary'}
+                      style={{ background: '#04bbfb', width: '50%' }}
                       disabled={approval !== ApprovalState.NOT_APPROVED || signatureData !== null}
                       mr="8px"
                     >
@@ -660,11 +668,7 @@ export default function RemoveLiquidity({
                         setShowConfirm(true)
                       }}
                       disabled={!isValid || (signatureData === null && approval !== ApprovalState.APPROVED)}
-                      variant={
-                        !isValid && !!parsedAmounts[Field.CURRENCY_A] && !!parsedAmounts[Field.CURRENCY_B]
-                          ? 'danger'
-                          : 'primary'
-                      }
+                      style={{ background: '#05195a', width: '50%' }}
                     >
                       {error || 'Remove'}
                     </Button>
diff --git a/src/style/Global.ts b/src/style/Global.ts
index 878dd8d..f0703dd 100644
--- a/src/style/Global.ts
+++ b/src/style/Global.ts
@@ -43,7 +43,8 @@ const GlobalStyle = createGlobalStyle`
     color: #04bbfb;
   }
 
-  div[color="text"] {
+
+  div[color="text"], p[color="text"] {
     color: #05195a;
   }