From ef2b42c3fbcc0e94872a3d067fe2a82a13d4e4c1 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Sat, 16 Jul 2022 11:52:30 -0400
Subject: [PATCH] UI / Theme improvements

---
 styles/src/styleTree/app.ts        |  2 +-
 styles/src/styleTree/statusBar.ts  | 10 +++++-----
 styles/src/styleTree/tooltip.ts    |  2 +-
 styles/src/styleTree/workspace.ts  | 27 +++++++++++++++++----------
 styles/src/themes/common/base16.ts |  8 ++++----
 5 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts
index fe67cf701d2071206d8faed0bfe74a8a3412e909..33bcafcdae94c75d1ea910ef65a927c282d83310 100644
--- a/styles/src/styleTree/app.ts
+++ b/styles/src/styleTree/app.ts
@@ -17,7 +17,7 @@ import tooltip from "./tooltip";
 import terminal from "./terminal";
 
 export const panel = {
-  padding: { top: 12, bottom: 12 },
+  padding: { top: 12, bottom: 12 }
 };
 
 export default function app(theme: Theme): Object {
diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts
index 47050fe3ca06f1c8b89263effac473071eed2078..549858dbefd87af5af2e65981d74aa8ae4624e0b 100644
--- a/styles/src/styleTree/statusBar.ts
+++ b/styles/src/styleTree/statusBar.ts
@@ -35,7 +35,7 @@ export default function statusBar(theme: Theme) {
       iconColor: iconColor(theme, "muted"),
       hover: {
         message: text(theme, "sans", "primary"),
-        iconColor: iconColor(theme, "primary"),
+        iconColor: iconColor(theme, "active"),
         background: backgroundColor(theme, 300, "hovered"),
       }
     },
@@ -49,7 +49,7 @@ export default function statusBar(theme: Theme) {
     },
     diagnosticSummary: {
       height: 16,
-      iconWidth: 14,
+      iconWidth: 16,
       iconSpacing: 2,
       summarySpacing: 6,
       text: text(theme, "sans", "primary", { size: "sm" }),
@@ -71,7 +71,7 @@ export default function statusBar(theme: Theme) {
         border: border(theme, "error"),
       },
       hover: {
-        iconColorOk: iconColor(theme, "primary"),
+        iconColorOk: iconColor(theme, "active"),
         containerOk: {
           cornerRadius: 6,
           padding: { top: 3, bottom: 3, left: 7, right: 7 },
@@ -94,10 +94,10 @@ export default function statusBar(theme: Theme) {
       groupRight: {},
       item: {
         ...statusContainer,
-        iconSize: 14,
+        iconSize: 16,
         iconColor: iconColor(theme, "secondary"),
         hover: {
-          iconColor: iconColor(theme, "primary"),
+          iconColor: iconColor(theme, "active"),
           background: backgroundColor(theme, 300, "hovered"),
         },
         active: {
diff --git a/styles/src/styleTree/tooltip.ts b/styles/src/styleTree/tooltip.ts
index c395b9ff3d398ee867cb77422b859013278bee39..0a4ab19d46ec8a6b87726063127d44a229e4a54e 100644
--- a/styles/src/styleTree/tooltip.ts
+++ b/styles/src/styleTree/tooltip.ts
@@ -14,7 +14,7 @@ export default function tooltip(theme: Theme) {
       background: backgroundColor(theme, "on500"),
       cornerRadius: 4,
       margin: { left: 6 },
-      padding: { left: 3, right: 3 },
+      padding: { left: 4, right: 4 },
       ...text(theme, "mono", "muted", { size: "xs", weight: "bold" })
     },
     maxTextWidth: 200,
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index 36d47bed9215680b2fd63367dd7127d28a9d9310..0e9762f32151c3387a7b280fc24b9906a81d271b 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -60,7 +60,7 @@ export default function workspace(theme: Theme) {
       border: {
         ...tab.border
       },
-      iconWidth: 14,
+      iconWidth: 12,
       buttonWidth: tab.height,
       hover: {
         color: iconColor(theme, "active"),
@@ -110,17 +110,24 @@ export default function workspace(theme: Theme) {
       },
       border: border(theme, "primary", { bottom: true, overlay: true }),
       signInPrompt: {
-        border: border(theme, "primary"),
+        background: backgroundColor(theme, 100),
+        border: border(theme, "secondary"),
         cornerRadius: 6,
         margin: {
           top: 1,
         },
         padding: {
-          left: 6,
-          right: 6,
+          top: 1,
+          bottom: 1,
+          left: 7,
+          right: 7,
         },
         ...text(theme, "sans", "secondary", { size: "xs" }),
-        hover: text(theme, "sans", "active", { size: "xs" }),
+        hover: {
+          ...text(theme, "sans", "active", { size: "xs" }),
+          background: backgroundColor(theme, "on300", "hovered"),
+          border: border(theme, "primary"),
+        }
       },
       offlineIcon: {
         color: iconColor(theme, "secondary"),
@@ -152,9 +159,9 @@ export default function workspace(theme: Theme) {
       border: border(theme, "secondary", { bottom: true }),
       itemSpacing: 8,
       navButton: {
-        color: iconColor(theme, "secondary"),
-        iconWidth: 8,
-        buttonWidth: 18,
+        color: iconColor(theme, "primary"),
+        iconWidth: 12,
+        buttonWidth: 24,
         cornerRadius: 6,
         hover: {
           color: iconColor(theme, "active"),
@@ -164,7 +171,7 @@ export default function workspace(theme: Theme) {
           color: withOpacity(iconColor(theme, "muted"), 0.6),
         },
       },
-      padding: { left: 16, right: 8, top: 4, bottom: 4 },
+      padding: { left: 8, right: 8, top: 4, bottom: 4 },
     },
     breadcrumbs: {
       ...text(theme, "mono", "secondary"),
@@ -183,7 +190,7 @@ export default function workspace(theme: Theme) {
       shadow: modalShadow(theme),
     },
     notifications: {
-      width: 380,
+      width: 400,
       margin: { right: 10, bottom: 10 },
     }
   };
diff --git a/styles/src/themes/common/base16.ts b/styles/src/themes/common/base16.ts
index 729cf32ee5354ff9411dbaaa1f5a566bbbb820f6..e7b71a49bb4ce28e4a69ceb40a132d0388805563 100644
--- a/styles/src/themes/common/base16.ts
+++ b/styles/src/themes/common/base16.ts
@@ -62,13 +62,13 @@ export function createTheme(
     },
     on300: {
       base: sample(ramps.neutral, 0),
-      hovered: sample(ramps.neutral, 0.25),
-      active: sample(ramps.neutral, 0.5),
+      hovered: sample(ramps.neutral, 0.5),
+      active: sample(ramps.neutral, 1),
     },
     on500: {
-      base: sample(ramps.neutral, 1.25),
+      base: sample(ramps.neutral, 1),
       hovered: sample(ramps.neutral, 1.5),
-      active: sample(ramps.neutral, 1.75),
+      active: sample(ramps.neutral, 2),
     },
     ok: {
       base: withOpacity(sample(ramps.green, 0.5), 0.15),