feat: enhance Role and Settings management UI with improved styling and hover effects

assets/js/views/RoleManagement.vue

@@ -112,7 +112,7 @@
             <div 
               v-for="module in modules" 
               :key="module.id" 
-              class="matrix-row"
+              class="matrix-row hover-row"
             >
               <div class="module-cell">
                 <i :class="module.icon"></i>
@@ -618,7 +618,7 @@ onMounted(() => {
       }
 
       .matrix-header {
-        background: var(--p-surface-100);
+        background: var(--p-content-background);
         font-weight: 600;
         border-bottom: 2px solid var(--p-surface-border);
 
@@ -645,10 +645,6 @@ onMounted(() => {
         &:not(:last-child) {
           border-bottom: 1px solid var(--p-surface-border);
         }
-
-        &:hover {
-          background: var(--p-surface-50);
-        }
       }
 
       .module-cell,

assets/js/views/SettingsManagement.vue

@@ -1,81 +1,90 @@
 <template>
   <div class="settings-management">
-    <h1>Systemeinstellungen</h1>
-    
     <div class="card">
-      <div class="card-header">
+      <div class="flex justify-between items-center mb-4">
-        <h2>Sicherheitseinstellungen</h2>
+        <div class="font-semibold text-xl">Systemeinstellungen</div>
       </div>
       
-      <div class="card-body">
+      <Card class="mb-4">
-        <form @submit.prevent="saveSettings" v-if="!loading">
+        <template #title>
-          <!-- Password Minimum Length -->
+          <div class="flex items-center gap-2">
-          <div class="form-group">
+            <i class="pi pi-shield text-primary"></i>
-            <label for="passwordMinLength">
+            <span>Sicherheitseinstellungen</span>
-              <i class="pi pi-lock"></i>
-              Mindestlänge für Passwörter
-            </label>
-            <InputNumber
-              id="passwordMinLength"
-              v-model="settings.passwordMinLength"
-              :min="4"
-              :max="128"
-              :showButtons="true"
-              suffix=" Zeichen"
-              class="w-full"
-            />
-            <small class="form-text">
-              Legt die Mindestanzahl an Zeichen fest, die ein Passwort haben muss (4-128 Zeichen).
-            </small>
           </div>
+        </template>
+        
+        <template #content>
+          <form @submit.prevent="saveSettings" v-if="!loading">
+            <!-- Password Minimum Length -->
+            <div class="flex flex-col gap-4 mb-4">
+              <div class="flex flex-col gap-2">
+                <label for="passwordMinLength" class="font-medium">
+                  <i class="pi pi-lock mr-2"></i>
+                  Mindestlänge für Passwörter
+                </label>
+                <InputNumber
+                  id="passwordMinLength"
+                  v-model="settings.passwordMinLength"
+                  :min="4"
+                  :max="128"
+                  :showButtons="true"
+                  suffix=" Zeichen"
+                  class="w-full md:w-1/2"
+                />
+                <small class="text-500">
+                  Legt die Mindestanzahl an Zeichen fest, die ein Passwort haben muss (4-128 Zeichen).
+                </small>
+              </div>
 
-          <!-- Allow Password Login -->
+              <!-- Allow Password Login -->
-          <div class="form-group">
+              <div class="flex flex-col gap-2">
-            <div class="flex align-items-center">
+                <div class="flex items-center gap-2">
-              <Checkbox
+                  <Checkbox
-                id="allowPasswordLogin"
+                    id="allowPasswordLogin"
-                v-model="settings.allowPasswordLogin"
+                    v-model="settings.allowPasswordLogin"
-                :binary="true"
+                    :binary="true"
-              />
+                  />
-              <label for="allowPasswordLogin" class="ml-2 cursor-pointer">
+                  <label for="allowPasswordLogin" class="cursor-pointer font-medium">
-                <i class="pi pi-sign-in"></i>
+                    <i class="pi pi-sign-in mr-2"></i>
-                Login mit E-Mail und Passwort erlauben
+                    Login mit E-Mail und Passwort erlauben
-              </label>
+                  </label>
+                </div>
+                <small class="text-500">
+                  Wenn deaktiviert, können sich Benutzer nur über alternative Methoden (z.B. OIDC) anmelden.
+                </small>
+                
+                <Message v-if="!settings.allowPasswordLogin" severity="warn" class="mt-2" :closable="false">
+                  <strong>Achtung:</strong> Stellen Sie sicher, dass mindestens eine alternative Login-Methode (z.B. OIDC) 
+                  konfiguriert ist, bevor Sie den Passwort-Login deaktivieren.
+                </Message>
+              </div>
             </div>
-            <small class="form-text">
-              Wenn deaktiviert, können sich Benutzer nur über alternative Methoden (z.B. OIDC) anmelden.
-            </small>
-            
-            <Message v-if="!settings.allowPasswordLogin" severity="warn" class="mt-2" :closable="false">
-              <strong>Achtung:</strong> Stellen Sie sicher, dass mindestens eine alternative Login-Methode (z.B. OIDC) 
-              konfiguriert ist, bevor Sie den Passwort-Login deaktivieren.
-            </Message>
-          </div>
 
-          <!-- Action Buttons -->
+            <!-- Action Buttons -->
-          <div class="flex gap-2 mt-4">
+            <div class="flex gap-2 mt-4">
-            <Button
+              <Button
-              type="submit"
+                type="submit"
-              label="Einstellungen speichern"
+                label="Einstellungen speichern"
-              icon="pi pi-check"
+                icon="pi pi-check"
-              :loading="saving"
+                :loading="saving"
-              class="p-button-success"
+                severity="success"
-            />
+              />
-            <Button
+              <Button
-              type="button"
+                type="button"
-              label="Zurücksetzen"
+                label="Zurücksetzen"
-              icon="pi pi-refresh"
+                icon="pi pi-refresh"
-              @click="loadSettings"
+                @click="loadSettings"
-              :disabled="saving"
+                :disabled="saving"
-              class="p-button-secondary"
+                outlined
-            />
+              />
-          </div>
+            </div>
-        </form>
+          </form>
 
-        <div v-else class="text-center py-4">
+          <div v-else class="text-center py-4">
-          <ProgressSpinner />
+            <ProgressSpinner />
-        </div>
+          </div>
-      </div>
+        </template>
+      </Card>
     </div>
 
     <!-- Success Toast -->
@@ -86,6 +95,7 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useToast } from 'primevue/usetoast'
+import Card from 'primevue/card'
 import InputNumber from 'primevue/inputnumber'
 import Checkbox from 'primevue/checkbox'
 import Button from 'primevue/button'
@@ -184,81 +194,3 @@ onMounted(() => {
   loadSettings()
 })
 </script>
-
-<style scoped>
-.settings-management {
-  max-width: 900px;
-  margin: 0 auto;
-  padding: 2rem;
-}
-
-h1 {
-  color: #333;
-  margin-bottom: 2rem;
-  font-size: 2rem;
-}
-
-.card {
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-}
-
-.card-header {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  padding: 1.5rem;
-}
-
-.card-header h2 {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 500;
-}
-
-.card-body {
-  padding: 2rem;
-}
-
-.form-group {
-  margin-bottom: 1.5rem;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  color: #333;
-}
-
-.form-group label i {
-  margin-right: 0.5rem;
-  color: #667eea;
-}
-
-.form-text {
-  display: block;
-  margin-top: 0.5rem;
-  color: #6c757d;
-  font-size: 0.875rem;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-@media (max-width: 768px) {
-  .settings-management {
-    padding: 1rem;
-  }
-  
-  h1 {
-    font-size: 1.5rem;
-  }
-  
-  .card-body {
-    padding: 1rem;
-  }
-}
-</style>

assets/styles/tailwind.css

@@ -30,3 +30,21 @@
     border-color: var(--color-gray-200, currentcolor);
   }
 }
+
+/* Global hover utility for light and dark mode compatibility */
+@layer utilities {
+  .hover-row:hover {
+    background-color: rgba(128, 128, 128, 0.1);
+    transition: background-color 0.15s ease-in-out;
+  }
+  
+  .hover-item:hover {
+    background-color: rgba(128, 128, 128, 0.08);
+    transition: background-color 0.15s ease-in-out;
+  }
+  
+  .hover-card:hover {
+    background-color: rgba(128, 128, 128, 0.05);
+    transition: background-color 0.15s ease-in-out;
+  }
+}