@@ -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()
}
}