From 8b7e3bae255201c1d0cc8976fcc4f9fc68590bfd Mon Sep 17 00:00:00 2001
From: AP <potdevin.anthony@gmail.com>
Date: Thu, 23 Jan 2020 09:03:45 +0100
Subject: [PATCH] chore: button changes

---
 .../navigation/sideSettings/SideSettings.tsx  |  4 +-
 src/views/backups/Backups.tsx                 |  4 --
 src/views/backups/DownloadBackups.tsx         | 26 +++++----
 src/views/backups/RecoverFunds.tsx            | 49 +++++++----------
 src/views/backups/VerifyBackups.tsx           | 54 ++++++++-----------
 5 files changed, 58 insertions(+), 79 deletions(-)

diff --git a/src/sections/navigation/sideSettings/SideSettings.tsx b/src/sections/navigation/sideSettings/SideSettings.tsx
index b42b3252..859ef2e9 100644
--- a/src/sections/navigation/sideSettings/SideSettings.tsx
+++ b/src/sections/navigation/sideSettings/SideSettings.tsx
@@ -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 });
             }}
diff --git a/src/views/backups/Backups.tsx b/src/views/backups/Backups.tsx
index 92c0b7de..edc45268 100644
--- a/src/views/backups/Backups.tsx
+++ b/src/views/backups/Backups.tsx
@@ -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;
diff --git a/src/views/backups/DownloadBackups.tsx b/src/views/backups/DownloadBackups.tsx
index b927b3ed..28981dae 100644
--- a/src/views/backups/DownloadBackups.tsx
+++ b/src/views/backups/DownloadBackups.tsx
@@ -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>
     );
 };
diff --git a/src/views/backups/RecoverFunds.tsx b/src/views/backups/RecoverFunds.tsx
index 75c284ce..18f59228 100644
--- a/src/views/backups/RecoverFunds.tsx
+++ b/src/views/backups/RecoverFunds.tsx
@@ -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()}
         </>
diff --git a/src/views/backups/VerifyBackups.tsx b/src/views/backups/VerifyBackups.tsx
index d05f1440..bede3d72 100644
--- a/src/views/backups/VerifyBackups.tsx
+++ b/src/views/backups/VerifyBackups.tsx
@@ -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()}
         </>