Style out of date message

Nate Butler created 3 years ago

Change summary

assets/themes/cave-dark.json         | 17 ++++++++++++++---
assets/themes/cave-light.json        | 17 ++++++++++++++---
assets/themes/dark.json              | 17 ++++++++++++++---
assets/themes/light.json             | 17 ++++++++++++++---
assets/themes/solarized-dark.json    | 17 ++++++++++++++---
assets/themes/solarized-light.json   | 17 ++++++++++++++---
assets/themes/sulphurpool-dark.json  | 17 ++++++++++++++---
assets/themes/sulphurpool-light.json | 17 ++++++++++++++---
styles/src/styleTree/workspace.ts    | 14 ++++++++++----
9 files changed, 122 insertions(+), 28 deletions(-)

Detailed changes

assets/themes/cave-dark.json

@@ -346,7 +346,7 @@
     },
     "titlebar": {
       "avatar_width": 18,
-      "height": 32,
+      "height": 33,
       "background": "#26232a",
       "padding": {
         "left": 80
@@ -370,7 +370,8 @@
       "border": {
         "color": "#19171c",
         "width": 1,
-        "bottom": true
+        "bottom": true,
+        "overlay": true
       },
       "sign_in_prompt": {
         "border": {
@@ -425,7 +426,17 @@
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#a06e3b",
-        "size": 13,
+        "size": 12,
+        "background": "#a06e3b26",
+        "border": {
+          "color": "#a06e3b26",
+          "width": 1
+        },
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
+        "corner_radius": 6,
         "margin": {
           "right": 6
         }

assets/themes/cave-light.json

@@ -346,7 +346,7 @@
     },
     "titlebar": {
       "avatar_width": 18,
-      "height": 32,
+      "height": 33,
       "background": "#e2dfe7",
       "padding": {
         "left": 80
@@ -370,7 +370,8 @@
       "border": {
         "color": "#efecf4",
         "width": 1,
-        "bottom": true
+        "bottom": true,
+        "overlay": true
       },
       "sign_in_prompt": {
         "border": {
@@ -425,7 +426,17 @@
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#a06e3b",
-        "size": 13,
+        "size": 12,
+        "background": "#a06e3b26",
+        "border": {
+          "color": "#a06e3b26",
+          "width": 1
+        },
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
+        "corner_radius": 6,
         "margin": {
           "right": 6
         }

assets/themes/dark.json

@@ -346,7 +346,7 @@
     },
     "titlebar": {
       "avatar_width": 18,
-      "height": 32,
+      "height": 33,
       "background": "#2b2b2b",
       "padding": {
         "left": 80
@@ -370,7 +370,8 @@
       "border": {
         "color": "#070707",
         "width": 1,
-        "bottom": true
+        "bottom": true,
+        "overlay": true
       },
       "sign_in_prompt": {
         "border": {
@@ -425,7 +426,17 @@
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#f7bb57",
-        "size": 13,
+        "size": 12,
+        "background": "#f6a72426",
+        "border": {
+          "color": "#f6a72426",
+          "width": 1
+        },
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
+        "corner_radius": 6,
         "margin": {
           "right": 6
         }

assets/themes/light.json

@@ -346,7 +346,7 @@
     },
     "titlebar": {
       "avatar_width": 18,
-      "height": 32,
+      "height": 33,
       "background": "#eaeaea",
       "padding": {
         "left": 80
@@ -370,7 +370,8 @@
       "border": {
         "color": "#d5d5d5",
         "width": 1,
-        "bottom": true
+        "bottom": true,
+        "overlay": true
       },
       "sign_in_prompt": {
         "border": {
@@ -425,7 +426,17 @@
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#d3a20b",
-        "size": 13,
+        "size": 12,
+        "background": "#f6a72426",
+        "border": {
+          "color": "#f6a72426",
+          "width": 1
+        },
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
+        "corner_radius": 6,
         "margin": {
           "right": 6
         }

assets/themes/solarized-dark.json

@@ -346,7 +346,7 @@
     },
     "titlebar": {
       "avatar_width": 18,
-      "height": 32,
+      "height": 33,
       "background": "#073642",
       "padding": {
         "left": 80
@@ -370,7 +370,8 @@
       "border": {
         "color": "#002b36",
         "width": 1,
-        "bottom": true
+        "bottom": true,
+        "overlay": true
       },
       "sign_in_prompt": {
         "border": {
@@ -425,7 +426,17 @@
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#b58900",
-        "size": 13,
+        "size": 12,
+        "background": "#b5890026",
+        "border": {
+          "color": "#b5890026",
+          "width": 1
+        },
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
+        "corner_radius": 6,
         "margin": {
           "right": 6
         }

assets/themes/solarized-light.json

@@ -346,7 +346,7 @@
     },
     "titlebar": {
       "avatar_width": 18,
-      "height": 32,
+      "height": 33,
       "background": "#eee8d5",
       "padding": {
         "left": 80
@@ -370,7 +370,8 @@
       "border": {
         "color": "#fdf6e3",
         "width": 1,
-        "bottom": true
+        "bottom": true,
+        "overlay": true
       },
       "sign_in_prompt": {
         "border": {
@@ -425,7 +426,17 @@
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#b58900",
-        "size": 13,
+        "size": 12,
+        "background": "#b5890026",
+        "border": {
+          "color": "#b5890026",
+          "width": 1
+        },
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
+        "corner_radius": 6,
         "margin": {
           "right": 6
         }

assets/themes/sulphurpool-dark.json

@@ -346,7 +346,7 @@
     },
     "titlebar": {
       "avatar_width": 18,
-      "height": 32,
+      "height": 33,
       "background": "#293256",
       "padding": {
         "left": 80
@@ -370,7 +370,8 @@
       "border": {
         "color": "#202746",
         "width": 1,
-        "bottom": true
+        "bottom": true,
+        "overlay": true
       },
       "sign_in_prompt": {
         "border": {
@@ -425,7 +426,17 @@
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#c08b30",
-        "size": 13,
+        "size": 12,
+        "background": "#c08b3026",
+        "border": {
+          "color": "#c08b3026",
+          "width": 1
+        },
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
+        "corner_radius": 6,
         "margin": {
           "right": 6
         }

assets/themes/sulphurpool-light.json

@@ -346,7 +346,7 @@
     },
     "titlebar": {
       "avatar_width": 18,
-      "height": 32,
+      "height": 33,
       "background": "#dfe2f1",
       "padding": {
         "left": 80
@@ -370,7 +370,8 @@
       "border": {
         "color": "#f5f7ff",
         "width": 1,
-        "bottom": true
+        "bottom": true,
+        "overlay": true
       },
       "sign_in_prompt": {
         "border": {
@@ -425,7 +426,17 @@
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#c08b30",
-        "size": 13,
+        "size": 12,
+        "background": "#c08b3026",
+        "border": {
+          "color": "#c08b3026",
+          "width": 1
+        },
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
+        "corner_radius": 6,
         "margin": {
           "right": 6
         }

styles/src/styleTree/workspace.ts

@@ -61,7 +61,7 @@ export default function workspace(theme: Theme) {
     statusBar: statusBar(theme),
     titlebar: {
       avatarWidth: 18,
-      height: 32,
+      height: 33,
       background: backgroundColor(theme, 100),
       padding: {
         left: 80,
@@ -80,7 +80,7 @@ export default function workspace(theme: Theme) {
         // TODO: The background for this ideally should be 
         // set with a token, not hardcoded in rust
       },
-      border: border(theme, "primary", { bottom: true }),
+      border: border(theme, "primary", { bottom: true, overlay: true }),
       signInPrompt: {
         border: border(theme, "primary"),
         cornerRadius: 6,
@@ -120,8 +120,14 @@ export default function workspace(theme: Theme) {
         }
       },
       outdatedWarning: {
-        ...text(theme, "sans", "warning"),
-        size: 13,
+        ...text(theme, "sans", "warning", { size: "xs" }),
+        background: backgroundColor(theme, "warning"),
+        border: border(theme, "warning"),
+        padding: {
+          left: 6,
+          right: 6,
+        },
+        cornerRadius: 6,
         margin: { right: 6 }
       },
     },