From 29570548237283ea112ce0ae71fd335f9ba36015 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 31 May 2025 05:58:44 +0000
Subject: [PATCH] feat: Add accent color customization for configuracion module

This commit introduces a new accent color setting for the 'configuracion' module.

Changes include:
- Updated `ui/src/stores/useUi.js` to include:
    - A new state property `accentColorConfiguracion`.
    - Addition of `'accentColorConfiguracion'` to `appearanceSettingKeys` for local storage persistence.
    - A new action `setAccentColorConfiguracion` to modify the new color.
- Updated `ui/src/views/SettingsView.vue` to include:
    - A new color picker in the "Module Accent Colors" section, allowing you to select and change the accent color for the 'configuracion' module.
---
 ui/src/stores/useUi.js        | 6 ++++++
 ui/src/views/SettingsView.vue | 5 +++++
 2 files changed, 11 insertions(+)

diff --git a/ui/src/stores/useUi.js b/ui/src/stores/useUi.js
index c448aa1..9ba02bf 100644
--- a/ui/src/stores/useUi.js
+++ b/ui/src/stores/useUi.js
@@ -16,6 +16,7 @@ const appearanceSettingKeys = [
   'accentColorTareas',
   'accentColorPlanillas',
   'accentColorAsistencias',
+  'accentColorConfiguracion',
 ]
 
 const loadSettingsFromLocalStorage = () => {
@@ -76,6 +77,7 @@ export const useUi = defineStore('ui', {
       accentColorTareas: '#4CAF50',     // Green
       accentColorPlanillas: '#FF9800',  // Orange
       accentColorAsistencias: '#E91E63', // Pink
+      accentColorConfiguracion: '#607D8B', // Blue Grey
     }
 
     const loadedSettings = loadSettingsFromLocalStorage()
@@ -157,6 +159,10 @@ export const useUi = defineStore('ui', {
     setAccentColorAsistencias(color) {
       this.accentColorAsistencias = color
       _saveAppearanceState(this)
+    },
+    setAccentColorConfiguracion(color) {
+      this.accentColorConfiguracion = color
+      _saveAppearanceState(this)
     }
   },
 })
diff --git a/ui/src/views/SettingsView.vue b/ui/src/views/SettingsView.vue
index b320242..b7c76a9 100644
--- a/ui/src/views/SettingsView.vue
+++ b/ui/src/views/SettingsView.vue
@@ -94,6 +94,11 @@
           <input type="color" id="accentColorAsistencias" v-model="ui.accentColorAsistencias" @input="ui.setAccentColorAsistencias($event.target.value)"
                  class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
         </div>
+        <div class="setting-item">
+          <label for="accentColorConfiguracion" class="block text-sm font-medium mb-1">Configuracion Accent</label>
+          <input type="color" id="accentColorConfiguracion" v-model="ui.accentColorConfiguracion" @input="ui.setAccentColorConfiguracion($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
       </div>
     </section>