diff --git a/CHANGELOG.md b/CHANGELOG.md index 3ea0b8081..2b0c2c113 100644 --- 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 index f8c412b8b..38741cbbc 100644 --- a/src/components/dropdown/dropdown.tsx +++ b/src/components/dropdown/dropdown.tsx @@ -61,7 +61,7 @@ export const Dropdown: React.FC = ({ - + {listItems?.map((li, index) => ( {li.component} @@ -75,9 +75,14 @@ export const Dropdown: React.FC = ({ }; 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 index 4e990f601..d32b8750e 100644 --- a/src/components/headers/headerDao.tsx +++ b/src/components/headers/headerDao.tsx @@ -109,7 +109,7 @@ export const HeaderDao: React.FC = ({ }, { component: ( - onCopy?.(`https://${daoUrl}`)}> + onCopy?.(`https://${daoUrl}`)}> {shortenDaoUrl(daoUrl)} @@ -138,6 +138,7 @@ export const HeaderDao: React.FC = ({ {daoName} ((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' - }`, -}))``; +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: