Merge branch 'explanation-box-dismiss' into 'develop'

Use dismiss button instead of menu in fediverse explanation box

See merge request soapbox-pub/soapbox!2480

app/soapbox/components/ui/accordion/accordion.tsx

@@ -21,13 +21,16 @@ interface IAccordion {
   menu?: Menu
   expanded?: boolean
   onToggle?: (value: boolean) => void
+  action?: () => void
+  actionIcon?: string
+  actionLabel?: string
 }
 
 /**
  * Accordion
  * An accordion is a vertically stacked group of collapsible sections.
  */
-const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded = false, onToggle = () => {} }) => {
+const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded = false, onToggle = () => {}, action, actionIcon, actionLabel }) => {
   const intl = useIntl();
 
   const handleToggle = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -35,6 +38,13 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
     e.preventDefault();
   };
 
+  const handleAction = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (!action) return;
+
+    action();
+    e.preventDefault();
+  };
+
   return (
     <div className='rounded-lg bg-white text-gray-900 shadow dark:bg-primary-800 dark:text-gray-100 dark:shadow-none'>
       <button
@@ -53,6 +63,14 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
               src={require('@tabler/icons/dots-vertical.svg')}
             />
           )}
+          {action && actionIcon && (
+            <button onClick={handleAction} title={actionLabel}>
+              <Icon
+                src={actionIcon}
+                className='h-5 w-5 text-gray-700 dark:text-gray-600'
+              />
+            </button>
+          )}
           <Icon
             src={expanded ? require('@tabler/icons/chevron-up.svg') : require('@tabler/icons/chevron-down.svg')}
             className='h-5 w-5 text-gray-700 dark:text-gray-600'

app/soapbox/features/public-timeline/index.tsx

@@ -30,10 +30,6 @@ const CommunityTimeline = () => {
   const explanationBoxExpanded = settings.get('explanationBox');
   const showExplanationBox = settings.get('showExplanationBox');
 
-  const explanationBoxMenu = () => {
-    return [{ text: intl.formatMessage(messages.dismiss), action: dismissExplanationBox }];
-  };
-
   const dismissExplanationBox = () => {
     dispatch(changeSetting(['showExplanationBox'], false));
   };
@@ -66,7 +62,9 @@ const CommunityTimeline = () => {
       {showExplanationBox && <div className='mb-4'>
         <Accordion
           headline={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}
-          menu={explanationBoxMenu()}
+          action={dismissExplanationBox}
+          actionIcon={require('@tabler/icons/x.svg')}
+          actionLabel={intl.formatMessage(messages.dismiss)}
           expanded={explanationBoxExpanded}
           onToggle={toggleExplanationBox}
         >