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

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 = {
-    onClick: () => void,
-    icon?: Icon,
-    text?: string,
-    buttonType?: ButtonType
-    className?: string
+type ButtonProps = BasicButtonProps & { 
+  onClick: () => void;
+};
+
+export default function Button({
+  onClick,
+  icon: Icon,
+  text,
+  buttonType = ButtonType.DefaultButton,
+  className = "",
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={`basic-button ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
+      onClick={onClick}
+      {...props}
+    >
+      <div className="flex items-center gap-2">
+        {Icon && (
+          <Icon
+            size={defaultIconSize}
+          />
+        )}
+        {text}
+      </div>
+    </button>
+  );
 }
-
-export const ButtonType = {
-    DarkButton: {
-        textColor: "dark-button-text",
-        backgroundColor: "dark-button-bg"
-    },
-    PrimaryButton: {
-        textColor: "primary-button-text",
-        backgroundColor: "primary-button-bg"
-    },
-    DefaultButton: {
-        textColor: "default-button-text",
-        backgroundColor: "default-button-bg"
-    },
-    TransparentButton: {
-        textColor: "transparent-button-text",
-        backgroundColor: "transparent-button-bg"
-    }
-} as const;
-
-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 & {
-  text: string
-  buttonType?: ButtonType
-  className?: string
+type ButtonLinkProps = LinkProps & BasicButtonProps
+& {
+  to: 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
-                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>

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