From 187af8b7d24ecbf1b08a3b3618c61dae0b6db94c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 24 Apr 2022 17:53:03 -0500
Subject: [PATCH] Improve dropdown menu styles

---
 app/soapbox/components/dropdown_menu.tsx      |   8 ++++----
 app/soapbox/components/ui/icon/svg-icon.tsx   |   2 ++
 .../features/account/components/header.js     | Bin 24180 -> 24190 bytes
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/dropdown_menu.tsx b/app/soapbox/components/dropdown_menu.tsx
index e28ea0f9e7..4bd747d0a4 100644
--- a/app/soapbox/components/dropdown_menu.tsx
+++ b/app/soapbox/components/dropdown_menu.tsx
@@ -6,8 +6,8 @@ import { spring } from 'react-motion';
 import Overlay from 'react-overlays/lib/Overlay';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
-import Icon from 'soapbox/components/icon';
 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 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;
 
     return (
-      <li className={classNames('dropdown-menu__item', { destructive })} key={`${text}-${i}`}>
+      <li className={classNames('dropdown-menu__item truncate', { destructive })} key={`${text}-${i}`}>
         <a
           href={href || to || '#'}
           role='button'
@@ -190,8 +190,8 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
           target={newTab ? '_blank' : undefined}
           data-method={isLogout ? 'delete' : undefined}
         >
-          {icon && <Icon src={icon} />}
-          {text}
+          {icon && <SvgIcon src={icon} className='mr-3 h-5 w-5 flex-none' />}
+          <span className='truncate'>{text}</span>
         </a>
       </li>
     );
diff --git a/app/soapbox/components/ui/icon/svg-icon.tsx b/app/soapbox/components/ui/icon/svg-icon.tsx
index 84604150d9..c84e402031 100644
--- a/app/soapbox/components/ui/icon/svg-icon.tsx
+++ b/app/soapbox/components/ui/icon/svg-icon.tsx
@@ -29,6 +29,8 @@ const SvgIcon: React.FC<ISvgIcon> = ({ src, alt, size = 24, className }): JSX.El
       height={size}
       loader={loader}
       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 */}
       {loader}
diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js
index c1d807546920cd7392a0f01dab385471c539cebc..1db5b1dd306055f8073214b362642b8992d84707 100644
GIT binary patch
delta 24
fcmeyehw<MY#tmvQoM}0!6}ox(d8wOKWBi!_iR%fu

delta 14
Vcmeyjhw;lE#tmvQn+;<8m;g8m1}*>q