From fa886aad4db87733b47dc36069e1f9615424dc30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20G=C3=BCnther?= <th.guenther@saale-mail.de>
Date: Fri, 13 Feb 2026 13:51:07 +0100
Subject: [PATCH] Design improvements

---
 .../Views/Partials/invoiceDetails/Header.vue  | 51 ++++++++++---------
 .../Partials/myInvoiceDetails/Header.vue      | 48 +++++++++--------
 public/css/elements.css                       | 25 +++++++--
 3 files changed, 75 insertions(+), 49 deletions(-)

diff --git a/app/Domains/Invoice/Views/Partials/invoiceDetails/Header.vue b/app/Domains/Invoice/Views/Partials/invoiceDetails/Header.vue
index f98bf89..e424047 100644
--- a/app/Domains/Invoice/Views/Partials/invoiceDetails/Header.vue
+++ b/app/Domains/Invoice/Views/Partials/invoiceDetails/Header.vue
@@ -25,37 +25,40 @@ const emit = defineEmits(["accept", "deny", "fix", "reopen"])
         <td v-else style="width: 300px;">Kostensatelle (ursprünglich)</td>
 
         <td>{{props.data.costUnitName}}</td>
-        <td rowspan="4">
-          <button
+        <td rowspan="4" style="width: 250px; padding-right: 25px; text-align: right; vertical-align: top;">
+          <input type="button"
               v-if="props.data.status === 'new' && modeShow"
               @click="emit('accept')"
-              class="button mareike-button mareike-accept-button"
-          >
-            Abrechnung annehmen
-          </button>
-          <button v-if="props.data.status === 'denied' && modeShow"
-                  @click="emit('reopen')"
-                  class="button mareike-button mareike-accept-button"
-          >
-            Abrechnung zur Wiedervorlage öffnen
-          </button>
+              class="accept-button"
+                 style="width: 100%; margin-bottom: 10px;"
+             value="Abrechnung annehmen"
+         />
+
+          <input type="button" v-if="props.data.status === 'denied' && modeShow"
+             @click="emit('reopen')"
+             class="accept-button"
+                 style="width: 100%; margin-bottom: 10px;"
+             value="Abrechnung zur Wiedervorlage öffnen"
+         />
+
           <br />
 
-          <button
-              v-if="props.data.status === 'new' && modeShow"
-              @click="emit('fix')"
-              class="button mareike-button mareike-fix-button"
-          >
-            Abrechnung ablehnen und korrigieren
-          </button><br />
+          <input type="button"
+            v-if="props.data.status === 'new' && modeShow"
+            @click="emit('fix')"
+            class="fix-button"
+                 style="width: 100%; margin-bottom: 10px;"
+            value="Abrechnung ablehnen und korrigieren"
+         />
+          <br />
 
-          <button
+          <input type="button"
               v-if="props.data.status === 'new' && modeShow"
               @click="emit('deny')"
-              class="button mareike-button mareike-deny-button"
-          >
-            Abrechnung ablehnen
-          </button>
+              class="deny-button"
+                 style="width: 100%"
+                 value="Abrechnung ablehnen"
+         />
         </td>
       </tr>
 
diff --git a/app/Domains/Invoice/Views/Partials/myInvoiceDetails/Header.vue b/app/Domains/Invoice/Views/Partials/myInvoiceDetails/Header.vue
index cf74c50..b0242bd 100644
--- a/app/Domains/Invoice/Views/Partials/myInvoiceDetails/Header.vue
+++ b/app/Domains/Invoice/Views/Partials/myInvoiceDetails/Header.vue
@@ -16,30 +16,34 @@ const emit = defineEmits(["accept", "deny", "fix", "reopen"])
 <template>
 <span id="invoice_details_header">
     <table>
-      <tr>
-        <td>Name:</td>
-        <td v-if="modeShow">{{props.data.contactName}}</td>
-        <td v-else style="width: 300px;">{{props.data.contactName}}</td>
+        <tr>
+            <td>Name:</td>
+            <td v-if="modeShow">{{props.data.contactName}}</td>
+            <td v-else style="width: 300px;">{{props.data.contactName}}</td>
 
-        <td v-if="modeShow" style="width: 250px;">Kostenstelle</td>
-        <td v-else style="width: 300px;">Kostensatelle (ursprünglich)</td>
+            <td v-if="modeShow" style="width: 250px;">Kostenstelle</td>
+            <td v-else style="width: 300px;">Kostensatelle (ursprünglich)</td>
 
-        <td>{{props.data.costUnitName}}</td>
-        <td rowspan="4" style="vertical-align: top;">
-          <button
-              v-if="props.data.status === 'new' && modeShow"
-              @click="emit('reject')"
-              class="button mareike-button mareike-deny-button"
-          >
-            Abrechnung zurückziehen
-          </button>
-          <button v-if="props.data.status === 'denied' && modeShow"
-                  @click="emit('delete')"
-                  class="button mareike-button mareike-deny-button"
-          >
-            Abrechnung Endgültig löschen
-          </button>
-        </td>
+            <td>{{props.data.costUnitName}}</td>
+            <td
+                rowspan="4"
+                style="vertical-align: top;
+                    padding-top: 15px;
+                    padding-right: 25px;
+                    text-align: right;"
+            >
+              <input type="button"
+                  v-if="props.data.status === 'new' && modeShow"
+                  @click="emit('reject')"
+                  class="deny-button"
+                value="Abrechnung zurückziehen" />
+
+                <input type="button"
+                v-if="props.data.status === 'denied' && modeShow"
+                @click="emit('delete')"
+                class="deny-button"
+                   value="Abrechnung Endgültig löschen" />
+            </td>
       </tr>
 
       <!-- Rest der Tabelle bleibt unverändert -->
diff --git a/public/css/elements.css b/public/css/elements.css
index 05d29b2..3a3d846 100644
--- a/public/css/elements.css
+++ b/public/css/elements.css
@@ -53,9 +53,13 @@ input[type="submit"] {
 }
 
 input[type="button"]:hover,
-input[type="submit"]:hover {
-    background-color: #1d4899;
-    color: #ffffff;
+input[type="submit"]:hover,
+.deny-button:hover,
+.accept-button:hover,
+.fix-button:hover
+{
+    background-color: #1d4899 !important;
+    color: #ffffff !important;
 }
 
 .error_text {
@@ -69,3 +73,18 @@ input[type="submit"]:hover {
     font-weight: bold;
     color: #2a7caf;
 }
+
+.accept-button {
+    background-color: #508c4c !important;
+    color: #ffffff;
+}
+
+.deny-button {
+    background-color: #c9302c !important;
+    color: #ffffff;
+}
+
+.fix-button {
+    background-color: #d3d669 !important;
+    color: #000000 !important;
+}