Increase min-width for all Pickers, minor style changes

Nate Butler created 3 years ago

- Increases the Picker min-width from 500 to 540
- Makes some changes to the styling of keyboard shortcuts in the command palette

Change summary

assets/themes/dark.json                | 4 ++--
assets/themes/light.json               | 2 +-
crates/picker/src/picker.rs            | 2 +-
styles/src/styleTree/commandPalette.ts | 2 +-
styles/src/themes/dark.ts              | 2 +-
5 files changed, 6 insertions(+), 6 deletions(-)

Detailed changes

assets/themes/dark.json

@@ -731,11 +731,11 @@
     "key": {
       "text": {
         "family": "Zed Mono",
-        "color": "#ffffff",
+        "color": "#9c9c9c",
         "size": 12
       },
       "corner_radius": 4,
-      "background": "#0e0e0e",
+      "background": "#0e0e0e80",
       "border": {
         "color": "#232323",
         "width": 1

assets/themes/light.json

@@ -731,7 +731,7 @@
     "key": {
       "text": {
         "family": "Zed Mono",
-        "color": "#000000",
+        "color": "#474747",
         "size": 12
       },
       "corner_radius": 4,

crates/picker/src/picker.rs

@@ -138,7 +138,7 @@ impl<D: PickerDelegate> Picker<D> {
             list_state: Default::default(),
             update_task: None,
             delegate,
-            max_size: vec2f(500., 420.),
+            max_size: vec2f(540., 420.),
             confirmed: false,
         };
         cx.defer(|this, cx| this.update_matches(cx));

styles/src/styleTree/commandPalette.ts

@@ -5,7 +5,7 @@ export default function commandPalette(theme: Theme) {
   return {
     keystrokeSpacing: 8,
     key: {
-      text: text(theme, "mono", "active", { size: "xs" }),
+      text: text(theme, "mono", "secondary", { size: "xs" }),
       cornerRadius: 4,
       background: backgroundColor(theme, "on300"),
       border: border(theme, "secondary"),

styles/src/themes/dark.ts

@@ -22,7 +22,7 @@ const backgroundColor = {
     focused: colors.neutral[825],
   },
   on300: {
-    base: colors.neutral[850],
+    base: withOpacity(colors.neutral[850], 0.5),
     hovered: colors.neutral[875],
     active: colors.neutral[900],
     focused: colors.neutral[875],