Add reusable cell side button component

7 files changed, 50 insertions, 46 deletions

diff --git a/gui/src/renderer/components/cell/SideButton.tsx b/gui/src/renderer/components/cell/SideButton.tsx
new file mode 100644
index 0000000000..6c30922b5f
--- /dev/null
+++ b/gui/src/renderer/components/cell/SideButton.tsx
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+import { colors } from '../../../config.json';
+import { measurements } from '../common-styles';
+import { buttonColor, ButtonColors } from './styles';
+
+export const SideButton = styled.button<ButtonColors>(buttonColor, {
+  position: 'relative',
+  alignSelf: 'stretch',
+  paddingLeft: measurements.viewMargin,
+  paddingRight: measurements.viewMargin,
+  border: 0,
+
+  '&&::before': {
+    content: '""',
+    position: 'absolute',
+    margin: 'auto',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    height: '50%',
+    width: '1px',
+    backgroundColor: colors.darkBlue,
+  },
+});
diff --git a/gui/src/renderer/components/cell/index.ts b/gui/src/renderer/components/cell/index.ts
index 4e98c9ef3d..2bbd56167a 100644
--- a/gui/src/renderer/components/cell/index.ts
+++ b/gui/src/renderer/components/cell/index.ts
@@ -6,3 +6,4 @@ export * from './Label';
 export * from './Section';
 export * from './Group';
 export * from './Row';
+export * from './SideButton';
diff --git a/gui/src/renderer/components/cell/styles.ts b/gui/src/renderer/components/cell/styles.ts
new file mode 100644
index 0000000000..a2d20b03f6
--- /dev/null
+++ b/gui/src/renderer/components/cell/styles.ts
@@ -0,0 +1,13 @@
+export interface ButtonColors {
+  $backgroundColor: string;
+  $backgroundColorHover: string;
+}
+
+export const buttonColor = (props: ButtonColors) => {
+  return {
+    backgroundColor: props.$backgroundColor,
+    '&&:not(:disabled):hover': {
+      backgroundColor: props.$backgroundColorHover,
+    },
+  };
+};
diff --git a/gui/src/renderer/components/select-location/CustomLists.tsx b/gui/src/renderer/components/select-location/CustomLists.tsx
index f335f7ae87..1cbb692b1b 100644
--- a/gui/src/renderer/components/select-location/CustomLists.tsx
+++ b/gui/src/renderer/components/select-location/CustomLists.tsx
@@ -12,7 +12,6 @@ import * as Cell from '../cell';
 import { measurements } from '../common-styles';
 import { BackAction } from '../KeyboardNavigation';
 import SimpleInput from '../SimpleInput';
-import { StyledLocationRowIcon } from './LocationRowStyles';
 import { useRelayListContext } from './RelayListContext';
 import RelayLocationList from './RelayLocationList';
 import { useScrollPositionContext } from './ScrollPositionContext';
@@ -42,7 +41,7 @@ const StyledHeaderLabel = styled(Cell.Label)({
   lineHeight: measurements.rowMinHeight,
 });
 
-const StyledCellButton = styled(StyledLocationRowIcon)({
+const StyledCellButton = styled(Cell.SideButton)({
   border: 'none',
 });
 
diff --git a/gui/src/renderer/components/select-location/LocationRow.tsx b/gui/src/renderer/components/select-location/LocationRow.tsx
index f76b5d3f61..41f3aa7152 100644
--- a/gui/src/renderer/components/select-location/LocationRow.tsx
+++ b/gui/src/renderer/components/select-location/LocationRow.tsx
@@ -22,7 +22,6 @@ import {
   StyledHoverIconButton,
   StyledLocationRowButton,
   StyledLocationRowContainer,
-  StyledLocationRowIcon,
   StyledLocationRowLabel,
 } from './LocationRowStyles';
 import {
@@ -183,7 +182,7 @@ function LocationRow<C extends LocationSpecification>(props: IProps<C>) {
 
         {hasChildren ||
         ('customList' in props.source.location && !('country' in props.source.location)) ? (
-          <StyledLocationRowIcon
+          <Cell.SideButton
             as={ChevronButton}
             onClick={toggleCollapse}
             disabled={!hasChildren}
diff --git a/gui/src/renderer/components/select-location/LocationRowStyles.tsx b/gui/src/renderer/components/select-location/LocationRowStyles.tsx
index 6a159f4054..58e9ba9606 100644
--- a/gui/src/renderer/components/select-location/LocationRowStyles.tsx
+++ b/gui/src/renderer/components/select-location/LocationRowStyles.tsx
@@ -3,24 +3,11 @@ import { Styles } from 'styled-components/dist/types';
 
 import { colors } from '../../../config.json';
 import * as Cell from '../cell';
+import { buttonColor, ButtonColors } from '../cell/styles';
 import { measurements, normalText } from '../common-styles';
 import ImageView from '../ImageView';
 import InfoButton from '../InfoButton';
 
-interface ButtonColorProps {
-  $backgroundColor: string;
-  $backgroundColorHover: string;
-}
-
-export const buttonColor = (props: ButtonColorProps) => {
-  return {
-    backgroundColor: props.$backgroundColor,
-    '&&:not(:disabled):hover': {
-      backgroundColor: props.$backgroundColorHover,
-    },
-  };
-};
-
 export const StyledLocationRowContainer = styled(Cell.Container)({
   display: 'flex',
   padding: 0,
@@ -41,7 +28,7 @@ export const StyledLocationRowLabel = styled(Cell.Label)(normalText, {
   whiteSpace: 'nowrap',
 });
 
-export const StyledLocationRowButton = styled(Cell.Row)<ButtonColorProps & { $level: number }>(
+export const StyledLocationRowButton = styled(Cell.Row)<ButtonColors & { $level: number }>(
   buttonColor,
   (props) => {
     const paddingLeft = (props.$level + 1) * 16 + 2;
@@ -57,32 +44,12 @@ export const StyledLocationRowButton = styled(Cell.Row)<ButtonColorProps & { $le
   },
 );
 
-export const StyledLocationRowIcon = styled.button<ButtonColorProps>(buttonColor, {
-  position: 'relative',
-  alignSelf: 'stretch',
-  paddingLeft: measurements.viewMargin,
-  paddingRight: measurements.viewMargin,
-  border: 0,
-
-  '&&::before': {
-    content: '""',
-    position: 'absolute',
-    margin: 'auto',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    height: '50%',
-    width: '1px',
-    backgroundColor: colors.darkBlue,
-  },
-});
-
 interface HoverButtonProps {
   $isLast?: boolean;
 }
 
 const hoverButton = (
-  props: ButtonColorProps & HoverButtonProps,
+  props: ButtonColors & HoverButtonProps,
 ): Styles<
   React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
 > => ({
@@ -110,7 +77,7 @@ const hoverButton = (
   },
 });
 
-export const StyledHoverIconButton = styled.button<ButtonColorProps & HoverButtonProps>(
+export const StyledHoverIconButton = styled.button<ButtonColors & HoverButtonProps>(
   buttonColor,
   hoverButton,
 );
@@ -126,7 +93,7 @@ export const StyledHoverIcon = styled(ImageView).attrs({
   },
 });
 
-export const StyledHoverInfoButton = styled(InfoButton)<ButtonColorProps & HoverButtonProps>(
+export const StyledHoverInfoButton = styled(InfoButton)<ButtonColors & HoverButtonProps>(
   buttonColor,
   hoverButton,
 );
diff --git a/gui/src/renderer/components/select-location/SpecialLocationList.tsx b/gui/src/renderer/components/select-location/SpecialLocationList.tsx
index a347638b0e..f4ccf13ec2 100644
--- a/gui/src/renderer/components/select-location/SpecialLocationList.tsx
+++ b/gui/src/renderer/components/select-location/SpecialLocationList.tsx
@@ -6,6 +6,7 @@ import { messages } from '../../../shared/gettext';
 import { useHistory } from '../../lib/history';
 import { RoutePath } from '../../lib/routes';
 import { useSelector } from '../../redux/store';
+import * as Cell from '../cell';
 import ImageView from '../ImageView';
 import InfoButton from '../InfoButton';
 import { SpecialLocationIndicator } from '../RelayStatusIndicator';
@@ -14,7 +15,6 @@ import {
   StyledHoverInfoButton,
   StyledLocationRowButton,
   StyledLocationRowContainerWithMargin,
-  StyledLocationRowIcon,
   StyledLocationRowLabel,
 } from './LocationRowStyles';
 import { SpecialBridgeLocationType, SpecialLocation } from './select-location-types';
@@ -74,7 +74,7 @@ export function AutomaticLocationRow(
         <SpecialLocationIndicator />
         <StyledLocationRowLabel>{props.source.label}</StyledLocationRowLabel>
       </StyledLocationRowButton>
-      <StyledLocationRowIcon
+      <Cell.SideButton
         as={StyledSpecialLocationInfoButton}
         title={messages.gettext('Automatic')}
         message={messages.pgettext(
@@ -136,7 +136,7 @@ export function CustomBridgeLocationRow(
           'A custom bridge server can be used to circumvent censorship when regular Mullvad bridge servers don’t work.',
         )}
       />
-      <StyledLocationRowIcon
+      <Cell.SideButton
         {...background}
         aria-label={
           bridgeConfigured
@@ -150,7 +150,7 @@ export function CustomBridgeLocationRow(
           tintColor={colors.white}
           tintHoverColor={colors.white80}
         />
-      </StyledLocationRowIcon>
+      </Cell.SideButton>
     </StyledLocationRowContainerWithMargin>
   );
 }