mirror of
https://github.com/apotdevin/thunderhub.git
synced 2025-02-22 14:22:33 +01:00
chore: button changes
This commit is contained in:
parent
be64a38d08
commit
8b7e3bae25
5 changed files with 58 additions and 79 deletions
|
@ -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 });
|
||||
}}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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()}
|
||||
</>
|
||||
|
|
|
@ -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()}
|
||||
</>
|
||||
|
|
Loading…
Add table
Reference in a new issue