Add reusable cell side button component

3 files changed, 39 insertions, 0 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,
+    },
+  };
+};