Extract `search` from `app`

Nate Butler created 3 years ago

- Also update border to use borderColor( )

Change summary

styles/app.ts        | 79 ++-------------------------------------------
styles/components.ts |  2 
styles/search.ts     | 80 ++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 85 insertions(+), 76 deletions(-)

Detailed changes

styles/app.ts

@@ -1,7 +1,8 @@
 import chatPanel from "./chat-panel";
-import { backgroundColor, border, borderColor, player, text } from "./components";
+import { backgroundColor, borderColor, text } from "./components";
 import editor from "./editor";
 import projectPanel from "./project-panel";
+import search from "./search";
 import selectorModal from "./selector-modal";
 import Theme from "./theme";
 import workspace from "./workspace";
@@ -33,7 +34,7 @@ export default function app(theme: Theme): Object {
     projectPanel: projectPanel(theme),
     chatPanel: chatPanel(theme),
     contactsPanel: {
-      extends: "$panel",
+      ...panel,
       hostRowHeight: 28,
       treeBranchColor: borderColor(theme, "muted"),
       treeBranchWidth: 1,
@@ -84,78 +85,6 @@ export default function app(theme: Theme): Object {
         extends: "$contactsPanel.project",
       },
     },
-    search: {
-      background: backgroundColor(theme, 300),
-      matchBackground: theme.editor.highlight.match,
-      tabIconSpacing: 4,
-      tabIconWidth: 14,
-      activeHoveredOptionButton: {
-        extends: "$search.option_button",
-        background: backgroundColor(theme, 100),
-      },
-      activeOptionButton: {
-        extends: "$search.option_button",
-        background: backgroundColor(theme, 100),
-      },
-      editor: {
-        background: backgroundColor(theme, 500),
-        cornerRadius: 6,
-        maxWidth: 400,
-        placeholderText: text(theme, "mono", "placeholder"),
-        selection: player(theme, 1).selection,
-        text: text(theme, "mono", "primary"),
-        border: border(theme, "primary"),
-        margin: {
-          bottom: 5,
-          left: 5,
-          right: 5,
-          top: 5,
-        },
-        padding: {
-          bottom: 3,
-          left: 13,
-          right: 13,
-          top: 3,
-        },
-      },
-      hoveredOptionButton: {
-        extends: "$search.optionButton",
-        background: backgroundColor(theme, 100),
-      },
-      invalidEditor: {
-        extends: "$search.editor",
-        border: border(theme, "error"),
-      },
-      matchIndex: {
-        ...text(theme, "mono", "secondary"),
-        padding: 6,
-      },
-      optionButton: {
-        ...text(theme, "mono", "secondary"),
-        background: backgroundColor(theme, 300),
-        cornerRadius: 6,
-        border: border(theme, "primary"),
-        margin: {
-          left: 1,
-          right: 1,
-        },
-        padding: {
-          bottom: 1,
-          left: 6,
-          right: 6,
-          top: 1,
-        },
-      },
-      optionButtonGroup: {
-        padding: {
-          left: 2,
-          right: 2,
-        },
-      },
-      resultsStatus: {
-        ...text(theme, "mono", "primary"),
-        size: 18,
-      },
-    },
+    search: search(theme),
   };
 }

styles/components.ts

@@ -41,7 +41,7 @@ export function border(
   options?: BorderOptions
 ) {
   return {
-    color: theme.borderColor[color].value,
+    color: borderColor(theme, color),
     width: 1,
     ...options,
   };

styles/search.ts

@@ -0,0 +1,80 @@
+import { backgroundColor, border, player, text } from "./components";
+import Theme from "./theme";
+
+export default function search(theme: Theme) {
+  const optionButton = {
+    ...text(theme, "mono", "secondary"),
+    background: backgroundColor(theme, 300),
+    cornerRadius: 6,
+    border: border(theme, "primary"),
+    margin: {
+      left: 1,
+      right: 1,
+    },
+    padding: {
+      bottom: 1,
+      left: 6,
+      right: 6,
+      top: 1,
+    },
+  };
+
+  return {
+    background: backgroundColor(theme, 300),
+    matchBackground: theme.editor.highlight.match,
+    tabIconSpacing: 4,
+    tabIconWidth: 14,
+    activeHoveredOptionButton: {
+      ...optionButton,
+      background: backgroundColor(theme, 100),
+    },
+    activeOptionButton: {
+      ...optionButton,
+      background: backgroundColor(theme, 100),
+    },
+    editor: {
+      background: backgroundColor(theme, 500),
+      cornerRadius: 6,
+      maxWidth: 400,
+      placeholderText: text(theme, "mono", "placeholder"),
+      selection: player(theme, 1).selection,
+      text: text(theme, "mono", "primary"),
+      border: border(theme, "primary"),
+      margin: {
+        bottom: 5,
+        left: 5,
+        right: 5,
+        top: 5,
+      },
+      padding: {
+        bottom: 3,
+        left: 13,
+        right: 13,
+        top: 3,
+      },
+    },
+    hoveredOptionButton: {
+      ...optionButton,
+      background: backgroundColor(theme, 100),
+    },
+    invalidEditor: {
+      extends: "$search.editor",
+      border: border(theme, "error"),
+    },
+    matchIndex: {
+      ...text(theme, "mono", "secondary"),
+      padding: 6,
+    },
+    optionButton,
+    optionButtonGroup: {
+      padding: {
+        left: 2,
+        right: 2,
+      },
+    },
+    resultsStatus: {
+      ...text(theme, "mono", "primary"),
+      size: 18,
+    },
+  };
+}