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

frontend/src/App.css

@@ -7,7 +7,7 @@
 
   /* background */
   .app-bg {
-    @apply flex items-center w-screen justify-center min-h-screen bg-gray-50
+    @apply flex items-center w-screen justify-center min-h-screen bg-gray-50;
   }
 
   /* headings */
@@ -23,49 +23,55 @@
     @apply font-semibold mb-2 mt-4;
   }
 
+   /* icons */
+  .default-icon {
+    @apply text-gray-400 hover:text-gray-500;
+  }
+
+
   /* labels */
   .label {
-    @apply text-gray-600
+    @apply text-gray-600;
   }
 
   /* errors */
   .error-text {
-    @apply text-sm text-red-600
+    @apply text-sm text-red-600;
   }
 
   /* buttons */
   .basic-button{
-    @apply px-4 py-2 shadow-md rounded-lg whitespace-nowrap
+    @apply px-4 py-2 shadow-md rounded-lg whitespace-nowrap;
   }
   .default-button-bg {
-    @apply bg-gray-300  hover:bg-gray-400 
+    @apply bg-gray-300  hover:bg-gray-400;
   }
   .default-button-text{
-    @apply  text-gray-600 
+    @apply  text-gray-600;
   }
   .primary-button-bg {
-    @apply bg-blue-300 hover:bg-blue-400
+    @apply bg-blue-300 hover:bg-blue-400;
   }
   .primary-button-text {
-    @apply text-gray-600
+    @apply text-gray-600;
   }
   .dark-button-bg{
-    @apply bg-gray-600  hover:bg-gray-800
+    @apply bg-gray-600  hover:bg-gray-800;
   }
   .dark-button-text{
-    @apply text-white
+    @apply text-white;
   }
 
   .transparent-button-bg {
-    @apply bg-transparent hover:bg-transparent
+    @apply bg-transparent hover:bg-transparent;
   }
   .transparent-button-text {
-    @apply text-gray-600
+    @apply text-gray-600;
   }
 
   /* input fields like input and textarea */
   .input-field {
-    @apply p-2 w-full border rounded-md placeholder-gray-400 border-gray-600 hover:border-blue-600 transition-colors text-gray-600 focus:outline-none focus:border-blue-800;
+    @apply p-2 w-full border rounded-md placeholder-gray-400 border-gray-600 hover:border-blue-800 transition-colors text-gray-600 focus:outline-none focus:border-blue-900;
   }
 
   /* groups */
@@ -87,7 +93,7 @@
   }
 
   .enumeration-indicator{
-    @apply flex-shrink-0 w-7 h-7 rounded-full bg-blue-300 text-white flex items-center justify-center shadow-sm
+    @apply flex-shrink-0 w-7 h-7 rounded-full bg-blue-300 text-white flex items-center justify-center shadow-sm;
   }
   
 }

frontend/src/components/LoginPage.tsx

@@ -1,11 +1,12 @@
 import { useState } from "react";
-import Button, { ButtonType } from "./basics/Button";
+import Button from "./basics/Button";
 import type { LoginRequestDto } from "../api/dtos/LoginRequestDto";
 import type { LoginResponseDto } from "../api/dtos/LoginResponseDto";
 import { login } from "../api/points/AuthPoint";
 import { getRecipeListUrl } from "../routes";
 import { useNavigate } from "react-router-dom";
 import PasswordField from "./basics/PasswordField";
+import { ButtonType } from "./basics/BasicButtonDefinitions";
 
 export default function LoginPage() {
   const [userName, setUserName] = useState<string>("");
@@ -14,6 +15,9 @@ export default function LoginPage() {
 
   const navigate = useNavigate();
 
+  /**
+   * Login
+   */
   const executeLogin = async () => {
     const dto: LoginRequestDto = {
       userName,
@@ -26,6 +30,7 @@ export default function LoginPage() {
       localStorage.setItem("session", JSON.stringify(loginResponse));
       console.log("Successfully logged in as " + loginResponse.userData?.userName);
       setErrorMessage(null);
+      // navigate to recipe list after successful login
       navigate(getRecipeListUrl());
     } catch (err: any) {
       console.error("Login failed:", err);

frontend/src/components/basics/BasicButtonDefinitions.ts

@@ -0,0 +1,35 @@
+import type { LucideIcon } from "lucide-react";
+
+export type BasicButtonProps = {
+  /** Optional Lucide icon (e.g. Plus, X, Check) */
+  icon?: LucideIcon;
+  text?: string;
+  buttonType?: ButtonType;
+  /** Optional additional style */
+  className?: string;
+}
+
+/**
+ * Define button types here.
+ * Export as enum like class.
+ */
+export const ButtonType = {
+  DarkButton: {
+    textColor: "text-dark-button-text",
+    backgroundColor: "bg-dark-button-bg",
+  },
+  PrimaryButton: {
+    textColor: "text-primary-button-text",
+    backgroundColor: "bg-primary-button-bg",
+  },
+  DefaultButton: {
+    textColor: "text-default-button-text",
+    backgroundColor: "bg-default-button-bg",
+  },
+  TransparentButton: {
+    textColor: "text-transparent-button-text",
+    backgroundColor: "bg-transparent-button-bg",
+  },
+} as const;
+
+export type ButtonType = typeof ButtonType[keyof typeof ButtonType];

frontend/src/components/basics/Button.tsx

@@ -1,52 +1,32 @@
-import SvgIcon, { Icon } from "./SvgIcon"
+import { defaultIconSize } from "./SvgIcon";
+import { ButtonType, type BasicButtonProps } from "./BasicButtonDefinitions";
 
-type ButtonProps = {
+type ButtonProps = BasicButtonProps & { 
-    onClick: () => void,
+  onClick: () => void;
-    icon?: Icon,
+};
-    text?: string,
+
-    buttonType?: ButtonType
+export default function Button({
-    className?: string
+  onClick,
-}
+  icon: Icon,
-
+  text,
-export const ButtonType = {
+  buttonType = ButtonType.DefaultButton,
-    DarkButton: {
+  className = "",
-        textColor: "dark-button-text",
+  ...props
-        backgroundColor: "dark-button-bg"
+}: ButtonProps) {
-    },
+  return (
-    PrimaryButton: {
+    <button
-        textColor: "primary-button-text",
+      className={`basic-button ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
-        backgroundColor: "primary-button-bg"
+      onClick={onClick}
-    },
+      {...props}
-    DefaultButton: {
+    >
-        textColor: "default-button-text",
+      <div className="flex items-center gap-2">
-        backgroundColor: "default-button-bg"
+        {Icon && (
-    },
+          <Icon
-    TransparentButton: {
+            size={defaultIconSize}
-        textColor: "transparent-button-text",
+          />
-        backgroundColor: "transparent-button-bg"
+        )}
-    }
+        {text}
-} as const;
+      </div>
-
+    </button>
-export type ButtonType = typeof ButtonType[keyof typeof ButtonType];
+  );
-
-export default function Button(
-    { 
-        onClick: onClick, 
-        icon, text, 
-        buttonType = ButtonType.DefaultButton, 
-        className = "" 
-    }: ButtonProps) {
-    return (
-        <button
-            type="button"
-            className={`basic-button ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
-            onClick={onClick}
-        >
-            <div className="flex items-center gap-2">
-                {/* Render icon only if defined */}
-                {icon && <SvgIcon icon={icon} color={buttonType.textColor} />}
-                {text}
-            </div>
-        </button>
-    )
 }

frontend/src/components/basics/ButtonLink.tsx

@@ -1,10 +1,10 @@
 import { Link, type LinkProps } from "react-router-dom"
-import { ButtonType } from "./Button"
+import { defaultIconSize } from "./SvgIcon"
+import { ButtonType, type BasicButtonProps } from "./BasicButtonDefinitions"
 
-type ButtonLinkProps = LinkProps & {
+type ButtonLinkProps = LinkProps & BasicButtonProps
-  text: string
+& {
-  buttonType?: ButtonType
+  to: string
-  className?: string
 }
 
 /**
@@ -13,6 +13,7 @@ type ButtonLinkProps = LinkProps & {
 export default function ButtonLink({
   to,
   text,
+  icon: Icon,
   buttonType = ButtonType.DefaultButton,
   className = "",
   ...props
@@ -23,7 +24,14 @@ export default function ButtonLink({
       className={`basic-button ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
       {...props}
     >
-      {text}
+      <div className="flex items-center gap-2">
+        {Icon && (
+          <Icon
+            size={defaultIconSize}
+          />
+        )}
+        {text}
+      </div>
     </Link>
   )
 }

frontend/src/components/basics/PasswordField.tsx

@@ -1,5 +1,6 @@
 import { Eye, EyeOff } from "lucide-react";
 import { useState } from "react";
+import { defaultIconSize } from "./SvgIcon";
 
 type PasswordFieldProps = {
     onPasswordChanged: (password : string) => void
@@ -12,7 +13,6 @@ type PasswordFieldProps = {
 export default function PasswordField({onPasswordChanged, onKeyDown} : PasswordFieldProps){
     const [showPassword, setShowPassword] = useState(false);
     const [password, setPassword] = useState<string>("");
-    const iconSize = 20;
     
     const changePassword = (password : string) => {
         setPassword(password);
@@ -28,13 +28,14 @@ export default function PasswordField({onPasswordChanged, onKeyDown} : PasswordF
             onChange={(e) => changePassword(e.target.value)}
             onKeyDown={onKeyDown}
             />
+            {/* Add a little eye icon to the right for showing password */}
             <button
             type="button"
             onClick={() => setShowPassword(!showPassword)}
             className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
             aria-label={showPassword ? "Passwort ausblenden" : "Passwort anzeigen"}
             >
-            {showPassword ? <EyeOff size={iconSize} /> : <Eye size={iconSize} />}
+            {showPassword ? <EyeOff size={defaultIconSize} /> : <Eye size={defaultIconSize} />}
             </button>
         </div>
     );

frontend/src/components/basics/SearchField.tsx

@@ -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
+            <X
-                icon = {Icon.X}
+                size = {defaultIconSize}
             />
         </button>
         {/* Left icon: Looking glass */}
-        <div className="absolute left-0 inset-y-0 flex items-center ml-3">
+        <div className="absolute left-0 inset-y-0 flex items-center ml-3 default-icon">
-            <SvgIcon
+            <Search
-               icon = {Icon.LookingGlass}
+               size = {defaultIconSize}
             />
         </div>
     </div>

frontend/src/components/basics/SvgIcon.tsx

@@ -3,6 +3,7 @@
  * @todo replace by lucid react
  */
 
+export const defaultIconSize = 20;
 /**
  * Enum-like const object+type definition to define icons. 
  * The string corresponds to the path definition of the icon

frontend/src/components/recipes/IngredientGroupListEditor.tsx

@@ -4,9 +4,10 @@
 
 import type { IngredientModel } from "../../models/IngredientModel"
 import type { IngredientGroupModel } from "../../models/IngredientGroupModel"
-import Button, { ButtonType } from "../basics/Button"
+import Button from "../basics/Button"
-import SvgIcon, { Icon } from "../basics/SvgIcon"
 import { IngredientListEditor } from "./IngredientListEditor"
+import { Plus } from "lucide-react"
+import { ButtonType } from "../basics/BasicButtonDefinitions"
 
 type IngredientGroupListEditorProps = {
   ingredientGroupList: IngredientGroupModel[]
@@ -58,7 +59,7 @@ export function IngredientGroupListEditor({ ingredientGroupList, onChange }: Ing
       ))}
       <Button 
         onClick={handleAdd}
-        icon={Icon.Plus}
+        icon={Plus}
         text={"Add Ingredient Group"}
         buttonType={ButtonType.PrimaryButton}
       />

frontend/src/components/recipes/IngredientListEditor.tsx

@@ -1,6 +1,7 @@
+import { Plus, X } from "lucide-react"
 import type { IngredientModel } from "../../models/IngredientModel"
-import Button, { ButtonType } from "../basics/Button"
+import Button from "../basics/Button"
-import { Icon } from "../basics/SvgIcon"
+import { ButtonType } from "../basics/BasicButtonDefinitions"
 
 /** 
  * Editor for handling the ingredient list
@@ -53,14 +54,14 @@ export function IngredientListEditor({ ingredients, onChange }: IngredientListEd
           />
           <Button 
             onClick={() => handleRemove(index)}
-            icon={Icon.X}
+            icon={X}
             buttonType={ButtonType.DarkButton}
           />
         </div>
       ))}
       <Button 
         onClick={handleAdd}
-        icon={Icon.Plus}
+        icon={Plus}
         text={"Add Ingredient"}
         buttonType={ButtonType.PrimaryButton}
       />

frontend/src/components/recipes/InstructionStepDesktopListItem.tsx

@@ -5,8 +5,9 @@
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import type { InstructionStepModel } from "../../models/InstructionStepModel";
-import Button, { ButtonType } from "../basics/Button";
+import Button from "../basics/Button";
-import { Icon } from "../basics/SvgIcon";
+import { X } from "lucide-react"
+import { ButtonType } from "../basics/BasicButtonDefinitions";
 
 type InstructionStepDesktopListItemProps = {
   id: string | number;
@@ -56,9 +57,8 @@ export function InstructionStepDesktopListItem({
 
       <Button
         onClick={() => onRemove(index)}
-        icon={Icon.X}
+        icon={X}
         buttonType={ButtonType.DarkButton}
-        title="Schritt löschen"
       />
     </div>
   );

frontend/src/components/recipes/InstructionStepListDesktopEditor.tsx

@@ -16,9 +16,10 @@ import {
 } from "@dnd-kit/sortable";
 import type { InstructionStepModel } from "../../models/InstructionStepModel";
 import { InstructionStepDesktopListItem } from "./InstructionStepDesktopListItem";
-import { useInstructionStepListEditor } from "./InstructionStepListEditor";
+import { instructionStepListEditorMethods } from "./InstructionStepListEditor";
-import Button, { ButtonType } from "../basics/Button";
+import Button from "../basics/Button";
-import { Icon } from "../basics/SvgIcon";
+import { Plus } from "lucide-react";
+import { ButtonType } from "../basics/BasicButtonDefinitions";
 
 type InstructionStepListDesktopEditorProps = {
   instructionStepList: InstructionStepModel[];
@@ -29,7 +30,7 @@ export function InstructionStepListDesktopEditor({
   instructionStepList,
   onChange,
 }: InstructionStepListDesktopEditorProps) {
-  const { handleUpdate, handleAdd, handleRemove } = useInstructionStepListEditor(
+  const { handleUpdate, handleAdd, handleRemove } = instructionStepListEditorMethods(
     instructionStepList,
     onChange
   );
@@ -76,7 +77,7 @@ export function InstructionStepListDesktopEditor({
       </DndContext>
       <Button
         onClick={handleAdd}
-        icon={Icon.Plus}
+        icon={Plus}
         text="Schritt hinzufügen"
         buttonType={ButtonType.PrimaryButton}
         className="mt-4"

frontend/src/components/recipes/InstructionStepListEditor.tsx

@@ -50,7 +50,7 @@ export function InstructionStepListEditor({
  *
  * Provides add/remove/update functionality used by both mobile and desktop editors.
  */
-export function useInstructionStepListEditor(
+export function instructionStepListEditorMethods(
   instructionStepList: InstructionStepModel[],
   onChange: (steps: InstructionStepModel[]) => void
 ) {

frontend/src/components/recipes/InstructionStepListMobileEditor.tsx

@@ -2,10 +2,11 @@
  * Mobile editor using Up/Down buttons for reordering
  */
 
+import { ArrowDown, ArrowUp, Plus, X } from "lucide-react";
 import type { InstructionStepModel } from "../../models/InstructionStepModel";
-import Button, { ButtonType } from "../basics/Button";
+import Button from "../basics/Button";
-import { Icon } from "../basics/SvgIcon";
+import { instructionStepListEditorMethods } from "./InstructionStepListEditor";
-import { useInstructionStepListEditor } from "./InstructionStepListEditor";
+import { ButtonType } from "../basics/BasicButtonDefinitions";
 
 type InstructionStepListEditorMobileProps = {
   instructionStepList: InstructionStepModel[];
@@ -16,7 +17,7 @@ export function InstructionStepListMobileEditor({
   instructionStepList,
   onChange,
 }: InstructionStepListEditorMobileProps) {
-  const { handleUpdate, handleAdd, handleRemove } = useInstructionStepListEditor(
+  const { handleUpdate, handleAdd, handleRemove } = instructionStepListEditorMethods(
     instructionStepList,
     onChange
   );
@@ -43,12 +44,12 @@ export function InstructionStepListMobileEditor({
             </div>
             <div className="flex flex-col mt-2">
               <Button
-                icon={Icon.ArrowUp}
+                icon={ArrowUp}
                 onClick={() => moveStep(index, "up")}
                 buttonType={ButtonType.TransparentButton}
               />
               <Button
-                icon={Icon.ArrowDown}
+                icon={ArrowDown}
                 onClick={() => moveStep(index, "down")}
                 buttonType={ButtonType.TransparentButton}
               />
@@ -69,14 +70,14 @@ export function InstructionStepListMobileEditor({
 
           <Button
             onClick={() => handleRemove(index)}
-            icon={Icon.X}
+            icon={X}
             buttonType={ButtonType.DarkButton}
           />
         </div>
       ))}
       <Button
         onClick={handleAdd}
-        icon={Icon.Plus}
+        icon={Plus}
         text="Schritt hinzufügen"
         buttonType={ButtonType.PrimaryButton}
         className="mt-4"

frontend/src/components/recipes/RecipeEditor.tsx

@@ -2,9 +2,10 @@ import { useState } from "react"
 import type { RecipeModel } from "../../models/RecipeModel"
 import type { IngredientGroupModel } from "../../models/IngredientGroupModel"
 import { IngredientGroupListEditor } from "./IngredientGroupListEditor"
-import Button, { ButtonType } from "../basics/Button"
+import Button from "../basics/Button"
 import { InstructionStepListEditor } from "./InstructionStepListEditor"
 import type { InstructionStepModel } from "../../models/InstructionStepModel"
+import { ButtonType } from "../basics/BasicButtonDefinitions"
 
 type RecipeEditorProps = {
   recipe: RecipeModel
@@ -91,7 +92,7 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
       {/* Title */}
       <h3 className="subsection-heading">Title</h3>
       <input
-        className={`input-field ${errors.title ? "border-red-500" : ""}`}
+        className={`input-field ${errors.title ? "error-text" : ""}`}
         placeholder="Title"
         value={draft.title}
         onChange={e => setDraft({ ...draft, title: e.target.value })}
@@ -123,7 +124,7 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
         />
       </div>
       {/* Ingredient List - @todo better visualization of errors! */}
-      <div className={errors.ingredients ? "border border-red-500 rounded p-2" : ""}>
+      <div className={errors.ingredients ? "border error-text rounded p-2" : ""}>
       <IngredientGroupListEditor
         ingredientGroupList={draft.ingredientGroupList}
         onChange={updateIngredientGroupList}

frontend/src/components/recipes/RecipeListToolbar.tsx

@@ -1,4 +1,4 @@
-import { ButtonType } from "../basics/Button"
+import { ButtonType } from "../basics/BasicButtonDefinitions"
 import Button from "../basics/Button"
 import SearchField from "../basics/SearchField"