diff --git a/src/pages/settings/components/Theming/ThemeModal.tsx b/src/pages/settings/components/Theming/ThemeModal.tsx index 52f8aed..84909b7 100644 --- a/src/pages/settings/components/Theming/ThemeModal.tsx +++ b/src/pages/settings/components/Theming/ThemeModal.tsx @@ -246,7 +246,7 @@ function ThemeModal({ { closeBackgroundPicker(); - setColorId('searchBackground'); + setColorId('searchColor'); openPicker(); setColorValue(selectedTheme.searchColor); }} @@ -338,7 +338,7 @@ function ThemeModal({ borderColor: colorValue, }); break; - case 'searchBackground': + case 'searchColor': setSelectedTheme({ ...selectedTheme, searchColor: colorValue, diff --git a/src/pages/settings/components/Theming/ThemeModalContent.tsx b/src/pages/settings/components/Theming/ThemeModalContent.tsx index 6b78e42..28029c5 100644 --- a/src/pages/settings/components/Theming/ThemeModalContent.tsx +++ b/src/pages/settings/components/Theming/ThemeModalContent.tsx @@ -31,6 +31,14 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th disabled w={'80%'} classNames={selectClasses} + className={selectClasses.searchExample} + styles={{ + input: { + color: selectedTheme?.primaryColor, + borderBottom: `thin solid ${selectedTheme?.borderColor}`, + backgroundColor: `color-mix(in srgb, ${selectedTheme?.searchColor}, transparent 50%)`, + }, + }} data={[ { label: 'Google Search', diff --git a/src/styles/Select.module.css b/src/styles/Select.module.css index 585dea2..9d59d87 100644 --- a/src/styles/Select.module.css +++ b/src/styles/Select.module.css @@ -144,3 +144,43 @@ opacity: 1; } } + +.searchExample { + .wrapper { + display: flex; + justify-content: center; + .input { + border: 0; + border-bottom: thin solid var(--mantine-color-border-0); + background-color: transparent; + font-style: italic; + font-size: 0.8rem; + height: 3.5em; + transition: all 0.4s ease; + width: 50%; + padding-left: 1rem; + padding-right: 1rem; + text-align: center; + &[data-active="true"] { + border-color: var(--mantine-color-border-0); + outline: none; + font-style: normal; + font-weight: 500; + font-size: 1.2rem; + letter-spacing: .2em; + width: 100%; + border-top-left-radius: .25em; + border-top-right-radius: .25em; + border-bottom-left-radius: .25em; + border-bottom-right-radius: .25em; + } + } + .section { + transition: opacity 0.1s 0s ease; + color: var(--mantine-color-border-0); + width: auto; + padding-left: .5rem; + opacity: 0; + } +} +} \ No newline at end of file