Fix: Header DAO dropdown (#36)

aragon · Oct 12, 2023 · fe46287 · fe46287
1 parent fc0f7a2
commit fe46287
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+-   Updated `HeaderDao` dropdown item styling
+-   Updated `Dropdown` `:hover:focus` styling
+
 ## [0.3.0] - 2023-10-10
 
 ### Changed

diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
@@ -61,7 +61,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
             </DropdownMenu.Trigger>
 
             <StyledContent {...rest}>
-                <DropdownMenu.Group className="space-y-0.5">
+                <DropdownMenu.Group className="flex flex-col gap-y-0.75">
                     {listItems?.map((li, index) => (
                         <StyledItem key={index} onSelect={li.callback}>
                             {li.component}
@@ -75,9 +75,14 @@ export const Dropdown: React.FC<DropdownProps> = ({
 };
 
 const StyledContent = styled(DropdownMenu.Content).attrs({
-    className: 'bg-ui-0 rounded-lg p-2 shadow-xl' as string | undefined,
+    className: 'bg-ui-0 rounded-xl p-1 shadow-xl' as string,
 })``;
 
 const StyledItem = styled(DropdownMenu.Item).attrs({
-    className: 'rounded-xl focus-visible:outline-primary',
-})``;
+    className: 'rounded-xl outline-none focus:outline-none focus:ring focus:ring-primary-200',
+})`
+    &:hover:focus {
+        outline: none;
+        box-shadow: none;
+    }
+`;
diff --git a/src/components/headers/headerDao.tsx b/src/components/headers/headerDao.tsx
@@ -109,7 +109,7 @@ export const HeaderDao: React.FC<HeaderDaoProps> = ({
             },
             {
                 component: (
-                    <CredentialsDropdownItem key={3} isLast onClick={() => onCopy?.(`https://${daoUrl}`)}>
+                    <CredentialsDropdownItem key={3} onClick={() => onCopy?.(`https://${daoUrl}`)}>
                         {shortenDaoUrl(daoUrl)}
                         <StyledCopyIcon />
                     </CredentialsDropdownItem>
@@ -138,6 +138,7 @@ export const HeaderDao: React.FC<HeaderDaoProps> = ({
                     <Title>{daoName}</Title>
 
                     <Dropdown
+                        className="w-30"
                         align="start"
                         trigger={
                             <CredentialsDropdownTrigger
@@ -295,15 +296,9 @@ const ActionWrapper = styled.div.attrs({
         'flex items-center tablet:space-x-3 justify-between tablet:justify-start w-full tablet:w-max space-y-3 tablet:space-y-0',
 })``;
 
-type CredentialsDropdownItemProps = {
-    isLast?: boolean;
-};
-
-const CredentialsDropdownItem = styled.div.attrs<CredentialsDropdownItemProps>((props) => ({
-    className: `flex items-center justify-between gap-1.5 py-1 font-semibold ft-text-base text-ui-600 hover:text-ui-400 ${
-        props.isLast ? '' : 'mb-1'
-    }`,
-}))<CredentialsDropdownItemProps>``;
+const CredentialsDropdownItem = styled.div.attrs({
+    className: `flex text-ui-600 items-center justify-between gap-1.5 py-1.5 font-semibold ft-text-base hover:bg-primary-50 px-2 rounded-xl hover:text-primary-400`,
+})``;
 
 const CredentialsDropdownTrigger = styled(Link).attrs({
     className: