From c6c204f64a1f9cee836a486f7f39b5d25f4bd758 Mon Sep 17 00:00:00 2001
From: mohamad <mohamad>
Date: Sun, 1 Jun 2025 19:51:05 +0200
Subject: [PATCH] Refactor: Replace button elements with VButton and VIcon
 components in GroupsPage

This commit updates the GroupsPage.vue file by replacing standard button elements with custom VButton and VIcon components for improved consistency and styling. This change enhances the UI component structure and aligns with the project's design system.
---
 fe/src/pages/GroupsPage.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/fe/src/pages/GroupsPage.vue b/fe/src/pages/GroupsPage.vue
index b0fb71b..5f14579 100644
--- a/fe/src/pages/GroupsPage.vue
+++ b/fe/src/pages/GroupsPage.vue
@@ -31,12 +31,10 @@
         <div v-for="group in groups" :key="group.id" class="neo-group-card" @click="selectGroup(group)">
           <h1 class="neo-group-header">{{ group.name }}</h1>
           <div class="neo-group-actions">
-            <button class="btn btn-sm btn-secondary" @click.stop="openCreateListDialog(group)">
-              <svg class="icon" aria-hidden="true">
-                <use xlink:href="#icon-plus" />
-              </svg>
+            <VButton variant="secondary" size="sm" @click.stop="openCreateListDialog(group)">
+              <VIcon name="plus" class="mr-1" />
               List
-            </button>
+            </VButton>
           </div>
         </div>
         <div class="neo-create-group-card" @click="openCreateGroupDialog">
@@ -116,6 +114,8 @@ import { useStorage } from '@vueuse/core';
 import { onClickOutside } from '@vueuse/core';
 import { useNotificationStore } from '@/stores/notifications';
 import CreateListModal from '@/components/CreateListModal.vue';
+import VButton from '@/components/valerie/VButton.vue';
+import VIcon from '@/components/valerie/VIcon.vue';
 
 interface Group {
   id: number;