chore: button changes

This commit is contained in:
AP 2020-01-23 09:03:45 +01:00
parent be64a38d08
commit 8b7e3bae25
5 changed files with 58 additions and 79 deletions

View file

@ -101,7 +101,9 @@ export const SideSettings = ({ isOpen, setIsOpen }: SideSettingsProps) => {
localStorage.setItem(type, value);
type === 'currency' &&
updateCurrency({
currency: getNextValue(currencyArray, value),
currency: isOpen
? value
: getNextValue(currencyArray, value),
});
type === 'theme' && setSettings({ theme: value });
}}

View file

@ -16,10 +16,6 @@ import styled from 'styled-components';
const backupColor = '#ffffff';
export const FixedWidth = styled.div`
width: 200px;
`;
export const NoWrap = styled.div`
margin-right: 16px;
white-space: nowrap;

View file

@ -9,7 +9,6 @@ import { toast } from 'react-toastify';
import { getErrorContent } from '../../utils/error';
import ScaleLoader from 'react-spinners/ScaleLoader';
import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
import { FixedWidth } from './Backups';
export const DownloadBackups = ({ color }: { color: string }) => {
const { name, host, read, cert, sessionAdmin } = useAccount();
@ -31,19 +30,18 @@ export const DownloadBackups = ({ color }: { color: string }) => {
return (
<SingleLine>
<DarkSubTitle>Backup All Channels</DarkSubTitle>
<FixedWidth>
<ColorButton
withMargin={'4px 0'}
disabled={loading}
onClick={() => getBackups()}
>
{loading ? (
<ScaleLoader height={8} width={2} color={color} />
) : (
'Download'
)}
</ColorButton>
</FixedWidth>
<ColorButton
withMargin={'4px 0'}
disabled={loading}
onClick={() => getBackups()}
arrow={true}
>
{loading ? (
<ScaleLoader height={8} width={2} color={color} />
) : (
'Download'
)}
</ColorButton>
</SingleLine>
);
};

View file

@ -10,10 +10,10 @@ import {
RightAlign,
} from '../../components/generic/Styled';
import ScaleLoader from 'react-spinners/ScaleLoader';
import { XSvg, ChevronRight } from '../../components/generic/Icons';
import { XSvg } from '../../components/generic/Icons';
import { SecureButton } from '../../components/buttons/secureButton/SecureButton';
import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
import { FixedWidth, NoWrap } from './Backups';
import { NoWrap } from './Backups';
export const RecoverFunds = ({ color }: { color: string }) => {
const [backupString, setBackupString] = useState<string>('');
@ -38,23 +38,17 @@ export const RecoverFunds = ({ color }: { color: string }) => {
<Input onChange={e => setBackupString(e.target.value)} />
</SingleLine>
<RightAlign>
<FixedWidth>
<SecureButton
callback={recoverFunds}
variables={{ backup: backupString }}
color={color}
disabled={backupString === ''}
>
{loading ? (
<ScaleLoader height={8} width={2} color={color} />
) : (
<>
Recover
<ChevronRight />
</>
)}
</SecureButton>
</FixedWidth>
<SecureButton
callback={recoverFunds}
variables={{ backup: backupString }}
disabled={backupString === ''}
>
{loading ? (
<ScaleLoader height={8} width={2} color={color} />
) : (
'Recover'
)}
</SecureButton>
</RightAlign>
</>
);
@ -63,16 +57,13 @@ export const RecoverFunds = ({ color }: { color: string }) => {
<>
<SingleLine>
<DarkSubTitle>Recover Funds from Channels</DarkSubTitle>
<FixedWidth>
<ColorButton
withMargin={'4px 0'}
disabled={loading}
arrow={true}
onClick={() => setIsPasting(prev => !prev)}
>
{isPasting ? <XSvg /> : 'Recover'}
</ColorButton>
</FixedWidth>
<ColorButton
withMargin={'4px 0'}
disabled={loading}
onClick={() => setIsPasting(prev => !prev)}
>
{isPasting ? <XSvg /> : 'Recover'}
</ColorButton>
</SingleLine>
{isPasting && renderInput()}
</>

View file

@ -13,9 +13,9 @@ import {
Separation,
} from '../../components/generic/Styled';
import ScaleLoader from 'react-spinners/ScaleLoader';
import { XSvg, ChevronRight } from '../../components/generic/Icons';
import { XSvg } from '../../components/generic/Icons';
import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
import { FixedWidth, NoWrap } from './Backups';
import { NoWrap } from './Backups';
export const VerifyBackups = ({ color }: { color: string }) => {
const [backupString, setBackupString] = useState<string>('');
@ -46,25 +46,20 @@ export const VerifyBackups = ({ color }: { color: string }) => {
<Input onChange={e => setBackupString(e.target.value)} />
</SingleLine>
<RightAlign>
<FixedWidth>
<ColorButton
disabled={backupString === ''}
onClick={() =>
verifyBackup({
variables: { auth, backup: backupString },
})
}
>
{loading ? (
<ScaleLoader height={8} width={2} color={color} />
) : (
<>
Verify
<ChevronRight />
</>
)}
</ColorButton>
</FixedWidth>
<ColorButton
disabled={backupString === ''}
onClick={() =>
verifyBackup({
variables: { auth, backup: backupString },
})
}
>
{loading ? (
<ScaleLoader height={8} width={2} color={color} />
) : (
'Verify'
)}
</ColorButton>
</RightAlign>
<Separation />
</>
@ -74,16 +69,13 @@ export const VerifyBackups = ({ color }: { color: string }) => {
<>
<SingleLine>
<DarkSubTitle>Verify Channels Backup</DarkSubTitle>
<FixedWidth>
<ColorButton
withMargin={'4px 0'}
disabled={loading}
arrow={true}
onClick={() => setIsPasting(prev => !prev)}
>
{isPasting ? <XSvg /> : 'Verify'}
</ColorButton>
</FixedWidth>
<ColorButton
withMargin={'4px 0'}
disabled={loading}
onClick={() => setIsPasting(prev => !prev)}
>
{isPasting ? <XSvg /> : 'Verify'}
</ColorButton>
</SingleLine>
{isPasting && renderInput()}
</>