Merge branch 'reorganize-settings'

6 files changed, 54 insertions, 19 deletions

diff --git a/gui/src/renderer/components/cell/CellButton.tsx b/gui/src/renderer/components/cell/CellButton.tsx
index 5a24cfe901..e8d1c1c649 100644
--- a/gui/src/renderer/components/cell/CellButton.tsx
+++ b/gui/src/renderer/components/cell/CellButton.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { colors } from '../../../config.json';
 import { CellDisabledContext } from './Container';
+import { Icon } from './Label';
 import { CellSectionContext } from './Section';
 
 interface IStyledCellButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
@@ -22,7 +23,6 @@ const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps) => {
     display: 'flex',
     minHeight: '44px',
     padding: '0 16px 0 22px',
-    marginBottom: '1px',
     flex: 1,
     alignItems: 'center',
     alignContent: 'center',
@@ -50,9 +50,13 @@ export const CellButton = styled(
   }),
 )({});
 
-export const CellButtonGroup = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-  marginBottom: '20px',
-});
+export function CellNavigationButton(props: ICellButtonProps) {
+  const { children, ...otherProps } = props;
+
+  return (
+    <CellButton {...otherProps}>
+      {children}
+      <Icon height={12} width={7} source="icon-chevron" />
+    </CellButton>
+  );
+}
diff --git a/gui/src/renderer/components/cell/Footer.tsx b/gui/src/renderer/components/cell/Footer.tsx
index 2cdf8aa8fa..466ef4acca 100644
--- a/gui/src/renderer/components/cell/Footer.tsx
+++ b/gui/src/renderer/components/cell/Footer.tsx
@@ -4,7 +4,7 @@ import { colors } from '../../../config.json';
 import { tinyText } from '../common-styles';
 
 export const Footer = styled.div({
-  padding: '6px 22px 20px',
+  padding: '6px 22px 0px',
 });
 
 export const FooterText = styled.span(tinyText, {
diff --git a/gui/src/renderer/components/cell/Group.tsx b/gui/src/renderer/components/cell/Group.tsx
new file mode 100644
index 0000000000..c167b2d525
--- /dev/null
+++ b/gui/src/renderer/components/cell/Group.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IStyledGroupProps {
+  noMarginBottom?: boolean;
+}
+
+const StyledGroup = styled.div({}, (props: IStyledGroupProps) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  marginBottom: props.noMarginBottom ? '0px' : '20px',
+}));
+
+const StyledCellWrapper = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  marginBottom: '1px',
+});
+
+interface IGroupProps extends IStyledGroupProps {
+  children: React.ReactNode | React.ReactNode[];
+}
+
+export function Group(props: IGroupProps) {
+  const children = React.Children.toArray(props.children);
+  return (
+    <StyledGroup noMarginBottom={props.noMarginBottom}>
+      {children.map((child, index) =>
+        index === children.length - 1 ? (
+          child
+        ) : (
+          <StyledCellWrapper key={index}>{child}</StyledCellWrapper>
+        ),
+      )}
+    </StyledGroup>
+  );
+}
diff --git a/gui/src/renderer/components/cell/Section.tsx b/gui/src/renderer/components/cell/Section.tsx
index 41f57ee52c..1c1779248f 100644
--- a/gui/src/renderer/components/cell/Section.tsx
+++ b/gui/src/renderer/components/cell/Section.tsx
@@ -15,7 +15,6 @@ export const SectionTitle = styled.span(buttonText, {
   alignItems: 'center',
   backgroundColor: colors.blue,
   padding: '0 16px 0 22px',
-  marginBottom: '1px',
 });
 
 export const CellSectionContext = React.createContext<boolean>(false);
diff --git a/gui/src/renderer/components/cell/Selector.tsx b/gui/src/renderer/components/cell/Selector.tsx
index 5ea1687a1e..ea2abb90ef 100644
--- a/gui/src/renderer/components/cell/Selector.tsx
+++ b/gui/src/renderer/components/cell/Selector.tsx
@@ -19,13 +19,8 @@ interface ISelectorProps<T> {
   onSelect: (value: T) => void;
   selectedCellRef?: React.Ref<HTMLButtonElement>;
   className?: string;
-  hasFooter?: boolean;
 }
 
-const Section = styled(Cell.Section)((props: { hasFooter: boolean }) => ({
-  marginBottom: props.hasFooter ? 0 : '20px',
-}));
-
 export default class Selector<T> extends React.Component<ISelectorProps<T>> {
   public render() {
     const items = this.props.values.map((item, i) => {
@@ -52,13 +47,10 @@ export default class Selector<T> extends React.Component<ISelectorProps<T>> {
 
     return (
       <AriaInput>
-        <Section
-          role="listbox"
-          className={this.props.className}
-          hasFooter={this.props.hasFooter ?? false}>
+        <Cell.Section role="listbox" className={this.props.className}>
           {title}
           {items}
-        </Section>
+        </Cell.Section>
       </AriaInput>
     );
   }
diff --git a/gui/src/renderer/components/cell/index.ts b/gui/src/renderer/components/cell/index.ts
index a16cb93097..cc510e5b22 100644
--- a/gui/src/renderer/components/cell/index.ts
+++ b/gui/src/renderer/components/cell/index.ts
@@ -4,3 +4,4 @@ export * from './Footer';
 export * from './Input';
 export * from './Label';
 export * from './Section';
+export * from './Group';