Format styles directory with prettier.

styles/src/styleTree/app.ts

@@ -17,7 +17,7 @@ import tooltip from "./tooltip";
 import terminal from "./terminal";
 
 export const panel = {
-  padding: { top: 12, bottom: 12 }
+  padding: { top: 12, bottom: 12 },
 };
 
 export default function app(theme: Theme): Object {

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,7 +66,7 @@ export default function contactsPanel(theme: Theme) {
       margin: {
         left: sidePadding,
         right: sidePadding,
-      }
+      },
     },
     userQueryEditorHeight: 32,
     addContactButton: {
@@ -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,
@@ -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" }),
       hover: {
-        text: text(theme, "sans", "primary", { size: "sm", underline: true })
-      }
-    }
-  }
+        text: text(theme, "sans", "primary", { size: "sm", underline: true }),
+      },
+    },
+  };
 }

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

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

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,
@@ -37,7 +37,7 @@ export default function statusBar(theme: Theme) {
         message: text(theme, "sans", "primary"),
         iconColor: iconColor(theme, "active"),
         background: backgroundColor(theme, 300, "hovered"),
-      }
+      },
     },
     diagnosticMessage: {
       ...text(theme, "sans", "muted"),
@@ -86,7 +86,7 @@ export default function statusBar(theme: Theme) {
           ...diagnosticStatusContainer,
           background: backgroundColor(theme, "error", "hovered"),
           border: border(theme, "error"),
-        }
+        },
       },
     },
     sidebarButtons: {
@@ -103,7 +103,7 @@ export default function statusBar(theme: Theme) {
         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

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

styles/src/styleTree/tooltip.ts

@@ -15,8 +15,8 @@ export default function tooltip(theme: Theme) {
       cornerRadius: 4,
       margin: { left: 6 },
       padding: { left: 4, right: 4 },
-      ...text(theme, "mono", "muted", { size: "xs", weight: "bold" })
+      ...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,10 +1,16 @@
 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) {
@@ -49,7 +55,7 @@ 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,
@@ -58,21 +64,21 @@ export default function workspace(theme: Theme) {
     paneButton: {
       color: iconColor(theme, "secondary"),
       border: {
-        ...tab.border
+        ...tab.border,
       },
       iconWidth: 12,
       buttonWidth: tab.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,
@@ -105,7 +111,7 @@ 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 }),
@@ -127,7 +133,7 @@ export default function workspace(theme: Theme) {
           ...text(theme, "sans", "active", { size: "xs" }),
           background: backgroundColor(theme, "on300", "hovered"),
           border: border(theme, "primary"),
-        }
+        },
       },
       offlineIcon: {
         color: iconColor(theme, "secondary"),
@@ -192,6 +198,6 @@ export default function workspace(theme: Theme) {
     notifications: {
       width: 400,
       margin: { right: 10, bottom: 10 },
-    }
+    },
   };
 }