Move Cell components to dedicated directory

23 files changed, 251 insertions, 247 deletions

diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index a34b5b499c..239b5206cd 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -16,7 +16,7 @@ import {
 } from './AdvancedSettingsStyles';
 import * as AppButton from './AppButton';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
-import * as Cell from './Cell';
+import * as Cell from './cell';
 import { Layout } from './Layout';
 import { ModalAlert, ModalAlertType, ModalContainer, ModalMessage } from './Modal';
 import {
@@ -26,7 +26,7 @@ import {
   NavigationItems,
   TitleBarItem,
 } from './NavigationBar';
-import Selector, { ISelectorItem } from './Selector';
+import Selector, { ISelectorItem } from './cell/Selector';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
 const MIN_MSSFIX_VALUE = 1000;
diff --git a/gui/src/renderer/components/AdvancedSettingsStyles.tsx b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
index f9bd6db82b..0bccc7c158 100644
--- a/gui/src/renderer/components/AdvancedSettingsStyles.tsx
+++ b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 import { colors } from '../../config.json';
-import * as Cell from './Cell';
+import * as Cell from './cell';
 import { Container } from './Layout';
 import { NavigationScrollbars } from './NavigationBar';
-import Selector from './Selector';
+import Selector from './cell/Selector';
 
 export const StyledContainer = styled(Container)({
   backgroundColor: colors.darkBlue,
diff --git a/gui/src/renderer/components/CellStyles.tsx b/gui/src/renderer/components/CellStyles.tsx
deleted file mode 100644
index 2bbfd5b928..0000000000
--- a/gui/src/renderer/components/CellStyles.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { colors } from '../../config.json';
-import { buttonText, mediumText, smallText } from './common-styles';
-import ImageView, { IImageViewProps } from './ImageView';
-
-export const StyledContainer = styled.div({
-  display: 'flex',
-  backgroundColor: colors.blue,
-  alignItems: 'center',
-  paddingLeft: '22px',
-  paddingRight: '16px',
-});
-
-export const StyledSection = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-export const StyledSectionTitle = styled.span(buttonText, {
-  backgroundColor: colors.blue,
-  padding: '14px 16px 14px 22px',
-  marginBottom: '1px',
-});
-
-interface IStyledCellButtonProps {
-  selected?: boolean;
-  containedInSection: boolean;
-}
-
-export const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps) => ({
-  display: 'flex',
-  padding: '0 16px 0 22px',
-  marginBottom: '1px',
-  flex: 1,
-  alignItems: 'center',
-  alignContent: 'center',
-  cursor: 'default',
-  border: 'none',
-  backgroundColor: props.selected
-    ? colors.green
-    : props.containedInSection
-    ? colors.blue40
-    : colors.blue,
-  ':not(:disabled):hover': {
-    backgroundColor: props.selected ? colors.green : colors.blue80,
-  },
-}));
-
-export const StyledLabel = styled.div(buttonText, (props: { disabled: boolean }) => ({
-  margin: '14px 0',
-  flex: 1,
-  color: props.disabled ? colors.white40 : colors.white,
-  textAlign: 'left',
-}));
-
-export const StyledSubText = styled.span(smallText, (props: { disabled: boolean }) => ({
-  color: props.disabled ? colors.white20 : colors.white60,
-  fontWeight: 800,
-  flex: -1,
-  textAlign: 'right',
-  marginLeft: '8px',
-  marginRight: '8px',
-}));
-
-export const StyledTintedIcon = styled(ImageView).attrs((props: IImageViewProps) => ({
-  tintColor: props.tintColor ?? colors.white60,
-  tintHoverColor: props.tintHoverColor ?? props.tintColor ?? colors.white60,
-}))((props: IImageViewProps) => ({
-  [StyledCellButton + ':hover &']: {
-    backgroundColor: props.tintHoverColor,
-  },
-}));
-
-export const StyledFooter = styled.div({
-  padding: '6px 22px 20px',
-});
-
-export const StyledFooterText = styled.span(smallText);
-
-export const StyledFooterBoldText = styled(StyledFooterText)({
-  fontWeight: 900,
-});
-
-export const StyledInputFrame = styled.div({
-  flexGrow: 0,
-  backgroundColor: 'rgba(255,255,255,0.1)',
-  borderRadius: '4px',
-  padding: '4px 8px',
-});
-
-const inputTextStyles: React.CSSProperties = {
-  ...mediumText,
-  fontWeight: 600,
-  height: '28px',
-  textAlign: 'right',
-  padding: '0px',
-};
-
-export const StyledInput = styled.input({}, (props: { valid?: boolean }) => ({
-  ...inputTextStyles,
-  backgroundColor: 'transparent',
-  border: 'none',
-  width: '100%',
-  height: '100%',
-  color: props.valid !== false ? colors.white : colors.red,
-  '::placeholder': {
-    color: colors.white60,
-  },
-}));
-
-export const StyledAutoSizingTextInputContainer = styled.div({
-  position: 'relative',
-});
-
-export const StyledAutoSizingTextInputFiller = styled.pre({
-  ...inputTextStyles,
-  minWidth: '80px',
-  color: 'transparent',
-});
-
-export const StyledAutoSizingTextInputWrapper = styled.div({
-  position: 'absolute',
-  top: '0px',
-  left: '0px',
-  width: '100%',
-  height: '100%',
-});
-
-export const StyledIconContainer = styled.div((props: { disabled: boolean }) => ({
-  opacity: props.disabled ? 0.4 : 1,
-}));
diff --git a/gui/src/renderer/components/ChevronButton.tsx b/gui/src/renderer/components/ChevronButton.tsx
index 63452b521e..1e62ebbc08 100644
--- a/gui/src/renderer/components/ChevronButton.tsx
+++ b/gui/src/renderer/components/ChevronButton.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
-import * as Cell from './Cell';
+import * as Cell from './cell';
 
 interface IProps extends React.HTMLAttributes<HTMLButtonElement> {
   up: boolean;
diff --git a/gui/src/renderer/components/ExpiredAccountErrorView.tsx b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
index f60ed38dca..ded22a2eb8 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorView.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
@@ -7,7 +7,7 @@ import { messages } from '../../shared/gettext';
 import { LoginState } from '../redux/account/reducers';
 import * as AppButton from './AppButton';
 import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup';
-import * as Cell from './Cell';
+import * as Cell from './cell';
 import {
   StyledAccountTokenContainer,
   StyledAccountTokenLabel,
diff --git a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
index f85bd66aa4..3559d3b8ad 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import AccountTokenLabel from './AccountTokenLabel';
 import * as AppButton from './AppButton';
-import * as Cell from './Cell';
+import * as Cell from './cell';
 import { bigText, smallText } from './common-styles';
 import CustomScrollbars from './CustomScrollbars';
 
diff --git a/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx b/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx
index 5fe43e85e0..9426601532 100644
--- a/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx
+++ b/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx
@@ -9,7 +9,7 @@ import ISplitTunnelingApplication from '../../shared/linux-split-tunneling-appli
 import consumePromise from '../../shared/promise';
 import { useAppContext } from '../context';
 import * as AppButton from './AppButton';
-import * as Cell from './Cell';
+import * as Cell from './cell';
 import ImageView from './ImageView';
 import { Container, Layout } from './Layout';
 import { ModalContainer, ModalAlert, ModalAlertType } from './Modal';
diff --git a/gui/src/renderer/components/LocationList.tsx b/gui/src/renderer/components/LocationList.tsx
index 2f8d44048e..c47312f158 100644
--- a/gui/src/renderer/components/LocationList.tsx
+++ b/gui/src/renderer/components/LocationList.tsx
@@ -8,7 +8,7 @@ import {
   relayLocationComponents,
 } from '../../shared/daemon-rpc-types';
 import { IRelayLocationRedux } from '../redux/settings/reducers';
-import * as Cell from './Cell';
+import * as Cell from './cell';
 import LocationRow from './LocationRow';
 
 export enum LocationSelectionType {
diff --git a/gui/src/renderer/components/LocationRow.tsx b/gui/src/renderer/components/LocationRow.tsx
index 48f5982af2..0ffc4299cc 100644
--- a/gui/src/renderer/components/LocationRow.tsx
+++ b/gui/src/renderer/components/LocationRow.tsx
@@ -5,7 +5,7 @@ import { colors } from '../../config.json';
 import { compareRelayLocation, RelayLocation } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import Accordion from './Accordion';
-import * as Cell from './Cell';
+import * as Cell from './cell';
 import ChevronButton from './ChevronButton';
 import RelayStatusIndicator from './RelayStatusIndicator';
 
diff --git a/gui/src/renderer/components/LoginStyles.tsx b/gui/src/renderer/components/LoginStyles.tsx
index aaa7fd2874..c8469ba672 100644
--- a/gui/src/renderer/components/LoginStyles.tsx
+++ b/gui/src/renderer/components/LoginStyles.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { colors } from '../../config.json';
 import ImageView from './ImageView';
-import * as Cell from './Cell';
+import * as Cell from './cell';
 import { bigText, smallText } from './common-styles';
 
 export const StyledAccountDropdownContainer = styled.ul({
diff --git a/gui/src/renderer/components/Preferences.tsx b/gui/src/renderer/components/Preferences.tsx
index f3c35f90d0..a064edcf83 100644
--- a/gui/src/renderer/components/Preferences.tsx
+++ b/gui/src/renderer/components/Preferences.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { messages } from '../../shared/gettext';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
-import * as Cell from './Cell';
+import * as Cell from './cell';
 import { Layout } from './Layout';
 import {
   BackBarItem,
diff --git a/gui/src/renderer/components/RelayStatusIndicator.tsx b/gui/src/renderer/components/RelayStatusIndicator.tsx
index ef4567059a..050cf6f514 100644
--- a/gui/src/renderer/components/RelayStatusIndicator.tsx
+++ b/gui/src/renderer/components/RelayStatusIndicator.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
-import * as Cell from './Cell';
+import * as Cell from './cell';
 
 const StyledRelayStatus = styled.div((props: { active: boolean }) => ({
   width: '16px',
diff --git a/gui/src/renderer/components/SelectLanguage.tsx b/gui/src/renderer/components/SelectLanguage.tsx
index d21e6f0918..7c67927182 100644
--- a/gui/src/renderer/components/SelectLanguage.tsx
+++ b/gui/src/renderer/components/SelectLanguage.tsx
@@ -13,7 +13,7 @@ import {
   NavigationScrollbars,
   TitleBarItem,
 } from './NavigationBar';
-import Selector, { ISelectorItem } from './Selector';
+import Selector, { ISelectorItem } from './cell/Selector';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
 interface IProps {
diff --git a/gui/src/renderer/components/Settings.tsx b/gui/src/renderer/components/Settings.tsx
index 3cfdefebd5..9c4c36a0a6 100644
--- a/gui/src/renderer/components/Settings.tsx
+++ b/gui/src/renderer/components/Settings.tsx
@@ -3,7 +3,7 @@ import { colors, links } from '../../config.json';
 import { hasExpired, formatRemainingTime } from '../../shared/account-expiry';
 import { messages } from '../../shared/gettext';
 import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup';
-import * as Cell from './Cell';
+import * as Cell from './cell';
 import { Layout } from './Layout';
 import {
   CloseBarItem,
diff --git a/gui/src/renderer/components/SettingsStyles.tsx b/gui/src/renderer/components/SettingsStyles.tsx
index d396faaecc..80738638b4 100644
--- a/gui/src/renderer/components/SettingsStyles.tsx
+++ b/gui/src/renderer/components/SettingsStyles.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { colors } from '../../config.json';
 import * as AppButton from './AppButton';
-import * as Cell from './Cell';
+import * as Cell from './cell';
 import { Container } from './Layout';
 import { NavigationScrollbars } from './NavigationBar';
 
diff --git a/gui/src/renderer/components/cell/CellButton.tsx b/gui/src/renderer/components/cell/CellButton.tsx
new file mode 100644
index 0000000000..a55ffc1153
--- /dev/null
+++ b/gui/src/renderer/components/cell/CellButton.tsx
@@ -0,0 +1,44 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { colors } from '../../../config.json';
+import { CellDisabledContext } from './Container';
+import { CellSectionContext } from './Section';
+
+interface IStyledCellButtonProps {
+  selected?: boolean;
+  containedInSection: boolean;
+}
+
+const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps) => ({
+  display: 'flex',
+  padding: '0 16px 0 22px',
+  marginBottom: '1px',
+  flex: 1,
+  alignItems: 'center',
+  alignContent: 'center',
+  cursor: 'default',
+  border: 'none',
+  backgroundColor: props.selected
+    ? colors.green
+    : props.containedInSection
+    ? colors.blue40
+    : colors.blue,
+  ':not(:disabled):hover': {
+    backgroundColor: props.selected ? colors.green : colors.blue80,
+  },
+}));
+
+interface ICellButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  selected?: boolean;
+}
+
+export const CellButton = styled(
+  React.forwardRef(function Button(props: ICellButtonProps, ref: React.Ref<HTMLButtonElement>) {
+    const containedInSection = useContext(CellSectionContext);
+    return (
+      <CellDisabledContext.Provider value={props.disabled ?? false}>
+        <StyledCellButton 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
new file mode 100644
index 0000000000..843180af76
--- /dev/null
+++ b/gui/src/renderer/components/cell/Container.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+import { colors } from '../../../config.json';
+
+const StyledContainer = styled.div({
+  display: 'flex',
+  backgroundColor: colors.blue,
+  alignItems: 'center',
+  paddingLeft: '22px',
+  paddingRight: '16px',
+});
+
+export const CellDisabledContext = React.createContext<boolean>(false);
+
+interface IContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  disabled?: boolean;
+}
+
+export const Container = React.forwardRef(function ContainerT(
+  props: IContainerProps,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const { disabled, ...otherProps } = props;
+  return (
+    <CellDisabledContext.Provider value={disabled ?? false}>
+      <StyledContainer ref={ref} {...otherProps} />
+    </CellDisabledContext.Provider>
+  );
+});
diff --git a/gui/src/renderer/components/cell/Footer.tsx b/gui/src/renderer/components/cell/Footer.tsx
new file mode 100644
index 0000000000..2f0dacd10f
--- /dev/null
+++ b/gui/src/renderer/components/cell/Footer.tsx
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { smallText } from '../common-styles';
+
+export const Footer = styled.div({
+  padding: '6px 22px 20px',
+});
+
+export const FooterText = styled.span(smallText);
+
+export const FooterBoldText = styled(FooterText)({
+  fontWeight: 900,
+});
diff --git a/gui/src/renderer/components/Cell.tsx b/gui/src/renderer/components/cell/Input.tsx
index 7c021b060d..4a11791136 100644
--- a/gui/src/renderer/components/Cell.tsx
+++ b/gui/src/renderer/components/cell/Input.tsx
@@ -1,109 +1,59 @@
 import React, { useCallback, useContext, useState } from 'react';
-import {
-  StyledAutoSizingTextInputContainer,
-  StyledAutoSizingTextInputWrapper,
-  StyledAutoSizingTextInputFiller,
-  StyledCellButton,
-  StyledContainer,
-  StyledIconContainer,
-  StyledInput,
-  StyledLabel,
-  StyledSection,
-  StyledSubText,
-  StyledTintedIcon,
-} from './CellStyles';
-import ImageView, { IImageViewProps } from './ImageView';
-import StandaloneSwitch from './Switch';
+import styled from 'styled-components';
+import { colors } from '../../../config.json';
+import { mediumText } from '../common-styles';
+import { CellDisabledContext } from './Container';
+import StandaloneSwitch from '../Switch';
 
-export {
-  StyledFooter as Footer,
-  StyledFooterBoldText as FooterBoldText,
-  StyledFooterText as FooterText,
-  StyledInputFrame as InputFrame,
-  StyledSectionTitle as SectionTitle,
-} from './CellStyles';
-
-const CellSectionContext = React.createContext<boolean>(false);
-const CellDisabledContext = React.createContext<boolean>(false);
-
-interface IContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-  disabled?: boolean;
-}
-
-export const Container = React.forwardRef(function ContainerT(
-  props: IContainerProps,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const { disabled, ...otherProps } = props;
-  return (
-    <CellDisabledContext.Provider value={disabled ?? false}>
-      <StyledContainer ref={ref} {...otherProps} />
-    </CellDisabledContext.Provider>
-  );
-});
-
-interface ICellButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  selected?: boolean;
+export function Switch(props: StandaloneSwitch['props']) {
+  const disabled = useContext(CellDisabledContext);
+  return <StandaloneSwitch disabled={disabled} {...props} />;
 }
 
-export const CellButton = React.forwardRef(function Button(
-  props: ICellButtonProps,
-  ref: React.Ref<HTMLButtonElement>,
-) {
-  const containedInSection = useContext(CellSectionContext);
-  return (
-    <CellDisabledContext.Provider value={props.disabled ?? false}>
-      <StyledCellButton ref={ref} containedInSection={containedInSection} {...props} />
-    </CellDisabledContext.Provider>
-  );
+export const InputFrame = styled.div({
+  flexGrow: 0,
+  backgroundColor: 'rgba(255,255,255,0.1)',
+  borderRadius: '4px',
+  padding: '4px 8px',
 });
 
-export function Section(props: React.HTMLAttributes<HTMLDivElement>) {
-  const { children, ...otherProps } = props;
-  return (
-    <StyledSection {...otherProps}>
-      <CellSectionContext.Provider value={true}>{children}</CellSectionContext.Provider>
-    </StyledSection>
-  );
-}
+const inputTextStyles: React.CSSProperties = {
+  ...mediumText,
+  fontWeight: 600,
+  height: '28px',
+  textAlign: 'right',
+  padding: '0px',
+};
 
-export function Label(props: React.HTMLAttributes<HTMLDivElement>) {
-  const disabled = useContext(CellDisabledContext);
-  return <StyledLabel disabled={disabled} {...props} />;
-}
+const StyledInput = styled.input({}, (props: { valid?: boolean }) => ({
+  ...inputTextStyles,
+  backgroundColor: 'transparent',
+  border: 'none',
+  width: '100%',
+  height: '100%',
+  color: props.valid !== false ? colors.white : colors.red,
+  '::placeholder': {
+    color: colors.white60,
+  },
+}));
 
-export function InputLabel(props: React.LabelHTMLAttributes<HTMLLabelElement>) {
-  const disabled = useContext(CellDisabledContext);
-  return <StyledLabel as="label" disabled={disabled} {...props} />;
-}
-
-export function SubText(props: React.HTMLAttributes<HTMLDivElement>) {
-  const disabled = useContext(CellDisabledContext);
-  return <StyledSubText disabled={disabled} {...props} />;
-}
-
-export function UntintedIcon(props: IImageViewProps) {
-  const disabled = useContext(CellDisabledContext);
-  return (
-    <StyledIconContainer disabled={disabled}>
-      <ImageView {...props} />
-    </StyledIconContainer>
-  );
-}
+const StyledAutoSizingTextInputContainer = styled.div({
+  position: 'relative',
+});
 
-export function Icon(props: IImageViewProps) {
-  const disabled = useContext(CellDisabledContext);
-  return (
-    <StyledIconContainer disabled={disabled}>
-      <StyledTintedIcon {...props} />
-    </StyledIconContainer>
-  );
-}
+const StyledAutoSizingTextInputFiller = styled.pre({
+  ...inputTextStyles,
+  minWidth: '80px',
+  color: 'transparent',
+});
 
-export function Switch(props: StandaloneSwitch['props']) {
-  const disabled = useContext(CellDisabledContext);
-  return <StandaloneSwitch disabled={disabled} {...props} />;
-}
+const StyledAutoSizingTextInputWrapper = styled.div({
+  position: 'absolute',
+  top: '0px',
+  left: '0px',
+  width: '100%',
+  height: '100%',
+});
 
 interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   value?: string;
diff --git a/gui/src/renderer/components/cell/Label.tsx b/gui/src/renderer/components/cell/Label.tsx
new file mode 100644
index 0000000000..12a312049b
--- /dev/null
+++ b/gui/src/renderer/components/cell/Label.tsx
@@ -0,0 +1,69 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { colors } from '../../../config.json';
+import { buttonText, smallText } from '../common-styles';
+import ImageView, { IImageViewProps } from '../ImageView';
+import { CellButton } from './CellButton';
+import { CellDisabledContext } from './Container';
+
+const StyledLabel = styled.div(buttonText, (props: { disabled: boolean }) => ({
+  margin: '14px 0',
+  flex: 1,
+  color: props.disabled ? colors.white40 : colors.white,
+  textAlign: 'left',
+}));
+
+const StyledSubText = styled.span(smallText, (props: { disabled: boolean }) => ({
+  color: props.disabled ? colors.white20 : colors.white60,
+  fontWeight: 800,
+  flex: -1,
+  textAlign: 'right',
+  marginLeft: '8px',
+  marginRight: '8px',
+}));
+
+const StyledIconContainer = styled.div((props: { disabled: boolean }) => ({
+  opacity: props.disabled ? 0.4 : 1,
+}));
+
+const StyledTintedIcon = styled(ImageView).attrs((props: IImageViewProps) => ({
+  tintColor: props.tintColor ?? colors.white60,
+  tintHoverColor: props.tintHoverColor ?? props.tintColor ?? colors.white60,
+}))((props: IImageViewProps) => ({
+  [CellButton + ':hover &']: {
+    backgroundColor: props.tintHoverColor,
+  },
+}));
+
+export function Label(props: React.HTMLAttributes<HTMLDivElement>) {
+  const disabled = useContext(CellDisabledContext);
+  return <StyledLabel disabled={disabled} {...props} />;
+}
+
+export function InputLabel(props: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  const disabled = useContext(CellDisabledContext);
+  return <StyledLabel as="label" disabled={disabled} {...props} />;
+}
+
+export function SubText(props: React.HTMLAttributes<HTMLDivElement>) {
+  const disabled = useContext(CellDisabledContext);
+  return <StyledSubText disabled={disabled} {...props} />;
+}
+
+export function UntintedIcon(props: IImageViewProps) {
+  const disabled = useContext(CellDisabledContext);
+  return (
+    <StyledIconContainer disabled={disabled}>
+      <ImageView {...props} />
+    </StyledIconContainer>
+  );
+}
+
+export function Icon(props: IImageViewProps) {
+  const disabled = useContext(CellDisabledContext);
+  return (
+    <StyledIconContainer disabled={disabled}>
+      <StyledTintedIcon {...props} />
+    </StyledIconContainer>
+  );
+}
diff --git a/gui/src/renderer/components/cell/Section.tsx b/gui/src/renderer/components/cell/Section.tsx
new file mode 100644
index 0000000000..25bef54df5
--- /dev/null
+++ b/gui/src/renderer/components/cell/Section.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import { colors } from '../../../config.json';
+import { buttonText } from '../common-styles';
+
+const StyledSection = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const SectionTitle = styled.span(buttonText, {
+  backgroundColor: colors.blue,
+  padding: '14px 16px 14px 22px',
+  marginBottom: '1px',
+});
+
+export const CellSectionContext = React.createContext<boolean>(false);
+
+export function Section(props: React.HTMLAttributes<HTMLDivElement>) {
+  const { children, ...otherProps } = props;
+  return (
+    <StyledSection {...otherProps}>
+      <CellSectionContext.Provider value={true}>{children}</CellSectionContext.Provider>
+    </StyledSection>
+  );
+}
diff --git a/gui/src/renderer/components/Selector.tsx b/gui/src/renderer/components/cell/Selector.tsx
index e7c1e8c0a1..cd308fa3e4 100644
--- a/gui/src/renderer/components/Selector.tsx
+++ b/gui/src/renderer/components/cell/Selector.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors } from '../../config.json';
-import { AriaInput, AriaLabel } from './AriaGroup';
-import * as Cell from './Cell';
+import { colors } from '../../../config.json';
+import { AriaInput, AriaLabel } from '../AriaGroup';
+import * as Cell from '.';
 
 export interface ISelectorItem<T> {
   label: string;
diff --git a/gui/src/renderer/components/cell/index.ts b/gui/src/renderer/components/cell/index.ts
new file mode 100644
index 0000000000..a16cb93097
--- /dev/null
+++ b/gui/src/renderer/components/cell/index.ts
@@ -0,0 +1,6 @@
+export * from './CellButton';
+export * from './Container';
+export * from './Footer';
+export * from './Input';
+export * from './Label';
+export * from './Section';