chore: more button changes

src/components/buttons/colorButton/ColorButton.tsx

@@ -5,7 +5,6 @@ import {
     colorButtonBackground,
     disabledButtonBackground,
     disabledButtonBorder,
-    colorButtonSelectedBorder,
     inverseTextColor,
     colorButtonBorder,
 } from '../../../styles/Themes';
@@ -31,29 +30,30 @@ const StyledArrow = styled.div`
 
 interface BorderProps {
     borderColor?: string;
-    withHover?: boolean;
     selected?: boolean;
     withMargin?: string;
+    withBorder?: boolean;
 }
 
 const BorderButton = styled(GeneralButton)`
     margin: ${({ withMargin }) => (withMargin ? withMargin : '0')};
     ${({ selected }) => selected && `cursor: default`};
     ${({ selected }) => selected && `font-weight: 900`};
-    border: none;
     background-color: ${colorButtonBackground};
     color: ${textColor};
     border: 1px solid
-        ${({ borderColor, withHover, selected }: BorderProps) =>
-            (borderColor && !withHover) || selected
-                ? selected
-                    ? colorButtonSelectedBorder
-                    : borderColor
+        ${({ borderColor, selected, withBorder }: BorderProps) =>
+            withBorder
+                ? borderColor
+                    ? borderColor
+                    : colorButtonBorder
+                : selected
+                ? colorButtonBorder
                 : colorButtonBackground};
 
     &:hover {
-        ${({ borderColor, withHover, selected }: BorderProps) =>
-            withHover && !selected
+        ${({ borderColor, selected }: BorderProps) =>
+            !selected
                 ? css`
                       border: 1px solid ${colorButtonBackground};
                       background-color: ${borderColor
@@ -85,9 +85,9 @@ interface ColorButtonProps {
     children?: any;
     selected?: boolean;
     arrow?: boolean;
-    withHover?: boolean;
     onClick?: any;
     withMargin?: string;
+    withBorder?: boolean;
 }
 
 export const ColorButton = ({
@@ -96,8 +96,8 @@ export const ColorButton = ({
     children,
     selected,
     arrow,
-    withHover = true,
     withMargin,
+    withBorder,
     onClick,
 }: ColorButtonProps) => {
     if (disabled) {
@@ -112,10 +112,10 @@ export const ColorButton = ({
     return (
         <BorderButton
             borderColor={color}
-            withHover={withHover}
             selected={selected}
             onClick={onClick}
             withMargin={withMargin}
+            withBorder={withBorder}
         >
             {children}
             {arrow && renderArrow()}

src/components/closeChannel/CloseChannel.tsx

@@ -9,7 +9,6 @@ import {
     SubTitle,
     NoWrapTitle,
     Sub4Title,
-    ColorButton,
 } from '../generic/Styled';
 import { Circle, AlertTriangle } from '../generic/Icons';
 import styled from 'styled-components';
@@ -19,6 +18,7 @@ import { getErrorContent } from '../../utils/error';
 import { GET_BITCOIN_FEES } from '../../graphql/query';
 import { useSettings } from '../../context/SettingsContext';
 import { SecureButton } from '../buttons/secureButton/SecureButton';
+import { ColorButton } from '../buttons/colorButton/ColorButton';
 
 interface CloseChannelProps {
     setModalOpen: (status: boolean) => void;
@@ -118,7 +118,7 @@ export const CloseChannel = ({
         text: string,
         selected: boolean,
     ) => (
-        <ColorButton color={textColorMap[theme]} onClick={onClick}>
+        <ColorButton onClick={onClick} withMargin={'4px'} withBorder={true}>
             <Circle
                 size={'10px'}
                 fillcolor={selected ? textColorMap[theme] : ''}
@@ -152,9 +152,9 @@ export const CloseChannel = ({
                         Close Channel
                     </SecureButton>
                 </div>
-                <Button color={'green'} onClick={handleOnlyClose}>
+                <ColorButton color={'green'} onClick={handleOnlyClose}>
                     Cancel
-                </Button>
+                </ColorButton>
             </SingleLine>
         </WarningCard>
     );
@@ -217,7 +217,6 @@ export const CloseChannel = ({
                             : 'Fee (Sats/Byte)'}
                     </NoWrapTitle>
                     <SmallInput
-                        color={textColorMap[theme]}
                         min={1}
                         type={'number'}
                         onChange={e => setAmount(parseInt(e.target.value))}
@@ -233,12 +232,22 @@ export const CloseChannel = ({
             </SingleLine>
             <Separation />
             <CenterLine>
-                <Button color={'red'} onClick={() => setIsConfirmed(true)}>
-                    Close Channel
-                </Button>
-                <Button color={textColorMap[theme]} onClick={handleOnlyClose}>
+                <ColorButton
+                    withMargin={'4px'}
+                    withBorder={true}
+                    onClick={handleOnlyClose}
+                >
                     Cancel
-                </Button>
+                </ColorButton>
+                <ColorButton
+                    arrow={true}
+                    withMargin={'4px'}
+                    withBorder={true}
+                    color={'red'}
+                    onClick={() => setIsConfirmed(true)}
+                >
+                    Close Channel
+                </ColorButton>
             </CenterLine>
         </>
     );

src/styles/Themes.ts

@@ -36,11 +36,6 @@ export const colorButtonBorder = theme('mode', {
     dark: '#6E7ACC',
 });
 
-export const colorButtonSelectedBorder = theme('mode', {
-    light: '#99BAFF',
-    dark: '#6E7ACC',
-});
-
 export const disabledButtonBackground = theme('mode', {
     light: '#f5f5f5',
     dark: 'rgba(0,0,0,0.4)',

src/views/channels/channels/ChannelCard.tsx

@@ -12,8 +12,8 @@ import {
     SubCard,
     Separation,
     Sub4Title,
-    ColorButton,
     SingleLine,
+    RightAlign,
 } from '../../../components/generic/Styled';
 import { useSettings } from '../../../context/SettingsContext';
 import {
@@ -32,10 +32,7 @@ import { CloseChannel } from '../../../components/closeChannel/CloseChannel';
 import styled from 'styled-components';
 import { AdminSwitch } from '../../../components/adminSwitch/AdminSwitch';
 import { DownArrow, UpArrow, EyeOff } from '../../../components/generic/Icons';
-
-const CloseButton = styled(ColorButton)`
-    margin-left: auto;
-`;
+import { ColorButton } from '../../../components/buttons/colorButton/ColorButton';
 
 const IconPadding = styled.div`
     margin-left: 16px;
@@ -160,12 +157,16 @@ export const ChannelCard = ({
                 )}
                 <AdminSwitch>
                     <Separation />
-                    <CloseButton
-                        color={'red'}
-                        onClick={() => setModalOpen(true)}
-                    >
-                        Close Channel
-                    </CloseButton>
+                    <RightAlign>
+                        <ColorButton
+                            withBorder={true}
+                            // color={'red'}
+                            arrow={true}
+                            onClick={() => setModalOpen(true)}
+                        >
+                            Close Channel
+                        </ColorButton>
+                    </RightAlign>
                 </AdminSwitch>
             </>
         );