Ref: Refactored Deposit/Withdrawal modal with new theme colours and t…

…exts (#2211) * Ref: Refactored Deposit/Withdrawal modal * fix: Fix hover effect * fix: fixed hover * removed comments and unecessary styling * minor fix and recreated BalanceItemBalance with styled(TYPE) * refactored ModalTitle with text TYPE * minor styling fixes * styling fixes * style: Deleted unused vars and structured styled components in appropriate files Co-authored-by: Thomas Pulber <[email protected]> Co-authored-by: Violet <[email protected]> Co-authored-by: My Violet <[email protected]>
protofire · Aug 31, 2021 · f52cdf1 · f52cdf1
1 parent b0b9a3e
commit f52cdf1
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 50 deletions.
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -7,13 +7,13 @@ import Web3Provider from 'web3-react'
 import 'react-datepicker/dist/react-datepicker.css'
 import 'sanitize.css'
 import { Main } from './components/main'
-import { ContentWrapper, ModalTitle } from './components/modal/common_styled'
+import { ContentWrapper } from './components/modal/common_styled'
 import { ConnectionModalNavigation, SettingsModalWrapper } from './components/modal/modal_your_connection'
 import SettingsViewContainer from './components/settings/settings_view'
 import { ConnectedWeb3 } from './contexts'
 import { ApolloProviderWrapper } from './contexts/Apollo'
 import balanceReducer from './store/reducer'
-import { ThemeProvider, theme } from './theme'
+import { TYPE, ThemeProvider, theme } from './theme'
 import { GlobalStyle } from './theme/global_style'
 import connectors from './util/connectors'
 import { getInfuraUrl, networkIds } from './util/networks'
@@ -59,9 +59,7 @@ const App: React.FC = (props: any) => {
           >
             <ContentWrapper>
               <ConnectionModalNavigation>
-                <ModalTitle>
-                  <span style={{ fontFamily: 'Roboto' }}>Settings</span>
-                </ModalTitle>
+                <TYPE.heading3 color={'text1'}>Settings</TYPE.heading3>
               </ConnectionModalNavigation>
               <SettingsModalWrapper>
                 <SettingsViewContainer />

diff --git a/app/src/components/modal/common_styled/index.tsx b/app/src/components/modal/common_styled/index.tsx
@@ -1,5 +1,7 @@
 import styled from 'styled-components'
 
+import { TYPE } from '../../../theme'
+
 export const ContentWrapper = styled.div`
   align-items: center;
   display: flex;
@@ -23,16 +25,6 @@ export const ModalNavigationLeft = styled.div`
   align-items: center;
 `
 
-export const ModalTitle = styled.p`
-  font-size: ${props => props.theme.switchNetworkModal.primaryFontSize};
-  color: ${props => props.theme.text1};
-  font-weight: ${props => props.theme.textfield.fontWeight};
-  margin: 0;
-  line-height: 19px;
-  letter-spacing: 0.2px;
-  margin-top: 2px;
-`
-
 export const ModalCard = styled.div`
   width: 100%;
 
@@ -68,16 +60,8 @@ export const BalanceItemSide = styled.div`
   align-items: center;
 `
 
-export const BalanceItemTitle = styled.p<{ notSelected?: boolean }>`
-  font-size: ${props => props.theme.fonts.defaultSize};
-  color: ${props => (props.notSelected ? props.theme.text2 : props.theme.text1)};
-  margin: 0;
-`
-
-export const BalanceItemBalance = styled.p`
-  font-size: ${props => props.theme.fonts.defaultSize};
-  color: ${props => props.theme.text2};
-  margin: 0;
+export const BalanceItemTitle = styled(TYPE.bodyRegular)<{ selected?: boolean }>`
+  color: ${props => (props.selected ? props.theme.text1 : props.theme.text2)};
 `
 
 export const BalanceItem = styled.div<{ hover?: boolean }>`
@@ -86,17 +70,15 @@ export const BalanceItem = styled.div<{ hover?: boolean }>`
   justify-content: space-between;
   width: 100%;
 
-  &:not(:first-child){
+  &:not(:first-child) {
     margin-top: 14px;
   }
 
   &:hover {
-    
    ${BalanceItemSide}{
    ${BalanceItemTitle}{
-   color: ${props => props.theme.text1}; !important;
+    color: ${props => props.theme.text1}; !important;
    }
- 
    }
   }
 `
diff --git a/app/src/components/modal/modal_deposit_withdraw/index.tsx b/app/src/components/modal/modal_deposit_withdraw/index.tsx
@@ -9,6 +9,7 @@ import styled, { withTheme } from 'styled-components'
 import { DAI_TO_XDAI_TOKEN_BRIDGE_ADDRESS, OMNI_BRIDGE_MAINNET_ADDRESS } from '../../../common/constants'
 import { useConnectedWeb3Context } from '../../../contexts'
 import { ERC20Service, XdaiService } from '../../../services'
+import { TYPE } from '../../../theme'
 import { bridgeTokensList, getNativeAsset, getToken, networkIds } from '../../../util/networks'
 import { getImageUrl } from '../../../util/token'
 import { waitForConfirmations } from '../../../util/tools'
@@ -25,7 +26,6 @@ import { IconInfo } from '../../common/icons/IconInfo'
 import { Image } from '../../market/common_sections/message_text/token_item'
 import {
   BalanceItem,
-  BalanceItemBalance,
   BalanceItemSide,
   BalanceItemTitle,
   BalanceItems,
@@ -34,7 +34,6 @@ import {
   ModalCard,
   ModalNavigation,
   ModalNavigationLeft,
-  ModalTitle,
 } from '../common_styled'
 import { ModalTransactionWrapper } from '../modal_transaction'
 
@@ -53,16 +52,13 @@ const InputInfo = styled.div`
   line-height: 20px;
   letter-spacing: 0.2px;
 `
-const WalletText = styled.div`
-  margin-bottom: 14px;
-  color: ${props => props.theme.text2};
-  line-height: 16.41px;
-  letter-spacing: 0.2px;
-`
 
 const DepositWithdrawButton = styled(Button)`
   flex: 1;
 `
+const BalanceItemBalance = styled(TYPE.bodyRegular)`
+  color: ${props => props.theme.text2};
+`
 const ApproveButton = styled(ButtonStateful)`
   flex: 1;
   border-color: ${props => props.theme.primary4};
@@ -73,6 +69,10 @@ const ApproveButton = styled(ButtonStateful)`
   }
 `
 
+const ModalSubtitle = styled(TYPE.bodyRegular)`
+  color: ${props => props.theme.text2};
+`
+
 const ExchangeDataItem = styled.div`
   display: flex;
   justify-content: space-between;
@@ -257,7 +257,6 @@ export const ModalDepositWithdraw = (props: Props) => {
 
     return (
       <BalanceItem
-        hover
         key={index}
         onClick={() => {
           setCurrencySelected(item)
@@ -266,9 +265,7 @@ export const ModalDepositWithdraw = (props: Props) => {
         <BalanceItemSide>
           <RadioInput checked={currencySelected === item} name={item} outcomeIndex={-1} readOnly />
           <Image size={'24'} src={getImageUrl(address)} style={{ marginLeft: '12px', marginRight: '12px' }} />
-          <BalanceItemTitle notSelected={currencySelected !== item}>
-            {name ? name : symbol.toLowerCase()}
-          </BalanceItemTitle>
+          <BalanceItemTitle selected={currencySelected == item}>{name ? name : symbol.toLowerCase()}</BalanceItemTitle>
         </BalanceItemSide>
         <BalanceItemSide>
           <BalanceItemBalance>
@@ -304,7 +301,9 @@ export const ModalDepositWithdraw = (props: Props) => {
                   setAmountToDisplay('')
                 }}
               />
-              <ModalTitle style={{ marginLeft: '16px' }}>{exchangeType} Asset</ModalTitle>
+              <TYPE.heading3 color={'text1'} marginLeft={'16px'}>
+                {exchangeType} Asset
+              </TYPE.heading3>
             </ModalNavigationLeft>
             <IconClose
               hoverEffect={true}
@@ -317,7 +316,7 @@ export const ModalDepositWithdraw = (props: Props) => {
           </ModalNavigation>
           <ModalCard style={{ marginBottom: '20px', marginTop: '10px' }}>
             <BalanceSection>
-              <WalletText>Wallet</WalletText>
+              <ModalSubtitle marginBottom={'14px'}>Wallet</ModalSubtitle>
               <BalanceItems>{bridgeItems}</BalanceItems>
             </BalanceSection>
           </ModalCard>
@@ -344,17 +343,19 @@ export const ModalDepositWithdraw = (props: Props) => {
           {exchangeType === ExchangeType.withdraw && currencySelected !== 'dai' && xDaiBalance?.isZero() ? (
             <InputInfo>
               <IconAlertInverted />
-              <div style={{ marginLeft: '12px' }}>Fund your Omen Account with Dai to proceed with the withdrawal.</div>
+              <ModalSubtitle marginLeft={'12px'}>
+                Fund your Omen Account with Dai to proceed with the withdrawal.
+              </ModalSubtitle>
             </InputInfo>
           ) : (
             <>
               <ExchangeDataItem style={{ marginTop: '24px' }}>
-                <span>Min amount</span>
-                <span>
+                <ModalSubtitle>Min amount</ModalSubtitle>
+                <BalanceItemBalance>
                   {currencySelected === 'dai'
                     ? `${bigNumberToString(minDaiBridgeExchange, decimals, 2)} DAI`
                     : `${bigNumberToString(minOmniBridgeExchange, decimals, 3)} ${symbol}`}
-                </span>
+                </BalanceItemBalance>
               </ExchangeDataItem>
               <ExchangeDataItem style={{ marginTop: '12px' }}>
                 <div style={{ display: 'flex' }}>
@@ -389,12 +390,12 @@ export const ModalDepositWithdraw = (props: Props) => {
               </ExchangeDataItem>
               <Divider />
               <ExchangeDataItem>
-                <span>Total</span>
-                <span>
+                <BalanceItemBalance>Total</BalanceItemBalance>
+                <BalanceItemBalance>
                   {currencySelected !== 'dai' && exchangeType === ExchangeType.withdraw
                     ? `${bigNumberToString(displayFundAmount.sub(displayFundAmount.div(1000)), decimals, 3)} ${symbol}`
                     : `${bigNumberToString(displayFundAmount, decimals)} ${symbol === 'xDAI' ? 'DAI' : symbol}`}
-                </span>
+                </BalanceItemBalance>
               </ExchangeDataItem>
             </>
           )}