UI Phenikaa

web-server/public/js/app.js

@@ -2,6 +2,64 @@
   const body = document.body;
   const menuButton = document.getElementById('mobileMenuBtn');
   const sidebarBackdrop = document.getElementById('sidebarBackdrop');
+  const FLUENT_ICON_FILES = Object.freeze({
+    add: 'add_20_regular.svg',
+    add_box: 'box_24_regular.svg',
+    apps: 'apps_24_regular.svg',
+    archive: 'archive_24_regular.svg',
+    attach_file: 'attach_20_regular.svg',
+    campaign: 'megaphone_20_regular.svg',
+    check_circle: 'checkmark_circle_20_filled.svg',
+    close: 'dismiss_20_regular.svg',
+    dashboard: 'grid_24_regular.svg',
+    database_off: 'database_warning_20_regular.svg',
+    delete: 'delete_20_regular.svg',
+    deployed_code: 'cube_24_regular.svg',
+    download: 'arrow_download_20_regular.svg',
+    draft: 'document_24_regular.svg',
+    edit: 'edit_20_regular.svg',
+    error: 'error_circle_20_filled.svg',
+    forward_to_inbox: 'mail_arrow_forward_20_regular.svg',
+    group: 'people_24_regular.svg',
+    inventory_2: 'box_24_regular.svg',
+    link_off: 'link_dismiss_20_regular.svg',
+    login: 'arrow_enter_20_regular.svg',
+    logout: 'sign_out_20_regular.svg',
+    mark_email_unread: 'mail_unread_24_regular.svg',
+    memory: 'memory_16_regular.svg',
+    menu: 'navigation_20_regular.svg',
+    notifications: 'alert_20_regular.svg',
+    notifications_none: 'alert_off_20_regular.svg',
+    person_add: 'person_add_20_regular.svg',
+    precision_manufacturing: 'bot_24_filled.svg',
+    save: 'save_20_regular.svg',
+    search_off: 'search_24_regular.svg',
+    send: 'send_20_regular.svg',
+    stars: 'star_20_filled.svg',
+    swap_horiz: 'arrow_swap_20_regular.svg',
+    sync: 'arrow_sync_20_regular.svg',
+    upgrade: 'arrow_up_20_regular.svg',
+    upload: 'arrow_upload_20_regular.svg',
+    upload_file: 'document_arrow_up_24_regular.svg',
+    visibility: 'eye_20_regular.svg',
+    warning: 'warning_20_filled.svg'
+  });
+
+  function applyFluentIcon(element, iconName) {
+    if (!element) return;
+    const fileName = FLUENT_ICON_FILES[iconName] || 'question_20_regular.svg';
+    element.classList.remove('material-symbols-outlined');
+    element.classList.add('fluent-icon');
+    element.style.setProperty('--fluent-icon-url', `url("/vendor/fluent-icons/${fileName}")`);
+    element.setAttribute('aria-hidden', 'true');
+    element.textContent = '';
+  }
+
+  function hydrateFluentIcons(root) {
+    root.querySelectorAll('.material-symbols-outlined').forEach((element) => {
+      applyFluentIcon(element, element.textContent.trim());
+    });
+  }
 
   function initNotiflix() {
     if (!window.Notiflix) return;
@@ -11,8 +69,8 @@
       position: 'right-top',
       distance: '16px',
       timeout: 2600,
-      borderRadius: '8px',
-      fontFamily: 'Inter, sans-serif',
+      borderRadius: '4px',
+      fontFamily: 'Montserrat Variable, Montserrat, sans-serif',
       fontSize: '13px',
       messageMaxLength: 180,
       clickToClose: true,
@@ -21,35 +79,35 @@
       useIcon: true,
       zindex: 5000,
       success: {
-        background: '#067647',
+        background: '#2e7d32',
         textColor: '#ffffff'
       },
       failure: {
-        background: '#b42318',
+        background: '#c62828',
         textColor: '#ffffff'
       },
       warning: {
-        background: '#b54708',
+        background: '#9a5b00',
         textColor: '#ffffff'
       },
       info: {
-        background: '#3755c3',
+        background: '#223771',
         textColor: '#ffffff'
       }
     });
 
     window.Notiflix.Confirm.init({
       width: '360px',
-      borderRadius: '8px',
-      fontFamily: 'Inter, sans-serif',
-      titleColor: '#111827',
+      borderRadius: '4px',
+      fontFamily: 'Montserrat Variable, Montserrat, sans-serif',
+      titleColor: '#161824',
       titleFontSize: '16px',
-      messageColor: '#475569',
+      messageColor: '#565b70',
       messageFontSize: '13px',
-      okButtonBackground: '#3755c3',
+      okButtonBackground: '#223771',
       okButtonColor: '#ffffff',
-      cancelButtonBackground: '#e2e8f0',
-      cancelButtonColor: '#334155',
+      cancelButtonBackground: '#eeedf6',
+      cancelButtonColor: '#3c4054',
       backOverlayColor: 'rgba(15, 23, 42, 0.42)',
       zindex: 5001,
       cssAnimationStyle: 'zoom'
@@ -701,9 +759,7 @@
         const icon = document.createElement('span');
         icon.className = 'notification-item-icon';
         const iconGlyph = document.createElement('span');
-        iconGlyph.className = 'material-symbols-outlined';
-        iconGlyph.setAttribute('aria-hidden', 'true');
-        iconGlyph.textContent = getNotificationIcon(notification);
+        applyFluentIcon(iconGlyph, getNotificationIcon(notification));
         icon.appendChild(iconGlyph);
 
         const copy = document.createElement('span');
@@ -926,6 +982,7 @@
     });
   }
 
+  hydrateFluentIcons(document);
   initNotiflix();
   initFileDropzones();
   initRegistrationUniqueChecks();