From df39a1a217e25ae0466c5ee1d2167ad934779f57 Mon Sep 17 00:00:00 2001
From: araemer <anika@raemer.net>
Date: Sun, 7 Dec 2025 08:10:27 +0100
Subject: [PATCH] Style and position settings button

---
 .../basics/BasicButtonDefinitions.ts          |  4 ++++
 .../components/basics/CircularIconButton.tsx  |  7 ++++--
 .../src/components/basics/NumberCircle.tsx    | 22 +++++++++----------
 .../components/basics/NumberStepControl.tsx   |  2 ++
 .../components/basics/PageContentLayout.tsx   | 17 +++++++-------
 5 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/basics/BasicButtonDefinitions.ts b/frontend/src/components/basics/BasicButtonDefinitions.ts
index 1c4a678..a5c6895 100644
--- a/frontend/src/components/basics/BasicButtonDefinitions.ts
+++ b/frontend/src/components/basics/BasicButtonDefinitions.ts
@@ -22,6 +22,10 @@ export const ButtonType = {
         textColor: "text-white",
         backgroundColor: "bg-gray-600  hover:bg-gray-800",
     },
+    LightButton: {
+        textColor: "text-gray-600",
+        backgroundColor: "bg-white  hover:bg-gray-300",
+    },
     PrimaryButton: {
         textColor: "text-gray-600",
         backgroundColor: "bg-blue-300 hover:bg-blue-400",
diff --git a/frontend/src/components/basics/CircularIconButton.tsx b/frontend/src/components/basics/CircularIconButton.tsx
index 3089235..e6ca8c4 100644
--- a/frontend/src/components/basics/CircularIconButton.tsx
+++ b/frontend/src/components/basics/CircularIconButton.tsx
@@ -6,6 +6,7 @@ import clsx from "clsx";
 type CircularIconButtonProps = {
     icon: LucideIcon;
     onClick: () => void;
+    buttonType?: ButtonType
     disabled?: boolean;
     className?: string;
 };
@@ -17,14 +18,16 @@ export default function CircularIconButton({
                                                onClick,
                                                icon: Icon,
                                                className = "",
+                                               buttonType = ButtonType.PrimaryButton,
                                                disabled = false,
                                                ...props
                                            }: CircularIconButtonProps) {
     return (
         <button
             className={clsx(
-                "flex-shrink-0 w-7 h-7 rounded-full text-white flex items-center justify-center shadow-sm",
-                ButtonType.PrimaryButton.backgroundColor,
+                "flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center shadow-sm",
+                buttonType.backgroundColor,
+                buttonType?.textColor,
                 className)}
             onClick={onClick}
             disabled={disabled}
diff --git a/frontend/src/components/basics/NumberCircle.tsx b/frontend/src/components/basics/NumberCircle.tsx
index 72cfb6e..d3c601b 100644
--- a/frontend/src/components/basics/NumberCircle.tsx
+++ b/frontend/src/components/basics/NumberCircle.tsx
@@ -12,18 +12,18 @@ type NumberCircleProps = React.HTMLAttributes<HTMLDivElement> & {
  * Can be used as a standalone indicator or as a drag handle.
  * Accepts any div attributes (e.g. `className`, `title`, `onClick`, or DnD listeners).
  */
-export function NumberCircle({ number, className, ...rest }: NumberCircleProps) {
+export function NumberCircle({number, className, ...rest}: NumberCircleProps) {
     return (
         <div
             {...rest}
-    className={clsx(
-        "flex-shrink-0 w-7 h-7 rounded-full bg-blue-300 text-white",
-        "flex items-center justify-center shadow-sm",
-        "cursor-default select-none",
-        className
-)}
->
-    {number}
-    </div>
-);
+            className={clsx(
+                "flex-shrink-0 w-7 h-7 rounded-full bg-blue-300 text-white",
+                "flex items-center justify-center shadow-sm",
+                "cursor-default select-none",
+                className
+            )}
+        >
+            {number}
+        </div>
+    );
 }
diff --git a/frontend/src/components/basics/NumberStepControl.tsx b/frontend/src/components/basics/NumberStepControl.tsx
index 86cde69..71f269e 100644
--- a/frontend/src/components/basics/NumberStepControl.tsx
+++ b/frontend/src/components/basics/NumberStepControl.tsx
@@ -50,6 +50,7 @@ export function NumberStepControl({
             className)}>
             <CircularIconButton
                 onClick={handleDecrease}
+                className={"text-white"}
                 icon={Minus}
             />
 
@@ -64,6 +65,7 @@ export function NumberStepControl({
 
             <CircularIconButton
                 onClick={handleIncrease}
+                className={"text-white"}
                 icon={Plus}
             />
 
diff --git a/frontend/src/components/basics/PageContentLayout.tsx b/frontend/src/components/basics/PageContentLayout.tsx
index d4e5bce..1ed1594 100644
--- a/frontend/src/components/basics/PageContentLayout.tsx
+++ b/frontend/src/components/basics/PageContentLayout.tsx
@@ -3,6 +3,8 @@ import React, {type ReactNode, useState} from "react";
 import clsx from "clsx";
 import {Settings} from "lucide-react";
 import {SettingsMenu} from "../SettingsMenu";
+import CircularIconButton from "./CircularIconButton.tsx";
+import {ButtonType} from "./BasicButtonDefinitions.ts";
 
 /**
  * Layout wrapper for the main content area of a page.
@@ -28,14 +30,13 @@ export default function PageContentLayout({
                 className
             )}
         >
-            {/* Settings Button (top-right) */}
-            <button
+            {/* Settings Button (top-right) - Sticky with higher z-index than header */}
+            <CircularIconButton
                 onClick={() => setIsMenuOpen(true)}
-                className="absolute top-4 right-4 p-2 rounded-full bg-white hover:bg-gray-200 shadow transition"
-                title="Einstellungen"
-            >
-                <Settings size={20}/>
-            </button>
+                buttonType={ButtonType.LightButton}
+                className="sticky top-4 float-right w-10 h-10 z-20 mb-[-40px]"
+                icon={Settings}
+            />
 
             {/* Page content */}
             {children}
@@ -44,4 +45,4 @@ export default function PageContentLayout({
             {isMenuOpen && <SettingsMenu onClose={() => setIsMenuOpen(false)}/>}
         </div>
     );
-}
+}
\ No newline at end of file