Skip to content

Update remote statusbar item - #268

Merged
simurai merged 7 commits into
mainfrom
remote-status
Mar 17, 2022
Merged

simurai merged 7 commits into
mainfrom
remote-status

Conversation

@simurai

@simurai simurai commented Mar 17, 2022

Copy link
Copy Markdown
Contributor

This updates the statusBarItem.remoteForeground/Background to match the rest of the status bar:

Before After
Screen Shot 2022-03-17 at 13 08 10 Screen Shot 2022-03-17 at 13 08 23

It's a combination of

@changeset-bot

changeset-bot Bot commented Mar 17, 2022

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 6bc9e1a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
github-vscode-theme Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions

github-actions Bot commented Mar 17, 2022

Copy link
Copy Markdown
Contributor
Colors changed
--- base/themes/dark-colorblind.json	2022-03-17 04:11:17.021492976 +0000
+++ themes/dark-colorblind.json	2022-03-17 04:11:14.409274781 +0000
@@ -82,2 +82,4 @@
     "statusBarItem.prominentBackground": "#161b22",
+    "statusBarItem.remoteForeground": "#8b949e",
+    "statusBarItem.remoteBackground": "#0d1117",
     "editorGroupHeader.tabsBackground": "#010409",
--- base/themes/dark-default.json	2022-03-17 04:11:17.021492976 +0000
+++ themes/dark-default.json	2022-03-17 04:11:14.409274781 +0000
@@ -82,2 +82,4 @@
     "statusBarItem.prominentBackground": "#161b22",
+    "statusBarItem.remoteForeground": "#8b949e",
+    "statusBarItem.remoteBackground": "#0d1117",
     "editorGroupHeader.tabsBackground": "#010409",
--- base/themes/dark-dimmed.json	2022-03-17 04:11:17.021492976 +0000
+++ themes/dark-dimmed.json	2022-03-17 04:11:14.409274781 +0000
@@ -82,2 +82,4 @@
     "statusBarItem.prominentBackground": "#2d333b",
+    "statusBarItem.remoteForeground": "#768390",
+    "statusBarItem.remoteBackground": "#22272e",
     "editorGroupHeader.tabsBackground": "#1c2128",
--- base/themes/dark-high-contrast.json	2022-03-17 04:11:17.021492976 +0000
+++ themes/dark-high-contrast.json	2022-03-17 04:11:14.409274781 +0000
@@ -82,2 +82,4 @@
     "statusBarItem.prominentBackground": "#272b33",
+    "statusBarItem.remoteForeground": "#f0f3f6",
+    "statusBarItem.remoteBackground": "#0a0c10",
     "editorGroupHeader.tabsBackground": "#010409",
--- base/themes/dark.json	2022-03-17 04:11:17.021492976 +0000
+++ themes/dark.json	2022-03-17 04:11:14.409274781 +0000
@@ -80,2 +80,4 @@
     "statusBarItem.prominentBackground": "#282e34",
+    "statusBarItem.remoteForeground": "#d1d5da",
+    "statusBarItem.remoteBackground": "#24292e",
     "editorGroupHeader.tabsBackground": "#1f2428",
--- base/themes/light-colorblind.json	2022-03-17 04:11:17.021492976 +0000
+++ themes/light-colorblind.json	2022-03-17 04:11:14.409274781 +0000
@@ -82,2 +82,4 @@
     "statusBarItem.prominentBackground": "#f6f8fa",
+    "statusBarItem.remoteForeground": "#57606a",
+    "statusBarItem.remoteBackground": "#ffffff",
     "editorGroupHeader.tabsBackground": "#f6f8fa",
--- base/themes/light-default.json	2022-03-17 04:11:17.021492976 +0000
+++ themes/light-default.json	2022-03-17 04:11:14.409274781 +0000
@@ -82,2 +82,4 @@
     "statusBarItem.prominentBackground": "#f6f8fa",
+    "statusBarItem.remoteForeground": "#57606a",
+    "statusBarItem.remoteBackground": "#ffffff",
     "editorGroupHeader.tabsBackground": "#f6f8fa",
--- base/themes/light-high-contrast.json	2022-03-17 04:11:17.021492976 +0000
+++ themes/light-high-contrast.json	2022-03-17 04:11:14.409274781 +0000
@@ -82,2 +82,4 @@
     "statusBarItem.prominentBackground": "#e7ecf0",
+    "statusBarItem.remoteForeground": "#24292f",
+    "statusBarItem.remoteBackground": "#ffffff",
     "editorGroupHeader.tabsBackground": "#ffffff",
--- base/themes/light.json	2022-03-17 04:11:17.021492976 +0000
+++ themes/light.json	2022-03-17 04:11:14.409274781 +0000
@@ -80,2 +80,4 @@
     "statusBarItem.prominentBackground": "#e8eaed",
+    "statusBarItem.remoteForeground": "#586069",
+    "statusBarItem.remoteBackground": "#fff",
     "editorGroupHeader.tabsBackground": "#f6f8fa",

@simurai
simurai marked this pull request as ready for review March 17, 2022 04:15
@simurai
simurai merged commit 649311a into main Mar 17, 2022
@simurai
simurai deleted the remote-status branch March 17, 2022 04:16
@primer-css primer-css mentioned this pull request Mar 17, 2022
@lukewiwa

Copy link
Copy Markdown

The remote part of the status bar is a different colour by design in all the stock themes. Can we differentiate it somehow from the rest of the status bar? This is inconsistent with all other themes.

@simurai

simurai commented Jul 18, 2022

Copy link
Copy Markdown
Contributor Author

Can we differentiate it somehow from the rest of the status bar?

I think the only two tokens we can change is statusBarItem.remoteForeground and statusBarItem.remoteBackground.

Personally I think a blue background is a bit too strong and looks like the remote connection is active/enabled. I wish there is a way to differentiate that. Also see related comment: #301 (reply in thread)

Maybe a compromise could be to make it light gray. Then it would be "separated" from the rest of the status bar, but doesn't look as strong as the blue counters for example. Also, people that never use that feature can disable it from the right-click menu if it bothers them:

Screen Shot 2022-07-18 at 12 45 37

/cc @cateiru @ZWhitey for thoughts 💭

@lukewiwa

Copy link
Copy Markdown

We can take inspiration from some of the stock themes. For example the Quiet Light theme uses a different shade rather than a different colour:

Screen Shot 2022-07-18 at 2 19 16 pm
Screen Shot 2022-07-18 at 2 20 26 pm

I definitely use the colour and size of the bar to quickly differentiate whether I'm in a container or not. I'm not sure how much other people care, however this definitely is inconsistent with other themes.

@fiqrisr

fiqrisr commented Jul 18, 2022

Copy link
Copy Markdown

We can take inspiration from some of the stock themes. For example the Quiet Light theme uses a different shade rather than a different colour:

Screen Shot 2022-07-18 at 2 19 16 pm Screen Shot 2022-07-18 at 2 20 26 pm

I definitely use the colour and size of the bar to quickly differentiate whether I'm in a container or not. I'm not sure how much other people care, however this definitely is inconsistent with other themes.

Agree

@simurai

simurai commented Jul 19, 2022

Copy link
Copy Markdown
Contributor Author

For example the Quiet Light theme uses a different shade rather than a different colour:

Yeah, the GitHub theme (and some others) don't really have a specific color for the status bar. I guess keeping it subtle and less prominent. So to differentiate the remote button from the rest, we could make it a different shade (darken) with light gray. Here an example:

Screen Shot 2022-07-19 at 11 12 22

@lukewiwa

Copy link
Copy Markdown

@simurai I'm a fan

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants