Clean up css

2025-10-25 08:00:59 +02:00 · 2025-10-25 08:00:59 +02:00 · c866c01dfe
commit c866c01dfe
parent 5a4e04a47c
17 changed files with 214 additions and 250 deletions
--- a/frontend/src/components/basics/BasicButtonDefinitions.ts
+++ b/frontend/src/components/basics/BasicButtonDefinitions.ts
@ -1,38 +1,39 @@
-import type { LucideIcon } from "lucide-react";
+import type {LucideIcon} from "lucide-react";

 /**
 * Basic definitions used by all Button types, such as Button.tsx and ButtonLink.tsx
 */
 export type BasicButtonProps = {
-  /** Optional Lucide icon (e.g. Plus, X, Check) */
-  icon?: LucideIcon;
-  text?: string;
-  buttonType?: ButtonType;
-  /** Optional additional style */
-  className?: string;
+    /** Optional Lucide icon (e.g. Plus, X, Check) */
+    icon?: LucideIcon;
+    text?: string;
+    buttonType?: ButtonType;
+    /** Optional additional style */
+    className?: string;
 }

+export const basicButtonStyle = "px-4 py-2 shadow-md rounded-lg whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed"
 /**
 * Define button types here.
 * Export as enum like class.
 */
 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",
-  },
+    DarkButton: {
+        textColor: "text-white",
+        backgroundColor: "bg-gray-600  hover:bg-gray-800",
+    },
+    PrimaryButton: {
+        textColor: "text-gray-600",
+        backgroundColor: "bg-blue-300 hover:bg-blue-400",
+    },
+    DefaultButton: {
+        textColor: "text-gray-600",
+        backgroundColor: "bg-gray-300  hover:bg-gray-400",
+    },
+    TransparentButton: {
+        textColor: "text-gray-600",
+        backgroundColor: "bg-transparent hover:bg-transparent",
+    },
 } as const;

 export type ButtonType = typeof ButtonType[keyof typeof ButtonType];
--- a/frontend/src/components/basics/Button.tsx
+++ b/frontend/src/components/basics/Button.tsx
@ -1,5 +1,5 @@
 import {defaultIconSize} from "./SvgIcon";
-import {type BasicButtonProps, ButtonType} from "./BasicButtonDefinitions";
+import {type BasicButtonProps, basicButtonStyle, ButtonType} from "./BasicButtonDefinitions";

 type ButtonProps = BasicButtonProps & {
    onClick: () => void;
@ -20,7 +20,7 @@ export default function Button({
                               }: ButtonProps) {
    return (
        <button
-            className={`basic-button bg-primary-button-bg ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
+            className={`${basicButtonStyle} ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
            onClick={onClick}
            disabled={disabled}
            {...props}
--- a/frontend/src/components/basics/ButtonLink.tsx
+++ b/frontend/src/components/basics/ButtonLink.tsx
@ -1,37 +1,37 @@
-import { Link, type LinkProps } from "react-router-dom"
-import { defaultIconSize } from "./SvgIcon"
-import { ButtonType, type BasicButtonProps } from "./BasicButtonDefinitions"
+import {Link, type LinkProps} from "react-router-dom"
+import {defaultIconSize} from "./SvgIcon"
+import {type BasicButtonProps, basicButtonStyle, ButtonType} from "./BasicButtonDefinitions"

 type ButtonLinkProps = LinkProps & BasicButtonProps
-& {
-  to: string
+    & {
+    to: string
 }

 /**
 * Link component having the same stile as the button
 */
 export default function ButtonLink({
-  to,
-  text,
-  icon: Icon,
-  buttonType = ButtonType.DefaultButton,
-  className = "",
-  ...props
-}: ButtonLinkProps) {
-  return (
-    <Link
-      to={to}
-      className={`basic-button ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
-      {...props}
-    >
-      <div className="flex items-center gap-2">
-        {Icon && (
-          <Icon
-            size={defaultIconSize}
-          />
-        )}
-        {text}
-      </div>
-    </Link>
-  )
+                                       to,
+                                       text,
+                                       icon: Icon,
+                                       buttonType = ButtonType.DefaultButton,
+                                       className = "",
+                                       ...props
+                                   }: ButtonLinkProps) {
+    return (
+        <Link
+            to={to}
+            className={`${basicButtonStyle} ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
+            {...props}
+        >
+            <div className="flex items-center gap-2">
+                {Icon && (
+                    <Icon
+                        size={defaultIconSize}
+                    />
+                )}
+                {text}
+            </div>
+        </Link>
+    )
 }
--- a/frontend/src/components/basics/NumberStepControl.tsx
+++ b/frontend/src/components/basics/NumberStepControl.tsx
@ -59,7 +59,7 @@ export function NumberStepControl({
                pattern="[0-9]*"
                value={value}
                onChange={handleInputChange}
-                className="w-16 text-center input-field"
+                className="w-16 text-center"
            />

            <button
--- a/frontend/src/components/basics/PasswordField.tsx
+++ b/frontend/src/components/basics/PasswordField.tsx
@ -1,41 +1,41 @@
-import { Eye, EyeOff } from "lucide-react";
-import { useState } from "react";
-import { defaultIconSize } from "./SvgIcon";
+import {Eye, EyeOff} from "lucide-react";
+import {useState} from "react";
+import {defaultIconSize} from "./SvgIcon";

 type PasswordFieldProps = {
-    onPasswordChanged: (password : string) => void
+    onPasswordChanged: (password: string) => void
    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void
 }

 /**
 * Password field component
 */
-export default function PasswordField({onPasswordChanged, onKeyDown} : PasswordFieldProps){
+export default function PasswordField({onPasswordChanged, onKeyDown}: PasswordFieldProps) {
    const [showPassword, setShowPassword] = useState(false);
    const [password, setPassword] = useState<string>("");
-    
-    const changePassword = (password : string) => {
+
+    const changePassword = (password: string) => {
        setPassword(password);
        onPasswordChanged(password)
    }
    return (
        <div className="relative">
            <input
-            className="input-field pr-10"
-            type={showPassword ? "text" : "password"}
-            placeholder="Passwort"
-            value={password}
-            onChange={(e) => changePassword(e.target.value)}
-            onKeyDown={onKeyDown}
+                className="pr-10"
+                type={showPassword ? "text" : "password"}
+                placeholder="Passwort"
+                value={password}
+                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"}
+                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={defaultIconSize} /> : <Eye size={defaultIconSize} />}
+                {showPassword ? <EyeOff size={defaultIconSize}/> : <Eye size={defaultIconSize}/>}
            </button>
        </div>
    );
--- a/frontend/src/components/basics/SearchField.tsx
+++ b/frontend/src/components/basics/SearchField.tsx
@ -1,21 +1,22 @@
-import { useState } from "react";
-import { Search, X} from "lucide-react";
-import { defaultIconSize } from "./SvgIcon";
+import {useState} from "react";
+import {Search, X} from "lucide-react";
+import {defaultIconSize} from "./SvgIcon";
+
 /**
 * Custom search field component including a clear search functionality
 */
-type SearchFieldProps = { 
-    onSearchStringChanged: (searchString : string) => void
+type SearchFieldProps = {
+    onSearchStringChanged: (searchString: string) => void
 }

 /**
 * @param SearchFieldProps consisting of an initial searchString and an onSearchStringChanged handler
 * @returns Custom search field component
 */
-export default function SearchField({onSearchStringChanged} : SearchFieldProps){
+export default function SearchField({onSearchStringChanged}: SearchFieldProps) {
    const [currentSearchString, setCurrentSearchString] = useState<string>("")
-    
-    const changeSearchString = (newSearchString : string) => {
+
+    const changeSearchString = (newSearchString: string) => {
        console.log(newSearchString);
        setCurrentSearchString(newSearchString);
        onSearchStringChanged(newSearchString)
@ -23,34 +24,34 @@ export default function SearchField({onSearchStringChanged} : SearchFieldProps){

    return (
        <div className="relative">
-        {/* Input of searchfield
+            {/* Input of searchfield
            Defines border and behavior. Requires extra padding at both sides to
            accommodate the icons
         */}
-        <input
-            className="input-field pl-10 pr-10"
-            type="text"
-            placeholder="Search"
-            value={currentSearchString}
-            onChange={ e => changeSearchString(e.target.value) }
-        />
-        {/* Right icon: X 
+            <input
+                className="pl-10 pr-10"
+                type="text"
+                placeholder="Search"
+                value={currentSearchString}
+                onChange={e => changeSearchString(e.target.value)}
+            />
+            {/* Right icon: X
            Clears search string on click
          */}
-        <button 
-            className="absolute right-0 inset-y-0 flex items-center -ml-1 mr-3 default-icon"
-            onClick = { () => changeSearchString("") }
-        >
-            <X
-                size = {defaultIconSize}
-            />
-        </button>
-        {/* Left icon: Looking glass */}
-        <div className="absolute left-0 inset-y-0 flex items-center ml-3 default-icon">
-            <Search
-               size = {defaultIconSize}
-            />
+            <button
+                className="absolute right-0 inset-y-0 flex items-center -ml-1 mr-3 default-icon"
+                onClick={() => changeSearchString("")}
+            >
+                <X
+                    size={defaultIconSize}
+                />
+            </button>
+            {/* Left icon: Looking glass */}
+            <div className="absolute left-0 inset-y-0 flex items-center ml-3 default-icon">
+                <Search
+                    size={defaultIconSize}
+                />
+            </div>
        </div>
-    </div>
    )
 }