fix(web): standardize button borderRadius, fontSize, fontWeight (#68)

All button style objects now use: - borderRadius: 0.375rem - fontSize: 0.75rem - fontWeight: 500 Files: CreateItemPane, EditItemPane, DeleteItemPane, BOMTab, CategoryPicker, ProjectsPage, SchemasPage, LoginPage, ItemsToolbar, SettingsPage, ImportItemsPane, ItemTable Closes #68
2026-02-13 13:21:54 -06:00
parent 65063c9ee7
commit 2585305590
13 changed files with 716 additions and 90 deletions
--- a/web/src/components/items/BOMTab.tsx
+++ b/web/src/components/items/BOMTab.tsx
@@ -422,9 +422,10 @@ const tdStyle: React.CSSProperties = {

 const toolBtnStyle: React.CSSProperties = {
  padding: "0.25rem 0.5rem",
-  fontSize: "0.8rem",
+  fontSize: "0.75rem",
+  fontWeight: 500,
  border: "none",
-  borderRadius: "0.3rem",
+  borderRadius: "0.375rem",
  backgroundColor: "var(--ctp-surface1)",
  color: "var(--ctp-text)",
  cursor: "pointer",
@@ -436,14 +437,17 @@ const actionBtnStyle: React.CSSProperties = {
  color: "var(--ctp-subtext1)",
  cursor: "pointer",
  fontSize: "0.75rem",
+  fontWeight: 500,
  padding: "0.1rem 0.3rem",
+  borderRadius: "0.375rem",
 };

 const saveBtnStyle: React.CSSProperties = {
  padding: "0.2rem 0.4rem",
  fontSize: "0.75rem",
+  fontWeight: 500,
  border: "none",
-  borderRadius: "0.25rem",
+  borderRadius: "0.375rem",
  backgroundColor: "var(--ctp-green)",
  color: "var(--ctp-crust)",
  cursor: "pointer",
@@ -472,8 +476,9 @@ const manualBadge: React.CSSProperties = {
 const cancelBtnStyle: React.CSSProperties = {
  padding: "0.2rem 0.4rem",
  fontSize: "0.75rem",
+  fontWeight: 500,
  border: "none",
-  borderRadius: "0.25rem",
+  borderRadius: "0.375rem",
  backgroundColor: "var(--ctp-surface1)",
  color: "var(--ctp-subtext1)",
  cursor: "pointer",
--- a/web/src/components/items/CategoryPicker.tsx
+++ b/web/src/components/items/CategoryPicker.tsx
@@ -96,10 +96,10 @@ export function CategoryPicker({
                  }}
                  style={{
                    padding: "0.2rem 0.5rem",
-                    fontSize: "0.7rem",
-                    fontWeight: isActive ? 600 : 400,
+                    fontSize: "0.75rem",
+                    fontWeight: 500,
                    border: "none",
-                    borderRadius: "0.25rem",
+                    borderRadius: "0.375rem",
                    cursor: "pointer",
                    backgroundColor: isActive
                      ? "rgba(203,166,247,0.2)"
--- a/web/src/components/items/CreateItemPane.tsx
+++ b/web/src/components/items/CreateItemPane.tsx
@@ -671,9 +671,10 @@ const headerStyle: React.CSSProperties = {

 const actionBtnStyle: React.CSSProperties = {
  padding: "0.3rem 0.75rem",
-  fontSize: "0.8rem",
+  fontSize: "0.75rem",
+  fontWeight: 500,
  border: "none",
-  borderRadius: "0.3rem",
+  borderRadius: "0.375rem",
  color: "var(--ctp-crust)",
  cursor: "pointer",
 };
@@ -683,8 +684,10 @@ const cancelBtnStyle: React.CSSProperties = {
  border: "none",
  cursor: "pointer",
  color: "var(--ctp-subtext1)",
-  fontSize: "0.8rem",
+  fontSize: "0.75rem",
+  fontWeight: 500,
  padding: "0.2rem 0.4rem",
+  borderRadius: "0.375rem",
 };

 const inputStyle: React.CSSProperties = {
--- a/web/src/components/items/DeleteItemPane.tsx
+++ b/web/src/components/items/DeleteItemPane.tsx
@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { del } from '../../api/client';
+import { useState } from "react";
+import { del } from "../../api/client";

 interface DeleteItemPaneProps {
  partNumber: string;
@@ -7,7 +7,11 @@ interface DeleteItemPaneProps {
  onCancel: () => void;
 }

-export function DeleteItemPane({ partNumber, onDeleted, onCancel }: DeleteItemPaneProps) {
+export function DeleteItemPane({
+  partNumber,
+  onDeleted,
+  onCancel,
+}: DeleteItemPaneProps) {
  const [deleting, setDeleting] = useState(false);
  const [error, setError] = useState<string | null>(null);

@@ -18,59 +22,133 @@ export function DeleteItemPane({ partNumber, onDeleted, onCancel }: DeleteItemPa
      await del(`/api/items/${encodeURIComponent(partNumber)}`);
      onDeleted();
    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Failed to delete item');
+      setError(e instanceof Error ? e.message : "Failed to delete item");
    } finally {
      setDeleting(false);
    }
  };

  return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-      <div style={{
-        display: 'flex', alignItems: 'center', gap: '0.75rem',
-        padding: '0.5rem 0.75rem',
-        borderBottom: '1px solid var(--ctp-surface1)',
-        backgroundColor: 'var(--ctp-mantle)',
-        flexShrink: 0,
-      }}>
-        <span style={{ color: 'var(--ctp-red)', fontWeight: 600, fontSize: '0.9rem' }}>Delete Item</span>
+    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "0.75rem",
+          padding: "0.5rem 0.75rem",
+          borderBottom: "1px solid var(--ctp-surface1)",
+          backgroundColor: "var(--ctp-mantle)",
+          flexShrink: 0,
+        }}
+      >
+        <span
+          style={{
+            color: "var(--ctp-red)",
+            fontWeight: 600,
+            fontSize: "0.9rem",
+          }}
+        >
+          Delete Item
+        </span>
        <span style={{ flex: 1 }} />
-        <button onClick={onCancel} style={headerBtnStyle}>Cancel</button>
+        <button onClick={onCancel} style={headerBtnStyle}>
+          Cancel
+        </button>
      </div>

-      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '2rem', gap: '1rem' }}>
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "2rem",
+          gap: "1rem",
+        }}
+      >
        {error && (
-          <div style={{ color: 'var(--ctp-red)', backgroundColor: 'rgba(243,139,168,0.1)', padding: '0.5rem 1rem', borderRadius: '0.3rem', fontSize: '0.85rem', width: '100%', textAlign: 'center' }}>
+          <div
+            style={{
+              color: "var(--ctp-red)",
+              backgroundColor: "rgba(243,139,168,0.1)",
+              padding: "0.5rem 1rem",
+              borderRadius: "0.3rem",
+              fontSize: "0.85rem",
+              width: "100%",
+              textAlign: "center",
+            }}
+          >
            {error}
          </div>
        )}

-        <div style={{ textAlign: 'center' }}>
-          <p style={{ fontSize: '0.9rem', color: 'var(--ctp-text)', marginBottom: '0.5rem' }}>
+        <div style={{ textAlign: "center" }}>
+          <p
+            style={{
+              fontSize: "0.9rem",
+              color: "var(--ctp-text)",
+              marginBottom: "0.5rem",
+            }}
+          >
            Permanently delete item
          </p>
-          <p style={{ fontFamily: "'JetBrains Mono', monospace", color: 'var(--ctp-peach)', fontSize: '1.1rem', fontWeight: 600 }}>
+          <p
+            style={{
+              fontFamily: "'JetBrains Mono', monospace",
+              color: "var(--ctp-peach)",
+              fontSize: "1.1rem",
+              fontWeight: 600,
+            }}
+          >
            {partNumber}
          </p>
        </div>

-        <p style={{ color: 'var(--ctp-subtext0)', fontSize: '0.85rem', textAlign: 'center', maxWidth: 300 }}>
-          This will permanently remove this item, all its revisions, BOM entries, and file attachments. This action cannot be undone.
+        <p
+          style={{
+            color: "var(--ctp-subtext0)",
+            fontSize: "0.85rem",
+            textAlign: "center",
+            maxWidth: 300,
+          }}
+        >
+          This will permanently remove this item, all its revisions, BOM
+          entries, and file attachments. This action cannot be undone.
        </p>

-        <div style={{ display: 'flex', gap: '0.75rem', marginTop: '0.5rem' }}>
-          <button onClick={onCancel} style={{
-            padding: '0.5rem 1.25rem', fontSize: '0.85rem', border: 'none', borderRadius: '0.4rem',
-            backgroundColor: 'var(--ctp-surface1)', color: 'var(--ctp-text)', cursor: 'pointer',
-          }}>
+        <div style={{ display: "flex", gap: "0.75rem", marginTop: "0.5rem" }}>
+          <button
+            onClick={onCancel}
+            style={{
+              padding: "0.5rem 1.25rem",
+              fontSize: "0.75rem",
+              fontWeight: 500,
+              border: "none",
+              borderRadius: "0.375rem",
+              backgroundColor: "var(--ctp-surface1)",
+              color: "var(--ctp-text)",
+              cursor: "pointer",
+            }}
+          >
            Cancel
          </button>
-          <button onClick={() => void handleDelete()} disabled={deleting} style={{
-            padding: '0.5rem 1.25rem', fontSize: '0.85rem', border: 'none', borderRadius: '0.4rem',
-            backgroundColor: 'var(--ctp-red)', color: 'var(--ctp-crust)', cursor: 'pointer',
-            opacity: deleting ? 0.6 : 1,
-          }}>
-            {deleting ? 'Deleting...' : 'Delete Permanently'}
+          <button
+            onClick={() => void handleDelete()}
+            disabled={deleting}
+            style={{
+              padding: "0.5rem 1.25rem",
+              fontSize: "0.75rem",
+              fontWeight: 500,
+              border: "none",
+              borderRadius: "0.375rem",
+              backgroundColor: "var(--ctp-red)",
+              color: "var(--ctp-crust)",
+              cursor: "pointer",
+              opacity: deleting ? 0.6 : 1,
+            }}
+          >
+            {deleting ? "Deleting..." : "Delete Permanently"}
          </button>
        </div>
      </div>
@@ -79,6 +157,12 @@ export function DeleteItemPane({ partNumber, onDeleted, onCancel }: DeleteItemPa
 }

 const headerBtnStyle: React.CSSProperties = {
-  background: 'none', border: 'none', cursor: 'pointer',
-  color: 'var(--ctp-subtext1)', fontSize: '0.8rem', padding: '0.2rem 0.4rem',
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  color: "var(--ctp-subtext1)",
+  fontSize: "0.75rem",
+  fontWeight: 500,
+  padding: "0.2rem 0.4rem",
+  borderRadius: "0.375rem",
 };
--- a/web/src/components/items/EditItemPane.tsx
+++ b/web/src/components/items/EditItemPane.tsx
@@ -90,9 +90,10 @@ export function EditItemPane({
          disabled={saving}
          style={{
            padding: "0.3rem 0.75rem",
-            fontSize: "0.8rem",
+            fontSize: "0.75rem",
+            fontWeight: 500,
            border: "none",
-            borderRadius: "0.3rem",
+            borderRadius: "0.375rem",
            backgroundColor: "var(--ctp-blue)",
            color: "var(--ctp-crust)",
            cursor: "pointer",
@@ -215,6 +216,8 @@ const headerBtnStyle: React.CSSProperties = {
  border: "none",
  cursor: "pointer",
  color: "var(--ctp-subtext1)",
-  fontSize: "0.8rem",
+  fontSize: "0.75rem",
+  fontWeight: 500,
  padding: "0.2rem 0.4rem",
+  borderRadius: "0.375rem",
 };
--- a/web/src/components/items/ImportItemsPane.tsx
+++ b/web/src/components/items/ImportItemsPane.tsx
@@ -185,9 +185,10 @@ export function ImportItemsPane({
              disabled={!file || importing}
              style={{
                padding: "0.4rem 0.75rem",
-                fontSize: "0.85rem",
+                fontSize: "0.75rem",
+                fontWeight: 500,
                border: "none",
-                borderRadius: "0.3rem",
+                borderRadius: "0.375rem",
                backgroundColor: "var(--ctp-yellow)",
                color: "var(--ctp-crust)",
                cursor: "pointer",
@@ -202,9 +203,10 @@ export function ImportItemsPane({
              disabled={importing || (result?.error_count ?? 0) > 0}
              style={{
                padding: "0.4rem 0.75rem",
-                fontSize: "0.85rem",
+                fontSize: "0.75rem",
+                fontWeight: 500,
                border: "none",
-                borderRadius: "0.3rem",
+                borderRadius: "0.375rem",
                backgroundColor: "var(--ctp-green)",
                color: "var(--ctp-crust)",
                cursor: "pointer",
@@ -289,6 +291,8 @@ const headerBtnStyle: React.CSSProperties = {
  border: "none",
  cursor: "pointer",
  color: "var(--ctp-subtext1)",
-  fontSize: "0.8rem",
+  fontSize: "0.75rem",
+  fontWeight: 500,
  padding: "0.2rem 0.4rem",
+  borderRadius: "0.375rem",
 };
--- a/web/src/components/items/ItemTable.tsx
+++ b/web/src/components/items/ItemTable.tsx
@@ -385,7 +385,8 @@ const actionBtnStyle: React.CSSProperties = {
  border: "none",
  color: "var(--ctp-subtext1)",
  cursor: "pointer",
-  fontSize: "0.8rem",
+  fontSize: "0.75rem",
+  fontWeight: 500,
  padding: "0.15rem 0.4rem",
-  borderRadius: "0.25rem",
+  borderRadius: "0.375rem",
 };
--- a/web/src/components/items/ItemsToolbar.tsx
+++ b/web/src/components/items/ItemsToolbar.tsx
@@ -37,9 +37,10 @@ export function ItemsToolbar({
      onClick={() => onFilterChange({ searchScope: scope })}
      style={{
        padding: "var(--d-input-py) var(--d-input-px)",
-        fontSize: "var(--d-input-font)",
+        fontSize: "0.75rem",
+        fontWeight: 500,
        border: "none",
-        borderRadius: "0.3rem",
+        borderRadius: "0.375rem",
        cursor: "pointer",
        backgroundColor:
          filters.searchScope === scope
@@ -173,8 +174,9 @@ const toolBtnStyle: React.CSSProperties = {
  padding: "var(--d-input-py) var(--d-input-px)",
  backgroundColor: "var(--ctp-surface1)",
  border: "none",
-  borderRadius: "0.4rem",
+  borderRadius: "0.375rem",
  color: "var(--ctp-text)",
-  fontSize: "var(--d-input-font)",
+  fontSize: "0.75rem",
+  fontWeight: 500,
  cursor: "pointer",
 };
--- a/web/src/pages/LoginPage.tsx
+++ b/web/src/pages/LoginPage.tsx
@@ -162,9 +162,9 @@ const btnPrimaryStyle: React.CSSProperties = {
  display: "block",
  width: "100%",
  padding: "0.75rem 1.5rem",
-  borderRadius: "0.5rem",
-  fontWeight: 600,
-  fontSize: "1rem",
+  borderRadius: "0.375rem",
+  fontWeight: 500,
+  fontSize: "0.75rem",
  cursor: "pointer",
  border: "none",
  backgroundColor: "var(--ctp-mauve)",
@@ -187,9 +187,9 @@ const btnOidcStyle: React.CSSProperties = {
  display: "block",
  width: "100%",
  padding: "0.75rem 1.5rem",
-  borderRadius: "0.5rem",
-  fontWeight: 600,
-  fontSize: "1rem",
+  borderRadius: "0.375rem",
+  fontWeight: 500,
+  fontSize: "0.75rem",
  cursor: "pointer",
  border: "none",
  backgroundColor: "var(--ctp-blue)",
--- a/web/src/pages/ProjectsPage.tsx
+++ b/web/src/pages/ProjectsPage.tsx
@@ -443,43 +443,45 @@ export function ProjectsPage() {
 // Styles
 const btnPrimaryStyle: React.CSSProperties = {
  padding: "0.5rem 1rem",
-  borderRadius: "0.4rem",
+  borderRadius: "0.375rem",
  border: "none",
  backgroundColor: "var(--ctp-mauve)",
  color: "var(--ctp-crust)",
-  fontWeight: 600,
-  fontSize: "0.85rem",
+  fontWeight: 500,
+  fontSize: "0.75rem",
  cursor: "pointer",
 };

 const btnSecondaryStyle: React.CSSProperties = {
  padding: "0.5rem 1rem",
-  borderRadius: "0.4rem",
+  borderRadius: "0.375rem",
  border: "none",
  backgroundColor: "var(--ctp-surface1)",
  color: "var(--ctp-text)",
-  fontSize: "0.85rem",
+  fontWeight: 500,
+  fontSize: "0.75rem",
  cursor: "pointer",
 };

 const btnDangerStyle: React.CSSProperties = {
  padding: "0.5rem 1rem",
-  borderRadius: "0.4rem",
+  borderRadius: "0.375rem",
  border: "none",
  backgroundColor: "var(--ctp-red)",
  color: "var(--ctp-crust)",
-  fontWeight: 600,
-  fontSize: "0.85rem",
+  fontWeight: 500,
+  fontSize: "0.75rem",
  cursor: "pointer",
 };

 const btnSmallStyle: React.CSSProperties = {
  padding: "0.3rem 0.6rem",
-  borderRadius: "0.3rem",
+  borderRadius: "0.375rem",
  border: "none",
  backgroundColor: "var(--ctp-surface1)",
  color: "var(--ctp-text)",
-  fontSize: "0.8rem",
+  fontWeight: 500,
+  fontSize: "0.75rem",
  cursor: "pointer",
 };

@@ -504,8 +506,9 @@ const formCloseStyle: React.CSSProperties = {
  border: "none",
  color: "inherit",
  cursor: "pointer",
-  fontSize: "0.85rem",
-  fontWeight: 600,
+  fontSize: "0.75rem",
+  fontWeight: 500,
+  borderRadius: "0.375rem",
 };

 const errorBannerStyle: React.CSSProperties = {
--- a/web/src/pages/SchemasPage.tsx
+++ b/web/src/pages/SchemasPage.tsx
@@ -706,22 +706,23 @@ const tdStyle: React.CSSProperties = {

 const btnTinyStyle: React.CSSProperties = {
  padding: "0.2rem 0.5rem",
-  borderRadius: "0.25rem",
+  borderRadius: "0.375rem",
  border: "none",
  backgroundColor: "var(--ctp-surface1)",
  color: "var(--ctp-text)",
  fontSize: "0.75rem",
+  fontWeight: 500,
  cursor: "pointer",
 };

 const btnTinyPrimaryStyle: React.CSSProperties = {
  padding: "0.2rem 0.5rem",
-  borderRadius: "0.25rem",
+  borderRadius: "0.375rem",
  border: "none",
  backgroundColor: "var(--ctp-mauve)",
  color: "var(--ctp-crust)",
  fontSize: "0.75rem",
-  fontWeight: 600,
+  fontWeight: 500,
  cursor: "pointer",
 };

--- a/web/src/pages/SettingsPage.tsx
+++ b/web/src/pages/SettingsPage.tsx
@@ -404,12 +404,12 @@ const inputStyle: React.CSSProperties = {

 const btnPrimaryStyle: React.CSSProperties = {
  padding: "0.5rem 1rem",
-  borderRadius: "0.4rem",
+  borderRadius: "0.375rem",
  border: "none",
  backgroundColor: "var(--ctp-mauve)",
  color: "var(--ctp-crust)",
-  fontWeight: 600,
-  fontSize: "0.85rem",
+  fontWeight: 500,
+  fontSize: "0.75rem",
  cursor: "pointer",
  whiteSpace: "nowrap",
 };
@@ -418,19 +418,22 @@ const btnCopyStyle: React.CSSProperties = {
  padding: "0.4rem 0.75rem",
  background: "var(--ctp-surface1)",
  border: "none",
-  borderRadius: "0.4rem",
+  borderRadius: "0.375rem",
  color: "var(--ctp-text)",
  cursor: "pointer",
-  fontSize: "0.85rem",
+  fontSize: "0.75rem",
+  fontWeight: 500,
 };

 const btnDismissStyle: React.CSSProperties = {
  padding: "0.4rem 0.75rem",
  background: "none",
  border: "none",
+  borderRadius: "0.375rem",
  color: "var(--ctp-subtext0)",
  cursor: "pointer",
-  fontSize: "0.85rem",
+  fontSize: "0.75rem",
+  fontWeight: 500,
 };

 const btnDangerStyle: React.CSSProperties = {
@@ -438,9 +441,10 @@ const btnDangerStyle: React.CSSProperties = {
  color: "var(--ctp-red)",
  border: "none",
  padding: "0.3rem 0.6rem",
-  borderRadius: "0.3rem",
+  borderRadius: "0.375rem",
  cursor: "pointer",
-  fontSize: "0.8rem",
+  fontSize: "0.75rem",
+  fontWeight: 500,
 };

 const btnRevokeConfirmStyle: React.CSSProperties = {
@@ -448,19 +452,20 @@ const btnRevokeConfirmStyle: React.CSSProperties = {
  color: "var(--ctp-crust)",
  border: "none",
  padding: "0.2rem 0.5rem",
-  borderRadius: "0.25rem",
+  borderRadius: "0.375rem",
  cursor: "pointer",
  fontSize: "0.75rem",
-  fontWeight: 600,
+  fontWeight: 500,
 };

 const btnTinyStyle: React.CSSProperties = {
  padding: "0.2rem 0.5rem",
-  borderRadius: "0.25rem",
+  borderRadius: "0.375rem",
  border: "none",
  backgroundColor: "var(--ctp-surface1)",
  color: "var(--ctp-text)",
  fontSize: "0.75rem",
+  fontWeight: 500,
  cursor: "pointer",
 };