Update account dropdown (#505)

* Update Account dropdown * Apply background only when dropdown is open
api3dao · Nov 28, 2024 · 92519b9 · 92519b9
1 parent 7836448
commit 92519b9
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/src/components/dropdown/dropdown.module.scss b/src/components/dropdown/dropdown.module.scss
@@ -41,9 +41,10 @@
 
 .dropdownIcon {
   & > img {
-    width: 20px;
-    height: 20px;
+    width: 24px;
+    height: 24px;
     transition: transform 250ms;
+    margin-right: 8px;
   }
 
   &.open {

diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
@@ -10,6 +10,7 @@ interface DropdownProps {
   icon?: ReactNode;
   alignIcon?: 'start' | 'center' | 'end';
   className?: string;
+  openClassName?: string;
 }
 
 interface DropdownMenuProps {
@@ -46,7 +47,7 @@ export const DropdownMenuItem = ({ children, className, onClick }: DropdownMenuI
   </div>
 );
 
-const Dropdown = ({ children, menu, icon, alignIcon = 'center', className }: DropdownProps) => {
+const Dropdown = ({ children, menu, icon, alignIcon = 'center', className, openClassName }: DropdownProps) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const toggleOpen = () => setOpen(!open);
@@ -70,7 +71,7 @@ const Dropdown = ({ children, menu, icon, alignIcon = 'center', className }: Dro
   }, []);
 
   return (
-    <div className={classNames(styles.dropdown, className)} ref={dropdownRef}>
+    <div className={classNames(styles.dropdown, open && openClassName, className)} ref={dropdownRef}>
       <div
         className={classNames(styles.dropdownButton, {
           [styles.alignStart]: alignIcon === 'start',

diff --git a/src/components/sign-in/sign-in.module.scss b/src/components/sign-in/sign-in.module.scss
@@ -1,29 +1,39 @@
 @import '../../styles/variables.module.scss';
 @import '../../styles/fonts.module.scss';
 
+.accountDropdownOpen {
+  background: linear-gradient(180deg, rgba(250, 250, 250, 0.7) 1.5%, rgba(227, 234, 255, 0) 103.92%), #e3eaff;
+}
+
 .accountDropdown {
   margin-top: 20px;
 
   .accountDropdownMenu {
     border-top: none;
     box-shadow: none;
-    background-color: $color-light-ui;
+    background-color: inherit;
     border-radius: 0 0 8px 8px;
   }
 
   .accountDropdownItem {
     display: flex;
-    gap: 16px;
+    gap: 8px;
     @include font-body-12;
     color: $color-dark-blue-500;
-    padding: 16px 32px;
+    padding: 16px 32px 16px 40px;
     border: none;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
   }
 }
 
 .connectedStatus {
   display: flex;
   align-items: flex-start;
+  padding-left: 8px;
 
   img {
     margin: -20px -20px -20px -20px;
@@ -49,6 +59,7 @@
 .connectedStatusInfo {
   width: 128px;
   margin: 0 8px;
+  margin-bottom: 8px;
 }
 
 .accountName {

diff --git a/src/components/sign-in/sign-in.tsx b/src/components/sign-in/sign-in.tsx
@@ -53,6 +53,7 @@ const ConnectedStatus = ({ dark, position }: Props) => {
       ) : (
         <Dropdown
           className={styles.accountDropdown}
+          openClassName={styles.accountDropdownOpen}
           menu={
             <DropdownMenu position={dark ? 'top' : 'bottom'} className={styles.accountDropdownMenu}>
               <DropdownMenuItem className={styles.accountDropdownItem} onClick={handleDisconnect}>