change 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 />