From fcff6f92071fae697f94d9a92179f2f37b9e3a85 Mon Sep 17 00:00:00 2001 From: AnthonyPotdevin Date: Sun, 19 Jan 2020 14:08:32 +0100 Subject: [PATCH] chore: styling changes --- .../buttons/colorButton/ColorButton.tsx | 6 +++-- src/components/generic/Styled.tsx | 2 +- src/sections/content/Content.tsx | 6 ----- src/sections/header/Header.tsx | 27 +++++++++++++------ src/sections/navigation/Navigation.tsx | 1 - src/styles/Themes.ts | 10 +++++++ src/views/fees/FeeCard.tsx | 5 ++-- src/views/fees/Fees.tsx | 5 ++-- src/views/main/Main.tsx | 2 +- src/views/settings/Danger.tsx | 4 +-- 10 files changed, 43 insertions(+), 25 deletions(-) diff --git a/src/components/buttons/colorButton/ColorButton.tsx b/src/components/buttons/colorButton/ColorButton.tsx index 28cdaeb4..19dfdc72 100644 --- a/src/components/buttons/colorButton/ColorButton.tsx +++ b/src/components/buttons/colorButton/ColorButton.tsx @@ -4,6 +4,8 @@ import { textColor, colorButtonBackground, colorButtonColor, + disabledButtonBackground, + disabledButtonBorder, } from '../../../styles/Themes'; import { ChevronRight } from '../../generic/Icons'; @@ -57,9 +59,9 @@ const BorderButton = styled(GeneralButton)` const DisabledButton = styled(GeneralButton)` border: none; - background-color: #262626; + background-color: ${disabledButtonBackground}; color: #8c8c8c; - border: 1px solid #595959; + border: 1px solid ${disabledButtonBorder}; cursor: default; `; diff --git a/src/components/generic/Styled.tsx b/src/components/generic/Styled.tsx index 3817a81a..d1adac9b 100644 --- a/src/components/generic/Styled.tsx +++ b/src/components/generic/Styled.tsx @@ -103,7 +103,7 @@ export const Input = styled.input` padding: 5px; height: 30px; width: 80%; - margin: 10px; + margin: 8px 0; border: 1px solid #c8ccd4; background: none; border-radius: 5px; diff --git a/src/sections/content/Content.tsx b/src/sections/content/Content.tsx index b5a8a7e2..12f1c3f6 100644 --- a/src/sections/content/Content.tsx +++ b/src/sections/content/Content.tsx @@ -12,13 +12,7 @@ import { ChainTransactions } from '../../views/chain/ChainTransactions'; import { ForwardsList } from '../../views/forwards/ForwardList'; const ContentStyle = styled.div` - /* display: flex; - justify-content: center; - align-items: center; */ - /* padding: 0 10px; */ - /* background-color: blue; */ grid-area: content; - margin-right: 0.5rem; `; export const Content = () => { diff --git a/src/sections/header/Header.tsx b/src/sections/header/Header.tsx index 0facfed8..accb932a 100644 --- a/src/sections/header/Header.tsx +++ b/src/sections/header/Header.tsx @@ -4,6 +4,8 @@ import { textColor, cardColor } from '../../styles/Themes'; import { HomeButton } from '../../views/entry/HomePage.styled'; import { Link } from 'react-router-dom'; import { useAccount } from '../../context/AccountContext'; +import { SingleLine, Sub4Title } from '../../components/generic/Styled'; +import { Cpu } from '../../components/generic/Icons'; const HeaderStyle = styled.div` display: flex; @@ -27,23 +29,32 @@ const Wrapper = styled.div` const HeaderTitle = styled.div` color: ${textColor}; - font-weight: bolder; + font-weight: 900; `; export const Header = () => { - const { loggedIn } = useAccount(); + const { loggedIn, name } = useAccount(); + + const renderLoggedIn = () => {`Account: ${name}`}; + + const renderLoggedOut = () => ( + + Login + + ); return ( - ThunderHub + + + ThunderHub + - {!loggedIn && ( - - Login - - )} + + {loggedIn ? renderLoggedIn() : renderLoggedOut()} + ); diff --git a/src/sections/navigation/Navigation.tsx b/src/sections/navigation/Navigation.tsx index 73cd59ab..be242568 100644 --- a/src/sections/navigation/Navigation.tsx +++ b/src/sections/navigation/Navigation.tsx @@ -21,7 +21,6 @@ import { const NavigationStyle = styled.div` grid-area: nav; - margin-left: 0.5rem; `; const StickyCard = styled.div` diff --git a/src/styles/Themes.ts b/src/styles/Themes.ts index 86c91366..6b62531e 100644 --- a/src/styles/Themes.ts +++ b/src/styles/Themes.ts @@ -41,6 +41,16 @@ export const colorButtonBorder: { [key: string]: string } = { dark: '#EFFFFA', }; +export const disabledButtonBackground = theme('mode', { + light: '#f5f5f5', + dark: 'rgba(0,0,0,0.4)', +}); + +export const disabledButtonBorder = theme('mode', { + light: '#f5f5f5', + dark: 'rgba(0,0,0,0.4)', +}); + // --------------------------------------- // CARD COLORS // --------------------------------------- diff --git a/src/views/fees/FeeCard.tsx b/src/views/fees/FeeCard.tsx index 1688fad6..08f794ac 100644 --- a/src/views/fees/FeeCard.tsx +++ b/src/views/fees/FeeCard.tsx @@ -5,6 +5,7 @@ import { SingleLine, DarkSubTitle, Input, + RightAlign, } from '../../components/generic/Styled'; import { renderLine } from '../../components/generic/Helpers'; import { MainInfo, NodeTitle, ColLine } from './Fees.style'; @@ -91,7 +92,7 @@ export const FeeCard = ({ onChange={e => setFeeRate(parseInt(e.target.value))} /> - + - + ); }; diff --git a/src/views/fees/Fees.tsx b/src/views/fees/Fees.tsx index aee524b5..495e8c6d 100644 --- a/src/views/fees/Fees.tsx +++ b/src/views/fees/Fees.tsx @@ -10,6 +10,7 @@ import { Separation, DarkSubTitle, Input, + RightAlign, } from '../../components/generic/Styled'; import { useAccount } from '../../context/AccountContext'; import { getAuthString } from '../../utils/auth'; @@ -98,7 +99,7 @@ export const FeesView = () => { } /> - + { Update Fees - + )} diff --git a/src/views/main/Main.tsx b/src/views/main/Main.tsx index fc236690..8fe8eec1 100644 --- a/src/views/main/Main.tsx +++ b/src/views/main/Main.tsx @@ -9,7 +9,7 @@ const Container = styled.div` grid-template-areas: 'nav content content'; grid-template-columns: 200px 1fr 200px; grid-template-rows: auto 1fr auto; - gap: 10px; + gap: 16px; `; const MainView = () => ( diff --git a/src/views/settings/Danger.tsx b/src/views/settings/Danger.tsx index 80616d4d..a762ea7b 100644 --- a/src/views/settings/Danger.tsx +++ b/src/views/settings/Danger.tsx @@ -51,7 +51,7 @@ export const DangerView = () => { {getStorageSaved().map((entry, index) => { return ( { deleteAuth(entry.index); refreshAccount(); @@ -67,7 +67,7 @@ export const DangerView = () => { Delete all Accounts and Settings: { deleteStorage(); refreshAccount();