mirrors/thunderhub
1
0
Fork 0
mirror of https://github.com/apotdevin/thunderhub.git synced 2025-02-22 22:25:21 +01:00
Code Issues Projects Releases Wiki Activity

chore: more button refactors

Browse source
This commit is contained in:
AnthonyPotdevin 2020-01-19 23:27:28 +01:00
parent 1f2d4d758c
commit 1173d3f259
7 changed files with 64 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/buttons/colorButton/ColorButton.tsx
View file

@ -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 = () => (
<StyledArrow>
<ChevronRight size={'18px'} />
</StyledArrow>
);
interface ColorButtonProps {
color?: string;
disabled?: boolean;
@ -79,12 +88,6 @@ interface ColorButtonProps {
withMargin?: string;
}
const renderArrow = () => (
<StyledArrow>
<ChevronRight size={'18px'} />
</StyledArrow>
);
export const ColorButton = ({
color,
disabled,

13
src/styles/Themes.ts
View file

@ -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', {

9
src/views/backups/DownloadBackups.tsx
View file

@ -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 }) => {
<DarkSubTitle>Backup All Channels</DarkSubTitle>
<ColorButton
withMargin={'4px 0'}
disabled={loading}
color={color}
onClick={() => getBackups()}
>
{loading ? (

37
src/views/backups/RecoverFunds.tsx
View file

@ -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<string>('');
@ -34,21 +35,23 @@ export const RecoverFunds = ({ color }: { color: string }) => {
<DarkSubTitle>Backup String: </DarkSubTitle>
<Input onChange={e => setBackupString(e.target.value)} />
</SingleLine>
<SecureButton
callback={recoverFunds}
variables={{ backup: backupString }}
color={color}
disabled={backupString === ''}
>
{loading ? (
<ScaleLoader height={8} width={2} color={color} />
) : (
<>
Recover
<ChevronRight />
</>
)}
</SecureButton>
<RightAlign>
<SecureButton
callback={recoverFunds}
variables={{ backup: backupString }}
color={color}
disabled={backupString === ''}
>
{loading ? (
<ScaleLoader height={8} width={2} color={color} />
) : (
<>
Recover
<ChevronRight />
</>
)}
</SecureButton>
</RightAlign>
</SubCard>
);
@ -57,8 +60,8 @@ export const RecoverFunds = ({ color }: { color: string }) => {
<SingleLine>
<DarkSubTitle>Recover Funds from Channels</DarkSubTitle>
<ColorButton
withMargin={'4px 0'}
disabled={loading}
color={color}
onClick={() => setIsPasting(prev => !prev)}
>
{isPasting ? <XSvg /> : 'Recover'}

45
src/views/backups/VerifyBackups.tsx
View file

@ -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<string>('');
@ -46,22 +42,25 @@ export const VerifyBackups = ({ color }: { color: string }) => {
<DarkSubTitle>Backup String: </DarkSubTitle>
<Input onChange={e => setBackupString(e.target.value)} />
</SingleLine>
<RightButton
disabled={backupString === ''}
color={color}
onClick={() =>
verifyBackup({ variables: { auth, backup: backupString } })
}
>
{loading ? (
<ScaleLoader height={8} width={2} color={color} />
) : (
<>
Verify
<ChevronRight />
</>
)}
</RightButton>
<RightAlign>
<ColorButton
disabled={backupString === ''}
onClick={() =>
verifyBackup({
variables: { auth, backup: backupString },
})
}
>
{loading ? (
<ScaleLoader height={8} width={2} color={color} />
) : (
<>
Verify
<ChevronRight />
</>
)}
</ColorButton>
</RightAlign>
</SubCard>
);
@ -70,8 +69,8 @@ export const VerifyBackups = ({ color }: { color: string }) => {
<SingleLine>
<DarkSubTitle>Verify Channels Backup</DarkSubTitle>
<ColorButton
withMargin={'4px 0'}
disabled={loading}
color={color}
onClick={() => setIsPasting(prev => !prev)}
>
{isPasting ? <XSvg /> : 'Verify'}

18
src/views/settings/Account.tsx
View file

@ -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 = () => {
<SingleLine>
{willAdd && (
<RightAlign>
<ColorButton
color={colorButtonBorder[theme]}
onClick={() => setIsType('login')}
>
<ColorButton onClick={() => setIsType('login')}>
Connection Details
</ColorButton>
<ColorButton
color={colorButtonBorder[theme]}
onClick={() => setIsType('connect')}
>
<ColorButton onClick={() => setIsType('connect')}>
LndConnect Url
</ColorButton>
<ColorButton
color={colorButtonBorder[theme]}
onClick={() => setIsType('btcpay')}
>
<ColorButton onClick={() => setIsType('btcpay')}>
BTCPayServer Info
</ColorButton>
</RightAlign>
)}
<ColorButton
color={colorButtonBorder[theme]}
onClick={() => {
if (willAdd) {
setIsType('none');
@ -87,7 +76,6 @@ export const AccountSettings = () => {
{getStorageSaved().map((entry, index) => {
return (
<ColorButton
color={colorButtonBorder[theme]}
selected={
name.localeCompare(entry.name) === 0
}

2
src/views/settings/Interface.tsx
View file

@ -4,7 +4,6 @@ import { SettingsLine, ButtonRow } from './Settings';
import { useSettings } from '../../context/SettingsContext';
import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
import { colorButtonBorder } from '../../styles/Themes';
export const InterfaceSettings = () => {
const { setSettings, theme, updateCurrency } = useSettings();
@ -19,7 +18,6 @@ export const InterfaceSettings = () => {
) => (
<ColorButton
withMargin={'0 0 0 8px'}
color={colorButtonBorder[theme]}
selected={current === value}
onClick={() => {
localStorage.setItem(type, value);