Update share icon and swap its posiiton

Antonio Scandurra created 3 years ago

Change summary

assets/icons/broadcast-24.svg        |    6 
assets/icons/share.svg               |    1 
assets/themes/cave-dark.json         |   45 +
assets/themes/cave-light.json        |   45 +
assets/themes/dark.json              |   45 +
assets/themes/light.json             |   45 +
assets/themes/solarized-dark.json    |   45 +
assets/themes/solarized-light.json   |   45 +
assets/themes/sulphurpool-dark.json  |   45 +
assets/themes/sulphurpool-light.json |   45 +
crates/project/src/project.rs        |    4 
crates/theme/src/theme.rs            |   13 
crates/workspace/src/workspace.rs    |   96 +
styles/dist/tokens.json              | 1134 ------------------------------
styles/src/styleTree/workspace.ts    |   29 
15 files changed, 438 insertions(+), 1,205 deletions(-)

Detailed changes

assets/icons/broadcast-24.svg 🔗

@@ -1,6 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.87348 15.1266C4.04217 12.2953 4.04217 7.70484 6.87348 4.87354M17.1265 4.87354C19.9578 7.70484 19.9578 12.2953 17.1265 15.1266" stroke="#636B78" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8.9948 13.0052C7.33507 11.3454 7.33507 8.65448 8.9948 6.99475M15.0052 6.99475C16.6649 8.65448 16.6649 11.3454 15.0052 13.0052" stroke="#636B78" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12.5 10C12.5 10.2761 12.2761 10.5 12 10.5C11.7239 10.5 11.5 10.2761 11.5 10C11.5 9.72386 11.7239 9.5 12 9.5C12.2761 9.5 12.5 9.72386 12.5 10Z" stroke="#636B78" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 13.75V19.25" stroke="#636B78" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

@@ -0,0 +1,3 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">

assets/themes/cave-dark.json 🔗

@@ -258,8 +258,9 @@
       "avatar_width": 18,
       "height": 32,
       "background": "#26232a",
-      "share_icon_color": "#8b8792",
-      "share_icon_active_color": "#576ddb",
+      "padding": {
+        "left": 80
+      },
       "title": {
         "family": "Zed Sans",
         "color": "#e2dfe7",
@@ -324,10 +325,48 @@
           "right": 4
         }
       },
+      "share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "color": "#8b8792"
+      },
+      "hovered_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#58526052",
+        "color": "#8b8792"
+      },
+      "hovered_active_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#58526052",
+        "color": "#efecf4"
+      },
+      "active_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#5852607a",
+        "color": "#efecf4"
+      },
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#a06e3b",
-        "size": 13
+        "size": 13,
+        "margin": {
+          "right": 6
+        }
       }
     },
     "toolbar": {

assets/themes/cave-light.json 🔗

@@ -258,8 +258,9 @@
       "avatar_width": 18,
       "height": 32,
       "background": "#e2dfe7",
-      "share_icon_color": "#585260",
-      "share_icon_active_color": "#576ddb",
+      "padding": {
+        "left": 80
+      },
       "title": {
         "family": "Zed Sans",
         "color": "#26232a",
@@ -324,10 +325,48 @@
           "right": 4
         }
       },
+      "share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "color": "#585260"
+      },
+      "hovered_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#8b87921f",
+        "color": "#585260"
+      },
+      "hovered_active_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#8b87921f",
+        "color": "#19171c"
+      },
+      "active_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#8b87922e",
+        "color": "#19171c"
+      },
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#a06e3b",
-        "size": 13
+        "size": 13,
+        "margin": {
+          "right": 6
+        }
       }
     },
     "toolbar": {

assets/themes/dark.json 🔗

@@ -258,8 +258,9 @@
       "avatar_width": 18,
       "height": 32,
       "background": "#2b2b2b",
-      "share_icon_color": "#9c9c9c",
-      "share_icon_active_color": "#2472f2",
+      "padding": {
+        "left": 80
+      },
       "title": {
         "family": "Zed Sans",
         "color": "#f1f1f1",
@@ -324,10 +325,48 @@
           "right": 4
         }
       },
+      "share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "color": "#9c9c9c"
+      },
+      "hovered_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#323232",
+        "color": "#9c9c9c"
+      },
+      "hovered_active_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#323232",
+        "color": "#ffffff"
+      },
+      "active_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#1c1c1c",
+        "color": "#ffffff"
+      },
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#f7bb57",
-        "size": 13
+        "size": 13,
+        "margin": {
+          "right": 6
+        }
       }
     },
     "toolbar": {

assets/themes/light.json 🔗

@@ -258,8 +258,9 @@
       "avatar_width": 18,
       "height": 32,
       "background": "#eaeaea",
-      "share_icon_color": "#717171",
-      "share_icon_active_color": "#484bed",
+      "padding": {
+        "left": 80
+      },
       "title": {
         "family": "Zed Sans",
         "color": "#2b2b2b",
@@ -324,10 +325,48 @@
           "right": 4
         }
       },
+      "share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "color": "#717171"
+      },
+      "hovered_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#e3e3e3",
+        "color": "#717171"
+      },
+      "hovered_active_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#e3e3e3",
+        "color": "#000000"
+      },
+      "active_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#d5d5d5",
+        "color": "#000000"
+      },
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#d3a20b",
-        "size": 13
+        "size": 13,
+        "margin": {
+          "right": 6
+        }
       }
     },
     "toolbar": {

assets/themes/solarized-dark.json 🔗

@@ -258,8 +258,9 @@
       "avatar_width": 18,
       "height": 32,
       "background": "#073642",
-      "share_icon_color": "#93a1a1",
-      "share_icon_active_color": "#268bd2",
+      "padding": {
+        "left": 80
+      },
       "title": {
         "family": "Zed Sans",
         "color": "#eee8d5",
@@ -324,10 +325,48 @@
           "right": 4
         }
       },
+      "share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "color": "#93a1a1"
+      },
+      "hovered_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#586e7552",
+        "color": "#93a1a1"
+      },
+      "hovered_active_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#586e7552",
+        "color": "#fdf6e3"
+      },
+      "active_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#586e757a",
+        "color": "#fdf6e3"
+      },
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#b58900",
-        "size": 13
+        "size": 13,
+        "margin": {
+          "right": 6
+        }
       }
     },
     "toolbar": {

assets/themes/solarized-light.json 🔗

@@ -258,8 +258,9 @@
       "avatar_width": 18,
       "height": 32,
       "background": "#eee8d5",
-      "share_icon_color": "#586e75",
-      "share_icon_active_color": "#268bd2",
+      "padding": {
+        "left": 80
+      },
       "title": {
         "family": "Zed Sans",
         "color": "#073642",
@@ -324,10 +325,48 @@
           "right": 4
         }
       },
+      "share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "color": "#586e75"
+      },
+      "hovered_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#93a1a11f",
+        "color": "#586e75"
+      },
+      "hovered_active_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#93a1a11f",
+        "color": "#002b36"
+      },
+      "active_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#93a1a12e",
+        "color": "#002b36"
+      },
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#b58900",
-        "size": 13
+        "size": 13,
+        "margin": {
+          "right": 6
+        }
       }
     },
     "toolbar": {

assets/themes/sulphurpool-dark.json 🔗

@@ -258,8 +258,9 @@
       "avatar_width": 18,
       "height": 32,
       "background": "#293256",
-      "share_icon_color": "#979db4",
-      "share_icon_active_color": "#3d8fd1",
+      "padding": {
+        "left": 80
+      },
       "title": {
         "family": "Zed Sans",
         "color": "#dfe2f1",
@@ -324,10 +325,48 @@
           "right": 4
         }
       },
+      "share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "color": "#979db4"
+      },
+      "hovered_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#5e668752",
+        "color": "#979db4"
+      },
+      "hovered_active_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#5e668752",
+        "color": "#f5f7ff"
+      },
+      "active_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#5e66877a",
+        "color": "#f5f7ff"
+      },
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#c08b30",
-        "size": 13
+        "size": 13,
+        "margin": {
+          "right": 6
+        }
       }
     },
     "toolbar": {

assets/themes/sulphurpool-light.json 🔗

@@ -258,8 +258,9 @@
       "avatar_width": 18,
       "height": 32,
       "background": "#dfe2f1",
-      "share_icon_color": "#5e6687",
-      "share_icon_active_color": "#3d8fd1",
+      "padding": {
+        "left": 80
+      },
       "title": {
         "family": "Zed Sans",
         "color": "#293256",
@@ -324,10 +325,48 @@
           "right": 4
         }
       },
+      "share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "color": "#5e6687"
+      },
+      "hovered_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#979db41f",
+        "color": "#5e6687"
+      },
+      "hovered_active_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#979db41f",
+        "color": "#202746"
+      },
+      "active_share_icon": {
+        "margin": {
+          "top": 3,
+          "bottom": 2
+        },
+        "corner_radius": 6,
+        "background": "#979db42e",
+        "color": "#202746"
+      },
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#c08b30",
-        "size": 13
+        "size": 13,
+        "margin": {
+          "right": 6
+        }
       }
     },
     "toolbar": {

crates/project/src/project.rs 🔗

@@ -669,6 +669,10 @@ impl Project {
             .map(|worktree| worktree.read(cx).id())
     }
 
+    pub fn can_share(&self, cx: &AppContext) -> bool {
+        self.is_local() && self.visible_worktrees(cx).next().is_some()
+    }
+
     pub fn share(&self, cx: &mut ModelContext<Self>) -> Task<Result<()>> {
         let rpc = self.client.clone();
         cx.spawn(|this, mut cx| async move {

crates/theme/src/theme.rs 🔗

@@ -55,8 +55,10 @@ pub struct Titlebar {
     pub avatar_width: f32,
     pub avatar_ribbon: AvatarRibbon,
     pub offline_icon: OfflineIcon,
-    pub share_icon_color: Color,
-    pub share_icon_active_color: Color,
+    pub share_icon: ShareIcon,
+    pub hovered_share_icon: ShareIcon,
+    pub active_share_icon: ShareIcon,
+    pub hovered_active_share_icon: ShareIcon,
     pub avatar: ImageStyle,
     pub sign_in_prompt: ContainedText,
     pub hovered_sign_in_prompt: ContainedText,
@@ -79,6 +81,13 @@ pub struct OfflineIcon {
     pub color: Color,
 }
 
+#[derive(Clone, Deserialize, Default)]
+pub struct ShareIcon {
+    #[serde(flatten)]
+    pub container: ContainerStyle,
+    pub color: Color,
+}
+
 #[derive(Clone, Deserialize, Default)]
 pub struct Tab {
     pub height: f32,

crates/workspace/src/workspace.rs 🔗

@@ -1297,7 +1297,7 @@ impl Workspace {
             if project.is_local() {
                 if project.is_shared() {
                     project.unshare(cx);
-                } else {
+                } else if project.can_share(cx) {
                     project.share(cx).detach();
                 }
             }
@@ -1493,22 +1493,20 @@ impl Workspace {
                         Label::new(worktree_root_names, theme.workspace.titlebar.title.clone())
                             .aligned()
                             .left()
-                            .contained()
-                            .with_margin_left(80.)
                             .boxed(),
                     )
                     .with_child(
                         Align::new(
                             Flex::row()
-                                .with_children(self.render_share_icon(theme, cx))
                                 .with_children(self.render_collaborators(theme, cx))
-                                .with_child(self.render_current_user(
+                                .with_children(self.render_current_user(
                                     self.user_store.read(cx).current_user().as_ref(),
                                     self.project.read(cx).replica_id(),
                                     theme,
                                     cx,
                                 ))
                                 .with_children(self.render_connection_status(cx))
+                                .with_children(self.render_share_icon(theme, cx))
                                 .boxed(),
                         )
                         .right()
@@ -1552,25 +1550,30 @@ impl Workspace {
         replica_id: ReplicaId,
         theme: &Theme,
         cx: &mut RenderContext<Self>,
-    ) -> ElementBox {
+    ) -> Option<ElementBox> {
+        let status = *self.client.status().borrow();
         if let Some(avatar) = user.and_then(|user| user.avatar.clone()) {
-            self.render_avatar(avatar, replica_id, None, theme, cx)
+            Some(self.render_avatar(avatar, replica_id, None, theme, cx))
+        } else if matches!(status, client::Status::UpgradeRequired) {
+            None
         } else {
-            MouseEventHandler::new::<Authenticate, _, _>(0, cx, |state, _| {
-                let style = if state.hovered {
-                    &theme.workspace.titlebar.hovered_sign_in_prompt
-                } else {
-                    &theme.workspace.titlebar.sign_in_prompt
-                };
-                Label::new("Sign in".to_string(), style.text.clone())
-                    .contained()
-                    .with_style(style.container)
-                    .boxed()
-            })
-            .on_click(|cx| cx.dispatch_action(Authenticate))
-            .with_cursor_style(CursorStyle::PointingHand)
-            .aligned()
-            .boxed()
+            Some(
+                MouseEventHandler::new::<Authenticate, _, _>(0, cx, |state, _| {
+                    let style = if state.hovered {
+                        &theme.workspace.titlebar.hovered_sign_in_prompt
+                    } else {
+                        &theme.workspace.titlebar.sign_in_prompt
+                    };
+                    Label::new("Sign in".to_string(), style.text.clone())
+                        .contained()
+                        .with_style(style.container)
+                        .boxed()
+                })
+                .on_click(|cx| cx.dispatch_action(Authenticate))
+                .with_cursor_style(CursorStyle::PointingHand)
+                .aligned()
+                .boxed(),
+            )
         }
     }
 
@@ -1610,6 +1613,8 @@ impl Workspace {
             )
             .constrained()
             .with_width(theme.workspace.right_sidebar.width)
+            .contained()
+            .with_margin_left(2.)
             .boxed();
 
         if let Some(peer_id) = peer_id {
@@ -1623,22 +1628,39 @@ impl Workspace {
     }
 
     fn render_share_icon(&self, theme: &Theme, cx: &mut RenderContext<Self>) -> Option<ElementBox> {
-        if self.project().read(cx).is_local() && self.client.user_id().is_some() {
-            let color = if self.project().read(cx).is_shared() {
-                theme.workspace.titlebar.share_icon_active_color
-            } else {
-                theme.workspace.titlebar.share_icon_color
-            };
+        if self.project().read(cx).is_local()
+            && self.client.user_id().is_some()
+            && self.project().read(cx).can_share(cx)
+        {
             Some(
-                MouseEventHandler::new::<ToggleShare, _, _>(0, cx, |_, _| {
-                    Align::new(
-                        Svg::new("icons/broadcast-24.svg")
-                            .with_color(color)
-                            .constrained()
-                            .with_width(24.)
-                            .boxed(),
-                    )
-                    .boxed()
+                MouseEventHandler::new::<ToggleShare, _, _>(0, cx, |state, cx| {
+                    let style = if self.project().read(cx).is_shared() {
+                        if state.hovered {
+                            &theme.workspace.titlebar.hovered_active_share_icon
+                        } else {
+                            &theme.workspace.titlebar.active_share_icon
+                        }
+                    } else {
+                        if state.hovered {
+                            &theme.workspace.titlebar.hovered_share_icon
+                        } else {
+                            &theme.workspace.titlebar.share_icon
+                        }
+                    };
+                    Svg::new("icons/share.svg")
+                        .with_color(style.color)
+                        .constrained()
+                        .with_height(14.)
+                        .aligned()
+                        .contained()
+                        .with_style(style.container)
+                        .constrained()
+                        .with_width(24.)
+                        .aligned()
+                        .constrained()
+                        .with_width(theme.workspace.right_sidebar.width)
+                        .aligned()
+                        .boxed()
                 })
                 .with_cursor_style(CursorStyle::PointingHand)
                 .on_click(|cx| cx.dispatch_action(ToggleShare))

styles/dist/tokens.json 🔗

@@ -2515,1139 +2515,5 @@
       "value": 0.12,
       "type": "number"
     }
-  },
-  "solarized-dark": {
-    "meta": {
-      "themeName": "solarized-dark"
-    },
-    "text": {
-      "primary": {
-        "value": "#eee8d5",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#93a1a1",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#93a1a1",
-        "type": "color"
-      },
-      "placeholder": {
-        "value": "#839496",
-        "type": "color"
-      },
-      "active": {
-        "value": "#fdf6e3",
-        "type": "color"
-      },
-      "feature": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#859900",
-        "type": "color"
-      },
-      "error": {
-        "value": "#dc322f",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#b58900",
-        "type": "color"
-      },
-      "info": {
-        "value": "#268bd2",
-        "type": "color"
-      }
-    },
-    "icon": {
-      "primary": {
-        "value": "#eee8d5",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#93a1a1",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#93a1a1",
-        "type": "color"
-      },
-      "placeholder": {
-        "value": "#839496",
-        "type": "color"
-      },
-      "active": {
-        "value": "#fdf6e3",
-        "type": "color"
-      },
-      "feature": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#859900",
-        "type": "color"
-      },
-      "error": {
-        "value": "#dc322f",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#b58900",
-        "type": "color"
-      },
-      "info": {
-        "value": "#268bd2",
-        "type": "color"
-      }
-    },
-    "background": {
-      "100": {
-        "base": {
-          "value": "#073642",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#586e75",
-          "type": "color"
-        },
-        "active": {
-          "value": "#586e75",
-          "type": "color"
-        },
-        "focused": {
-          "value": "#586e75",
-          "type": "color"
-        }
-      },
-      "300": {
-        "base": {
-          "value": "#073642",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#586e75",
-          "type": "color"
-        },
-        "active": {
-          "value": "#586e75",
-          "type": "color"
-        },
-        "focused": {
-          "value": "#586e75",
-          "type": "color"
-        }
-      },
-      "500": {
-        "base": {
-          "value": "#002b36",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#073642",
-          "type": "color"
-        },
-        "active": {
-          "value": "#073642",
-          "type": "color"
-        },
-        "focused": {
-          "value": "#073642",
-          "type": "color"
-        }
-      },
-      "on300": {
-        "base": {
-          "value": "#002b36",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#073642",
-          "type": "color"
-        },
-        "active": {
-          "value": "#073642",
-          "type": "color"
-        },
-        "focused": {
-          "value": "#073642",
-          "type": "color"
-        }
-      },
-      "on500": {
-        "base": {
-          "value": "#073642",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#586e75",
-          "type": "color"
-        },
-        "active": {
-          "value": "#586e75",
-          "type": "color"
-        },
-        "focused": {
-          "value": "#586e75",
-          "type": "color"
-        }
-      },
-      "ok": {
-        "base": {
-          "value": "#859900",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#859900",
-          "type": "color"
-        },
-        "active": {
-          "value": "#859900",
-          "type": "color"
-        },
-        "focused": {
-          "value": "#859900",
-          "type": "color"
-        }
-      },
-      "error": {
-        "base": {
-          "value": "#dc322f",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#dc322f",
-          "type": "color"
-        },
-        "active": {
-          "value": "#dc322f",
-          "type": "color"
-        },
-        "focused": {
-          "value": "#dc322f",
-          "type": "color"
-        }
-      },
-      "warning": {
-        "base": {
-          "value": "#b58900",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#b58900",
-          "type": "color"
-        },
-        "active": {
-          "value": "#b58900",
-          "type": "color"
-        },
-        "focused": {
-          "value": "#b58900",
-          "type": "color"
-        }
-      },
-      "info": {
-        "base": {
-          "value": "#268bd2",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#268bd2",
-          "type": "color"
-        },
-        "active": {
-          "value": "#268bd2",
-          "type": "color"
-        },
-        "focused": {
-          "value": "#268bd2",
-          "type": "color"
-        }
-      }
-    },
-    "border": {
-      "primary": {
-        "value": "#002b36",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#073642",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#586e75",
-        "type": "color"
-      },
-      "focused": {
-        "value": "#586e75",
-        "type": "color"
-      },
-      "active": {
-        "value": "#586e75",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#859900",
-        "type": "color"
-      },
-      "error": {
-        "value": "#dc322f",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#b58900",
-        "type": "color"
-      },
-      "info": {
-        "value": "#268bd2",
-        "type": "color"
-      }
-    },
-    "editor": {
-      "background": {
-        "value": "#002b36",
-        "type": "color"
-      },
-      "indent_guide": {
-        "value": "#586e75",
-        "type": "color"
-      },
-      "indent_guide_active": {
-        "value": "#073642",
-        "type": "color"
-      },
-      "line": {
-        "active": {
-          "value": "#fdf6e312",
-          "type": "color"
-        },
-        "highlighted": {
-          "value": "#fdf6e31f",
-          "type": "color"
-        },
-        "inserted": {
-          "value": "#859900",
-          "type": "color"
-        },
-        "deleted": {
-          "value": "#dc322f",
-          "type": "color"
-        },
-        "modified": {
-          "value": "#268bd2",
-          "type": "color"
-        }
-      },
-      "highlight": {
-        "selection": {
-          "value": "#268bd23d",
-          "type": "color"
-        },
-        "occurrence": {
-          "value": "#657b831f",
-          "type": "color"
-        },
-        "activeOccurrence": {
-          "value": "#657b8329",
-          "type": "color"
-        },
-        "matchingBracket": {
-          "value": "#073642",
-          "type": "color"
-        },
-        "match": {
-          "value": "#6c71c480",
-          "type": "color"
-        },
-        "activeMatch": {
-          "value": "#6c71c4b3",
-          "type": "color"
-        },
-        "related": {
-          "value": "#073642",
-          "type": "color"
-        }
-      },
-      "gutter": {
-        "primary": {
-          "value": "#839496",
-          "type": "color"
-        },
-        "active": {
-          "value": "#fdf6e3",
-          "type": "color"
-        }
-      }
-    },
-    "syntax": {
-      "primary": {
-        "value": "#fdf6e3",
-        "type": "color"
-      },
-      "comment": {
-        "value": "#eee8d5",
-        "type": "color"
-      },
-      "keyword": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "function": {
-        "value": "#b58900",
-        "type": "color"
-      },
-      "type": {
-        "value": "#2aa198",
-        "type": "color"
-      },
-      "variant": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "property": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "enum": {
-        "value": "#cb4b16",
-        "type": "color"
-      },
-      "operator": {
-        "value": "#cb4b16",
-        "type": "color"
-      },
-      "string": {
-        "value": "#cb4b16",
-        "type": "color"
-      },
-      "number": {
-        "value": "#859900",
-        "type": "color"
-      },
-      "boolean": {
-        "value": "#859900",
-        "type": "color"
-      }
-    },
-    "player": {
-      "1": {
-        "baseColor": {
-          "value": "#268bd2",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#268bd2",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#268bd23d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#268bd2cc",
-          "type": "color"
-        }
-      },
-      "2": {
-        "baseColor": {
-          "value": "#859900",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#859900",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#8599003d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#859900cc",
-          "type": "color"
-        }
-      },
-      "3": {
-        "baseColor": {
-          "value": "#d33682",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#d33682",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#d336823d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#d33682cc",
-          "type": "color"
-        }
-      },
-      "4": {
-        "baseColor": {
-          "value": "#cb4b16",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#cb4b16",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#cb4b163d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#cb4b16cc",
-          "type": "color"
-        }
-      },
-      "5": {
-        "baseColor": {
-          "value": "#6c71c4",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#6c71c4",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#6c71c43d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#6c71c4cc",
-          "type": "color"
-        }
-      },
-      "6": {
-        "baseColor": {
-          "value": "#2aa198",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#2aa198",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#2aa1983d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#2aa198cc",
-          "type": "color"
-        }
-      },
-      "7": {
-        "baseColor": {
-          "value": "#dc322f",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#dc322f",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#dc322f3d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#dc322fcc",
-          "type": "color"
-        }
-      },
-      "8": {
-        "baseColor": {
-          "value": "#b58900",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#b58900",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#b589003d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#b58900cc",
-          "type": "color"
-        }
-      }
-    },
-    "shadowAlpha": {
-      "value": 0.32,
-      "type": "number"
-    }
-  },
-  "solarized-light": {
-    "meta": {
-      "themeName": "solarized-light"
-    },
-    "text": {
-      "primary": {
-        "value": "#073642",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#586e75",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#586e75",
-        "type": "color"
-      },
-      "placeholder": {
-        "value": "#657b83",
-        "type": "color"
-      },
-      "active": {
-        "value": "#002b36",
-        "type": "color"
-      },
-      "feature": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#859900",
-        "type": "color"
-      },
-      "error": {
-        "value": "#dc322f",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#b58900",
-        "type": "color"
-      },
-      "info": {
-        "value": "#268bd2",
-        "type": "color"
-      }
-    },
-    "icon": {
-      "primary": {
-        "value": "#073642",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#586e75",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#586e75",
-        "type": "color"
-      },
-      "placeholder": {
-        "value": "#657b83",
-        "type": "color"
-      },
-      "active": {
-        "value": "#002b36",
-        "type": "color"
-      },
-      "feature": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#859900",
-        "type": "color"
-      },
-      "error": {
-        "value": "#dc322f",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#b58900",
-        "type": "color"
-      },
-      "info": {
-        "value": "#268bd2",
-        "type": "color"
-      }
-    },
-    "background": {
-      "100": {
-        "base": {
-          "value": "#eee8d5",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#93a1a1",
-          "type": "color"
-        },
-        "active": {
-          "value": "#93a1a1",
-          "type": "color"
-        },
-        "focused": {
-          "value": "#93a1a1",
-          "type": "color"
-        }
-      },
-      "300": {
-        "base": {
-          "value": "#eee8d5",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#93a1a1",
-          "type": "color"
-        },
-        "active": {
-          "value": "#93a1a1",
-          "type": "color"
-        },
-        "focused": {
-          "value": "#93a1a1",
-          "type": "color"
-        }
-      },
-      "500": {
-        "base": {
-          "value": "#fdf6e3",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#eee8d5",
-          "type": "color"
-        },
-        "active": {
-          "value": "#eee8d5",
-          "type": "color"
-        },
-        "focused": {
-          "value": "#eee8d5",
-          "type": "color"
-        }
-      },
-      "on300": {
-        "base": {
-          "value": "#fdf6e3",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#eee8d5",
-          "type": "color"
-        },
-        "active": {
-          "value": "#eee8d5",
-          "type": "color"
-        },
-        "focused": {
-          "value": "#eee8d5",
-          "type": "color"
-        }
-      },
-      "on500": {
-        "base": {
-          "value": "#eee8d5",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#93a1a1",
-          "type": "color"
-        },
-        "active": {
-          "value": "#93a1a1",
-          "type": "color"
-        },
-        "focused": {
-          "value": "#93a1a1",
-          "type": "color"
-        }
-      },
-      "ok": {
-        "base": {
-          "value": "#859900",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#859900",
-          "type": "color"
-        },
-        "active": {
-          "value": "#859900",
-          "type": "color"
-        },
-        "focused": {
-          "value": "#859900",
-          "type": "color"
-        }
-      },
-      "error": {
-        "base": {
-          "value": "#dc322f",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#dc322f",
-          "type": "color"
-        },
-        "active": {
-          "value": "#dc322f",
-          "type": "color"
-        },
-        "focused": {
-          "value": "#dc322f",
-          "type": "color"
-        }
-      },
-      "warning": {
-        "base": {
-          "value": "#b58900",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#b58900",
-          "type": "color"
-        },
-        "active": {
-          "value": "#b58900",
-          "type": "color"
-        },
-        "focused": {
-          "value": "#b58900",
-          "type": "color"
-        }
-      },
-      "info": {
-        "base": {
-          "value": "#268bd2",
-          "type": "color"
-        },
-        "hovered": {
-          "value": "#268bd2",
-          "type": "color"
-        },
-        "active": {
-          "value": "#268bd2",
-          "type": "color"
-        },
-        "focused": {
-          "value": "#268bd2",
-          "type": "color"
-        }
-      }
-    },
-    "border": {
-      "primary": {
-        "value": "#fdf6e3",
-        "type": "color"
-      },
-      "secondary": {
-        "value": "#eee8d5",
-        "type": "color"
-      },
-      "muted": {
-        "value": "#93a1a1",
-        "type": "color"
-      },
-      "focused": {
-        "value": "#93a1a1",
-        "type": "color"
-      },
-      "active": {
-        "value": "#93a1a1",
-        "type": "color"
-      },
-      "ok": {
-        "value": "#859900",
-        "type": "color"
-      },
-      "error": {
-        "value": "#dc322f",
-        "type": "color"
-      },
-      "warning": {
-        "value": "#b58900",
-        "type": "color"
-      },
-      "info": {
-        "value": "#268bd2",
-        "type": "color"
-      }
-    },
-    "editor": {
-      "background": {
-        "value": "#fdf6e3",
-        "type": "color"
-      },
-      "indent_guide": {
-        "value": "#93a1a1",
-        "type": "color"
-      },
-      "indent_guide_active": {
-        "value": "#eee8d5",
-        "type": "color"
-      },
-      "line": {
-        "active": {
-          "value": "#002b3612",
-          "type": "color"
-        },
-        "highlighted": {
-          "value": "#002b361f",
-          "type": "color"
-        },
-        "inserted": {
-          "value": "#859900",
-          "type": "color"
-        },
-        "deleted": {
-          "value": "#dc322f",
-          "type": "color"
-        },
-        "modified": {
-          "value": "#268bd2",
-          "type": "color"
-        }
-      },
-      "highlight": {
-        "selection": {
-          "value": "#268bd23d",
-          "type": "color"
-        },
-        "occurrence": {
-          "value": "#8394961f",
-          "type": "color"
-        },
-        "activeOccurrence": {
-          "value": "#83949629",
-          "type": "color"
-        },
-        "matchingBracket": {
-          "value": "#eee8d5",
-          "type": "color"
-        },
-        "match": {
-          "value": "#6c71c480",
-          "type": "color"
-        },
-        "activeMatch": {
-          "value": "#6c71c4b3",
-          "type": "color"
-        },
-        "related": {
-          "value": "#eee8d5",
-          "type": "color"
-        }
-      },
-      "gutter": {
-        "primary": {
-          "value": "#657b83",
-          "type": "color"
-        },
-        "active": {
-          "value": "#002b36",
-          "type": "color"
-        }
-      }
-    },
-    "syntax": {
-      "primary": {
-        "value": "#002b36",
-        "type": "color"
-      },
-      "comment": {
-        "value": "#073642",
-        "type": "color"
-      },
-      "keyword": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "function": {
-        "value": "#b58900",
-        "type": "color"
-      },
-      "type": {
-        "value": "#2aa198",
-        "type": "color"
-      },
-      "variant": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "property": {
-        "value": "#268bd2",
-        "type": "color"
-      },
-      "enum": {
-        "value": "#cb4b16",
-        "type": "color"
-      },
-      "operator": {
-        "value": "#cb4b16",
-        "type": "color"
-      },
-      "string": {
-        "value": "#cb4b16",
-        "type": "color"
-      },
-      "number": {
-        "value": "#859900",
-        "type": "color"
-      },
-      "boolean": {
-        "value": "#859900",
-        "type": "color"
-      }
-    },
-    "player": {
-      "1": {
-        "baseColor": {
-          "value": "#268bd2",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#268bd2",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#268bd23d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#268bd2cc",
-          "type": "color"
-        }
-      },
-      "2": {
-        "baseColor": {
-          "value": "#859900",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#859900",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#8599003d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#859900cc",
-          "type": "color"
-        }
-      },
-      "3": {
-        "baseColor": {
-          "value": "#d33682",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#d33682",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#d336823d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#d33682cc",
-          "type": "color"
-        }
-      },
-      "4": {
-        "baseColor": {
-          "value": "#cb4b16",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#cb4b16",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#cb4b163d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#cb4b16cc",
-          "type": "color"
-        }
-      },
-      "5": {
-        "baseColor": {
-          "value": "#6c71c4",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#6c71c4",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#6c71c43d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#6c71c4cc",
-          "type": "color"
-        }
-      },
-      "6": {
-        "baseColor": {
-          "value": "#2aa198",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#2aa198",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#2aa1983d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#2aa198cc",
-          "type": "color"
-        }
-      },
-      "7": {
-        "baseColor": {
-          "value": "#dc322f",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#dc322f",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#dc322f3d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#dc322fcc",
-          "type": "color"
-        }
-      },
-      "8": {
-        "baseColor": {
-          "value": "#b58900",
-          "type": "color"
-        },
-        "cursorColor": {
-          "value": "#b58900",
-          "type": "color"
-        },
-        "selectionColor": {
-          "value": "#b589003d",
-          "type": "color"
-        },
-        "borderColor": {
-          "value": "#b58900cc",
-          "type": "color"
-        }
-      }
-    },
-    "shadowAlpha": {
-      "value": 0.32,
-      "type": "number"
-    }
   }
 }

styles/src/styleTree/workspace.ts 🔗

@@ -68,6 +68,10 @@ export default function workspace(theme: Theme) {
       },
     },
   };
+  const shareIcon = {
+    margin: { top: 3, bottom: 2 },
+    cornerRadius: 6,
+  };
 
   return {
     background: backgroundColor(theme, 300),
@@ -112,8 +116,9 @@ export default function workspace(theme: Theme) {
       avatarWidth: 18,
       height: 32,
       background: backgroundColor(theme, 100),
-      shareIconColor: iconColor(theme, "secondary"),
-      shareIconActiveColor: iconColor(theme, "feature"),
+      padding: {
+        left: 80,
+      },
       title: text(theme, "sans", "primary"),
       avatar: {
         cornerRadius: 10,
@@ -141,9 +146,29 @@ export default function workspace(theme: Theme) {
           right: 4,
         },
       },
+      shareIcon: {
+        ...shareIcon,
+        color: iconColor(theme, "secondary")
+      },
+      hoveredShareIcon: {
+        ...shareIcon,
+        background: backgroundColor(theme, 100, "hovered"),
+        color: iconColor(theme, "secondary"),
+      },
+      hoveredActiveShareIcon: {
+        ...shareIcon,
+        background: backgroundColor(theme, 100, "hovered"),
+        color: iconColor(theme, "active"),
+      },
+      activeShareIcon: {
+        ...shareIcon,
+        background: backgroundColor(theme, 100, "active"),
+        color: iconColor(theme, "active"),
+      },
       outdatedWarning: {
         ...text(theme, "sans", "warning"),
         size: 13,
+        margin: { right: 6 }
       },
     },
     toolbar: {