This commit resolves issues identified after the initial UI standardization pass for the Empleados and Chat modules. It includes fixes for the EmpleadoForm background and correctly defines and applies distinct accent and background colors for the Chat module.
**Previous Standardization (Recap):**
- **Empleados Module:**
- `EmpleadosIndex.vue`: Standardized page header, messages, and create button.
- `cardEmpleado.vue`: Edit emits event, added delete, converted to JS.
- `tablaEmpleados.vue`: Edit emits event, removed view details, added delete, converted to JS.
- **Chat Module (Initial Pass):**
- `ChatView.vue`: Added standard page header.
- `CanvasChat.vue`: Styled input, send button, message bubbles, and scrollbar using `accentColorChat`.
- **`useUi.js`:**
- Added `accentColorChat`.
**Fixes in this Commit:**
- **`EmpleadoForm.vue`:**
- Corrected background styling:
- Page container (`.empleado-form-page-container`) now uses `var(--background-color)` (theme's main background).
- Form card (`.empleado-actual-form`) now uses a contrasting background (white/dark theme equivalent), distinct from the page and input field backgrounds.
- **`useUi.js` (UI Store):**
- Added `backgroundColorChat` to the store's state, appearance keys, and actions (defaulting to `#F0F0F0`). This allows a distinct background color specifically for the chat interface.
- **Chat Module Color Application:**
- **`ChatView.vue`:**
- `.chat-view-container` now uses `var(--background-color-chat)`.
- Page header title confirmed to use `var(--accent-color-chat)`.
- **`CanvasChat.vue`:**
- Root element background now uses `var(--background-color-chat)`.
- Verified that input area, send button, user message bubbles, and scrollbar correctly use `var(--accent-color-chat)` (or its derived alpha versions for the scrollbar) and contrast appropriately with `var(--background-color-chat)`.
These cumulative changes ensure better UI consistency for the Empleados and Chat modules and address specific visual bugs and theming requirements identified during review.
This commit addresses UI feedback regarding the EmpleadoForm background
and color variable usage in the Chat module.
Corrections:
1. **`EmpleadoForm.vue` Background:**
* Removed the explicit `bg-gray-100` from the outer container of
`EmpleadoForm.vue`.
* Applied a new class `.empleado-form-page-container` to the outer
container, styled for consistency with index page containers (padding,
max-width, margin, default font, no explicit background).
* The form itself retains its `bg-white` card appearance, which now sits
on a page background consistent with other views.
2. **Chat Module Color Management (`CanvasChat.vue` & `useUi.js`):**
* **`useUi.js` Store:**
* Added `accentColorChat` (defaulting to teal `rgb(13, 148, 136)`)
and `bgColorChat` (defaulting to light gray `rgb(249, 250, 251)`)
to the store's state.
* Included these new keys in `appearanceSettingKeys` for persistence.
* **`CanvasChat.vue` Component:**
* Now imports and uses the `useUi` store.
* The main chat container's background is dynamically bound to
`ui.bgColorChat`.
* The background color for user-sent messages and the send button
is dynamically bound to `ui.accentColorChat`.
* Input field focus and scrollbar styling continue to leverage the
globally defined CSS variables (`--accent-color-chat` and
`--accent-color-chat-rgb`), which use the same default teal color,
ensuring consistency.
These changes ensure the `EmpleadoForm.vue` background is visually consistent
with other application forms/pages and that the Chat module's theming is
correctly managed through the central UI store and established CSS variables.
This commit brings the Empleados and Chat UI modules more in line with the visual and functional conventions established by other modules in your application, particularly Planillas.
**Key Changes for Empleados Module:**
- **`EmpleadosIndex.vue`:**
- Standardized page header structure and styling (title, create button).
- Removed extra descriptive paragraph from header.
- Aligned styling for loading, error, and no-data messages with other modules.
- Create button icon removed for consistency.
- **`cardEmpleado.vue`:**
- Edit action now emits an event instead of direct navigation.
- Added a delete button with confirmation and store integration.
- Converted component from TypeScript to JavaScript.
- Adjusted layout for consistency with other card components.
- **`tablaEmpleados.vue`:**
- Edit action now emits an event.
- Removed the "View Details" button to streamline actions.
- Added a delete button with confirmation and store integration.
- Converted component from TypeScript to JavaScript.
- Ensured action button styling and no-data messages are consistent.
**Key Changes for Chat Module:**
- **`ChatView.vue`:**
- Added a standard page header with the title "Chat".
- **`CanvasChat.vue`:**
- Standardized styling for the message input textarea and send button, using the new `accent-color-chat`.
- Updated message bubble colors for user (using `accent-color-chat`) and bot messages for better theme alignment.
- Adjusted custom scrollbar colors to use `accent-color-chat`.
- **`useUi.js` (UI Store):**
- Added `accentColorChat` to the store's state, appearance keys, and actions, allowing it to be configurable and persisted. Defaulted to Teal (#0D9488).
These changes aim to provide a more cohesive user experience across your application by ensuring that common UI elements and interactions behave and look similar in the Empleados and Chat modules as they do elsewhere.
