From 34ace67d1fdd11fd7550b58b67aa4f929bf98902 Mon Sep 17 00:00:00 2001
From: neodk2004 <barac.daniel@gmail.com>
Date: Wed, 24 Dec 2025 23:08:21 +0100
Subject: [PATCH] feat(ui): finalize form controls, button states and select
 styling

- add disabled and loading states for all buttons
- align danger button radius and interaction with design system
- improve native select styling for consistent rounded appearance
- normalize focus, hover and active states for form controls
- ensure visual consistency across pets, posts and forms
---
 frontend/app/globals.css       | 87 +++++++++++++++++++++++++++++++++-
 frontend/app/pets/new/page.tsx | 16 ++++++-
 2 files changed, 100 insertions(+), 3 deletions(-)

diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index d07cd68..67f57d2 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -124,6 +124,11 @@ body {
     transform: translateY(0);
   }
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 
 .postcard {
   background: var(--color-surface);
@@ -479,7 +484,7 @@ body {
   align-items: center;
   gap: 0.4rem;
   padding: 0.8rem 1.2rem;
-  border-radius: var(--radius-lg);
+  border-radius: 12px;
   background: var(--color-primary);
   color: white;
   font-weight: 600;
@@ -499,7 +504,7 @@ body {
   justify-content: center;
   align-items: center;
   padding: 0.8rem 1.2rem;
-  border-radius: var(--radius-lg);
+  border-radius: 12px;
   background: var(--color-surface);
   color: var(--color-text-main);
   border: 1px solid var(--color-border);
@@ -507,13 +512,32 @@ body {
   cursor: pointer;
 }
 .button-danger {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.4rem;
+
+  padding: 0.8rem 1.2rem;
+  border-radius: 12px; /* 🔴 gleiche Rundung wie grün */
+
   background: #c62828;
   color: white;
+  font-weight: 600;
+
   border: none;
+  cursor: pointer;
+  text-decoration: none;
+
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow 0.2s ease, transform 0.15s ease;
 }
 
 .button-danger:hover {
   background: #b71c1c;
+  box-shadow: var(--shadow-md);
+}
+.button-danger:active {
+  transform: scale(0.98);
 }
 .badge {
   display: inline-block;
@@ -638,3 +662,62 @@ h1, h2, h3 {
   background: var(--color-border);
   margin: var(--space-lg) 0;
 }
+button:disabled,
+.button-primary:disabled,
+.button-secondary:disabled,
+.button-danger:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  box-shadow: none;
+  transform: none;
+}
+.button-primary.is-loading,
+.button-secondary.is-loading,
+.button-danger.is-loading {
+  position: relative;
+  pointer-events: none;
+  color: transparent; /* Text ausblenden */
+}
+.button-primary.is-loading::after,
+.button-secondary.is-loading::after,
+.button-danger.is-loading::after {
+  content: '';
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  border-top-color: white;
+  border-radius: 50%;
+  position: absolute;
+  animation: spin 0.8s linear infinite;
+}
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  width: 100%;
+  padding: 0.7rem 2.4rem 0.7rem 0.9rem;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  background-color: var(--color-surface);
+  color: var(--color-text-main);
+  font-size: 0.9rem;
+  line-height: 1.3;
+
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%235f6f66' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.9rem center;
+}
+select:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.15);
+}
+select:disabled {
+  background-color: var(--color-primary-soft);
+  color: var(--color-text-muted);
+  cursor: not-allowed;
+}
diff --git a/frontend/app/pets/new/page.tsx b/frontend/app/pets/new/page.tsx
index eede1a4..880ef5f 100644
--- a/frontend/app/pets/new/page.tsx
+++ b/frontend/app/pets/new/page.tsx
@@ -2,6 +2,8 @@
 
 import { useState } from 'react';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
 import { dogBreeds, catBreeds } from '@/app/data/breeds';
 
 type PetType = 'Hund' | 'Katze' | '';
@@ -14,6 +16,11 @@ export default function NewPetPage() {
   const [bio, setBio] = useState('');
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
+const router = useRouter();
+
+function handleCancel() {
+  router.back(); // geht zur vorherigen Seite zurück
+}
 
   const breeds =
     type === 'Hund'
@@ -208,7 +215,14 @@ export default function NewPetPage() {
             Haustier speichern
           </button>
 
-          <Link href="/pets">Abbrechen</Link>
+          <button
+            type="button"
+            onClick={handleCancel}
+            className="button-danger"
+            >
+            Abbrechen
+          </button>
+
         </div>
       </form>
     </section>