1 files changed, 88 insertions, 0 deletions
diff --git a/gui/src/renderer/components/SmallButton.tsx b/gui/src/renderer/components/SmallButton.tsx
new file mode 100644
index 0000000000..181a557fd2
--- /dev/null
+++ b/gui/src/renderer/components/SmallButton.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { colors } from '../../config.json';
+import { smallText } from './common-styles';
+
+export enum SmallButtonColor {
+  blue,
+  red,
+}
+
+function getButtonColors(color?: SmallButtonColor, disabled?: boolean) {
+  switch (color) {
+    case SmallButtonColor.red:
+      return {
+        background: disabled ? colors.red60 : colors.red,
+        backgroundHover: disabled ? colors.red60 : colors.red80,
+      };
+    default:
+      return {
+        background: disabled ? colors.blue50 : colors.blue,
+        backgroundHover: disabled ? colors.blue50 : colors.blue60,
+      };
+  }
+}
+
+const StyledSmallButton = styled.button<{ $color?: SmallButtonColor; disabled?: boolean }>(
+  smallText,
+  (props) => {
+    const buttonColors = getButtonColors(props.$color, props.disabled);
+    return {
+      height: '32px',
+      padding: '5px 16px',
+      border: 'none',
+      background: buttonColors.background,
+      color: props.disabled ? colors.white50 : colors.white,
+      borderRadius: '4px',
+      marginLeft: '12px',
+
+      [`${StyledSmallButtonGrid} &&`]: {
+        marginLeft: 0,
+      },
+
+      '&&:hover': {
+        background: buttonColors.backgroundHover,
+      },
+    };
+  },
+);
+
+interface SmallButtonProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'color'> {
+  onClick: () => void;
+  children: string;
+  color?: SmallButtonColor;
+}
+
+export function SmallButton(props: SmallButtonProps) {
+  const { color, ...otherProps } = props;
+  return <StyledSmallButton $color={props.color} {...otherProps} />;
+}
+
+export const SmallButtonGroup = styled.div<{ $noMarginTop?: boolean }>((props) => ({
+  display: 'flex',
+  justifyContent: 'end',
+  margin: '0 23px',
+  marginTop: props.$noMarginTop ? 0 : '30px',
+}));
+
+const StyledSmallButtonGrid = styled.div<{ $columns: number }>((props) => ({
+  display: 'grid',
+  gridTemplateColumns: `repeat(${props.$columns}, 1fr)`,
+  gridColumnGap: '10px',
+}));
+
+interface SmallButtonGridProps {
+  className?: string;
+}
+
+export function SmallButtonGrid(props: React.PropsWithChildren<SmallButtonGridProps>) {
+  return (
+    <StyledSmallButtonGrid
+      $columns={React.Children.count(props.children)}
+      className={props.className}>
+      {props.children}
+    </StyledSmallButtonGrid>
+  );
+}