Merge pull request #8641 from weseek/imprv/personal-dropdown-style

imprv: PersonalDropdown style

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

@@ -1,5 +1,23 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
+.btn-personal-dropdown :global {
+  img {
+    border: 2px solid var(--bs-border-color-translucent);
+  }
+}
+
+.personal-dropdown-header :global {
+  .item-text-email {
+    font-size: 10.5px;
+  }
+}
+
+.personal-dropdown-menu :global {
+  --bs-dropdown-font-size: 14px;
+}
+
+
+// == Colors
 @include bs.color-mode(light) {
   .personal-dropdown-header :global {
     color: var(--bs-gray-600);
@@ -21,13 +39,3 @@
     color: var(--bs-gray-500);
   }
 }
-
-.personal-dropdown-menu :global {
-  --bs-dropdown-font-size: 14px;
-}
-
-.personal-dropdown-header :global {
-  .item-text-email {
-    font-size: 10.5px;
-  }
-}

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

@@ -45,7 +45,7 @@ export const PersonalDropdown = (): JSX.Element => {
         direction="end"
       >
         <DropdownToggle
-          className="btn btn-primary"
+          className={`btn btn-primary ${styles['btn-personal-dropdown']} opacity-100`}
           data-testid="personal-dropdown-button"
         >
           <UserPicture user={currentUser} noLink noTooltip />

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

@@ -7,13 +7,11 @@
   .btn {
     @extend %btn-basis;
 
-    span {
-      opacity: 0.6;
+    opacity: 0.6;
 
-      &:hover,
-      &:focus {
-        opacity: 0.8;
-      }
+    &:hover,
+    &:focus {
+      opacity: 0.8;
     }
   }
 }