From 1173d3f259609ed10efc989e9dfc23fc730b63f0 Mon Sep 17 00:00:00 2001 From: AnthonyPotdevin Date: Sun, 19 Jan 2020 23:27:28 +0100 Subject: [PATCH] chore: more button refactors --- .../buttons/colorButton/ColorButton.tsx | 21 +++++---- src/styles/Themes.ts | 13 ++---- src/views/backups/DownloadBackups.tsx | 9 ++-- src/views/backups/RecoverFunds.tsx | 37 ++++++++------- src/views/backups/VerifyBackups.tsx | 45 +++++++++---------- src/views/settings/Account.tsx | 18 ++------ src/views/settings/Interface.tsx | 2 - 7 files changed, 64 insertions(+), 81 deletions(-) diff --git a/src/components/buttons/colorButton/ColorButton.tsx b/src/components/buttons/colorButton/ColorButton.tsx index ef274ae4..0ff6c3b4 100644 --- a/src/components/buttons/colorButton/ColorButton.tsx +++ b/src/components/buttons/colorButton/ColorButton.tsx @@ -7,6 +7,7 @@ import { disabledButtonBorder, colorButtonSelectedBorder, inverseTextColor, + colorButtonBorder, } from '../../../styles/Themes'; import { ChevronRight } from '../../generic/Icons'; @@ -52,10 +53,12 @@ const BorderButton = styled(GeneralButton)` &:hover { ${({ borderColor, withHover, selected }: BorderProps) => - borderColor && withHover && !selected + withHover && !selected ? css`border: 1px solid ${colorButtonBackground} - background-color: ${borderColor} - color: ${inverseTextColor}` + background-color: ${ + borderColor ? borderColor : colorButtonBorder + } + color: ${inverseTextColor}` : ''}; } `; @@ -68,6 +71,12 @@ const DisabledButton = styled(GeneralButton)` cursor: default; `; +const renderArrow = () => ( + + + +); + interface ColorButtonProps { color?: string; disabled?: boolean; @@ -79,12 +88,6 @@ interface ColorButtonProps { withMargin?: string; } -const renderArrow = () => ( - - - -); - export const ColorButton = ({ color, disabled, diff --git a/src/styles/Themes.ts b/src/styles/Themes.ts index 0549627b..ef186cad 100644 --- a/src/styles/Themes.ts +++ b/src/styles/Themes.ts @@ -31,19 +31,14 @@ export const colorButtonBackground = theme('mode', { dark: '#252944', }); -export const colorButtonColor = theme('mode', { - light: '#8c8c8c', - dark: '#8c8c8c', -}); - -export const colorButtonBorder: { [key: string]: string } = { +export const colorButtonBorder = theme('mode', { light: '#99BAFF', - dark: '#525C99', -}; + dark: '#6E7ACC', +}); export const colorButtonSelectedBorder = theme('mode', { light: '#99BAFF', - dark: '#525C99', + dark: '#6E7ACC', }); export const disabledButtonBackground = theme('mode', { diff --git a/src/views/backups/DownloadBackups.tsx b/src/views/backups/DownloadBackups.tsx index 05963109..9f2329b9 100644 --- a/src/views/backups/DownloadBackups.tsx +++ b/src/views/backups/DownloadBackups.tsx @@ -1,9 +1,5 @@ import React, { useEffect } from 'react'; -import { - ColorButton, - DarkSubTitle, - SingleLine, -} from '../../components/generic/Styled'; +import { DarkSubTitle, SingleLine } from '../../components/generic/Styled'; import { saveToPc } from '../../helpers/Helpers'; import { useLazyQuery } from '@apollo/react-hooks'; import { GET_BACKUPS } from '../../graphql/query'; @@ -12,6 +8,7 @@ import { getAuthString } from '../../utils/auth'; import { toast } from 'react-toastify'; import { getErrorContent } from '../../utils/error'; import ScaleLoader from 'react-spinners/ScaleLoader'; +import { ColorButton } from '../../components/buttons/colorButton/ColorButton'; export const DownloadBackups = ({ color }: { color: string }) => { const { name, host, read, cert, sessionAdmin } = useAccount(); @@ -35,8 +32,8 @@ export const DownloadBackups = ({ color }: { color: string }) => { Backup All Channels getBackups()} > {loading ? ( diff --git a/src/views/backups/RecoverFunds.tsx b/src/views/backups/RecoverFunds.tsx index ce8d50ca..99a7c160 100644 --- a/src/views/backups/RecoverFunds.tsx +++ b/src/views/backups/RecoverFunds.tsx @@ -4,15 +4,16 @@ import { RECOVER_FUNDS } from '../../graphql/query'; import { toast } from 'react-toastify'; import { getErrorContent } from '../../utils/error'; import { - ColorButton, SingleLine, DarkSubTitle, Input, SubCard, + RightAlign, } from '../../components/generic/Styled'; import ScaleLoader from 'react-spinners/ScaleLoader'; import { XSvg, ChevronRight } from '../../components/generic/Icons'; import { SecureButton } from '../../components/buttons/secureButton/SecureButton'; +import { ColorButton } from '../../components/buttons/colorButton/ColorButton'; export const RecoverFunds = ({ color }: { color: string }) => { const [backupString, setBackupString] = useState(''); @@ -34,21 +35,23 @@ export const RecoverFunds = ({ color }: { color: string }) => { Backup String: setBackupString(e.target.value)} /> - - {loading ? ( - - ) : ( - <> - Recover - - - )} - + + + {loading ? ( + + ) : ( + <> + Recover + + + )} + + ); @@ -57,8 +60,8 @@ export const RecoverFunds = ({ color }: { color: string }) => { Recover Funds from Channels setIsPasting(prev => !prev)} > {isPasting ? : 'Recover'} diff --git a/src/views/backups/VerifyBackups.tsx b/src/views/backups/VerifyBackups.tsx index af2ecfa9..75bb66f5 100644 --- a/src/views/backups/VerifyBackups.tsx +++ b/src/views/backups/VerifyBackups.tsx @@ -6,19 +6,15 @@ import { VERIFY_BACKUPS } from '../../graphql/query'; import { toast } from 'react-toastify'; import { getErrorContent } from '../../utils/error'; import { - ColorButton, SingleLine, DarkSubTitle, Input, SubCard, + RightAlign, } from '../../components/generic/Styled'; import ScaleLoader from 'react-spinners/ScaleLoader'; import { XSvg, ChevronRight } from '../../components/generic/Icons'; -import styled from 'styled-components'; - -const RightButton = styled(ColorButton)` - margin: 0 0 0 auto; -`; +import { ColorButton } from '../../components/buttons/colorButton/ColorButton'; export const VerifyBackups = ({ color }: { color: string }) => { const [backupString, setBackupString] = useState(''); @@ -46,22 +42,25 @@ export const VerifyBackups = ({ color }: { color: string }) => { Backup String: setBackupString(e.target.value)} /> - - verifyBackup({ variables: { auth, backup: backupString } }) - } - > - {loading ? ( - - ) : ( - <> - Verify - - - )} - + + + verifyBackup({ + variables: { auth, backup: backupString }, + }) + } + > + {loading ? ( + + ) : ( + <> + Verify + + + )} + + ); @@ -70,8 +69,8 @@ export const VerifyBackups = ({ color }: { color: string }) => { Verify Channels Backup setIsPasting(prev => !prev)} > {isPasting ? : 'Verify'} diff --git a/src/views/settings/Account.tsx b/src/views/settings/Account.tsx index 55976120..63def273 100644 --- a/src/views/settings/Account.tsx +++ b/src/views/settings/Account.tsx @@ -14,7 +14,6 @@ import { useAccount } from '../../context/AccountContext'; import styled from 'styled-components'; import { getNextAvailable, getStorageSaved } from '../../utils/storage'; import { useSettings } from '../../context/SettingsContext'; -import { colorButtonBorder } from '../../styles/Themes'; import { ColorButton } from '../../components/buttons/colorButton/ColorButton'; import { XSvg } from '../../components/generic/Icons'; @@ -43,28 +42,18 @@ export const AccountSettings = () => { {willAdd && ( - setIsType('login')} - > + setIsType('login')}> Connection Details - setIsType('connect')} - > + setIsType('connect')}> LndConnect Url - setIsType('btcpay')} - > + setIsType('btcpay')}> BTCPayServer Info )} { if (willAdd) { setIsType('none'); @@ -87,7 +76,6 @@ export const AccountSettings = () => { {getStorageSaved().map((entry, index) => { return ( { const { setSettings, theme, updateCurrency } = useSettings(); @@ -19,7 +18,6 @@ export const InterfaceSettings = () => { ) => ( { localStorage.setItem(type, value);