chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor color theme temporarily, style the search bar to have a more rounded shape

Browse Source
This commit is contained in:
Daniel S. Hansen
2025-07-17 11:33:16 -07:00
parent 7da843b573
commit 02b4b8ee45
2 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/SearchBar.jsx
+8 -2
View File
@@ -1,10 +1,16 @@
import { Input, InputGroup } from "@chakra-ui/react"; import { Input, InputGroup } from "@chakra-ui/react";
import { FiSearch } from "react-icons/fi" import { FiSearch } from "react-icons/fi"
export function SearchBar({ placeholder="Search...", size="sm", width="200px"}) { export function SearchBar({ placeholder="Enter a volcano to search", size="sm", width="210px" }) {
return ( return (
<InputGroup startElement={<FiSearch />}> <InputGroup startElement={<FiSearch />}>
<Input placeholder="Enter volcano to search" /> <Input
placeholder={placeholder}
size={size}
width={width}
borderRadius="full"
/>
</InputGroup> </InputGroup>
); );
} }
client/src/theme.js
+4 -2
View File
@@ -56,8 +56,10 @@ const config = defineConfig({
base100: { value: {base: "#f7f9fa", _dark: "#787b73"}}, base100: { value: {base: "#f7f9fa", _dark: "#787b73"}},
base200: { value: {base: "#eef2f6", _dark: "#242424"}}, base200: { value: {base: "#eef2f6", _dark: "#242424"}},
base300: { value: {base: "#dfe5ed", _dark: "#60645a"}}, base300: { value: {base: "#dfe5ed", _dark: "#60645a"}},
primary: { value: {base: "#9cd855", _dark: "#629631"}}, // primary: { value: {base: "#9cd855", _dark: "#629631"}},
primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}}, primary: { value: {base: "#2B98F8", _dark: "#629631"}},
// primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}},
primaryLt: { value: {base: "#2BCFF8", _dark: "#92948e"}},
secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}}, secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
border: {value: {base: "#000000", _dark: "#CBCBCB"}}, border: {value: {base: "#000000", _dark: "#CBCBCB"}},
text: {value: {base: "#19332D", _dark: "#CBCBCB"}}, text: {value: {base: "#19332D", _dark: "#CBCBCB"}},