From 05da4b740a05762fa8181905ac544088caa304d1 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 29 Aug 2023 13:28:06 -0400
Subject: [PATCH] Update spacing, button heights

---
 styles/src/style_tree/search.ts | 78 +++++++++++++++++++++------------
 1 file changed, 51 insertions(+), 27 deletions(-)

diff --git a/styles/src/style_tree/search.ts b/styles/src/style_tree/search.ts
index 27e8c43a4df6d21db648cf908cc0bd942aaab9b5..c3dbff4341215db19536712001b05dc044f6e249 100644
--- a/styles/src/style_tree/search.ts
+++ b/styles/src/style_tree/search.ts
@@ -3,8 +3,21 @@ import { background, border, foreground, text } from "./components"
 import { interactive, toggleable } from "../element"
 import { useTheme } from "../theme"
 
+const search_results = () => {
+    const theme = useTheme()
+
+    return {
+        // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
+        match_background: with_opacity(
+            foreground(theme.highest, "accent"),
+            0.4
+        ),
+    }
+}
+
 export default function search(): any {
     const theme = useTheme()
+    const SEARCH_ROW_SPACING = 12
 
     // Search input
     const editor = {
@@ -35,11 +48,7 @@ export default function search(): any {
 
     return {
         padding: { top: 4, bottom: 4 },
-        // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
-        match_background: with_opacity(
-            foreground(theme.highest, "accent"),
-            0.4
-        ),
+
         option_button: toggleable({
             base: interactive({
                 base: {
@@ -167,7 +176,9 @@ export default function search(): any {
                         // top: 2,
                     },
                     margin: {
-                        right: 9,
+                        top: 1,
+                        bottom: 1,
+                        right: SEARCH_ROW_SPACING
                     }
                 },
                 state: {
@@ -210,13 +221,13 @@ export default function search(): any {
             ...text(theme.highest, "mono", "variant"),
             padding: {
                 left: 9,
-                right: 9,
+                right: SEARCH_ROW_SPACING,
             },
         },
         option_button_group: {
             padding: {
-                left: 12,
-                right: 12,
+                left: SEARCH_ROW_SPACING,
+                right: SEARCH_ROW_SPACING,
             },
         },
         include_exclude_inputs: {
@@ -233,24 +244,26 @@ export default function search(): any {
             ...text(theme.highest, "mono", "variant"),
             size: 13,
         },
+        // Input Icon
         editor_icon: {
             icon: {
-                color: foreground(theme.highest, "variant"),
-                asset: "icons/magnifying_glass_12.svg",
+                color: foreground(theme.highest, "disabled"),
+                asset: "icons/magnifying_glass.svg",
                 dimensions: {
-                    width: 12,
-                    height: 12,
+                    width: 14,
+                    height: 14,
                 }
             },
             container: {
-                margin: { right: 6 },
-                padding: { left: 2, right: 2 },
+                margin: { right: 4 },
+                padding: { left: 1, right: 1 },
             }
         },
+        // Toggle group buttons - Text | Regex | Semantic
         mode_button: toggleable({
             base: interactive({
                 base: {
-                    ...text(theme.highest, "mono", "variant"),
+                    ...text(theme.highest, "mono", "variant", { size: "sm" }),
                     background: background(theme.highest, "variant"),
 
                     border: {
@@ -258,21 +271,24 @@ export default function search(): any {
                         left: false,
                         right: false
                     },
-
+                    margin: {
+                        top: 1,
+                        bottom: 1,
+                    },
                     padding: {
-                        left: 10,
-                        right: 10,
+                        left: 12,
+                        right: 12,
                     },
                     corner_radius: 6,
                 },
                 state: {
                     hovered: {
-                        ...text(theme.highest, "mono", "variant", "hovered"),
+                        ...text(theme.highest, "mono", "variant", "hovered", { size: "sm" }),
                         background: background(theme.highest, "variant", "hovered"),
                         border: border(theme.highest, "on", "hovered"),
                     },
                     clicked: {
-                        ...text(theme.highest, "mono", "variant", "pressed"),
+                        ...text(theme.highest, "mono", "variant", "pressed", { size: "sm" }),
                         background: background(theme.highest, "variant", "pressed"),
                         border: border(theme.highest, "on", "pressed"),
                     },
@@ -281,20 +297,21 @@ export default function search(): any {
             state: {
                 active: {
                     default: {
-                        ...text(theme.highest, "mono", "on"),
+                        ...text(theme.highest, "mono", "on", { size: "sm" }),
                         background: background(theme.highest, "on")
                     },
                     hovered: {
-                        ...text(theme.highest, "mono", "on", "hovered"),
+                        ...text(theme.highest, "mono", "on", "hovered", { size: "sm" }),
                         background: background(theme.highest, "on", "hovered")
                     },
                     clicked: {
-                        ...text(theme.highest, "mono", "on", "pressed"),
+                        ...text(theme.highest, "mono", "on", "pressed", { size: "sm" }),
                         background: background(theme.highest, "on", "pressed")
                     },
                 },
             },
         }),
+        // Next/Previous Match buttons
         nav_button: toggleable({
             state: {
                 inactive: interactive({
@@ -307,7 +324,10 @@ export default function search(): any {
                             left: false,
                             right: false,
                         },
-
+                        margin: {
+                            top: 1,
+                            bottom: 1,
+                        },
                         padding: {
                             left: 10,
                             right: 10,
@@ -327,7 +347,10 @@ export default function search(): any {
                             left: false,
                             right: false,
                         },
-
+                        margin: {
+                            top: 1,
+                            bottom: 1,
+                        },
                         padding: {
                             left: 10,
                             right: 10,
@@ -351,6 +374,7 @@ export default function search(): any {
         search_bar_row_height: 34,
         search_row_spacing: 8,
         option_button_height: 22,
-        modes_container: {}
+        modes_container: {},
+        ...search_results()
     }
 }