style: override bootstrap variables for font size

apps/app/src/components/Sidebar/SidebarNav/PersonalDropdown.module.scss

@@ -2,15 +2,12 @@
 
 @include bs.color-mode(light) {
   .personal-dropdown-header :global {
-    --bs-heading-color: var(--bs-gray-600);
-    --bs-dropdown-header-color: var(--bs-gray-600);
+    color: var(--bs-gray-600);
   }
 
   .personal-dropdown-item :global {
-    .item-icon,
-    .item-text {
-      color: var(--bs-gray-600);
-    }
+    --bs-link-color-rgb:var(--bs-gray-600);
+    color: var(--bs-gray-600);
   }
 }
 
@@ -28,17 +25,12 @@
   }
 }
 
+.personal-dropdown-menu :global {
+  --bs-dropdown-font-size: 14px;
+}
+
 .personal-dropdown-header :global {
-  .item-text {
-    font-size: 12px;
-  }
   .item-text-email {
     font-size: 10.5px;
   }
 }
-
-.personal-dropdown-item :global {
-  .item-text {
-    font-size: 14px;
-  }
-}

apps/app/src/components/Sidebar/SidebarNav/PersonalDropdown.tsx

@@ -54,15 +54,16 @@ export const PersonalDropdown = (): JSX.Element => {
         <DropdownMenu
           container="body"
           data-testid="personal-dropdown-menu"
+          className={styles['personal-dropdown-menu']}
         >
-          <DropdownItem className={styles['personal-dropdown-header']} header>
+          <DropdownItem className={styles['personal-dropdown-header']}>
             <div className="mt-2 mb-3">
               <UserPicture user={currentUser} size="lg" noLink noTooltip />
             </div>
             <h5 className="ms-1 fs-6">{currentUser.name}</h5>
             <div className="d-flex align-items-center my-2">
-              <span className="material-symbols-outlined me-1 pb-0 fs-6">person</span>
-              <span className="item-text fs-7">{currentUser.username}</span>
+              <small className="material-symbols-outlined me-1 pb-0 fs-6">person</small>
+              <span>{currentUser.username}</span>
             </div>
             <div className="d-flex align-items-center">
               <span className="material-symbols-outlined me-1 pb-0 fs-6">mail</span>