chore: more button refactors

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 = () => (
+    <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,

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

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

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<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'}

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<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'}

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 = () => {
         <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
                                     }

src/views/settings/Interface.tsx

@@ -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);