Use common definition for row height

11 files changed, 42 insertions, 33 deletions

diff --git a/gui/src/renderer/components/Filter.tsx b/gui/src/renderer/components/Filter.tsx
index 5c2e7e0f55..710e7dd2dc 100644
--- a/gui/src/renderer/components/Filter.tsx
+++ b/gui/src/renderer/components/Filter.tsx
@@ -281,14 +281,6 @@ interface IStyledRowTitleProps {
   bold?: boolean;
 }
 
-const StyledRow = styled.div({
-  display: 'flex',
-  height: '44px',
-  alignItems: 'center',
-  padding: '0 22px',
-  backgroundColor: colors.blue,
-});
-
 const StyledCheckbox = styled.div({
   width: '24px',
   height: '24px',
@@ -299,6 +291,13 @@ const StyledCheckbox = styled.div({
   borderRadius: '4px',
 });
 
+const StyledRow = styled(Cell.Row)({
+  backgroundColor: colors.blue40,
+  ':hover': {
+    backgroundColor: colors.blue80,
+  },
+});
+
 const StyledRowTitle = styled.label(normalText, (props: IStyledRowTitleProps) => ({
   fontWeight: props.bold ? 600 : 400,
   color: colors.white,
diff --git a/gui/src/renderer/components/List.tsx b/gui/src/renderer/components/List.tsx
index 2915a95c1b..3d1bd99478 100644
--- a/gui/src/renderer/components/List.tsx
+++ b/gui/src/renderer/components/List.tsx
@@ -7,7 +7,6 @@ import Accordion from './Accordion';
 export const stringValueAsKey = (value: string): string => value;
 
 const StyledListItem = styled.div({
-  marginBottom: '1px',
   display: 'flex',
   flex: 1,
   flexDirection: 'column',
diff --git a/gui/src/renderer/components/LocationRow.tsx b/gui/src/renderer/components/LocationRow.tsx
index 4e083328c5..630ae68531 100644
--- a/gui/src/renderer/components/LocationRow.tsx
+++ b/gui/src/renderer/components/LocationRow.tsx
@@ -50,7 +50,7 @@ export const StyledLocationRowContainer = styled(Cell.Container)({
   background: 'none',
 });
 
-export const StyledLocationRowButton = styled.button(
+export const StyledLocationRowButton = styled(Cell.Row)(
   buttonColor,
   (props: { location?: RelayLocation }) => {
     const paddingLeft =
@@ -61,9 +61,6 @@ export const StyledLocationRowButton = styled.button(
         : 18;
 
     return {
-      display: 'flex',
-      alignItems: 'center',
-      minHeight: '44px',
       flex: 1,
       border: 'none',
       padding: `0 10px 0 ${paddingLeft}px`,
@@ -136,6 +133,7 @@ function LocationRow(props: IProps, ref: React.Ref<HTMLDivElement>) {
     <>
       <StyledLocationRowContainer ref={ref} disabled={props.disabled}>
         <StyledLocationRowButton
+          as="button"
           ref={buttonRef}
           onClick={handleClick}
           selected={props.selected}
diff --git a/gui/src/renderer/components/cell/CellButton.tsx b/gui/src/renderer/components/cell/CellButton.tsx
index e8d1c1c649..0111574f70 100644
--- a/gui/src/renderer/components/cell/CellButton.tsx
+++ b/gui/src/renderer/components/cell/CellButton.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { colors } from '../../../config.json';
 import { CellDisabledContext } from './Container';
 import { Icon } from './Label';
+import { Row } from './Row';
 import { CellSectionContext } from './Section';
 
 interface IStyledCellButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
@@ -11,7 +12,7 @@ interface IStyledCellButtonProps extends React.HTMLAttributes<HTMLButtonElement>
   containedInSection: boolean;
 }
 
-const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps) => {
+const StyledCellButton = styled(Row)({}, (props: IStyledCellButtonProps) => {
   const backgroundColor = props.selected
     ? colors.green
     : props.containedInSection
@@ -20,11 +21,8 @@ const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps) => {
   const backgroundColorHover = props.selected ? colors.green : colors.blue80;
 
   return {
-    display: 'flex',
-    minHeight: '44px',
-    padding: '0 16px 0 22px',
+    paddingRight: '16px',
     flex: 1,
-    alignItems: 'center',
     alignContent: 'center',
     cursor: 'default',
     border: 'none',
@@ -44,7 +42,12 @@ export const CellButton = styled(
     const containedInSection = useContext(CellSectionContext);
     return (
       <CellDisabledContext.Provider value={props.disabled ?? false}>
-        <StyledCellButton ref={ref} containedInSection={containedInSection} {...props} />
+        <StyledCellButton
+          as="button"
+          ref={ref}
+          containedInSection={containedInSection}
+          {...props}
+        />
       </CellDisabledContext.Provider>
     );
   }),
diff --git a/gui/src/renderer/components/cell/Container.tsx b/gui/src/renderer/components/cell/Container.tsx
index 6a2ef108c6..e35babf790 100644
--- a/gui/src/renderer/components/cell/Container.tsx
+++ b/gui/src/renderer/components/cell/Container.tsx
@@ -1,13 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
+import { Row } from './Row';
 
-const StyledContainer = styled.div({
-  display: 'flex',
-  backgroundColor: colors.blue,
-  alignItems: 'center',
-  paddingLeft: '22px',
+const StyledContainer = styled(Row)({
   paddingRight: '16px',
 });
 
diff --git a/gui/src/renderer/components/cell/Group.tsx b/gui/src/renderer/components/cell/Group.tsx
index c167b2d525..0574d481f5 100644
--- a/gui/src/renderer/components/cell/Group.tsx
+++ b/gui/src/renderer/components/cell/Group.tsx
@@ -16,7 +16,6 @@ const StyledCellWrapper = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-  marginBottom: '1px',
 });
 
 interface IGroupProps extends IStyledGroupProps {
diff --git a/gui/src/renderer/components/cell/Row.tsx b/gui/src/renderer/components/cell/Row.tsx
new file mode 100644
index 0000000000..ca8cc306f8
--- /dev/null
+++ b/gui/src/renderer/components/cell/Row.tsx
@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+import { colors } from '../../../config.json';
+import { measurements } from '../common-styles';
+
+export const Row = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  backgroundColor: colors.blue,
+  minHeight: measurements.rowMinHeight,
+  paddingLeft: '22px',
+  paddingRight: '22px',
+  marginBottom: '1px',
+});
diff --git a/gui/src/renderer/components/cell/Section.tsx b/gui/src/renderer/components/cell/Section.tsx
index 83c179d3cc..38df17ebdb 100644
--- a/gui/src/renderer/components/cell/Section.tsx
+++ b/gui/src/renderer/components/cell/Section.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { colors } from '../../../config.json';
 import { buttonText, openSans, sourceSansPro } from '../common-styles';
+import { Row } from './Row';
 
 const StyledSection = styled.div({
   display: 'flex',
@@ -14,12 +15,8 @@ interface SectionTitleProps {
   thin?: boolean;
 }
 
-export const SectionTitle = styled.span(buttonText, (props: SectionTitleProps) => ({
-  display: 'flex',
-  minHeight: '44px',
-  alignItems: 'center',
-  backgroundColor: colors.blue,
-  padding: '0 16px 0 22px',
+export const SectionTitle = styled(Row)(buttonText, (props: SectionTitleProps) => ({
+  paddingRight: '16px',
   color: props.disabled ? colors.white20 : colors.white,
   fontWeight: props.thin ? 400 : 600,
   fontSize: props.thin ? '15px' : '18px',
diff --git a/gui/src/renderer/components/cell/Selector.tsx b/gui/src/renderer/components/cell/Selector.tsx
index d898e3f51d..8020565ca4 100644
--- a/gui/src/renderer/components/cell/Selector.tsx
+++ b/gui/src/renderer/components/cell/Selector.tsx
@@ -172,7 +172,6 @@ interface StyledCustomContainerProps {
 }
 
 const StyledCustomContainer = styled(Cell.Container)((props: StyledCustomContainerProps) => ({
-  minHeight: '44px',
   backgroundColor: props.selected ? colors.green : colors.blue40,
   ':hover': {
     backgroundColor: props.selected ? colors.green : colors.blue,
diff --git a/gui/src/renderer/components/cell/index.ts b/gui/src/renderer/components/cell/index.ts
index cc510e5b22..4e98c9ef3d 100644
--- a/gui/src/renderer/components/cell/index.ts
+++ b/gui/src/renderer/components/cell/index.ts
@@ -5,3 +5,4 @@ export * from './Input';
 export * from './Label';
 export * from './Section';
 export * from './Group';
+export * from './Row';
diff --git a/gui/src/renderer/components/common-styles.ts b/gui/src/renderer/components/common-styles.ts
index 641048d72d..7713f04d94 100644
--- a/gui/src/renderer/components/common-styles.ts
+++ b/gui/src/renderer/components/common-styles.ts
@@ -57,3 +57,7 @@ export const hugeText = {
   lineHeight: '34px',
   color: colors.white,
 };
+
+export const measurements = {
+  rowMinHeight: '44px',
+};