refactor: update icon components to use CSS variables for fill colors

- Changed fill attributes in Upload, Video, VideoPlayIcon, hard-drive, and shield-user icons to use CSS variables for better theming. - Removed index.ts file from icons directory as it was no longer needed. - Updated AppButton component to support new icon sizes. - Modified AdsVastTable to use icon buttons with updated filled icons. - Replaced inline SVGs with icon components in NotificationSettings, SecurityAccountStatusRow, SecurityChangePasswordRow, SecurityEmailRow, SecurityLanguageRow, SecurityLogoutRow, and SecurityTelegramRow for consistency and maintainability. - Added new CSS variables for fill colors in uno.config.ts.
2026-03-27 00:35:53 +07:00
parent cc3f62a6a1
commit 43702e8bf7
37 changed files with 100 additions and 333 deletions
--- a/proto/v1/common.proto
+++ b/proto/v1/common.proto
@@ -1,46 +0,0 @@
-syntax = "proto3";
-
-package stream.common.v1;
-
-option go_package = "stream/proto/gen/go/common/v1;commonv1";
-
-import "google/protobuf/timestamp.proto";
-
-message RequestContext {
-  string user_id = 1;
-  string email = 2;
-  string role = 3;
-  string request_id = 4;
-  string source = 5;
-}
-
-message PaginationRequest {
-  int32 page = 1;
-  int32 page_size = 2;
-}
-
-message PaginationResponse {
-  int32 page = 1;
-  int32 page_size = 2;
-  int64 total = 3;
-}
-
-message Money {
-  double amount = 1;
-  string currency = 2;
-}
-
-message Empty {}
-
-message IdRequest {
-  string id = 1;
-}
-
-message DeleteResponse {
-  string message = 1;
-}
-
-message TimestampRange {
-  google.protobuf.Timestamp from = 1;
-  google.protobuf.Timestamp to = 2;
-}
--- a/proto/v1/user.proto
+++ b/proto/v1/user.proto
@@ -1,134 +0,0 @@
-syntax = "proto3";
-
-package stream.User.v1;
-
-option go_package = "stream/proto/gen/go/User/v1;Userv1";
-import "google/protobuf/empty.proto";
-import "google/protobuf/timestamp.proto";
-
-service UserService {
-  // User CRUD
-  rpc GetUser(GetUserRequest) returns (GetUserResponse);
-  rpc GetUserByEmail(GetUserByEmailRequest) returns (GetUserResponse);
-  rpc ListUsers(ListUsersRequest) returns (ListUsersResponse);
-  rpc CreateUser(CreateUserRequest) returns (CreateUserResponse);
-  rpc UpdateUser(UpdateUserRequest) returns (UpdateUserResponse);
-  rpc DeleteUser(DeleteUserRequest) returns (DeleteUserResponse);
-  rpc UpdateUserPassword(UpdateUserPasswordRequest) returns (google.protobuf.Empty);
-
-  // Preferences
-  rpc GetPreferences(GetPreferencesRequest) returns (GetPreferencesResponse);
-  rpc UpsertPreferences(UpsertPreferencesRequest) returns (UpsertPreferencesResponse);
-}
-
-// ─── User Messages ───────────────────────────────────────────────────────────
-message UpdateUserPasswordRequest {
-  string id = 1;
-  string new_password = 2;
-}
-message GetUserRequest {
-  string id = 1;
-}
-
-message GetUserByEmailRequest {
-  string email = 1;
-}
-
-message GetUserResponse {
-  User user = 1;
-}
-
-message ListUsersRequest {
-  int32  page      = 1;
-  int32  page_size = 2;
-  string role      = 3; // optional filter
-}
-
-message ListUsersResponse {
-  repeated User users      = 1;
-  int32         total      = 2;
-  int32         page       = 3;
-  int32         page_size  = 4;
-}
-
-message CreateUserRequest {
-  string           email     = 1;
-  optional string  username  = 2;
-  optional string  password  = 3;
-}
-
-message CreateUserResponse {
-  User user = 1;
-}
-
-message UpdateUserRequest {
-  string           id        = 1;
-  optional string  username  = 2;
-  optional string  avatar    = 3;
-  optional string  role      = 4;
-  optional string  plan_id   = 5;
-}
-
-message UpdateUserResponse {
-  User user = 1;
-}
-
-message DeleteUserRequest {
-  string id = 1;
-}
-
-message DeleteUserResponse {
-  bool success = 1;
-}
-
-// ─── Preferences Messages ────────────────────────────────────────────────────
-
-message GetPreferencesRequest {
-  string user_id = 1;
-}
-
-message GetPreferencesResponse {
-  Preferences preferences = 1;
-}
-
-message UpsertPreferencesRequest {
-  Preferences preferences = 1;
-}
-
-message UpsertPreferencesResponse {
-  Preferences preferences = 1;
-}
-
-// ─── Core Models ─────────────────────────────────────────────────────────────
-
-message User {
-  string                    id           = 1;
-  string                    email        = 2;
-  string                    password     = 3;
-  optional string           username     = 4;
-  optional string           avatar       = 5;
-  optional string           role         = 6;
-  optional string           google_id    = 7;
-  int64                     storage_used = 8;
-  optional string           plan_id      = 9;
-  optional google.protobuf.Timestamp created_at = 10;
-  google.protobuf.Timestamp updated_at   = 11;
-}
-
-message Preferences {
-  string          user_id                  = 1;
-  optional string language                 = 2;
-  optional string locale                   = 3;
-  optional bool   email_notifications      = 4;
-  optional bool   push_notifications       = 5;
-  optional bool   marketing_notifications  = 6;
-  optional bool   telegram_notifications   = 7;
-  optional bool   autoplay                 = 8;
-  optional bool   loop                     = 9;
-  optional bool   muted                    = 10;
-  optional bool   show_controls            = 11;
-  optional bool   pip                      = 12;
-  optional bool   airplay                  = 13;
-  optional bool   chromecast               = 14;
-  optional bool   encrytion_m3u8           = 15;
-}
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -394,7 +394,7 @@
        "create": "Create"
      },
      "confirm": {
-        "deleteMessage": "Are you sure you want to delete \"{name}\"?",
+        "deleteMessage": "Are you sure you want to delete \"{{name}}\"?",
        "deleteHeader": "Delete Config",
        "deleteAccept": "Delete",
        "deleteReject": "Cancel"
@@ -409,14 +409,14 @@
        "enabledSummary": "Config enabled",
        "disabledSummary": "Config disabled",
        "defaultUpdatedSummary": "Default updated",
-        "defaultUpdatedDetail": "{name} is now the default config for new videos.",
+        "defaultUpdatedDetail": "{{name}} is now the default config for new videos.",
        "upgradeRequiredSummary": "Config limit reached",
        "upgradeRequiredDetail": "Free accounts can only have 1 player config.",
        "limitSummary": "Config limit reached",
        "limitDetail": "Free accounts can only have 1 player config.",
        "reconciliationSummary": "Delete extra configs",
        "reconciliationDetail": "Delete extra player configs until only 1 remains to continue managing them on the free plan.",
-        "toggleDetail": "{name} has been {state}.",
+        "toggleDetail": "{{name}} has been {state}.",
        "deletedSummary": "Config deleted",
        "deletedDetail": "Player config has been removed.",
        "failedSummary": "Action failed",
@@ -468,7 +468,7 @@
        "create": "Create"
      },
      "confirm": {
-        "deleteMessage": "Are you sure you want to delete \"{name}\"?",
+        "deleteMessage": "Are you sure you want to delete \"{{name}}\"?",
        "deleteHeader": "Delete Template",
        "deleteAccept": "Delete",
        "deleteReject": "Cancel"
@@ -489,10 +489,10 @@
        "enabledSummary": "Template Enabled",
        "disabledSummary": "Template Disabled",
        "defaultUpdatedSummary": "Default Updated",
-        "defaultUpdatedDetail": "{name} is now the default template for new videos.",
+        "defaultUpdatedDetail": "{{name}} is now the default template for new videos.",
        "upgradeRequiredSummary": "Upgrade required",
        "upgradeRequiredDetail": "Upgrade your plan to manage Ads & VAST.",
-        "toggleDetail": "{name} has been {state}.",
+        "toggleDetail": "{{name}} has been {state}.",
        "deletedSummary": "Template Deleted",
        "deletedDetail": "VAST template has been removed.",
        "copiedSummary": "Copied",
@@ -768,7 +768,7 @@
  },
  "overview": {
    "welcome": {
-      "title": "Hello, {{name}}",
+      "title": "Hello, {{{name}}}",
      "subtitle": "Here's what's happening with your content today."
    },
    "stats": {
--- a/public/locales/vi/translation.json
+++ b/public/locales/vi/translation.json
@@ -394,7 +394,7 @@
        "create": "Tạo"
      },
      "confirm": {
-        "deleteMessage": "Bạn có chắc muốn xóa \"{name}\"?",
+        "deleteMessage": "Bạn có chắc muốn xóa \"{{name}}\"?",
        "deleteHeader": "Xóa cấu hình",
        "deleteAccept": "Xóa",
        "deleteReject": "Hủy"
@@ -409,14 +409,14 @@
        "enabledSummary": "Đã bật cấu hình",
        "disabledSummary": "Đã tắt cấu hình",
        "defaultUpdatedSummary": "Đã cập nhật mặc định",
-        "defaultUpdatedDetail": "{name} hiện là cấu hình mặc định cho video mới.",
+        "defaultUpdatedDetail": "{{name}} hiện là cấu hình mặc định cho video mới.",
        "upgradeRequiredSummary": "Đã đạt giới hạn cấu hình",
        "upgradeRequiredDetail": "Tài khoản free chỉ có thể có 1 player config.",
        "limitSummary": "Đã đạt giới hạn cấu hình",
        "limitDetail": "Tài khoản free chỉ có thể có 1 player config.",
        "reconciliationSummary": "Hãy xóa bớt config",
        "reconciliationDetail": "Hãy xóa các player config dư cho đến khi chỉ còn 1 config để tiếp tục quản lý trên gói free.",
-        "toggleDetail": "{name} đã được {state}.",
+        "toggleDetail": "{{name}} đã được {state}.",
        "deletedSummary": "Đã xóa cấu hình",
        "deletedDetail": "Cấu hình trình phát đã được gỡ bỏ.",
        "failedSummary": "Thao tác thất bại",
@@ -468,7 +468,7 @@
        "create": "Tạo"
      },
      "confirm": {
-        "deleteMessage": "Bạn có chắc muốn xóa \"{name}\"?",
+        "deleteMessage": "Bạn có chắc muốn xóa \"{{name}}\"?",
        "deleteHeader": "Xóa mẫu",
        "deleteAccept": "Xóa",
        "deleteReject": "Hủy"
@@ -489,10 +489,10 @@
        "enabledSummary": "Đã bật mẫu",
        "disabledSummary": "Đã tắt mẫu",
        "defaultUpdatedSummary": "Đã cập nhật mặc định",
-        "defaultUpdatedDetail": "{name} hiện là mẫu mặc định cho video mới.",
+        "defaultUpdatedDetail": "{{name}} hiện là mẫu mặc định cho video mới.",
        "upgradeRequiredSummary": "Cần nâng cấp gói",
        "upgradeRequiredDetail": "Hãy nâng cấp gói để quản lý Ads & VAST.",
-        "toggleDetail": "{name} đã được {state}.",
+        "toggleDetail": "{{name}} đã được {state}.",
        "deletedSummary": "Đã xóa mẫu",
        "deletedDetail": "Mẫu VAST đã được gỡ bỏ.",
        "copiedSummary": "Đã sao chép",
@@ -767,7 +767,7 @@
  },
  "overview": {
    "welcome": {
-      "title": "Xin chào, {{name}}",
+      "title": "Xin chào, {{{name}}}",
      "subtitle": "Đây là tình hình nội dung của bạn hôm nay."
    },
    "stats": {
--- a/src/components/DashboardNav.vue
+++ b/src/components/DashboardNav.vue
@@ -4,9 +4,10 @@ import Home from "@/components/icons/Home.vue";
 import SettingsIcon from "@/components/icons/SettingsIcon.vue";
 import Video from "@/components/icons/Video.vue";
 import { cn } from "@/lib/utils";
+import { useNotifications } from "@/composables/useNotifications";
 import { useAuthStore } from "@/stores/auth";
 import { useTranslation } from "i18next-vue";
-import { computed, createStaticVNode, ref } from "vue";
+import { computed, createStaticVNode, h, ref } from "vue";
 import NotificationDrawer from "./NotificationDrawer.vue";

 const className = ":uno: w-12 h-12 p-2 rounded-2xl hover:bg-primary/15 flex press-animated items-center justify-center shrink-0";
@@ -15,6 +16,8 @@ const notificationPopover = ref<InstanceType<typeof NotificationDrawer>>();
 const isNotificationOpen = ref(false);
 const { t } = useTranslation();
 const auth = useAuthStore();
+const notificationStore = useNotifications();
+const unreadCount = computed(() => notificationStore.unreadCount.value);

 const isAdmin = computed(() => String(auth.user?.role || "").toLowerCase() === "admin");

@@ -24,10 +27,20 @@ const handleNotificationClick = (event: Event) => {

 const links = computed<Record<string, any>>(() => {
  const baseLinks = [
-    { href: "/#home", label: "app", icon: homeHoist, action: () => {}, className },
-    { href: "/", label: t("nav.overview"), icon: Home, action: null, className },
-    { href: "/videos", label: t("nav.videos"), icon: Video, action: null, className },
    {
+      id: "home",
+      href: "/#home", label: "app", icon: homeHoist, action: () => { }, className
+    },
+    {
+      id: "overview",
+      href: "/", label: t("nav.overview"), icon: Home, action: null, className
+    },
+    {
+      id: "videos",
+      href: "/videos", label: t("nav.videos"), icon: Video, action: null, className
+    },
+    {
+      id: "notification",
      href: "/notification",
      label: t("nav.notification"),
      icon: Bell,
@@ -37,8 +50,14 @@ const links = computed<Record<string, any>>(() => {
      ),
      action: handleNotificationClick,
      isActive: isNotificationOpen,
+      expandComponent: unreadCount.value > 0 ? () => h('span', {
+        class: 'absolute -top-2 -right-2 min-w-4 h-4 text-xs font-bold text-white bg-red rounded-full flex items-center justify-center'
+      }, [unreadCount.value > 9 ? '9+' : unreadCount.value]) : undefined
+    },
+    {
+      id: "settings",
+      href: "/settings", label: t("nav.settings"), icon: SettingsIcon, action: null, className
    },
-    { href: "/settings", label: t("nav.settings"), icon: SettingsIcon, action: null, className },
  ] as const;
  return baseLinks;
 });
@@ -46,24 +65,18 @@ const links = computed<Record<string, any>>(() => {

 <template>
  <header
-    class=":uno: fixed left-0 flex flex-col items-center pt-4 gap-6 z-41 max-h-screen h-screen bg-header transition-all duration-300 ease-in-out w-18 items-center border-r border-border text-foreground/60"
-  >
+    class=":uno: fixed left-0 flex flex-col items-center pt-4 gap-6 z-41 max-h-screen h-screen bg-header transition-all duration-300 ease-in-out w-18 items-center border-r border-border text-foreground/60">
    <template v-for="i in links" :key="i.href">
-      <component
-        :name="i.label"
-        :is="i.action ? 'div' : 'router-link'"
-        v-bind="i.action ? {} : { to: i.href }"
-        @click="i.action && i.action($event)"
-        :class="cn(
+      <component :name="i.label" :is="i.action ? 'div' : 'router-link'" v-bind="i.action ? {} : { to: i.href }"
+        @click="i.action && i.action($event)" :class="cn(
          i.className,
          ($route.path === i.href || $route.path.startsWith(i.href + '/') || i.isActive?.value) && 'bg-primary/15',
-        )"
-      >
-        <component
-          :is="i.icon"
-          class="w-6 h-6 shrink-0"
-          :filled="$route.path === i.href || $route.path.startsWith(i.href + '/') || i.isActive?.value"
-        />
+        )">
+        <div class="relative">
+          <component :is="i.icon" class="w-6 h-6 shrink-0"
+            :filled="$route.path === i.href || $route.path.startsWith(i.href + '/') || i.isActive?.value" />
+          <component v-if="i.expandComponent" :is="i.expandComponent" />
+        </div>
      </component>
    </template>
  </header>
--- a/src/components/icons/AdvertisementIcon.vue
+++ b/src/components/icons/AdvertisementIcon.vue
@@ -1,5 +1,5 @@
 <template>
-    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 518"><path d="M234 124v256c58 3 113 25 156 63l47 41c9 8 23 10 34 5 12-5 19-16 19-29V44c0-13-7-24-19-29-11-5-25-3-34 5l-47 41c-43 38-98 60-156 63z" fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)"/><path d="M138 124c-71 0-128 57-128 128s57 128 128 128v96c0 18 14 32 32 32h32c18 0 32-14 32-32V124h-96z" fill="currentColor"/></svg>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 518"><path d="M234 124v256c58 3 113 25 156 63l47 41c9 8 23 10 34 5 12-5 19-16 19-29V44c0-13-7-24-19-29-11-5-25-3-34 5l-47 41c-43 38-98 60-156 63z" fill="var(--fill1)"/><path d="M138 124c-71 0-128 57-128 128s57 128 128 128v96c0 18 14 32 32 32h32c18 0 32-14 32-32V124h-96z" fill="currentColor"/></svg>
    <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="-10 -242 500 516"><path d="M448-194v404l-26-24c-50-47-114-75-182-81V-89c68-6 132-34 182-81l26-24zM240 137c60 6 116 31 160 72l34 32c5 4 12 7 19 7 15 0 27-12 27-27v-425c0-16-12-28-27-28-7 0-14 3-19 8l-34 31c-50 47-116 73-185 73h-87C57-120 0-63 0 8c0 60 41 110 96 124v84c0 27 22 48 48 48h48c27 0 48-21 48-48v-79zm-40-1h8v80c0 9-7 16-16 16h-48c-9 0-16-7-16-16v-80h72zm0-224h8v192h-80c-53 0-96-43-96-96s43-96 96-96h72z" fill="currentColor"/></svg>
 </template>
 <script lang="ts" setup>
--- a/src/components/icons/Bell.vue
+++ b/src/components/icons/Bell.vue
@@ -1,5 +1,5 @@
 <template>
-    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 532"><path d="M10 391c0 19 16 35 36 35h376c20 0 36-16 36-35 0-9-3-16-8-23l-10-12c-30-37-46-84-46-132v-22c0-77-55-142-128-157v-3c0-18-14-32-32-32s-32 14-32 32v3C129 60 74 125 74 202v22c0 48-16 95-46 132l-10 12c-5 7-8 14-8 23z" fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)"/><path d="M172 474c7 28 32 48 62 48s55-20 62-48H172z" fill="var(--colors-primary-DEFAULT)"/></svg>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 532"><path d="M10 391c0 19 16 35 36 35h376c20 0 36-16 36-35 0-9-3-16-8-23l-10-12c-30-37-46-84-46-132v-22c0-77-55-142-128-157v-3c0-18-14-32-32-32s-32 14-32 32v3C129 60 74 125 74 202v22c0 48-16 95-46 132l-10 12c-5 7-8 14-8 23z" fill="var(--fill1)"/><path d="M172 474c7 28 32 48 62 48s55-20 62-48H172z" fill="var(--colors-primary-DEFAULT)"/></svg>
    <svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="-10 -258 468 532">
        <path
            d="M224-248c-13 0-24 11-24 24v10C119-203 56-133 56-48v15C56 4 46 41 27 74L5 111c-3 6-5 13-5 19 0 21 17 38 38 38h372c21 0 38-17 38-38 0-6-2-13-5-19l-22-37c-19-33-29-70-29-108v-14c0-85-63-155-144-166v-10c0-13-11-24-24-24zm168 368H56l12-22c24-40 36-85 36-131v-15c0-66 54-120 120-120s120 54 120 120v15c0 46 12 91 36 131l12 22zm-236 96c10 28 37 48 68 48s58-20 68-48H156z"
--- a/src/components/icons/BellIcon.vue
+++ b/src/components/icons/BellIcon.vue
@@ -1,12 +0,0 @@
-<script lang="ts" setup>
-defineProps<{
-    filled?: boolean;
-}>();
-</script>
-
-<template>
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
-        <path d="M13.73 21a2 2 0 0 1-3.46 0" />
-    </svg>
-</template>
--- a/src/components/icons/Chart.vue
+++ b/src/components/icons/Chart.vue
@@ -1,5 +1,5 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" viewBox="0 0 580 524"><path d="M10 234v112c0 46 38 84 84 84s84-38 84-84V234c0-46-38-84-84-84s-84 38-84 84zM206 94v252c0 46 38 84 84 84s84-38 84-84V94c0-46-38-84-84-84s-84 38-84 84zm196 56v196c0 46 38 84 84 84s84-38 84-84V150c0-46-38-84-84-84s-84 38-84 84z" fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)"/><path d="M10 500c0-8 6-14 14-14h532c8 0 14 6 14 14s-6 14-14 14H24c-8 0-14-6-14-14z" fill="var(--colors-primary-DEFAULT)"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" viewBox="0 0 580 524"><path d="M10 234v112c0 46 38 84 84 84s84-38 84-84V234c0-46-38-84-84-84s-84 38-84 84zM206 94v252c0 46 38 84 84 84s84-38 84-84V94c0-46-38-84-84-84s-84 38-84 84zm196 56v196c0 46 38 84 84 84s84-38 84-84V150c0-46-38-84-84-84s-84 38-84 84z" fill="var(--fill1)"/><path d="M10 500c0-8 6-14 14-14h532c8 0 14 6 14 14s-6 14-14 14H24c-8 0-14-6-14-14z" fill="var(--colors-primary-DEFAULT)"/></svg>
    <svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="-10 -226 532 468"><path d="M272-184c9 0 16 7 16 16v352c0 9-7 16-16 16h-32c-9 0-16-7-16-16v-352c0-9 7-16 16-16h32zm-32-32c-26 0-48 22-48 48v352c0 27 22 48 48 48h32c27 0 48-21 48-48v-352c0-26-21-48-48-48h-32zM80 8c9 0 16 7 16 16v160c0 9-7 16-16 16H48c-9 0-16-7-16-16V24c0-9 7-16 16-16h32zM48-24C22-24 0-2 0 24v160c0 27 22 48 48 48h32c27 0 48-21 48-48V24c0-26-21-48-48-48H48zm384-96h32c9 0 16 7 16 16v288c0 9-7 16-16 16h-32c-9 0-16-7-16-16v-288c0-9 7-16 16-16zm-48 16v288c0 27 22 48 48 48h32c27 0 48-21 48-48v-288c0-26-21-48-48-48h-32c-26 0-48 22-48 48z" fill="currentColor"/></svg>
 </template>
 <script lang="ts" setup>
--- a/src/components/icons/CoinsIcon.vue
+++ b/src/components/icons/CoinsIcon.vue
@@ -5,6 +5,6 @@ defineProps<{
 </script>

 <template>
-<svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 532"><path d="M10 435c0 48 39 87 88 87h305c48 0 87-39 87-87 0-87-38-169-105-224l-48-41H164l-49 41C48 266 10 348 10 435zM138 36c0 4 1 8 3 12l37 74h144l37-74c2-4 3-8 3-12 0-14-12-26-26-26H164c-14 0-26 12-26 26zm44 275c0-29 23-53 52-53v-4c0-11 9-20 20-20s20 9 20 20v4h8c11 0 20 9 20 20s-9 20-20 20h-47c-7 0-13 6-13 13 0 6 4 11 10 12l42 7c25 4 44 26 44 52s-19 47-44 51v5c0 11-9 20-20 20s-20-9-20-20v-4h-24c-11 0-20-9-20-20s9-20 20-20h56c6 0 12-5 12-12 0-6-4-12-10-13l-42-7c-25-4-44-26-44-51z" fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)"/><path d="M162 122c-13 0-24 11-24 24s11 24 24 24h176c13 0 24-11 24-24s-11-24-24-24H162zm92 112c-11 0-20 9-20 20v4c-29 0-52 24-52 53 0 25 19 47 44 51l42 7c6 1 10 7 10 13 0 7-6 12-12 12h-56c-11 0-20 9-20 20s9 20 20 20h24v4c0 11 9 20 20 20s20-9 20-20v-5c25-4 44-25 44-51s-18-48-44-52l-42-7c-6-1-10-6-10-13 0-6 6-12 13-12h47c11 0 20-9 20-20s-9-20-20-20h-8v-4c0-11-9-20-20-20z" fill="var(--colors-primary-DEFAULT)"/></svg>
+<svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 532"><path d="M10 435c0 48 39 87 88 87h305c48 0 87-39 87-87 0-87-38-169-105-224l-48-41H164l-49 41C48 266 10 348 10 435zM138 36c0 4 1 8 3 12l37 74h144l37-74c2-4 3-8 3-12 0-14-12-26-26-26H164c-14 0-26 12-26 26zm44 275c0-29 23-53 52-53v-4c0-11 9-20 20-20s20 9 20 20v4h8c11 0 20 9 20 20s-9 20-20 20h-47c-7 0-13 6-13 13 0 6 4 11 10 12l42 7c25 4 44 26 44 52s-19 47-44 51v5c0 11-9 20-20 20s-20-9-20-20v-4h-24c-11 0-20-9-20-20s9-20 20-20h56c6 0 12-5 12-12 0-6-4-12-10-13l-42-7c-25-4-44-26-44-51z" fill="var(--fill1)"/><path d="M162 122c-13 0-24 11-24 24s11 24 24 24h176c13 0 24-11 24-24s-11-24-24-24H162zm92 112c-11 0-20 9-20 20v4c-29 0-52 24-52 53 0 25 19 47 44 51l42 7c6 1 10 7 10 13 0 7-6 12-12 12h-56c-11 0-20 9-20 20s9 20 20 20h24v4c0 11 9 20 20 20s20-9 20-20v-5c25-4 44-25 44-51s-18-48-44-52l-42-7c-6-1-10-6-10-13 0-6 6-12 13-12h47c11 0 20-9 20-20s-9-20-20-20h-8v-4c0-11-9-20-20-20z" fill="var(--colors-primary-DEFAULT)"/></svg>
 <svg v-else xmlns="http://www.w3.org/2000/svg" width="500" height="532" viewBox="6 -258 500 532"><path d="m379-191-46 81c84 77 163 154 163 279 0 52-43 95-95 95H111c-52 0-95-43-95-95C16 44 96-33 179-110l-46-81c-3-6-5-12-5-19 0-21 17-38 38-38h180c21 0 38 17 38 38 0 7-2 13-5 19zM227-88l-1 1C134-4 64 61 64 169c0 26 21 47 47 47h290c26 0 47-21 47-47C448 61 378-4 286-87l-1-1h-58zm-7-48h72l37-64H183l37 64zm40 96c11 0 20 9 20 20v4h8c11 0 20 9 20 20s-9 20-20 20h-47c-7 0-13 6-13 13 0 6 4 11 10 12l42 7c25 4 44 26 44 52s-19 47-44 51v5c0 11-9 20-20 20s-20-9-20-20v-4h-24c-11 0-20-9-20-20s9-20 20-20h56c6 0 12-5 12-12 0-6-4-12-10-13l-42-7c-25-4-44-26-44-51 0-29 23-53 52-53v-4c0-11 9-20 20-20z" fill="currentColor"/></svg>
 </template>
--- a/src/components/icons/Credit.vue
+++ b/src/components/icons/Credit.vue
@@ -1,5 +1,5 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" viewBox="0 0 532 404"><path d="M10 74c0-35 29-64 64-64h384c35 0 64 29 64 64v32H10V74zm0 96h512v160c0 35-29 64-64 64H74c-35 0-64-29-64-64V170zm64 136c0 13 11 24 24 24h48c13 0 24-11 24-24s-11-24-24-24H98c-13 0-24 11-24 24zm144 0c0 13 11 24 24 24h64c13 0 24-11 24-24s-11-24-24-24h-64c-13 0-24 11-24 24z" fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)"/><path d="M10 106h512v64H10zm0 0z" fill="var(--colors-primary-DEFAULT)"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" viewBox="0 0 532 404"><path d="M10 74c0-35 29-64 64-64h384c35 0 64 29 64 64v32H10V74zm0 96h512v160c0 35-29 64-64 64H74c-35 0-64-29-64-64V170zm64 136c0 13 11 24 24 24h48c13 0 24-11 24-24s-11-24-24-24H98c-13 0-24 11-24 24zm144 0c0 13 11 24 24 24h64c13 0 24-11 24-24s-11-24-24-24h-64c-13 0-24 11-24 24z" fill="var(--fill1)"/><path d="M10 106h512v64H10zm0 0z" fill="var(--colors-primary-DEFAULT)"/></svg>
    <svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="-10 -194 532 404"><path d="M448-136c9 0 16 7 16 16v32H48v-32c0-9 7-16 16-16h384zm16 112v160c0 9-7 16-16 16H64c-9 0-16-7-16-16V-24h416zM64-184c-35 0-64 29-64 64v256c0 35 29 64 64 64h384c35 0 64-29 64-64v-256c0-35-29-64-64-64H64zM80 96c0 13 11 24 24 24h48c13 0 24-11 24-24s-11-24-24-24h-48c-13 0-24 11-24 24zm144 0c0 13 11 24 24 24h64c13 0 24-11 24-24s-11-24-24-24h-64c-13 0-24 11-24 24z" fill="currentColor"/></svg>
 </template>
 <script lang="ts" setup>
--- a/src/components/icons/Globe.vue
+++ b/src/components/icons/Globe.vue
@@ -5,6 +5,6 @@ defineProps<{
 </script>

 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" viewBox="0 0 627 563"><path d="M10 241h112c5-88 35-169 71-222C94 49 20 135 10 241zm0 48c10 106 84 193 183 222-36-52-66-134-71-222H10zm160-48h190c-4-62-22-121-45-165-13-25-27-44-38-56-6-5-10-8-12-10-2 2-6 5-12 10-11 12-25 31-38 56-23 44-41 103-45 165zm0 48c4 62 22 121 45 166 13 25 27 43 38 55 6 5 10 8 12 10 2-2 6-5 12-10 6-6 13-15 20-25-10-23-16-49-16-76 0-45 16-87 42-120H170zM337 19c34 50 64 126 70 210 21-8 43-12 66-12 15 0 30 2 44 5-16-97-87-175-180-203z" fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)"/><path d="M473 553c80 0 144-64 144-144s-64-144-144-144-144 64-144 144 64 144 144 144zm87-145c-19-28-51-47-87-47s-68 19-87 47l-25-19c24-36 65-60 112-60s88 24 113 60l-26 19zm-23 17-26 19c-8-11-22-19-38-19s-30 8-38 19l-26-19c15-19 38-32 64-32s49 13 64 32zm-84 48c0-11 9-20 20-20s20 9 20 20-9 20-20 20-20-9-20-20z" fill="var(--colors-primary-DEFAULT)"/></svg>
-    <svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="22 -258 628 564"><path d="M288 232c-1 0-7-1-18-12-12-11-24-28-36-49-22-39-39-92-41-147h160c17-19 38-35 62-46-7-76-37-145-70-187 81 22 144 87 162 169 12 1 23 3 34 5-21-121-126-213-253-213C147-248 32-133 32 8s115 256 256 256c17 0 33-2 49-5-10-14-18-30-23-47-3 3-5 6-7 8-12 11-18 12-19 12zM384-8H192c3-55 20-107 42-147 12-21 24-38 35-49 12-10 18-12 19-12s7 2 18 12c12 11 24 28 36 49 22 40 39 92 41 147zm0 0zM160-8H65c6-97 75-177 166-201-35 44-67 120-71 201zM65 24h95c4 82 36 157 71 201C140 201 71 121 65 24zm431 16c62 0 112 50 112 112s-50 112-112 112-112-50-112-112S434 40 496 40zm0 256c80 0 144-64 144-144S576 8 496 8 352 72 352 152s64 144 144 144zm96-165c-24-26-58-43-96-43s-72 17-96 43l25 21c17-20 43-32 71-32s54 12 71 32l25-21zm-96 13c-21 0-41 8-55 22l25 21c8-7 19-11 30-11 12 0 22 4 30 11l25-21c-14-14-34-22-55-22zm0 92c11 0 20-9 20-20s-9-20-20-20-20 9-20 20 9 20 20 20z" fill="var(--colors-primary-DEFAULT)"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" viewBox="0 0 627 563"><path d="M10 241h112c5-88 35-169 71-222C94 49 20 135 10 241zm0 48c10 106 84 193 183 222-36-52-66-134-71-222H10zm160-48h190c-4-62-22-121-45-165-13-25-27-44-38-56-6-5-10-8-12-10-2 2-6 5-12 10-11 12-25 31-38 56-23 44-41 103-45 165zm0 48c4 62 22 121 45 166 13 25 27 43 38 55 6 5 10 8 12 10 2-2 6-5 12-10 6-6 13-15 20-25-10-23-16-49-16-76 0-45 16-87 42-120H170zM337 19c34 50 64 126 70 210 21-8 43-12 66-12 15 0 30 2 44 5-16-97-87-175-180-203z" fill="var(--fill1)"/><path d="M473 553c80 0 144-64 144-144s-64-144-144-144-144 64-144 144 64 144 144 144zm87-145c-19-28-51-47-87-47s-68 19-87 47l-25-19c24-36 65-60 112-60s88 24 113 60l-26 19zm-23 17-26 19c-8-11-22-19-38-19s-30 8-38 19l-26-19c15-19 38-32 64-32s49 13 64 32zm-84 48c0-11 9-20 20-20s20 9 20 20-9 20-20 20-20-9-20-20z" fill="var(--colors-primary-DEFAULT)"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="22 -258 628 564"><path d="M288 232c-1 0-7-1-18-12-12-11-24-28-36-49-22-39-39-92-41-147h160c17-19 38-35 62-46-7-76-37-145-70-187 81 22 144 87 162 169 12 1 23 3 34 5-21-121-126-213-253-213C147-248 32-133 32 8s115 256 256 256c17 0 33-2 49-5-10-14-18-30-23-47-3 3-5 6-7 8-12 11-18 12-19 12zM384-8H192c3-55 20-107 42-147 12-21 24-38 35-49 12-10 18-12 19-12s7 2 18 12c12 11 24 28 36 49 22 40 39 92 41 147zm0 0zM160-8H65c6-97 75-177 166-201-35 44-67 120-71 201zM65 24h95c4 82 36 157 71 201C140 201 71 121 65 24zm431 16c62 0 112 50 112 112s-50 112-112 112-112-50-112-112S434 40 496 40zm0 256c80 0 144-64 144-144S576 8 496 8 352 72 352 152s64 144 144 144zm96-165c-24-26-58-43-96-43s-72 17-96 43l25 21c17-20 43-32 71-32s54 12 71 32l25-21zm-96 13c-21 0-41 8-55 22l25 21c8-7 19-11 30-11 12 0 22 4 30 11l25-21c-14-14-34-22-55-22zm0 92c11 0 20-9 20-20s-9-20-20-20-20 9-20 20 9 20 20 20z" fill="currentColor"/></svg>
 </template>
--- a/src/components/icons/Home.vue
+++ b/src/components/icons/Home.vue
@@ -1,7 +1,7 @@
 <template>
    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" viewBox="0 0 539 535">
        <path d="M61 281c2-1 4-3 6-5L269 89l202 187c2 2 4 4 6 5v180c0 35-29 64-64 64H125c-35 0-64-29-64-64V281z"
-            fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)" />
+            fill="var(--fill1)" />
        <path
            d="M247 22c13-12 32-12 44 0l224 208c13 12 13 32 1 45s-32 14-45 2L269 89 67 276c-13 12-33 12-45-1s-12-33 1-45L247 22z"
            fill="var(--colors-primary-DEFAULT)" />
--- a/src/components/icons/LanguageIcon.vue
+++ b/src/components/icons/LanguageIcon.vue
@@ -1,18 +1,6 @@
 <template>
-    <svg v-if="filled" aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 468 468"
-        width="24">
-        <path
-            d="M42 74v320c0 18 14 32 32 32h320c18 0 32-14 32-32V74c0-18-14-32-32-32H74c-18 0-32 14-32 32zm80 160c0-9 7-16 16-16h80v-80c0-9 7-16 16-16s16 7 16 16v80h80c9 0 16 7 16 16s-7 16-16 16h-80v80c0 9-7 16-16 16s-16-7-16-16v-80h-80c-9 0-16-7-16-16z"
-            fill="#a6acb9" />
-        <path
-            d="M74 42c-18 0-32 14-32 32v320c0 18 14 32 32 32h320c18 0 32-14 32-32V74c0-18-14-32-32-32H74zM10 74c0-35 29-64 64-64h320c35 0 64 29 64 64v320c0 35-29 64-64 64H74c-35 0-64-29-64-64V74zm208 256v-80h-80c-9 0-16-7-16-16s7-16 16-16h80v-80c0-9 7-16 16-16s16 7 16 16v80h80c9 0 16 7 16 16s-7 16-16 16h-80v80c0 9-7 16-16 16s-16-7-16-16z"
-            fill="currentColor" />
-    </svg>
-    <svg v-else xmlns="http://www.w3.org/2000/svg" class="v-mid m-a" height="24" viewBox="-10 -226 468 468">
-        <path
-            d="M64-184c-18 0-32 14-32 32v320c0 18 14 32 32 32h320c18 0 32-14 32-32v-320c0-18-14-32-32-32H64zM0-152c0-35 29-64 64-64h320c35 0 64 29 64 64v320c0 35-29 64-64 64H64c-35 0-64-29-64-64v-320zm208 256V24h-80c-9 0-16-7-16-16s7-16 16-16h80v-80c0-9 7-16 16-16s16 7 16 16v80h80c9 0 16 7 16 16s-7 16-16 16h-80v80c0 9-7 16-16 16s-16-7-16-16z"
-            fill="currentColor" />
-    </svg>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 536"><path d="M269 477c58-131 80-180 128-288 5-12 16-19 29-19s24 7 29 19l128 288c7 16 0 35-16 42s-35 0-42-16l-20-45H347l-20 45c-7 16-26 23-42 16s-23-26-16-42zm107-83h100l-50-113-50 113z" fill="var(--fill1)"/><path d="M170 10c18 0 32 14 32 32v32h128c18 0 32 14 32 32s-14 32-32 32h-10l-8 23c-16 45-41 87-72 122 14 9 29 17 44 24l51 22-26 59-51-23c-23-10-45-22-66-36-21 17-44 32-69 44l-35 18c-15 8-35 1-43-15-7-15-1-35 15-43l34-17c17-8 32-18 47-28-14-13-27-27-39-41l-21-24c-11-14-9-34 5-46 13-11 33-9 45 5l20 24c11 14 24 27 37 39 28-31 50-66 64-106v-1H42c-18 0-32-14-32-32s14-32 32-32h96V42c0-18 14-32 32-32z" fill="var(--fill3)"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 599 535"><path d="M178 10c13 0 24 11 24 24v56h136c13 0 24 11 24 24s-11 24-24 24h-16l-17 38c-18 44-45 83-78 116 14 10 29 18 44 25l61 28 72-161c4-8 13-14 22-14 10 0 18 6 22 14l136 304c5 12 0 27-12 32s-26 0-32-12l-29-66H341l-29 66c-5 12-20 17-32 12s-17-20-12-32l45-99-61-29c-22-9-42-21-61-35-18 14-37 26-57 36l-57 30c-12 7-26 2-32-10-6-11-2-26 10-32l57-30c14-7 27-16 40-25-27-26-51-55-70-88-6-11-3-26 9-33 11-6 26-2 33 9 17 30 39 58 65 81 31-30 55-66 72-106l9-19H34c-13 0-24-11-24-24s11-24 24-24h120V34c0-13 11-24 24-24zm311 384-63-141-63 141h126z" fill="currentColor"/></svg>
 </template>
 <script lang="ts" setup>
 defineProps<{  filled?: boolean }>();
--- a/src/components/icons/ListIcon.vue
+++ b/src/components/icons/ListIcon.vue
@@ -1,5 +1,5 @@
 <template>
-    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 468"><path d="M10 170v224c0 35 29 64 64 64h320c35 0 64-29 64-64V170H10zm96 88c0-13 11-24 24-24h208c13 0 24 11 24 24s-11 24-24 24H130c-13 0-24-11-24-24zm0 112c0-13 11-24 24-24h208c13 0 24 11 24 24s-11 24-24 24H130c-13 0-24-11-24-24z" fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)"/><path d="M74 10c-35 0-64 29-64 64v96h448V74c0-35-29-64-64-64H74zm240 48h64c7 0 12 4 15 10 2 6 1 13-4 17l-32 32c-6 7-16 7-22 0l-32-32c-5-4-6-11-4-17 3-6 9-10 15-10z" fill="var(--colors-primary-DEFAULT)"/></svg>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 468"><path d="M10 170v224c0 35 29 64 64 64h320c35 0 64-29 64-64V170H10zm96 88c0-13 11-24 24-24h208c13 0 24 11 24 24s-11 24-24 24H130c-13 0-24-11-24-24zm0 112c0-13 11-24 24-24h208c13 0 24 11 24 24s-11 24-24 24H130c-13 0-24-11-24-24z" fill="var(--fill1)"/><path d="M74 10c-35 0-64 29-64 64v96h448V74c0-35-29-64-64-64H74zm240 48h64c7 0 12 4 15 10 2 6 1 13-4 17l-32 32c-6 7-16 7-22 0l-32-32c-5-4-6-11-4-17 3-6 9-10 15-10z" fill="var(--colors-primary-DEFAULT)"/></svg>
    <svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="-10 -226 468 468"><path d="M64-184h320c18 0 32 14 32 32v64H32v-64c0-18 14-32 32-32zM32-56h384v224c0 18-14 32-32 32H64c-18 0-32-14-32-32V-56zM0-152v320c0 35 29 64 64 64h320c35 0 64-29 64-64v-320c0-35-29-64-64-64H64c-35 0-64 29-64 64zM112 8c-9 0-16 7-16 16s7 16 16 16h224c9 0 16-7 16-16s-7-16-16-16H112zm0 96c-9 0-16 7-16 16s7 16 16 16h224c9 0 16-7 16-16s-7-16-16-16H112zm200-260c-5 0-9 3-11 7-2 5-1 10 3 14l24 24c4 4 12 4 17 0l24-24c3-4 4-9 2-14-2-4-6-7-11-7h-48z" fill="currentColor"/></svg>
 </template>
 <script lang="ts" setup>
--- a/src/components/icons/MailIcon.vue
+++ b/src/components/icons/MailIcon.vue
@@ -5,7 +5,8 @@ defineProps<{
 </script>

 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 532 404"><path d="M10 58c0 15 7 29 19 38l208 156c17 13 41 13 58 0L503 96c12-9 19-23 19-38v272c0 35-29 64-64 64H74c-35 0-64-29-64-64V58z" fill="var(--fill1)"/><path d="M58 10c-26 0-48 22-48 48 0 15 7 29 19 38l208 156c17 13 41 13 58 0L503 96c12-9 19-23 19-38 0-26-21-48-48-48H58z" fill="var(--fill4)"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect width="20" height="16" x="2" y="4" rx="2" />
        <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
    </svg>
--- a/src/components/icons/MoneyCheck.vue
+++ b/src/components/icons/MoneyCheck.vue
@@ -5,6 +5,6 @@ defineProps<{
 </script>

 <template>
-    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 610 500"><path d="M10 74c0-35 29-64 64-64h384c35 0 64 29 64 64v73c-21 3-41 13-58 29l-58 58H306c-13 0-24 11-24 24s11 24 24 24h52l-64 64c-13 14-23 30-28 48H74c-35 0-64-29-64-64V74zm76 93c0 25 19 47 44 51l42 7c6 1 10 7 10 13 0 7-5 12-12 12h-56c-11 0-20 9-20 20s9 20 20 20h24v4c0 11 9 20 20 20s20-9 20-20v-5c25-4 44-25 44-51s-18-48-44-52l-41-7c-6-1-11-6-11-12 0-7 6-13 13-13h47c11 0 20-9 20-20s-9-20-20-20h-8v-4c0-11-9-20-20-20s-20 9-20 20v4c-29 0-52 24-52 53zm196-21c0 13 11 24 24 24h128c13 0 24-11 24-24s-11-24-24-24H306c-13 0-24 11-24 24z" fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)"/><path d="m298 473 12-60c3-12 9-24 18-33l119-119 80 80-119 119c-9 9-20 15-33 18l-59 12h-3c-8 0-15-7-15-15v-3zm0 0zm251-154-80-80 29-29c22-22 58-22 80 0s22 58 0 80l-29 29z" fill="var(--colors-primary-DEFAULT)"/></svg>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 610 500"><path d="M10 74c0-35 29-64 64-64h384c35 0 64 29 64 64v73c-21 3-41 13-58 29l-58 58H306c-13 0-24 11-24 24s11 24 24 24h52l-64 64c-13 14-23 30-28 48H74c-35 0-64-29-64-64V74zm76 93c0 25 19 47 44 51l42 7c6 1 10 7 10 13 0 7-5 12-12 12h-56c-11 0-20 9-20 20s9 20 20 20h24v4c0 11 9 20 20 20s20-9 20-20v-5c25-4 44-25 44-51s-18-48-44-52l-41-7c-6-1-11-6-11-12 0-7 6-13 13-13h47c11 0 20-9 20-20s-9-20-20-20h-8v-4c0-11-9-20-20-20s-20 9-20 20v4c-29 0-52 24-52 53zm196-21c0 13 11 24 24 24h128c13 0 24-11 24-24s-11-24-24-24H306c-13 0-24 11-24 24z" fill="var(--fill1)"/><path d="m298 473 12-60c3-12 9-24 18-33l119-119 80 80-119 119c-9 9-20 15-33 18l-59 12h-3c-8 0-15-7-15-15v-3zm0 0zm251-154-80-80 29-29c22-22 58-22 80 0s22 58 0 80l-29 29z" fill="var(--colors-primary-DEFAULT)"/></svg>
    <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 607 500"><path d="M74 42h384c18 0 32 14 32 32v81c11-3 22-5 32-5V74c0-35-28-64-64-64H74c-35 0-64 29-64 64v256c0 35 29 64 64 64h189l1-4c1-9 4-19 8-28H74c-17 0-32-14-32-32V74c0-18 15-32 32-32zm240 192c-8 0-16 7-16 16s8 16 16 16h44l32-32h-76zm-16-80c0 9 8 16 16 16h96c9 0 16-7 16-16s-7-16-16-16h-96c-8 0-16 7-16 16zM170 98c-8 0-16 7-16 16v8h-1c-26 0-47 21-47 46 0 23 17 42 39 46l45 8c7 1 12 7 12 14 0 8-6 14-14 14h-58c-8 0-16 7-16 16s8 16 16 16h24v8c0 9 8 16 16 16 9 0 16-7 16-16v-8h2c26 0 46-21 46-46 0-23-16-42-38-46l-46-8c-6-1-12-7-12-14 0-8 7-14 15-14h49c9 0 16-7 16-16s-7-16-16-16h-16v-8c0-9-7-16-16-16zm182 288 102-102 50 51-102 102c-4 5-11 8-17 9l-51 8 9-51c1-6 4-12 8-17zm0 0zm124-125 21-20c14-14 37-14 51 0s14 36 0 50l-21 21-51-51zM311 398l-12 75c0 1-1 1-1 2 0 8 7 15 15 15h3l74-13c13-2 26-8 35-17l145-146c27-26 27-69 0-96-26-26-69-26-96 0L329 364c-9 9-16 21-18 34z" fill="currentColor"/></svg>
 </template>
--- a/src/components/icons/PencilIcon.vue
+++ b/src/components/icons/PencilIcon.vue
@@ -1,13 +1,6 @@
 <template>
-    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
-        stroke="none">
-        <path
-            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
-    </svg>
-    <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
-    </svg>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 534 533"><path d="m303 93 104 104 34 34 62-62c14-13 21-32 21-51s-7-38-21-51l-36-36c-13-13-32-21-51-21s-38 8-51 21l-62 62z" fill="#a6acb9"/><path d="m95 377-24 87 86-25c7-1 13-5 18-10l-71-69c-4 5-8 10-9 17zm174-250 34-34 104 104 34 34-34 34-198 198c-11 11-24 19-39 23L42 521c-8 2-17 0-23-6s-9-15-6-23l35-128c5-15 12-28 23-39l198-198z" fill="#1e3050"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="534" height="533" viewBox="-12 -258 534 533"><path d="M404-216c-11 0-21 4-28 12l-59 58 93 93 58-58c8-8 12-18 12-29s-4-21-12-28l-35-36c-8-8-18-12-29-12zM93 78l93 93L387-30l-93-93L93 78zm-21 25c-2 3-4 7-5 11L36 229l114-32c4-1 8-3 11-5l-89-89zm281-330c13-13 32-21 51-21s38 8 51 21l36 36c13 13 21 32 21 51s-8 38-21 51L197 205c-11 11-24 19-39 23L30 263c-8 2-17 0-23-6s-9-15-6-23l35-128c5-15 12-28 23-39l294-294z" fill="currentColor"/></svg>
 </template>

 <script lang="ts" setup>
--- a/src/components/icons/SendIcon.vue
+++ b/src/components/icons/SendIcon.vue
@@ -5,7 +5,8 @@ defineProps<{
 </script>

 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 628 628"><path d="M286 343 618 10 394 618 286 343z" fill="var(--fill1)"/><path d="M618 10 10 234l276 109L618 10z" fill="var(--fill4)"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="m22 2-7 20-4-9-9-4Z" />
        <path d="M22 2 11 13" />
    </svg>
--- a/src/components/icons/SettingsIcon.vue
+++ b/src/components/icons/SettingsIcon.vue
@@ -1,5 +1,5 @@
 <template>
-    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 567 580"><path d="M18 190c-8 14-6 32 5 43l37 36v42l-37 36c-11 12-13 29-5 43l46 80c8 14 24 21 40 17l50-14c11 8 23 15 36 21l13 50c4 15 18 26 34 26h93c16 0 30-11 34-26l13-50c13-6 25-13 36-21l50 14c15 4 32-3 40-17l46-80c8-14 6-31-6-43l-37-36c1-7 1-14 1-21s0-14-1-21l37-36c12-11 14-29 6-43l-46-80c-8-14-24-21-40-17l-50 14c-11-8-23-15-36-21l-13-50c-4-15-18-26-34-26h-93c-16 0-30 11-34 26l-13 50c-13 6-25 13-36 21l-50-13c-16-5-32 2-40 16l-46 80zm377 100c1 41-20 79-55 99-35 21-79 21-114 0-35-20-56-58-54-99-2-41 19-79 54-99 35-21 79-21 114 0 35 20 56 58 55 99zm-195 0c-2 31 14 59 40 75 27 15 59 15 86 0 26-16 42-44 41-75 1-31-15-59-41-75-27-15-59-15-86 0-26 16-42 44-40 75z" fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)"/><path d="M283 206c46 0 84 37 84 84 0 46-37 84-83 84-47 0-85-37-85-84 0-46 37-84 84-84zm1 196c61 0 111-51 111-112 0-62-51-112-112-112-62 0-112 51-112 112 0 62 51 112 113 112z" fill="var(--colors-primary-DEFAULT)"/></svg>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 567 580"><path d="M18 190c-8 14-6 32 5 43l37 36v42l-37 36c-11 12-13 29-5 43l46 80c8 14 24 21 40 17l50-14c11 8 23 15 36 21l13 50c4 15 18 26 34 26h93c16 0 30-11 34-26l13-50c13-6 25-13 36-21l50 14c15 4 32-3 40-17l46-80c8-14 6-31-6-43l-37-36c1-7 1-14 1-21s0-14-1-21l37-36c12-11 14-29 6-43l-46-80c-8-14-24-21-40-17l-50 14c-11-8-23-15-36-21l-13-50c-4-15-18-26-34-26h-93c-16 0-30 11-34 26l-13 50c-13 6-25 13-36 21l-50-13c-16-5-32 2-40 16l-46 80zm377 100c1 41-20 79-55 99-35 21-79 21-114 0-35-20-56-58-54-99-2-41 19-79 54-99 35-21 79-21 114 0 35 20 56 58 55 99zm-195 0c-2 31 14 59 40 75 27 15 59 15 86 0 26-16 42-44 41-75 1-31-15-59-41-75-27-15-59-15-86 0-26 16-42 44-40 75z" fill="var(--fill1)"/><path d="M283 206c46 0 84 37 84 84 0 46-37 84-83 84-47 0-85-37-85-84 0-46 37-84 84-84zm1 196c61 0 111-51 111-112 0-62-51-112-112-112-62 0-112 51-112 112 0 62 51 112 113 112z" fill="var(--colors-primary-DEFAULT)"/></svg>
    <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path
--- a/src/components/icons/TrashIcon.vue
+++ b/src/components/icons/TrashIcon.vue
@@ -1,8 +1,5 @@
 <template>
-    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
-        stroke="none">
-        <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
-    </svg>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 548"><path d="M42 122v352c0 35 29 64 64 64h256c35 0 64-29 64-64V122H42zm64 88c0-13 11-24 24-24s24 11 24 24v240c0 13-11 24-24 24s-24-11-24-24V210zm104 0c0-13 11-24 24-24s24 11 24 24v240c0 13-11 24-24 24s-24-11-24-24V210zm104 0c0-13 11-24 24-24s24 11 24 24v240c0 13-11 24-24 24s-24-11-24-24V210z" fill="color-mix(in srgb, var(--colors-danger-DEFAULT) 40%, transparent)"/><path d="M177 10c-14 0-26 9-30 22l-9 26H42c-18 0-32 14-32 32s14 32 32 32h384c18 0 32-14 32-32s-14-32-32-32h-96l-9-26c-4-13-16-22-30-22H177z" fill="var(--colors-danger-DEFAULT)"/></svg>
    <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="3 6 5 6 21 6"></polyline>
--- a/src/components/icons/Upload.vue
+++ b/src/components/icons/Upload.vue
@@ -2,7 +2,7 @@
    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" class="min-w-[28px]" viewBox="0 0 596 468">
        <path
            d="M10 314c0-63 41-117 98-136-1-8-2-16-2-24 0-79 65-144 144-144 55 0 104 31 128 77 14-8 30-13 48-13 53 0 96 43 96 96 0 16-4 31-10 44 44 20 74 64 74 116 0 71-57 128-128 128H154c-79 0-144-64-144-144zm199-73c-9 9-9 25 0 34s25 9 34 0l31-31v102c0 13 11 24 24 24s24-11 24-24V244l31 31c9 9 25 9 34 0s9-25 0-34l-72-72c-10-9-25-9-34 0l-72 72z"
-            fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)" />
+            fill="var(--fill1)" />
        <path
            d="M281 169c9-9 25-9 34 0l72 72c9 9 9 25 0 34s-25 9-34 0l-31-31v102c0 13-11 24-24 24s-24-11-24-24V244l-31 31c-9 9-25 9-34 0s-9-25 0-34l72-72z"
            fill="var(--colors-primary-DEFAULT)" />
--- a/src/components/icons/Video.vue
+++ b/src/components/icons/Video.vue
@@ -1,7 +1,7 @@
 <template>
    <svg xmlns="http://www.w3.org/2000/svg" v-if="filled" viewBox="0 0 532 404">
        <path d="M10 74v256c0 35 29 64 64 64h256c35 0 64-29 64-64V74c0-35-29-64-64-64H74c-35 0-64 29-64 64z"
-            fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)" />
+            fill="var(--fill1)" />
        <path d="M394 135v134l90 72c4 3 9 5 14 5 13 0 24-11 24-24V82c0-13-11-24-24-24-5 0-10 2-14 5l-90 72z"
            fill="var(--colors-primary-DEFAULT)" />
    </svg>
--- a/src/components/icons/VideoPlayIcon.vue
+++ b/src/components/icons/VideoPlayIcon.vue
@@ -1,5 +1,5 @@
 <template>
-    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 564 468"><path d="M10 74v256c0 35 29 64 64 64h161c-11-24-17-51-17-80 0-106 86-192 192-192 42 0 81 13 112 36V74c0-15-5-29-14-40l-46 46c-16-4-34-6-52-6h-10l64-64h-92l-1 1-95 95h-68l96-96h-92l-1 1-95 95H48l96-96H74c-35 0-64 29-64 64z" fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)"/><path d="M266 314c0-80 64-144 144-144s144 64 144 144-64 144-144 144-144-64-144-144zm104-62c-5 3-8 8-8 14v96c0 6 3 11 8 14s11 3 16 0l80-48c5-3 8-8 8-14s-3-11-8-14l-80-48c-5-3-11-3-16 0z" fill="var(--colors-primary-DEFAULT)"/></svg>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 564 468"><path d="M10 74v256c0 35 29 64 64 64h161c-11-24-17-51-17-80 0-106 86-192 192-192 42 0 81 13 112 36V74c0-15-5-29-14-40l-46 46c-16-4-34-6-52-6h-10l64-64h-92l-1 1-95 95h-68l96-96h-92l-1 1-95 95H48l96-96H74c-35 0-64 29-64 64z" fill="var(--fill1)"/><path d="M266 314c0-80 64-144 144-144s144 64 144 144-64 144-144 144-144-64-144-144zm104-62c-5 3-8 8-8 14v96c0 6 3 11 8 14s11 3 16 0l80-48c5-3 8-8 8-14s-3-11-8-14l-80-48c-5-3-11-3-16 0z" fill="var(--colors-primary-DEFAULT)"/></svg>
    <svg v-else xmlns="http://www.w3.org/2000/svg" width="564" height="468" viewBox="22 -194 564 468"><path d="M480-152H367l-96 96h84c-18 8-35 19-50 32H64v160c0 18 14 32 32 32h150c3 11 7 22 11 32H96c-35 0-64-29-64-64v-256c0-35 29-64 64-64h384c35 0 64 29 64 64v84c-11-8-23-15-35-20h3v-64c0-5-1-10-3-14l-63 63c-5-1-9-1-14-1-11 0-23 1-33 3l82-83h-1zM65-56l96-96H96c-18 0-32 14-32 32v64h1zm46 0h114l96-96H207l-96 96zm321 288c62 0 112-50 112-112S494 8 432 8 320 58 320 120s50 112 112 112zm0-256c80 0 144 64 144 144s-64 144-144 144-144-64-144-144S352-24 432-24zm-40 74c5-3 11-3 16 0l94 56c4 3 7 8 7 14s-3 11-7 14l-94 56c-5 3-11 3-16 0s-8-8-8-14V64c0-6 3-11 8-14zm24 98 46-28-46-28v56z" fill="currentColor"/></svg>
 </template>
 <script lang="ts" setup>
--- a/src/components/icons/hard-drive.vue
+++ b/src/components/icons/hard-drive.vue
@@ -1,5 +1,5 @@
 <template>
-    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 468"><path d="M10 74c0-35 29-64 64-64h320c35 0 64 29 64 64v256c0-35-29-64-64-64H74c-35 0-64 29-64 64V74zm288 288c0 18-14 32-32 32s-32-14-32-32 14-32 32-32 32 14 32 32z" fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)"/><path d="M10 330c0-35 29-64 64-64h320c35 0 64 29 64 64v64c0 35-29 64-64 64H74c-35 0-64-29-64-64v-64zm288 32c0-18-14-32-32-32s-32 14-32 32 14 32 32 32 32-14 32-32zm64 32c18 0 32-14 32-32s-14-32-32-32-32 14-32 32 14 32 32 32z" fill="var(--colors-primary-DEFAULT)"/></svg>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468 468"><path d="M10 74c0-35 29-64 64-64h320c35 0 64 29 64 64v256c0-35-29-64-64-64H74c-35 0-64 29-64 64V74zm288 288c0 18-14 32-32 32s-32-14-32-32 14-32 32-32 32 14 32 32z" fill="var(--fill1)"/><path d="M10 330c0-35 29-64 64-64h320c35 0 64 29 64 64v64c0 35-29 64-64 64H74c-35 0-64-29-64-64v-64zm288 32c0-18-14-32-32-32s-32 14-32 32 14 32 32 32 32-14 32-32zm64 32c18 0 32-14 32-32s-14-32-32-32-32 14-32 32 14 32 32 32z" fill="var(--colors-primary-DEFAULT)"/></svg>
    <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="-10 -226 468 468"><path d="M64-184c-18 0-32 14-32 32V17c9-6 20-9 32-9h320c12 0 23 3 32 9v-169c0-18-14-32-32-32H64zM32 72v96c0 18 14 32 32 32h320c18 0 32-14 32-32V72c0-18-14-32-32-32H64c-18 0-32 14-32 32zM0 72v-224c0-35 29-64 64-64h320c35 0 64 29 64 64v320c0 35-29 64-64 64H64c-35 0-64-29-64-64V72zm256 24c13 0 24 11 24 24s-11 24-24 24-24-11-24-24 11-24 24-24zm96 0c13 0 24 11 24 24s-11 24-24 24-24-11-24-24 11-24 24-24z" fill="currentColor"/></svg>
 </template>

--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -1,42 +0,0 @@
-import { createStaticVNode } from "vue";
-
-export const Home = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24">
-            <path
-                d="M4.6 22.73A107 107 0 0 0 11 23h2.22c2.43-.04 4.6-.16 6.18-.27A3.9 3.9 0 0 0 23 18.8v-8.46a4 4 0 0 0-1.34-3L14.4.93a3.63 3.63 0 0 0-4.82 0L2.34 7.36A4 4 0 0 0 1 10.35v8.46a3.9 3.9 0 0 0 3.6 3.92M13.08 2.4l7.25 6.44a2 2 0 0 1 .67 1.5v8.46a1.9 1.9 0 0 1-1.74 1.92q-1.39.11-3.26.19V16a4 4 0 0 0-8 0v4.92q-1.87-.08-3.26-.19A1.9 1.9 0 0 1 3 18.81v-8.46a2 2 0 0 1 .67-1.5l7.25-6.44a1.63 1.63 0 0 1 2.16 0M13.12 21h-2.24a1 1 0 0 1-.88-1v-4a2 2 0 1 1 4 0v4a1 1 0 0 1-.88 1">
-            </path>
-        </svg>`, 1);
-export const HomeFilled = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24">
-            <path
-                d="M9.59.92a3.63 3.63 0 0 1 4.82 0l7.25 6.44A4 4 0 0 1 23 10.35v8.46a3.9 3.9 0 0 1-3.6 3.92 106 106 0 0 1-14.8 0A3.9 3.9 0 0 1 1 18.8v-8.46a4 4 0 0 1 1.34-3zM12 16a5 5 0 0 1-3.05-1.04l-1.23 1.58a7 7 0 0 0 8.56 0l-1.23-1.58A5 5 0 0 1 12 16">
-            </path>
-        </svg>`, 1);
-export const Dashboard = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24">
-            <path
-                d="M23 5a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v14a4 4 0 0 0 4 4h14a4 4 0 0 0 4-4zm-10 6V3h6a2 2 0 0 1 2 2v6zm8 8a2 2 0 0 1-2 2h-6v-8h8zM5 3h6v18H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2">
-            </path>
-        </svg>`, 1);
-export const DashboardFilled = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24">
-            <path
-                d="M11 23H5a4 4 0 0 1-4-4V5a4 4 0 0 1 4-4h6zm12-4a4 4 0 0 1-4 4h-6V13h10zM19 1a4 4 0 0 1 4 4v6H13V1z">
-            </path>
-        </svg>`, 1);
-export const Add = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24">
-            <path
-                d="M11 11H6v2h5v5h2v-5h5v-2h-5V6h-2zM5 1a4 4 0 0 0-4 4v14a4 4 0 0 0 4 4h14a4 4 0 0 0 4-4V5a4 4 0 0 0-4-4zm16 4v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2">
-            </path>
-        </svg>`, 1);
-export const AddFilled = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24">
-            <path
-                d="M1 5a4 4 0 0 1 4-4h14a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H5a4 4 0 0 1-4-4zm10 6H6v2h5v5h2v-5h5v-2h-5V6h-2z">
-            </path>
-        </svg>`, 1);
-export const Bell = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24">
-            <path
-                d="M16 19h8v-2h-.34a3.15 3.15 0 0 1-3.12-2.76l-.8-6.41a7.8 7.8 0 0 0-15.48 0l-.8 6.41A3.15 3.15 0 0 1 .34 17H0v2h8v1h.02a3.4 3.4 0 0 0 3.38 3h1.2a3.4 3.4 0 0 0 3.38-3H16zm1.75-10.92.8 6.4c.12.95.5 1.81 1.04 2.52H4.4c.55-.7.92-1.57 1.04-2.51l.8-6.41a5.8 5.8 0 0 1 11.5 0M13.4 19c.33 0 .6.27.6.6 0 .77-.63 1.4-1.4 1.4h-1.2a1.4 1.4 0 0 1-1.4-1.4c0-.33.27-.6.6-.6z">
-            </path>
-        </svg>`, 1);
-export const BellFilled = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24">
-            <path
-                d="M20.54 14.24A3.15 3.15 0 0 0 23.66 17H24v2h-8v1h-.02a3.4 3.4 0 0 1-3.38 3h-1.2a3.4 3.4 0 0 1-3.38-3H8v-1H0v-2h.34a3.15 3.15 0 0 0 3.12-2.76l.8-6.41a7.8 7.8 0 0 1 15.48 0zM10 19.6c0 .77.63 1.4 1.4 1.4h1.2c.77 0 1.4-.63 1.4-1.4a.6.6 0 0 0-.6-.6h-2.8a.6.6 0 0 0-.6.6" ></path>
-        </svg>`, 1);
-export const Search = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24"><path d="M17.33 18.74a10 10 0 1 1 1.41-1.41l4.47 4.47-1.41 1.41zM11 3a8 8 0 1 0 0 16 8 8 0 0 0 0-16"></path></svg>`, 1);
--- a/src/components/icons/shield-user.vue
+++ b/src/components/icons/shield-user.vue
@@ -1,5 +1,5 @@
 <template>
-    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 531"><path d="M10 150c1 99 41 281 214 363 16 8 36 8 52 0 173-82 214-264 214-363 0-26-16-48-38-57L263 13c-4-2-9-3-13-3s-8 1-12 3L48 93c-22 9-38 31-38 57zm128 212c0-44 36-80 80-80h64c44 0 80 36 80 80 0 9-7 16-16 16H154c-9 0-16-7-16-16zm168-176c0 31-25 56-56 56s-56-25-56-56 25-56 56-56 56 25 56 56z" fill="color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent)"/><path d="M282 282c44 0 80 36 80 80 0 9-7 16-16 16H154c-9 0-16-7-16-16 0-44 36-80 80-80h64zm-32-40c-31 0-56-25-56-56s25-56 56-56 56 25 56 56-25 56-56 56z" fill="var(--colors-primary-DEFAULT)"/></svg>
+    <svg v-if="filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 531"><path d="M10 150c1 99 41 281 214 363 16 8 36 8 52 0 173-82 214-264 214-363 0-26-16-48-38-57L263 13c-4-2-9-3-13-3s-8 1-12 3L48 93c-22 9-38 31-38 57zm128 212c0-44 36-80 80-80h64c44 0 80 36 80 80 0 9-7 16-16 16H154c-9 0-16-7-16-16zm168-176c0 31-25 56-56 56s-56-25-56-56 25-56 56-56 56 25 56 56z" fill="var(--fill1)"/><path d="M282 282c44 0 80 36 80 80 0 9-7 16-16 16H154c-9 0-16-7-16-16 0-44 36-80 80-80h64zm-32-40c-31 0-56-25-56-56s25-56 56-56 56 25 56 56-25 56-56 56z" fill="var(--colors-primary-DEFAULT)"/></svg>
    <svg v-else xmlns="http://www.w3.org/2000/svg" width="500" height="529" viewBox="6 -257 500 529"><path d="M231-240c16-7 34-7 50 0l177 75 4 2c18 9 32 28 34 50v24c-6 102-52 267-214 344l-5 2c-11 5-24 5-35 2l-6-1-6-3C68 178 22 14 17-88l-1-20c0-25 14-45 34-55l4-2 177-75zm38 29c-7-3-15-3-22-1l-3 1-177 75c-11 5-19 16-19 28l1 18c5 96 48 246 194 316l4 2c7 2 15 2 22-2l14-7c144-78 181-236 181-327v-3c-1-10-7-19-17-24l-2-1-176-75zm19 235c44 0 80 36 80 80 0 9-7 16-16 16s-16-7-16-16c0-26-21-48-48-48h-64c-26 0-48 22-48 48 0 9-7 16-16 16s-16-7-16-16c0-44 36-80 80-80h64zM256-8c-35 0-64-29-64-64s29-64 64-64 64 29 64 64-29 64-64 64zm0-96c-18 0-32 14-32 32s14 32 32 32 32-14 32-32-14-32-32-32z" fill="currentColor"/></svg>
 </template>
 <script lang="ts" setup>
--- a/src/components/ui/AppButton.vue
+++ b/src/components/ui/AppButton.vue
@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils';
 import { cva } from "class-variance-authority";
 import { ButtonHTMLAttributes, computed } from 'vue';
 type UiButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
-type UiButtonSize = 'sm' | 'md' | 'lg';
+type UiButtonSize = 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';

 const props = withDefaults(
  defineProps<{
@@ -39,6 +39,9 @@ const buttonVariants = cva(":uno: inline-flex items-center justify-center gap-2
        sm: 'min-h-[28px] px-3 text-[12px] leading-[20px]',
        md: 'min-h-[32px] px-3 text-[14px] leading-[20px]',
        lg: 'min-h-[36px] px-4 text-[14px] leading-[20px]',
+        icon: 'min-h-0 p-2',
+        'icon-sm': 'min-h-0 p-1',
+        'icon-lg': 'min-h-0 p-3',
      },
      block: {
        true: 'w-full',
--- a/src/routes/settings/AdsVast/components/AdsVastTable.tsx
+++ b/src/routes/settings/AdsVast/components/AdsVastTable.tsx
@@ -192,20 +192,20 @@ export default defineComponent({
            )}
            <AppButton
              variant="ghost"
-              size="sm"
+              size="icon"
              disabled={props.isReadOnly || props.isMutating}
              onClick={() => emit('edit', row.original)}
              v-slots={{
-                icon: () => <PencilIcon class="h-4 w-4" />
+                icon: () => <PencilIcon filled class="h-4 w-4" />
              }}
            />
            <AppButton
              variant="ghost"
-              size="sm"
+              size="icon"
              disabled={props.isReadOnly || props.isMutating}
              onClick={() => emit('delete', row.original)}
              v-slots={{
-                icon: () => <TrashIcon class="h-4 w-4 text-danger" />
+                icon: () => <TrashIcon filled class="h-4 w-4" />
              }}
            />
          </div>
--- a/src/routes/settings/NotificationSettings/NotificationSettings.vue
+++ b/src/routes/settings/NotificationSettings/NotificationSettings.vue
@@ -18,6 +18,7 @@ import SettingsRowSkeleton from '@/routes/settings/components/SettingsRowSkeleto
 import SettingsSectionCard from '@/routes/settings/components/SettingsSectionCard.vue';
 import { computed, ref, watch } from 'vue';
 import { useTranslation } from 'i18next-vue';
+import Bell from '@/components/icons/Bell.vue';

 const toast = useAppToast();
 const { t } = useTranslation();
@@ -40,7 +41,7 @@ const notificationTypes = computed(() => [
        key: 'push' as const,
        title: t('settings.notificationSettings.types.push.title'),
        description: t('settings.notificationSettings.types.push.description'),
-        icon: BellIcon,
+        icon: Bell,
        bgColor: 'bg-accent/10',
        iconColor: 'text-accent',
    },
@@ -140,7 +141,7 @@ const handleSave = async () => {
                :iconBoxClass="type.bgColor"
            >
                <template #icon>
-                    <component :is="type.icon" :class="[type.iconColor, 'w-5 h-5']" />
+                    <component :is="type.icon" filled :class="[type.iconColor, 'w-5 h-5']" />
                </template>

                <template #actions>
--- a/src/routes/settings/SecurityNConnected/components/SecurityAccountStatusRow.vue
+++ b/src/routes/settings/SecurityNConnected/components/SecurityAccountStatusRow.vue
@@ -9,12 +9,10 @@ const { t } = useTranslation();
    <SettingsRow
        :title="t('settings.securityConnected.accountStatus.label')"
        :description="t('settings.securityConnected.accountStatus.detail')"
+        iconBoxClass="bg-primary/10"
    >
        <template #icon>
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-success" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
-                <polyline points="22 4 12 14.01 9 11.01" />
-            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 532 532"><path d="M10 266c0 37 21 69 51 85-10 33-2 70 24 96s63 34 96 24c16 30 48 51 85 51s69-21 85-51c33 10 70 2 96-24s34-63 24-96c30-16 51-48 51-85s-21-69-51-85c10-33 2-70-24-96s-63-34-96-24c-16-30-48-51-85-51s-69 21-85 51c-33-10-70-2-96 24s-34 63-24 96c-30 16-51 48-51 85zm136 24 34-33c8 8 26 26 53 54l106-145 14-20 39 28-14 20-123 169-17 23-20-21c-43-45-68-70-72-75z" fill="var(--fill1)"/><path d="m392 174-14 20-123 169-17 23-20-21c-43-45-68-70-72-75l34-33c8 8 26 26 53 54l106-145 14-20 39 28z" fill="var(--fill4)"/></svg>
        </template>

        <template #actions>
--- a/src/routes/settings/SecurityNConnected/components/SecurityChangePasswordRow.vue
+++ b/src/routes/settings/SecurityNConnected/components/SecurityChangePasswordRow.vue
@@ -14,11 +14,10 @@ const { t } = useTranslation();
    <SettingsRow
        :title="t('settings.securityConnected.changePassword.label')"
        :description="t('settings.securityConnected.changePassword.detail')"
+        iconBoxClass="bg-primary/10"
    >
        <template #icon>
-            <svg aria-hidden="true" class="fill-primary w-6 h-6" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true">
-                <path d="M22 9.75v5.5A1.75 1.75 0 0 1 20.25 17H3.75A1.75 1.75 0 0 1 2 15.25v-5.5C2 8.784 2.784 8 3.75 8h16.5c.966 0 1.75.784 1.75 1.75Zm-8.75 2.75a1.25 1.25 0 1 0-2.5 0 1.25 1.25 0 0 0 2.5 0Zm-6.5 1.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm10.5 0a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z"></path>
-            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 404 564"><path d="M74 138v64h64v-64c0-35 29-64 64-64s64 29 64 64v64h64v-64c0-71-57-128-128-128S74 67 74 138z" fill="var(--fill1)"/><path d="M74 202c-35 0-64 29-64 64v224c0 35 29 64 64 64h256c35 0 64-29 64-64V266c0-35-29-64-64-64H74zm152 136v80c0 13-11 24-24 24s-24-11-24-24v-80c0-13 11-24 24-24s24 11 24 24z" fill="var(--fill4)"/></svg>
        </template>

        <template #actions>
--- a/src/routes/settings/SecurityNConnected/components/SecurityEmailRow.vue
+++ b/src/routes/settings/SecurityNConnected/components/SecurityEmailRow.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import MailIcon from '@/components/icons/MailIcon.vue';
 import SettingsRow from '@/routes/settings/components/SettingsRow.vue';
 import { useTranslation } from 'i18next-vue';

@@ -13,12 +14,10 @@ const { t } = useTranslation();
    <SettingsRow
        :title="t('settings.securityConnected.email.label')"
        :description="emailConnected ? t('settings.securityConnected.email.connected') : t('settings.securityConnected.email.disconnected')"
+        iconBoxClass="bg-primary/10"
    >
        <template #icon>
-            <svg xmlns="http://www.w3.org/2000/svg" class="text-info w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <rect width="20" height="16" x="2" y="4" rx="2" />
-                <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
-            </svg>
+            <MailIcon filled />
        </template>

        <template #actions>
--- a/src/routes/settings/SecurityNConnected/components/SecurityLanguageRow.vue
+++ b/src/routes/settings/SecurityNConnected/components/SecurityLanguageRow.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import LanguageIcon from '@/components/icons/LanguageIcon.vue';
 import AppButton from '@/components/ui/AppButton.vue';
 import SettingsRow from '@/routes/settings/components/SettingsRow.vue';
 import { useTranslation } from 'i18next-vue';
@@ -26,9 +27,10 @@ const updateSelectedLanguage = (event: Event) => {
        :title="t('settings.securityConnected.language.label')"
        :description="t('settings.securityConnected.language.detail')"
        actionsClass="flex items-center gap-2"
+        iconBoxClass="bg-primary/10"
    >
        <template #icon>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 536"><path d="M269 477c58-131 80-180 128-288 5-12 16-19 29-19s24 7 29 19l128 288c7 16 0 35-16 42s-35 0-42-16l-20-45H347l-20 45c-7 16-26 23-42 16s-23-26-16-42zm107-83h100l-50-113-50 113z" fill="#a6acb9"/><path d="M170 10c18 0 32 14 32 32v32h128c18 0 32 14 32 32s-14 32-32 32h-10l-8 23c-16 45-41 87-72 122 14 9 29 17 44 24l51 22-26 59-51-23c-23-10-45-22-66-36-21 17-44 32-69 44l-35 18c-15 8-35 1-43-15-7-15-1-35 15-43l34-17c17-8 32-18 47-28-14-13-27-27-39-41l-21-24c-11-14-9-34 5-46 13-11 33-9 45 5l20 24c11 14 24 27 37 39 28-31 50-66 64-106v-1H42c-18 0-32-14-32-32s14-32 32-32h96V42c0-18 14-32 32-32z" fill="#1e3050"/></svg>
+            <LanguageIcon class="h-6 w-6" filled />
        </template>

        <template #actions>
--- a/src/routes/settings/SecurityNConnected/components/SecurityLogoutRow.vue
+++ b/src/routes/settings/SecurityNConnected/components/SecurityLogoutRow.vue
@@ -16,9 +16,10 @@ const { t } = useTranslation();
        :title="t('settings.securityConnected.logout.label')"
        :description="t('settings.securityConnected.logout.detail')"
        hoverClass="hover:bg-danger/5"
+        iconBoxClass="bg-danger/10 text-danger"
    >
        <template #icon>
-            <XCircleIcon class="w-6 h-6 text-danger" />
+            <svg class="w-6 h-6 text-danger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 532 532"><path d="M10 266c0 141 115 256 256 256s256-115 256-256S407 10 266 10 10 125 10 266zm167-89c9-9 25-9 34 0l55 55 55-55c9-9 25-9 34 0s9 25 0 34l-55 55 55 55c9 9 9 25 0 34-10 9-25 9-34 0l-55-55-55 55c-9 9-25 9-34 0-9-10-9-25 0-34l55-55-55-55c-9-9-9-25 0-34z" fill="color-mix(in srgb, var(--colors-danger-DEFAULT) 40%, transparent)"/><path d="M211 177c-9-9-25-9-34 0s-9 25 0 34l55 55-55 55c-9 9-9 25 0 34 10 9 25 9 34 0l55-55 55 55c9 9 25 9 34 0 9-10 9-25 0-34l-55-55 55-55c9-9 9-25 0-34s-25-9-34 0l-55 55-55-55z" fill="var(--colors-danger-DEFAULT)"/></svg>
        </template>

        <template #actions>
--- a/src/routes/settings/SecurityNConnected/components/SecurityTelegramRow.vue
+++ b/src/routes/settings/SecurityNConnected/components/SecurityTelegramRow.vue
@@ -21,6 +21,7 @@ const { t } = useTranslation();
    <SettingsRow
        :title="t('settings.securityConnected.telegram.label')"
        :description="telegramConnected ? (telegramUsername || t('settings.securityConnected.telegram.connectedFallback')) : t('settings.securityConnected.telegram.detailDisconnected')"
+        iconBoxClass="bg-[#0088cc]/10"
    >
        <template #icon>
            <TelegramIcon class="w-6 h-6 text-[#0088cc]" />
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -242,6 +242,10 @@ export default defineConfig({
        --capra-ramp-3: #ff530f;
        --capra-ramp-4: #e62c6d;
        --capra-ramp-5: #b25aff;
+        --fill1: color-mix(in srgb, var(--colors-primary-DEFAULT) 40%, transparent);
+        --fill2: color-mix(in srgb, var(--colors-primary-DEFAULT) 60%, transparent);
+        --fill3: color-mix(in srgb, var(--colors-primary-DEFAULT) 80%, transparent);
+        --fill4: var(--colors-primary-DEFAULT);
      }
      :focus {
        outline-color: ${context.theme.colors?.primary?.active};