From e54d5330342ffb0a561661eb518c9005a8733101 Mon Sep 17 00:00:00 2001 From: biocom Date: Mon, 6 Sep 2021 15:48:10 +0200 Subject: [PATCH 1/4] Improve dark mode color styles. --- .../SearchModal/CurrencySearch/index.tsx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/custom/components/SearchModal/CurrencySearch/index.tsx b/src/custom/components/SearchModal/CurrencySearch/index.tsx index b64f6f6dd..f966ea054 100644 --- a/src/custom/components/SearchModal/CurrencySearch/index.tsx +++ b/src/custom/components/SearchModal/CurrencySearch/index.tsx @@ -28,16 +28,29 @@ export const ContentWrapper = styled(Column)` } ${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 }) => ( - + - + Manage Token Lists From 31dba5d1324849d0d4c32d5bcf0c156b78f4bab3 Mon Sep 17 00:00:00 2001 From: biocom Date: Mon, 6 Sep 2021 16:17:16 +0200 Subject: [PATCH 2/4] Improve dark mode color styles. --- .../SearchModal/CurrencySearch/index.tsx | 21 +++++++++++-------- .../components/SearchModal/Manage/index.tsx | 15 +++++++------ .../ManageLists/ManageListsMod.tsx | 2 +- .../SearchModal/ManageLists/index.tsx | 17 +++++++++++++-- 4 files changed, 37 insertions(+), 18 deletions(-) diff --git a/src/custom/components/SearchModal/CurrencySearch/index.tsx b/src/custom/components/SearchModal/CurrencySearch/index.tsx index f966ea054..28d136388 100644 --- a/src/custom/components/SearchModal/CurrencySearch/index.tsx +++ b/src/custom/components/SearchModal/CurrencySearch/index.tsx @@ -16,24 +16,27 @@ 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: none; - // Target the token list container - + div { - ${({ theme }) => theme.neumorphism.boxShadow} - } + // Target the token list container + + div { + ${({ theme }) => theme.neumorphism.boxShadow} + } } ` diff --git a/src/custom/components/SearchModal/Manage/index.tsx b/src/custom/components/SearchModal/Manage/index.tsx index c777e3613..ad44d0669 100644 --- 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 index 16be77743..262a00d70 100644 --- 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 index 6ffb68e52..9818b6911 100644 --- 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 } +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 + return ( + + + + ) } From 5f8f0e1f3ea68e1120587aec131f9d51e63b708e Mon Sep 17 00:00:00 2001 From: biocom Date: Mon, 6 Sep 2021 17:00:41 +0200 Subject: [PATCH 3/4] Improve dark mode color styles. --- src/custom/components/Popups/PopupItem.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/custom/components/Popups/PopupItem.tsx b/src/custom/components/Popups/PopupItem.tsx index 4c5a870d0..7724e9c4b 100644 --- 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}; From 928d96c3679ebee623c9c525fe707d551046279f Mon Sep 17 00:00:00 2001 From: biocom Date: Tue, 7 Sep 2021 14:34:37 +0200 Subject: [PATCH 4/4] Improve dark mode color styles. --- .../ManageTokens/ManageTokensMod.tsx | 2 +- .../SearchModal/ManageTokens/index.tsx | 23 ++++++++++++++++++- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/custom/components/SearchModal/ManageTokens/ManageTokensMod.tsx b/src/custom/components/SearchModal/ManageTokens/ManageTokensMod.tsx index e5637d944..8471df049 100644 --- 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 index 9c76417e5..d644262ff 100644 --- 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) => (