Move Location row button styles to separate file

3 files changed, 160 insertions, 127 deletions

diff --git a/gui/src/renderer/components/select-location/CustomLists.tsx b/gui/src/renderer/components/select-location/CustomLists.tsx
index 737d66bf89..ca4638360c 100644
--- a/gui/src/renderer/components/select-location/CustomLists.tsx
+++ b/gui/src/renderer/components/select-location/CustomLists.tsx
@@ -12,7 +12,7 @@ import * as Cell from '../cell';
 import { measurements } from '../common-styles';
 import { BackAction } from '../KeyboardNavigation';
 import SimpleInput from '../SimpleInput';
-import { StyledLocationRowIcon } from './LocationRow';
+import { StyledLocationRowIcon } from './LocationRowStyles';
 import { useRelayListContext } from './RelayListContext';
 import RelayLocationList from './RelayLocationList';
 import { useScrollPositionContext } from './ScrollPositionContext';
diff --git a/gui/src/renderer/components/select-location/LocationRow.tsx b/gui/src/renderer/components/select-location/LocationRow.tsx
index 79b44d372a..f76b5d3f61 100644
--- a/gui/src/renderer/components/select-location/LocationRow.tsx
+++ b/gui/src/renderer/components/select-location/LocationRow.tsx
@@ -1,8 +1,6 @@
 import React, { useCallback, useRef } from 'react';
 import { sprintf } from 'sprintf-js';
-import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import {
   compareRelayLocation,
   compareRelayLocationGeographical,
@@ -16,11 +14,18 @@ import { useSelector } from '../../redux/store';
 import Accordion from '../Accordion';
 import * as Cell from '../cell';
 import ChevronButton from '../ChevronButton';
-import { measurements, normalText } from '../common-styles';
-import ImageView from '../ImageView';
 import RelayStatusIndicator from '../RelayStatusIndicator';
 import { AddToListDialog, DeleteConfirmDialog, EditListDialog } from './CustomListDialogs';
 import {
+  getButtonColor,
+  StyledHoverIcon,
+  StyledHoverIconButton,
+  StyledLocationRowButton,
+  StyledLocationRowContainer,
+  StyledLocationRowIcon,
+  StyledLocationRowLabel,
+} from './LocationRowStyles';
+import {
   CitySpecification,
   CountrySpecification,
   getLocationChildren,
@@ -28,110 +33,6 @@ import {
   RelaySpecification,
 } from './select-location-types';
 
-interface IButtonColorProps {
-  $backgroundColor: string;
-  $backgroundColorHover: string;
-}
-
-const buttonColor = (props: IButtonColorProps) => {
-  return {
-    backgroundColor: props.$backgroundColor,
-    '&&:not(:disabled):hover': {
-      backgroundColor: props.$backgroundColorHover,
-    },
-  };
-};
-
-export const StyledLocationRowContainer = styled(Cell.Container)({
-  display: 'flex',
-  padding: 0,
-  background: 'none',
-});
-
-export const StyledLocationRowButton = styled(Cell.Row)<IButtonColorProps & { $level: number }>(
-  buttonColor,
-  (props) => {
-    const paddingLeft = (props.$level + 1) * 16 + 2;
-
-    return {
-      display: 'flex',
-      flex: 1,
-      overflow: 'hidden',
-      border: 'none',
-      padding: `0 10px 0 ${paddingLeft}px`,
-      margin: 0,
-    };
-  },
-);
-
-export const StyledLocationRowIcon = styled.button<IButtonColorProps>(buttonColor, {
-  position: 'relative',
-  alignSelf: 'stretch',
-  paddingLeft: measurements.viewMargin,
-  paddingRight: measurements.viewMargin,
-
-  '&&::before': {
-    content: '""',
-    position: 'absolute',
-    margin: 'auto',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    height: '50%',
-    width: '1px',
-    backgroundColor: colors.darkBlue,
-  },
-});
-
-export const StyledLocationRowLabel = styled(Cell.Label)(normalText, {
-  flex: 1,
-  minWidth: 0,
-  fontWeight: 400,
-  lineHeight: '24px',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-});
-
-const StyledHoverIconButton = styled.button<IButtonColorProps & { $isLast?: boolean }>(
-  buttonColor,
-  (props) => ({
-    flex: 0,
-    display: 'none',
-    padding: '0 10px',
-    paddingRight: props.$isLast ? '17px' : '10px',
-    margin: 0,
-    border: 0,
-    height: measurements.rowMinHeight,
-    appearance: 'none',
-
-    '&&:last-child': {
-      paddingRight: '25px',
-    },
-
-    '&&:not(:disabled):hover': {
-      backgroundColor: props.$backgroundColor,
-    },
-    [`${StyledLocationRowContainer}:hover &&`]: {
-      display: 'block',
-    },
-    [`${StyledLocationRowButton}:hover ~ &&`]: {
-      backgroundColor: props.$backgroundColorHover,
-    },
-  }),
-);
-
-const StyledHoverIcon = styled(ImageView).attrs({
-  width: 18,
-  height: 18,
-  tintColor: colors.white60,
-  tintHoverColor: colors.white,
-})({
-  [`${StyledHoverIconButton}:hover &&`]: {
-    backgroundColor: colors.white,
-  },
-});
-
 interface IProps<C extends LocationSpecification> {
   source: C;
   level: number;
@@ -336,24 +237,6 @@ function LocationRow<C extends LocationSpecification>(props: IProps<C>) {
 // a lot more work than necessary
 export default React.memo(LocationRow, compareProps);
 
-export function getButtonColor(selected: boolean, level: number, disabled?: boolean) {
-  let backgroundColor = colors.blue60;
-  if (selected) {
-    backgroundColor = colors.green;
-  } else if (level === 1) {
-    backgroundColor = colors.blue40;
-  } else if (level === 2) {
-    backgroundColor = colors.blue20;
-  } else if (level === 3) {
-    backgroundColor = colors.blue10;
-  }
-
-  return {
-    $backgroundColor: backgroundColor,
-    $backgroundColorHover: selected || disabled ? backgroundColor : colors.blue80,
-  };
-}
-
 function compareProps<C extends LocationSpecification>(
   oldProps: IProps<C>,
   nextProps: IProps<C>,
diff --git a/gui/src/renderer/components/select-location/LocationRowStyles.tsx b/gui/src/renderer/components/select-location/LocationRowStyles.tsx
new file mode 100644
index 0000000000..6a159f4054
--- /dev/null
+++ b/gui/src/renderer/components/select-location/LocationRowStyles.tsx
@@ -0,0 +1,150 @@
+import styled from 'styled-components';
+import { Styles } from 'styled-components/dist/types';
+
+import { colors } from '../../../config.json';
+import * as Cell from '../cell';
+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,
+  background: 'none',
+});
+
+export const StyledLocationRowContainerWithMargin = styled(StyledLocationRowContainer)({
+  marginBottom: 1,
+});
+
+export const StyledLocationRowLabel = styled(Cell.Label)(normalText, {
+  flex: 1,
+  minWidth: 0,
+  fontWeight: 400,
+  lineHeight: '24px',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+export const StyledLocationRowButton = styled(Cell.Row)<ButtonColorProps & { $level: number }>(
+  buttonColor,
+  (props) => {
+    const paddingLeft = (props.$level + 1) * 16 + 2;
+
+    return {
+      display: 'flex',
+      flex: 1,
+      overflow: 'hidden',
+      border: 'none',
+      padding: `0 10px 0 ${paddingLeft}px`,
+      margin: 0,
+    };
+  },
+);
+
+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,
+): Styles<
+  React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+> => ({
+  flex: 0,
+  display: 'none',
+  padding: '0 10px',
+  paddingRight: props.$isLast ? '17px' : '10px',
+  margin: 0,
+  border: 0,
+  height: measurements.rowMinHeight,
+  appearance: 'none',
+
+  '&&:last-child': {
+    paddingRight: '25px',
+  },
+
+  '&&:not(:disabled):hover': {
+    backgroundColor: props.$backgroundColor,
+  },
+  [`${StyledLocationRowContainer}:hover &&`]: {
+    display: 'block',
+  },
+  [`${StyledLocationRowButton}:hover ~ &&`]: {
+    backgroundColor: props.$backgroundColorHover,
+  },
+});
+
+export const StyledHoverIconButton = styled.button<ButtonColorProps & HoverButtonProps>(
+  buttonColor,
+  hoverButton,
+);
+
+export const StyledHoverIcon = styled(ImageView).attrs({
+  width: 18,
+  height: 18,
+  tintColor: colors.white60,
+  tintHoverColor: colors.white,
+})({
+  [`${StyledHoverIconButton}:hover &&`]: {
+    backgroundColor: colors.white,
+  },
+});
+
+export const StyledHoverInfoButton = styled(InfoButton)<ButtonColorProps & HoverButtonProps>(
+  buttonColor,
+  hoverButton,
+);
+
+export function getButtonColor(selected: boolean, level: number, disabled?: boolean) {
+  let backgroundColor = colors.blue60;
+  if (selected) {
+    backgroundColor = colors.green;
+  } else if (level === 1) {
+    backgroundColor = colors.blue40;
+  } else if (level === 2) {
+    backgroundColor = colors.blue20;
+  } else if (level === 3) {
+    backgroundColor = colors.blue10;
+  }
+
+  return {
+    $backgroundColor: backgroundColor,
+    $backgroundColorHover: selected || disabled ? backgroundColor : colors.blue80,
+  };
+}