Add UI components

webui/src/common/components/Button/Button.jsx

@@ -2,16 +2,6 @@ import React from "react";
 import cn from "classnames";
 import "./styles.sass";
 
-/*
-Props:
-- variant: primary | subtle | danger
-- size: sm | md | lg
-- full: boolean (full width)
-- icon: ReactNode (left icon)
-- iconRight: ReactNode (right icon)
-- loading: boolean
-*/
-
 export const Button = ({
   as: Component = "button",
   variant = "primary",
@@ -39,12 +29,10 @@ export const Button = ({
       disabled={isDisabled}
       {...rest}
     >
-      {loading && <span className="btn__spinner" aria-hidden />}
-      {icon && <span className="btn__icon btn__icon--left">{icon}</span>}
-      <span className="btn__label">{children}</span>
-      {iconRight && <span className="btn__icon btn__icon--right">{iconRight}</span>}
+      {loading && <span className="btn-spinner" aria-hidden />}
+      {icon && <span className="btn-icon btn-icon--left">{icon}</span>}
+      <span className="btn-label">{children}</span>
+      {iconRight && <span className="btn-icon btn-icon--right">{iconRight}</span>}
     </Component>
   );
-};
-
-export default Button;
+};

webui/src/common/components/Button/styles.sass

@@ -2,8 +2,8 @@
   --c-bg: #ffffff
   --c-bg-hover: #f2f5f8
   --c-bg-active: #e6ebf0
-  --c-border: #d0d7de
-  --c-border-hover: #c2cbd3
+  --c-border: #dfe3e8
+  --c-border-hover: #c7ced6
   --c-text: #1f2429
   --c-accent: #0f62fe
   --c-danger: #d93025
@@ -11,16 +11,16 @@
   display: inline-flex
   align-items: center
   justify-content: center
-  gap: .5rem
+  gap: .6rem
   font-family: inherit
-  font-weight: 500
+  font-weight: 600
   line-height: 1.2
   cursor: pointer
   border: 1px solid var(--c-border)
   background: var(--c-bg)
   color: var(--c-text)
-  border-radius: 6px
-  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease
+  border-radius: 12px
+  transition: all .2s ease
   user-select: none
   text-decoration: none
   &:hover:not(:disabled)
@@ -28,6 +28,7 @@
     border-color: var(--c-border-hover)
   &:active:not(:disabled)
     background: var(--c-bg-active)
+    transform: translateY(1px)
   &:focus-visible
     outline: 2px solid var(--c-accent)
     outline-offset: 2px
@@ -37,33 +38,39 @@
   &.btn--full
     width: 100%
   &.btn--sm
-    font-size: .75rem
-    padding: .4rem .7rem
-  &.btn--md
     font-size: .85rem
-    padding: .6rem 1rem
+    padding: .7rem 1rem
+  &.btn--md
+    font-size: .95rem
+    padding: .85rem 1.25rem
   &.btn--lg
-    font-size: 1rem
-    padding: .8rem 1.2rem
+    font-size: 1.05rem
+    padding: 1rem 1.5rem
   &.btn--primary
-    --c-bg: #0f62fe
-    --c-bg-hover: #0d55dd
-    --c-bg-active: #0b47b8
-    --c-border: #0f62fe
+    --c-bg: #1f2429
+    --c-bg-hover: #374048
+    --c-bg-active: #2a3038
+    --c-border: #1f2429
     --c-text: #ffffff
+    background: var(--c-bg)
+    border-color: var(--c-border)
+    &:hover:not(:disabled)
+      background: var(--c-bg-hover)
   &.btn--subtle
-    --c-bg: #f3f6f9
-    --c-bg-hover: #e8edf2
-    --c-bg-active: #dfe5eb
-    --c-border: #e1e6eb
+    --c-bg: #f0f3f6
+    --c-bg-hover: #e6ebf0
+    --c-bg-active: #dfe3e8
+    --c-border: #dfe3e8
   &.btn--danger
     --c-bg: #d93025
     --c-bg-hover: #c22b21
     --c-bg-active: #a9241b
     --c-border: #d93025
     --c-text: #ffffff
+    background: var(--c-bg)
+    border-color: var(--c-border)
 
-.btn__icon
+.btn-icon
   display: inline-flex
   align-items: center
   &--left
@@ -71,7 +78,7 @@
   &--right
     margin-left: .25rem
 
-.btn__spinner
+.btn-spinner
   width: 14px
   height: 14px
   border: 2px solid rgba(0,0,0,.15)