Iu/add favorites type colors (#1645)

* fix: correct visibility dropdown keys and add en translations

* add pt translations

* add visibility color classes for avatar groups

* add visibility color classes for favorite groups

* Remove leftover commented import from my local testing

---------

Co-authored-by: pa <maplenagisa@gmail.com>

src/localization/pt.json

@@ -112,6 +112,11 @@
             "move_tooltip": "Mover",
             "unfavorite_tooltip": "Desfavoritar",
             "visibility_tooltip": "Alterar Visibilidade",
+            "visibility": {
+                "public": "Público",
+                "friends": "Amigos",
+                "private": "Privado"
+            },
             "rename_tooltip": "Renomear",
             "clear_tooltip": "Limpar",
             "delete_tooltip": "Excluir",

src/views/Favorites/FavoritesAvatar.vue

@@ -121,7 +121,9 @@
                                             >
                                         </div>
                                         <div class="group-item__bottom">
-                                            <Badge :variant="getBadgeVariant(group.visibility)">
+                                            <Badge
+                                                :class="avatarGroupVisibilityColors[group.visibility]"
+                                                variant="outline">
                                                 {{ t(`view.favorite.visibility.${group.visibility}`) }}
                                             </Badge>
                                             <DropdownMenu
@@ -573,6 +575,11 @@
         displayName: `Group ${index + 1}`
     }));
 
+    const avatarGroupVisibilityColors = {
+        public: 'text-green-500 border-green-500',
+        friends: 'text-cyan-500 border-cyan-500',
+        private: 'text-red-500 border-red-500'
+    };
     const avatarGroupVisibilityOptions = ref(['public', 'friends', 'private']);
     const historyGroupKey = 'local-history';
     const avatarSplitterSize = ref(260);

src/views/Favorites/FavoritesFriend.vue

@@ -123,7 +123,7 @@
                                             >
                                         </div>
                                         <div class="group-item__bottom">
-                                            <Badge :variant="getBadgeVariant(group.visibility)">
+                                            <Badge variant="outline">
                                                 {{ t(`view.favorite.visibility.${group.visibility}`) }}
                                             </Badge>
                                             <DropdownMenu
@@ -152,7 +152,7 @@
                                                             <DropdownMenuSubContent
                                                                 side="right"
                                                                 align="start"
-                                                                class="w-[180px]">
+                                                                class="w-45">
                                                                 <DropdownMenuCheckboxItem
                                                                     v-for="visibility in friendGroupVisibilityOptions"
                                                                     :key="visibility"
@@ -462,6 +462,11 @@
     import configRepository from '../../service/config.js';
 
     const friendGroupVisibilityOptions = ref(['public', 'friends', 'private']);
+    const friendGroupVisibilitColors = {
+        public: 'text-green-500 border-green-500',
+        friends: 'text-cyan-500 border-cyan-500',
+        private: 'text-red-500 border-red-500'
+    };
 
     const friendSplitterSize = ref(260);
     const friendSplitterFallbackWidth = typeof window !== 'undefined' && window.innerWidth ? window.innerWidth : 1200;

src/views/Favorites/FavoritesWorld.vue

@@ -123,7 +123,7 @@
                                             >
                                         </div>
                                         <div class="group-item__bottom">
-                                            <Badge :variant="getBadgeVariant(group.visibility)">
+                                            <Badge variant="outline">
                                                 {{ t(`view.favorite.visibility.${group.visibility}`) }}
                                             </Badge>
                                             <DropdownMenu
@@ -578,7 +578,11 @@
             }
         }
     });
-
+    const worldGroupVisibilityColors = {
+        public: 'text-green-500 border-green-500',
+        friends: 'text-cyan-500 border-cyan-500',
+        private: 'text-red-500 border-red-500'
+    };
     const worldGroupVisibilityOptions = ref(['public', 'friends', 'private']);
     const worldSplitterSize = ref(260);
     const worldSplitterFallbackWidth = typeof window !== 'undefined' && window.innerWidth ? window.innerWidth : 1200;