Update titlebar size

Nate Butler created 2 years ago

Change summary

styles/src/component/icon_button.ts |  2 +-
styles/src/style_tree/search.ts     | 10 +++++-----
styles/src/style_tree/toolbar.ts    |  8 ++++----
3 files changed, 10 insertions(+), 10 deletions(-)

Detailed changes

styles/src/component/icon_button.ts

@@ -60,7 +60,7 @@ export function icon_button(
             corner_radius: 6,
             padding: padding,
             margin: m,
-            icon_width: 12,
+            icon_width: 14,
             icon_height: 14,
             button_width: size === Button.size.Small ? 16 : 20,
             button_height: 14,

styles/src/style_tree/search.ts

@@ -31,7 +31,7 @@ export default function search(): any {
         text: text(theme.highest, "mono", "default"),
         border: border(theme.highest),
         margin: {
-            right: 9,
+            right: SEARCH_ROW_SPACING,
         },
         padding: {
             top: 4,
@@ -48,7 +48,7 @@ export default function search(): any {
     }
 
     return {
-        padding: { top: 4, bottom: 4 },
+        padding: { top: 0, bottom: 0 },
 
         option_button: toggleable({
             base: interactive({
@@ -273,8 +273,8 @@ export default function search(): any {
                         bottom: 1,
                     },
                     padding: {
-                        left: 12,
-                        right: 12,
+                        left: 10,
+                        right: 10,
                     },
                     corner_radius: 6,
                 },
@@ -394,7 +394,7 @@ export default function search(): any {
                 }),
             },
         }),
-        search_bar_row_height: 34,
+        search_bar_row_height: 32,
         search_row_spacing: 8,
         option_button_height: 22,
         modes_container: {},

styles/src/style_tree/toolbar.ts

@@ -6,15 +6,15 @@ export const toolbar = () => {
     const theme = useTheme()
 
     return {
-        height: 42,
+        height: 32,
+        padding: { left: 4, right: 4, top: 4, bottom: 4 },
         background: background(theme.highest),
         border: border(theme.highest, { bottom: true }),
-        item_spacing: 8,
+        item_spacing: 4,
         toggleable_tool: toggleable_icon_button({
-            margin: { left: 8 },
+            margin: { left: 4 },
             variant: "ghost",
             active_color: "accent",
         }),
-        padding: { left: 8, right: 8 },
     }
 }