Update top bar styles

platypii · platypii · commit 9b6264542c6a · 2025-10-12T17:43:10.000-07:00
diff --git a/index.html b/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8">
     <title>hyperparam</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;500&display=swap"/>
-    <link href="favicon.png" rel="icon" />
+    <link href="favicon.svg" rel="icon" />
     <meta name="description" content="hyperparam is the missing UI for machine learning" />
-    <meta name="theme-color" content="#6b00ff">
+    <meta name="theme-color" content="#4433aa">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
diff --git a/package.json b/package.json
@@ -58,15 +58,15 @@
     "hightable": "0.20.1",
     "hyparquet": "1.19.0",
     "hyparquet-compressors": "1.1.1",
-    "icebird": "0.3.0"
+    "icebird": "0.3.1"
   },
   "devDependencies": {
     "@eslint/js": "9.37.0",
     "@storybook/react-vite": "9.1.10",
     "@testing-library/react": "16.3.0",
-    "@types/node": "24.7.0",
-    "@types/react": "19.2.0",
-    "@types/react-dom": "19.2.0",
+    "@types/node": "24.7.2",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.1",
     "@vitejs/plugin-react": "5.0.4",
     "@vitest/coverage-v8": "3.2.4",
     "eslint": "9.37.0",
@@ -82,7 +82,7 @@
     "react-dom": "19.2.0",
     "storybook": "9.1.10",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.45.0",
+    "typescript-eslint": "8.46.0",
     "vite": "7.1.9",
     "vitest": "3.2.4"
   },
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/favicon.svg b/public/favicon.svg
@@ -0,0 +1,6 @@
+<svg width="100" height="100" fill="#fff" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+ <path d="m75.93 39.66-21.8 12.73v25.51l21.8-12.73z"/>
+ <path d="m24.07 39.66v25.5l21.8 12.73v-25.51l-19.81-11.56z"/>
+ <path d="m50 19.72-21.85 12.75 21.85 12.75 21.85-12.75z"/>
+ <path d="m50 0.5c-0.6255 0-1.251 0.1627-1.811 0.4875l-39.57 22.94c-1.113 0.6457-1.799 1.835-1.799 3.122v45.9c2.081e-4 1.287 0.6855 2.477 1.799 3.122l39.57 22.94c1.12 0.6493 2.501 0.6493 3.621 0l39.57-22.94c1.113-0.6457 1.799-1.835 1.799-3.122v-45.9c-1.98e-4 -1.287-0.6855-2.477-1.799-3.122l-39.57-22.94c-0.5599-0.3247-1.185-0.4875-1.811-0.4875zm-0.7211 10.38a4.123 4.129 0 0 1 2.796 0.4975l30.05 17.53a4.123 4.129 0 0 1 0.979 0.8279 4.123 4.129 0 0 1 0.145 0.1611 4.123 4.129 0 0 1 0.6325 1.1 4.123 4.129 0 0 1 0.05841 0.1813 4.123 4.129 0 0 1 0.2296 1.338v35.02a4.123 4.129 0 0 1-2.047 3.57l-30.05 17.53a4.123 4.129 0 0 1-0.1048 0.03827 4.123 4.129 0 0 1-1.174 0.4331 4.123 4.129 0 0 1-0.1732 0.02409 4.123 4.129 0 0 1-1.295 0.0039 4.123 4.129 0 0 1-0.1028-0.02424 4.123 4.129 0 0 1-1.253-0.4532 4.123 4.129 0 0 1-0.03424-0.01606 4.123 4.129 0 0 1-0.01209-0.0062l-30.05-17.53a4.123 4.129 0 0 1-2.047-3.57v-35.06a4.123 4.129 0 0 1 0.08661-0.4895 4.123 4.129 0 0 1 0.1067-0.6103 4.123 4.129 0 0 1 0.419-0.9427 4.123 4.129 0 0 1 0.2719-0.4754 4.123 4.129 0 0 1 1.04-0.9427 4.123 4.129 0 0 1 0.1208-0.1088l30.05-17.53a4.123 4.129 0 0 1 1.354-0.4975z"/>
+</svg>
diff --git a/src/components/Breadcrumb/Breadcrumb.module.css b/src/components/Breadcrumb/Breadcrumb.module.css
@@ -1,16 +1,23 @@
+:root {
+  --color-background-dark: #333;
+  --border-radius-lg: 8px;
+  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
+}
+
 .breadcrumb {
   /* top navbar */
   align-items: center;
   display: flex;
-  font-size: 18px;
-  height: 32px;
+  font-size: 16px;
+  height: 3em;
   justify-content: space-between;
   gap: 10px;
   min-height: 32px;
-  padding-left: 20px;
-  padding-right: 10px;
   border-bottom: 1px solid #ddd;
-  background: #eee;
+  background: var(--color-background-dark);
+  padding: 0 10px 0 20px;
+  border-radius: var(--border-radius-lg);
+  margin: var(--space-3xs);
   /* TODO(SL): forbid overflow? */
 
   h1 {
@@ -32,10 +39,9 @@
     display: none;
   }
   a {
-    color: #222622;
-    font-family: "Courier New", Courier, monospace;
-    font-weight: 600;
-    font-size: 18px;
+    color: #eee;
+    font-weight: 500;
+    font-size: 12pt;
     text-overflow: ellipsis;
     white-space: nowrap;
     text-decoration-thickness: 1px;
diff --git a/src/components/ContentWrapper/ContentWrapper.module.css b/src/components/ContentWrapper/ContentWrapper.module.css
@@ -7,13 +7,13 @@
 
   & > header:first-child {
     align-items: center;
-    background-color: #f2f2f2;
     color: #444;
     display: flex;
+    font-size: 10pt;
     gap: 16px;
     height: 24px;
     overflow: hidden;
-    padding: 0 16px;
+    padding: 0 8px;
     /* all one line */
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/src/components/Dropdown/Dropdown.module.css b/src/components/Dropdown/Dropdown.module.css
@@ -20,11 +20,6 @@
   overflow-x: hidden;
   padding: 0;
 }
-.dropdownButton:active,
-.dropdownButton:focus,
-.dropdownButton:hover {
-  color: #113;
-}
 
 /* caret */
 .dropdownButton::before {
diff --git a/src/components/Folder/Folder.module.css b/src/components/Folder/Folder.module.css
@@ -70,7 +70,7 @@
 .search {
   background: #fff url("../../assets/search.svg") no-repeat center right 8px;
   border: 1px solid transparent;
-  border-radius: 8px;
+  border-radius: 12px;
   flex-shrink: 1;
   font-size: 12px;
   height: 24px;
diff --git a/src/components/SideBar/SideBar.module.css b/src/components/SideBar/SideBar.module.css
@@ -7,7 +7,7 @@
   height: 100vh;
 }
 .sideBar > div {
-  background-image: linear-gradient(to bottom, #f2f2f2, #e4e4e4);
+  background: #eef0f9;
   box-shadow: 0 0 6px rgba(10, 10, 10, 0.4);
   height: 100vh;
   position: absolute;
@@ -23,7 +23,7 @@
   filter: drop-shadow(0 0 2px #bbb);
   font-family: "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 1.1em;
-  font-weight: 500;
+  font-weight: 600;
   text-orientation: mixed;
   letter-spacing: 0.3px;
   padding: 10px 12px;
