Merge branch 'main' into ime-support-2

styles/src/styleTree/chatPanel.ts

@@ -6,7 +6,7 @@ import {
   player,
   text,
   TextColor,
-  popoverShadow
+  popoverShadow,
 } from "./components";
 
 export default function chatPanel(theme: Theme) {

styles/src/styleTree/commandPalette.ts

@@ -16,11 +16,11 @@ export default function commandPalette(theme: Theme) {
         right: 8,
       },
       margin: {
-        left: 2
+        left: 2,
       },
       active: {
         text: text(theme, "mono", "active", { size: "xs" }),
-      }
-    }
-  }
+      },
+    },
+  };
 }

styles/src/styleTree/components.ts

@@ -60,10 +60,7 @@ export interface Player {
     selection: string;
   };
 }
-export function player(
-  theme: Theme,
-  playerNumber: PlayerIndex,
-): Player {
+export function player(theme: Theme, playerNumber: PlayerIndex): Player {
   return {
     selection: {
       cursor: theme.player[playerNumber].cursorColor,
@@ -77,7 +74,7 @@ export type BackgroundState = keyof BackgroundColorSet;
 export function backgroundColor(
   theme: Theme,
   name: BackgroundColor,
-  state?: BackgroundState,
+  state?: BackgroundState
 ): string {
   return theme.backgroundColor[name][state || "base"];
 }

styles/src/styleTree/contactFinder.ts

@@ -26,13 +26,13 @@ export default function contactFinder(theme: Theme) {
     contactButton: {
       ...contactButton,
       hover: {
-        background: backgroundColor(theme, 100, "hovered")
-      }
+        background: backgroundColor(theme, 100, "hovered"),
+      },
     },
     disabledContactButton: {
       ...contactButton,
       background: backgroundColor(theme, 100),
       color: iconColor(theme, "muted"),
     },
-  }
+  };
 }

styles/src/styleTree/contactNotification.ts

@@ -13,7 +13,7 @@ export default function contactNotification(theme: Theme): Object {
     },
     headerMessage: {
       ...text(theme, "sans", "primary", { size: "xs" }),
-      margin: { left: headerPadding, right: headerPadding }
+      margin: { left: headerPadding, right: headerPadding },
     },
     headerHeight: 18,
     bodyMessage: {
@@ -27,8 +27,8 @@ export default function contactNotification(theme: Theme): Object {
       cornerRadius: 6,
       margin: { left: 6 },
       hover: {
-        background: backgroundColor(theme, "on300", "hovered")
-      }
+        background: backgroundColor(theme, "on300", "hovered"),
+      },
     },
     dismissButton: {
       color: iconColor(theme, "secondary"),
@@ -37,8 +37,8 @@ export default function contactNotification(theme: Theme): Object {
       buttonWidth: 8,
       buttonHeight: 8,
       hover: {
-        color: iconColor(theme, "primary")
-      }
-    }
-  }
-}
+        color: iconColor(theme, "primary"),
+      },
+    },
+  };
+}

styles/src/styleTree/contactsPanel.ts

@@ -1,6 +1,13 @@
 import Theme from "../themes/common/theme";
 import { panel } from "./app";
-import { backgroundColor, border, borderColor, iconColor, player, text } from "./components";
+import {
+  backgroundColor,
+  border,
+  borderColor,
+  iconColor,
+  player,
+  text,
+} from "./components";
 
 export default function contactsPanel(theme: Theme) {
   const nameMargin = 8;
@@ -24,7 +31,7 @@ export default function contactsPanel(theme: Theme) {
       margin: {
         left: nameMargin,
         right: nameMargin,
-      }
+      },
     },
     padding: {
       left: sidePadding,
@@ -59,17 +66,17 @@ export default function contactsPanel(theme: Theme) {
       margin: {
         left: sidePadding,
         right: sidePadding,
-      }
+      },
     },
     userQueryEditorHeight: 32,
     addContactButton: {
       margin: { left: 6, right: 12 },
       color: iconColor(theme, "primary"),
-      buttonWidth: 8,
-      iconWidth: 8,
+      buttonWidth: 16,
+      iconWidth: 16,
     },
     privateButton: {
-      iconWidth: 8,
+      iconWidth: 12,
       color: iconColor(theme, "primary"),
       cornerRadius: 5,
       buttonWidth: 12,
@@ -86,16 +93,16 @@ export default function contactsPanel(theme: Theme) {
       active: {
         ...text(theme, "mono", "primary", { size: "sm" }),
         background: backgroundColor(theme, 100, "active"),
-      }
+      },
     },
     contactRow: {
       padding: {
         left: sidePadding,
-        right: sidePadding
+        right: sidePadding,
       },
       active: {
         background: backgroundColor(theme, 100, "active"),
-      }
+      },
     },
     treeBranch: {
       color: borderColor(theme, "active"),
@@ -105,7 +112,7 @@ export default function contactsPanel(theme: Theme) {
       },
       active: {
         color: borderColor(theme, "active"),
-      }
+      },
     },
     contactAvatar: {
       cornerRadius: 10,
@@ -121,7 +128,7 @@ export default function contactsPanel(theme: Theme) {
     contactButton: {
       ...contactButton,
       hover: {
-        background: backgroundColor(theme, 100, "hovered"),
+        background: backgroundColor(theme, "on300", "hovered"),
       },
     },
     disabledButton: {
@@ -141,18 +148,18 @@ export default function contactsPanel(theme: Theme) {
       },
       active: {
         background: backgroundColor(theme, 300, "active"),
-      }
+      },
     },
     inviteRow: {
       padding: {
         left: sidePadding,
-        right: sidePadding
+        right: sidePadding,
       },
       border: { top: true, width: 1, color: borderColor(theme, "primary") },
-      text: text(theme, "sans", "primary", { size: "sm" }),
+      text: text(theme, "sans", "secondary", { size: "sm" }),
       hover: {
-        text: text(theme, "sans", "primary", { size: "sm", underline: true })
-      }
-    }
-  }
+        text: text(theme, "sans", "active", { size: "sm" }),
+      },
+    },
+  };
 }

styles/src/styleTree/contextMenu.ts

@@ -1,5 +1,11 @@
 import Theme from "../themes/common/theme";
-import { backgroundColor, border, borderColor, popoverShadow, text } from "./components";
+import {
+  backgroundColor,
+  border,
+  borderColor,
+  popoverShadow,
+  text,
+} from "./components";
 
 export default function contextMenu(theme: Theme) {
   return {
@@ -15,7 +21,7 @@ export default function contextMenu(theme: Theme) {
       label: text(theme, "sans", "secondary", { size: "sm" }),
       keystroke: {
         ...text(theme, "sans", "muted", { size: "sm", weight: "bold" }),
-        padding: { left: 3, right: 3 }
+        padding: { left: 3, right: 3 },
       },
       hover: {
         background: backgroundColor(theme, 300, "hovered"),
@@ -28,11 +34,11 @@ export default function contextMenu(theme: Theme) {
       activeHover: {
         background: backgroundColor(theme, 300, "hovered"),
         text: text(theme, "sans", "active", { size: "sm" }),
-      }
+      },
     },
     separator: {
       background: borderColor(theme, "primary"),
-      margin: { top: 2, bottom: 2 }
+      margin: { top: 2, bottom: 2 },
     },
-  }
+  };
 }

styles/src/styleTree/editor.ts

@@ -7,7 +7,7 @@ import {
   player,
   popoverShadow,
   text,
-  TextColor
+  TextColor,
 } from "./components";
 import hoverPopover from "./hoverPopover";
 
@@ -158,7 +158,7 @@ export default function editor(theme: Theme) {
       hover: {
         color: iconColor(theme, "active"),
         background: backgroundColor(theme, "on500", "base"),
-      }
+      },
     },
     compositionMark: {
       underline: {

styles/src/styleTree/hoverPopover.ts

@@ -10,7 +10,7 @@ export default function HoverPopover(theme: Theme) {
         left: 8,
         right: 8,
         top: 4,
-        bottom: 4
+        bottom: 4,
       },
       shadow: popoverShadow(theme),
       border: border(theme, "primary"),
@@ -21,7 +21,7 @@ export default function HoverPopover(theme: Theme) {
     block_style: {
       padding: { top: 4 },
     },
-    prose: text(theme, "sans", "primary", { "size": "sm" }),
+    prose: text(theme, "sans", "primary", { size: "sm" }),
     highlight: theme.editor.highlight.occurrence,
-  }
-}
+  };
+}

styles/src/styleTree/picker.ts

@@ -1,5 +1,11 @@
 import Theme from "../themes/common/theme";
-import { backgroundColor, border, player, modalShadow, text } from "./components";
+import {
+  backgroundColor,
+  border,
+  player,
+  modalShadow,
+  text,
+} from "./components";
 
 export default function picker(theme: Theme) {
   return {
@@ -22,7 +28,7 @@ export default function picker(theme: Theme) {
       },
       hover: {
         background: backgroundColor(theme, 300, "hovered"),
-      }
+      },
     },
     border: border(theme, "primary"),
     empty: {

styles/src/styleTree/projectDiagnostics.ts

@@ -1,8 +1,5 @@
 import Theme from "../themes/common/theme";
-import {
-  backgroundColor,
-  text,
-} from "./components";
+import { backgroundColor, text } from "./components";
 
 export default function projectDiagnostics(theme: Theme) {
   return {
@@ -11,5 +8,5 @@ export default function projectDiagnostics(theme: Theme) {
     tabIconWidth: 13,
     tabSummarySpacing: 10,
     emptyMessage: text(theme, "sans", "secondary", { size: "md" }),
-  }
+  };
 }

styles/src/styleTree/projectPanel.ts

@@ -24,7 +24,7 @@ export default function projectPanel(theme: Theme) {
       activeHover: {
         background: backgroundColor(theme, 300, "hovered"),
         text: text(theme, "mono", "active", { size: "sm" }),
-      }
+      },
     },
     cutEntryFade: 0.4,
     ignoredEntryFade: 0.6,

styles/src/styleTree/search.ts

@@ -2,7 +2,6 @@ import Theme from "../themes/common/theme";
 import { backgroundColor, border, player, text } from "./components";
 
 export default function search(theme: Theme) {
-
   // Search input
   const editor = {
     background: backgroundColor(theme, 500),
@@ -51,7 +50,7 @@ export default function search(theme: Theme) {
         ...text(theme, "mono", "active"),
         background: backgroundColor(theme, "on500", "hovered"),
         border: border(theme, "muted"),
-      }
+      },
     },
     editor,
     invalidEditor: {

styles/src/styleTree/statusBar.ts

@@ -5,13 +5,13 @@ import { workspaceBackground } from "./workspace";
 export default function statusBar(theme: Theme) {
   const statusContainer = {
     cornerRadius: 6,
-    padding: { top: 3, bottom: 3, left: 6, right: 6 }
-  }
+    padding: { top: 3, bottom: 3, left: 6, right: 6 },
+  };
 
   const diagnosticStatusContainer = {
     cornerRadius: 6,
-    padding: { top: 1, bottom: 1, left: 6, right: 6 }
-  }
+    padding: { top: 1, bottom: 1, left: 6, right: 6 },
+  };
 
   return {
     height: 30,
@@ -35,9 +35,9 @@ 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"),
-      }
+      },
     },
     diagnosticMessage: {
       ...text(theme, "sans", "muted"),
@@ -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 },
@@ -86,7 +86,7 @@ export default function statusBar(theme: Theme) {
           ...diagnosticStatusContainer,
           background: backgroundColor(theme, "error", "hovered"),
           border: border(theme, "error"),
-        }
+        },
       },
     },
     sidebarButtons: {
@@ -94,16 +94,16 @@ 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: {
           iconColor: iconColor(theme, "active"),
           background: backgroundColor(theme, 300, "active"),
-        }
+        },
       },
       badge: {
         cornerRadius: 3,
@@ -111,7 +111,7 @@ export default function statusBar(theme: Theme) {
         margin: { bottom: -1, right: -1 },
         border: { width: 1, color: workspaceBackground(theme) },
         background: iconColor(theme, "feature"),
-      }
-    }
-  }
+      },
+    },
+  };
 }

styles/src/styleTree/terminal.ts

@@ -60,6 +60,6 @@ export default function terminal(theme: Theme) {
       margin: 25,
       border: border(theme, "primary"),
       shadow: modalShadow(theme),
-    }
+    },
   };
-}
+}

styles/src/styleTree/tooltip.ts

@@ -14,9 +14,9 @@ export default function tooltip(theme: Theme) {
       background: backgroundColor(theme, "on500"),
       cornerRadius: 4,
       margin: { left: 6 },
-      padding: { left: 3, right: 3 },
-      ...text(theme, "mono", "muted", { size: "xs", weight: "bold" })
+      padding: { left: 4, right: 4 },
+      ...text(theme, "mono", "muted", { size: "xs", weight: "bold" }),
     },
     maxTextWidth: 200,
-  }
-}
+  };
+}

styles/src/styleTree/updateNotification.ts

@@ -7,14 +7,14 @@ export default function updateNotification(theme: Theme): Object {
   return {
     message: {
       ...text(theme, "sans", "primary", { size: "xs" }),
-      margin: { left: headerPadding, right: headerPadding }
+      margin: { left: headerPadding, right: headerPadding },
     },
     actionMessage: {
       ...text(theme, "sans", "secondary", { size: "xs" }),
       margin: { left: headerPadding, top: 6, bottom: 6 },
       hover: {
-        color: theme.textColor["active"]
-      }
+        color: theme.textColor["active"],
+      },
     },
     dismissButton: {
       color: iconColor(theme, "secondary"),
@@ -23,8 +23,8 @@ export default function updateNotification(theme: Theme): Object {
       buttonWidth: 8,
       buttonHeight: 8,
       hover: {
-        color: iconColor(theme, "primary")
-      }
-    }
-  }
-}
+        color: iconColor(theme, "primary"),
+      },
+    },
+  };
+}

styles/src/styleTree/workspace.ts

@@ -1,14 +1,20 @@
 import Theme from "../themes/common/theme";
 import { withOpacity } from "../utils/color";
-import { backgroundColor, border, iconColor, modalShadow, text } from "./components";
+import {
+  backgroundColor,
+  border,
+  iconColor,
+  modalShadow,
+  text,
+} from "./components";
 import statusBar from "./statusBar";
 
 export function workspaceBackground(theme: Theme) {
-  return backgroundColor(theme, 300)
+  return backgroundColor(theme, 300);
 }
 
 export default function workspace(theme: Theme) {
-  const tab = {
+  const activePaneInactiveTab = {
     height: 32,
     background: workspaceBackground(theme),
     iconClose: iconColor(theme, "muted"),
@@ -33,16 +39,27 @@ export default function workspace(theme: Theme) {
     }
   };
 
-  const activeTab = {
-    ...tab,
+  const activePaneActiveTab = {
+    ...activePaneInactiveTab,
     background: backgroundColor(theme, 500),
     text: text(theme, "sans", "active", { size: "sm" }),
     border: {
-      ...tab.border,
+      ...activePaneInactiveTab.border,
       bottom: false,
     },
   };
 
+  const inactivePaneInactiveTab = {
+    ...activePaneInactiveTab,
+    background: backgroundColor(theme, 100),
+    text: text(theme, "sans", "placeholder", { size: "sm" }),
+  };
+
+  const inactivePaneActiveTab = {
+    ...activePaneInactiveTab,
+    text: text(theme, "sans", "placeholder", { size: "sm" }),
+  }
+
   const titlebarPadding = 6;
 
   return {
@@ -53,30 +70,32 @@ export default function workspace(theme: Theme) {
     },
     joiningProjectMessage: {
       padding: 12,
-      ...text(theme, "sans", "primary", { size: "lg" })
+      ...text(theme, "sans", "primary", { size: "lg" }),
     },
     leaderBorderOpacity: 0.7,
     leaderBorderWidth: 2.0,
-    tab,
-    activeTab,
+    activePaneActiveTab,
+    activePaneInactiveTab,
+    inactivePaneActiveTab,
+    inactivePaneInactiveTab,
     paneButton: {
       color: iconColor(theme, "secondary"),
       border: {
-        ...tab.border
+        ...activePaneActiveTab.border,
       },
-      iconWidth: 14,
-      buttonWidth: tab.height,
+      iconWidth: 12,
+      buttonWidth: activePaneActiveTab.height,
       hover: {
         color: iconColor(theme, "active"),
         background: backgroundColor(theme, 300),
-      }
+      },
     },
     modal: {
       margin: {
         bottom: 52,
         top: 52,
       },
-      cursor: "Arrow"
+      cursor: "Arrow",
     },
     sidebarResizeHandle: {
       background: border(theme, "primary").color,
@@ -109,22 +128,29 @@ export default function workspace(theme: Theme) {
       avatarRibbon: {
         height: 3,
         width: 12,
-        // TODO: The background for this ideally should be 
+        // TODO: The background for this ideally should be
         // set with a token, not hardcoded in rust
       },
       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"),
@@ -156,9 +182,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"),
@@ -168,7 +194,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"),
@@ -187,8 +213,8 @@ export default function workspace(theme: Theme) {
       shadow: modalShadow(theme),
     },
     notifications: {
-      width: 380,
+      width: 400,
       margin: { right: 10, bottom: 10 },
-    }
+    },
   };
 }