bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve dropdown menu styles

Browse source
This commit is contained in:
Alex Gleason 2022-04-24 17:53:03 -05:00
parent 73f086c680
commit 187af8b7d2
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/soapbox/components/dropdown_menu.tsx
View file

@ -6,8 +6,8 @@ import { spring } from 'react-motion';
import Overlay from 'react-overlays/lib/Overlay'; import Overlay from 'react-overlays/lib/Overlay';
import { withRouter, RouteComponentProps } from 'react-router-dom'; import { withRouter, RouteComponentProps } from 'react-router-dom';
import Icon from 'soapbox/components/icon';
import { IconButton } from 'soapbox/components/ui'; import { IconButton } from 'soapbox/components/ui';
import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
import Motion from 'soapbox/features/ui/util/optional_motion'; import Motion from 'soapbox/features/ui/util/optional_motion';
import type { Status } from 'soapbox/types/entities'; import type { Status } from 'soapbox/types/entities';
@ -177,7 +177,7 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
const { text, href, to, newTab, isLogout, icon, destructive } = option; const { text, href, to, newTab, isLogout, icon, destructive } = option;
return ( return (
<li className={classNames('dropdown-menu__item', { destructive })} key={`${text}-${i}`}> <li className={classNames('dropdown-menu__item truncate', { destructive })} key={`${text}-${i}`}>
<a <a
href={href || to || '#'} href={href || to || '#'}
role='button' role='button'
@ -190,8 +190,8 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
target={newTab ? '_blank' : undefined} target={newTab ? '_blank' : undefined}
data-method={isLogout ? 'delete' : undefined} data-method={isLogout ? 'delete' : undefined}
> >
{icon && <Icon src={icon} />} {icon && <SvgIcon src={icon} className='mr-3 h-5 w-5 flex-none' />}
{text} <span className='truncate'>{text}</span>
</a> </a>
</li> </li>
); );

2
app/soapbox/components/ui/icon/svg-icon.tsx
View file

@ -29,6 +29,8 @@ const SvgIcon: React.FC<ISvgIcon> = ({ src, alt, size = 24, className }): JSX.El
height={size} height={size}
loader={loader} loader={loader}
data-testid='svg-icon' data-testid='svg-icon'
// The cache causes bugs, and the ServiceWorker already caches icons.
cacheRequests={false}
> >
{/* If the fetch fails, fall back to displaying the loader */} {/* If the fetch fails, fall back to displaying the loader */}
{loader} {loader}

2
app/soapbox/features/account/components/header.js
View file

@ -630,7 +630,7 @@ class Header extends ImmutablePureComponent {
return ( return (
<Comp key={idx} {...itemProps} className='group'> <Comp key={idx} {...itemProps} className='group'>
<div className='flex items-center'> <div className='flex items-center'>
<SvgIcon src={menuItem.icon} className='mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500' /> <SvgIcon src={menuItem.icon} className='mr-3 h-5 w-5 text-gray-400 flex-none group-hover:text-gray-500' />
<div className='truncate'>{menuItem.text}</div> <div className='truncate'>{menuItem.text}</div>
</div> </div>