araemer/recipe-app
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

refactor icons. Somehow button colors are no longer working...

Browse source
This commit is contained in:
Anika Raemer 2025-10-12 17:17:21 +02:00
parent a224397079
commit 3f075d509b
16 changed files with 152 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/components/basics/SearchField.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import SvgIcon, { Icon } from "./SvgIcon"
import { Search, X} from "lucide-react";
import { defaultIconSize } from "./SvgIcon";
/**
* Custom search field component including a clear search functionality
*/
@ -24,7 +25,7 @@ export default function SearchField({onSearchStringChanged} : SearchFieldProps){
<div className="relative">
{/* Input of searchfield
Defines border and behavior. Requires extra padding at both sides to
accomodate the icons
accommodate the icons
*/}
<input
className="input-field pl-10 pr-10"
@ -37,17 +38,17 @@ export default function SearchField({onSearchStringChanged} : SearchFieldProps){
Clears search string on click
*/}
<button
className="absolute right-0 inset-y-0 flex items-center -ml-1 mr-3"
className="absolute right-0 inset-y-0 flex items-center -ml-1 mr-3 default-icon"
onClick = { () => changeSearchString("") }
>
<SvgIcon
icon = {Icon.X}
<X
size = {defaultIconSize}
/>
</button>
{/* Left icon: Looking glass */}
<div className="absolute left-0 inset-y-0 flex items-center ml-3">
<SvgIcon
icon = {Icon.LookingGlass}
<div className="absolute left-0 inset-y-0 flex items-center ml-3 default-icon">
<Search
size = {defaultIconSize}
/>
</div>
</div>