Improve dark mode color styles. (gnosis/cowswap#1401)

* Improve dark mode color styles. * Improve dark mode color styles. * Improve dark mode color styles. * Improve dark mode color styles.
anxolin · Sep 22, 2021 · ea4f68a · ea4f68a
1 parent 6cd492a
commit ea4f68a
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 20 deletions.
diff --git a/src/custom/components/Popups/PopupItem.tsx b/src/custom/components/Popups/PopupItem.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import { PopupContent } from 'state/application/actions'
-import { default as PopupItemUni, Fader } from './PopupItemMod'
+import { default as PopupItemUni, Fader, StyledClose } from './PopupItemMod'
 
 export const Wrapper = styled(PopupItemUni)`
   ${(props) => props.className} {
@@ -13,6 +13,10 @@ export const Wrapper = styled(PopupItemUni)`
       height: 4px;
     }
 
+    ${StyledClose} {
+      stroke: ${({ theme }) => theme.text1};
+    }
+
     a {
       text-decoration: underline;
       color: ${({ theme }) => theme.textLink};

diff --git a/src/custom/components/SearchModal/CurrencySearch/index.tsx b/src/custom/components/SearchModal/CurrencySearch/index.tsx
@@ -16,28 +16,44 @@ export const ContentWrapper = styled(Column)`
   position: relative;
 
   ${SearchInput} {
-    border: 1px solid ${({ theme }) => transparentize(0.7, theme.text1)}};
-  }
-
-  ${SearchInput}:focus {
-    border-color: ${({ theme }) => theme.primary1}};
+    border: none;
+    transition: background 0.3s ease-in-out;
+    ${({ theme }) => theme.neumorphism.boxShadow}
   }
 
   ${SearchInput}::placeholder {
+    font-size: 16px;
     color: ${({ theme }) => transparentize(0.5, theme.text1)};
   }
 
+  ${SearchInput}:focus::placeholder {
+    color: ${({ theme }) => transparentize(0.7, theme.text1)};
+  }
+
   ${Separator} {
-    background: ${({ theme }) => transparentize(0.7, theme.text1)};
+    background: none;
+
+    // Target the token list container
+    + div {
+      ${({ theme }) => theme.neumorphism.boxShadow}
+    }
   }
 `
 
 const FooterButtonTextComponent = ({ theme }: { theme: DefaultTheme }) => (
   <RowFixed>
-    <IconWrapper size="16px" marginRight="6px" stroke={theme.blue1}>
+    <IconWrapper
+      size="16px"
+      marginRight="6px"
+      // stroke={theme.blue1}
+      stroke={theme.text1}
+    >
       <Edit />
     </IconWrapper>
-    <TYPE.main color={theme.blue1}>
+    <TYPE.main
+      // color={theme.blue1}
+      color={theme.text1}
+    >
       <Trans>Manage Token Lists</Trans>
     </TYPE.main>
   </RowFixed>

diff --git a/src/custom/components/SearchModal/Manage/index.tsx b/src/custom/components/SearchModal/Manage/index.tsx
@@ -14,19 +14,22 @@ export const Wrapper = styled.div`
   padding-bottom: 80px;
 
   ${SearchInput} {
-    border: 1px solid ${({ theme }) => transparentize(0.7, theme.text1)}};
-  }
-  
-  ${SearchInput}:focus {
-    border-color: ${({ theme }) => theme.primary1}};
+    border: none;
+    transition: background 0.3s ease-in-out;
+    ${({ theme }) => theme.neumorphism.boxShadow}
   }
 
   ${SearchInput}::placeholder {
+    font-size: 16px;
     color: ${({ theme }) => transparentize(0.5, theme.text1)};
   }
 
+  ${SearchInput}:focus::placeholder {
+    color: ${({ theme }) => transparentize(0.7, theme.text1)};
+  }
+
   ${Separator} {
-    background: ${({ theme }) => transparentize(0.7, theme.text1)};
+    background: none;
   }
 `
 

diff --git a/src/custom/components/SearchModal/ManageLists/ManageListsMod.tsx b/src/custom/components/SearchModal/ManageLists/ManageListsMod.tsx
@@ -230,7 +230,7 @@ ListRowProps & { listUrl: string }) {
   )
 })
 
-const ListContainer = styled.div`
+export const ListContainer = styled.div`
   padding: 1rem;
   height: 100%;
   overflow: auto;

diff --git a/src/custom/components/SearchModal/ManageLists/index.tsx b/src/custom/components/SearchModal/ManageLists/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { ManageLists as ManageListsMod } from './ManageListsMod'
+import { ManageLists as ManageListsMod, ListContainer } from './ManageListsMod'
 import { DEFAULT_NETWORK_FOR_LISTS, UNSUPPORTED_LIST_URLS } from 'constants/lists'
 import { useActiveWeb3React } from 'hooks/web3'
 import { CurrencyModalView } from '@src/components/SearchModal/CurrencySearchModal'
@@ -18,6 +18,15 @@ export interface ListRowProps {
   enableList: (url: string) => ReturnType<typeof enableList>
 }
 
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+
+  ${ListContainer} {
+    ${({ theme }) => theme.neumorphism.boxShadow}
+  }
+`
+
 export const RowWrapper = styled(Row)<{ bgColor: string; active: boolean }>`
   background-color: ${({ bgColor, active, theme }) => (active ? bgColor ?? 'transparent' : theme.bg4)};
   transition: 0.2s;
@@ -71,5 +80,9 @@ export const ManageLists = (props: {
     disableList: (url: string) => disableList({ url, chainId }),
     enableList: (url: string) => enableList({ url, chainId }),
   }
-  return <ManageListsMod {...props} unsupportedListUrls={UNSUPPORTED_LIST_URLS[chainId]} listRowProps={listRowProps} />
+  return (
+    <Wrapper>
+      <ManageListsMod {...props} unsupportedListUrls={UNSUPPORTED_LIST_URLS[chainId]} listRowProps={listRowProps} />
+    </Wrapper>
+  )
 }
diff --git a/src/custom/components/SearchModal/ManageTokens/ManageTokensMod.tsx b/src/custom/components/SearchModal/ManageTokens/ManageTokensMod.tsx
@@ -26,7 +26,7 @@ const Wrapper = styled.div`
   padding-bottom: 80px;
 `
 
-const Footer = styled.div`
+export const Footer = styled.div`
   position: absolute;
   bottom: 0;
   width: 100%;

diff --git a/src/custom/components/SearchModal/ManageTokens/index.tsx b/src/custom/components/SearchModal/ManageTokens/index.tsx
@@ -3,8 +3,10 @@ import { Token } from '@uniswap/sdk-core'
 import styled, { DefaultTheme } from 'styled-components/macro'
 import Card from 'components/Card'
 import ImportRow from 'components/SearchModal/ImportRow'
-import ManageTokensMod, { ManageTokensProps } from './ManageTokensMod'
+import ManageTokensMod, { ManageTokensProps, Footer } from './ManageTokensMod'
 import { CurrencyModalView } from 'components/SearchModal/CurrencySearchModal'
+import { Separator } from 'components/SearchModal/styleds'
+import Column from 'components/Column'
 import Row, { RowFixed, RowBetween } from 'components/Row'
 import { ButtonText, LinkIcon } from 'theme'
 
@@ -18,6 +20,10 @@ export const Wrapper = styled.div`
   height: 100%;
   position: relative;
 
+  > div {
+    padding: 0 0 40px;
+  }
+
   ${Row} > div {
     margin: 0;
   }
@@ -54,6 +60,21 @@ export const Wrapper = styled.div`
   ${ButtonText} > div {
     color: ${({ theme }) => theme.primary1};
   }
+
+  ${Column} > ${Separator} + div {
+    height: 100%;
+    grid-auto-rows: min-content;
+    ${({ theme }) => theme.neumorphism.boxShadow}
+  }
+
+  ${Footer} {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 13px;
+    padding: 0;
+    height: 50px;
+  }
 `
 
 const ImportTokensRow = ({ theme, searchToken, setModalView, setImportToken }: ImportTokensRowProps) => (