Merge branch 'remove-accordian-scss' into 'develop'

Remove 'accordian.scss'

See merge request soapbox-pub/soapbox!1899

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

@@ -2,7 +2,7 @@ import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Text } from 'soapbox/components/ui';
+import { HStack, Icon, Text } from 'soapbox/components/ui';
 import DropdownMenu from 'soapbox/containers/dropdown-menu-container';
 
 import type { Menu } from 'soapbox/components/dropdown-menu';
@@ -20,6 +20,10 @@ interface IAccordion {
   onToggle?: (value: boolean) => void,
 }
 
+/**
+ * Accordion
+ * An accordion is a vertically stacked group of collapsible sections.
+ */
 const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded = false, onToggle = () => {} }) => {
   const intl = useIntl();
 
@@ -29,21 +33,38 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
   };
 
   return (
-    <div className={classNames('accordion', { 'accordion--expanded': expanded })}>
-      {menu && (
-        <div className='accordion__menu'>
-          <DropdownMenu items={menu} src={require('@tabler/icons/dots-vertical.svg')} />
-        </div>
-      )}
+    <div className='bg-white dark:bg-primary-800 text-gray-900 dark:text-gray-100 rounded-lg shadow dark:shadow-none'>
       <button
         type='button'
-        className='accordion__title'
         onClick={handleToggle}
         title={intl.formatMessage(expanded ? messages.collapse : messages.expand)}
+        aria-expanded={expanded}
+        className='px-4 py-3 font-semibold flex items-center justify-between w-full'
       >
-        <Text weight='bold'>{headline}</Text>
+        <span>{headline}</span>
+
+        <HStack alignItems='center' space={2}>
+          {menu && (
+            <DropdownMenu
+              items={menu}
+              src={require('@tabler/icons/dots-vertical.svg')}
+            />
+          )}
+          <Icon
+            src={expanded ? require('@tabler/icons/chevron-up.svg') : require('@tabler/icons/chevron-down.svg')}
+            className='text-gray-700 dark:text-gray-600 h-5 w-5'
+          />
+        </HStack>
       </button>
-      <div className='accordion__content'>
+
+      <div
+        className={
+          classNames({
+            'p-4 rounded-b-lg border-t border-solid border-gray-100 dark:border-primary-900': true,
+            'h-0 hidden': !expanded,
+          })
+        }
+      >
         <Text>{children}</Text>
       </div>
     </div>

app/soapbox/components/ui/index.ts

@@ -1,3 +1,4 @@
+export { default as Accordion } from './accordion/accordion';
 export { default as Avatar } from './avatar/avatar';
 export { default as Banner } from './banner/banner';
 export { default as Button } from './button/button';

app/soapbox/features/admin/components/report.tsx

@@ -7,9 +7,8 @@ import { deactivateUserModal, deleteUserModal } from 'soapbox/actions/moderation
 import snackbar from 'soapbox/actions/snackbar';
 import Avatar from 'soapbox/components/avatar';
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
-import { Button, HStack } from 'soapbox/components/ui';
+import { Accordion, Button, HStack } from 'soapbox/components/ui';
 import DropdownMenu from 'soapbox/containers/dropdown-menu-container';
-import Accordion from 'soapbox/features/ui/components/accordion';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import { makeGetReport } from 'soapbox/selectors';
 

app/soapbox/features/crypto-donate/index.tsx

@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Column, Stack } from 'soapbox/components/ui';
-import Accordion from 'soapbox/features/ui/components/accordion';
+import { Accordion, Column, Stack } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 
 import SiteWallet from './components/site-wallet';

app/soapbox/features/federation-restrictions/index.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import ScrollableList from 'soapbox/components/scrollable-list';
-import Accordion from 'soapbox/features/ui/components/accordion';
+import { Accordion } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 import { makeGetHosts } from 'soapbox/selectors';
 import { federationRestrictionsDisclosed } from 'soapbox/utils/state';

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

@@ -7,8 +7,7 @@ import { connectPublicStream } from 'soapbox/actions/streaming';
 import { expandPublicTimeline } from 'soapbox/actions/timelines';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import SubNavigation from 'soapbox/components/sub-navigation';
-import { Column } from 'soapbox/components/ui';
-import Accordion from 'soapbox/features/ui/components/accordion';
+import { Accordion, Column } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
 
 import PinnedHostsPicker from '../remote-timeline/components/pinned-hosts-picker';

app/soapbox/features/soapbox-config/index.tsx

@@ -7,6 +7,7 @@ import { uploadMedia } from 'soapbox/actions/media';
 import snackbar from 'soapbox/actions/snackbar';
 import List, { ListItem } from 'soapbox/components/list';
 import {
+  Accordion,
   Column,
   CardHeader,
   CardTitle,
@@ -24,8 +25,6 @@ import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
 
-import Accordion from '../ui/components/accordion';
-
 import ColorWithPicker from './components/color-with-picker';
 import CryptoAddressInput from './components/crypto-address-input';
 import FooterLinkInput from './components/footer-link-input';

app/styles/application.scss

@@ -60,7 +60,6 @@
 @import 'components/profile-hover-card';
 @import 'components/filters';
 @import 'components/snackbar';
-@import 'components/accordion';
 @import 'components/admin';
 @import 'components/backups';
 @import 'components/crypto-donate';

app/styles/components/accordion.scss

@@ -1,71 +0,0 @@
-.explanation-box {
-  padding: 5px 20px;
-}
-
-.accordion {
-  @apply text-black dark:text-white bg-gray-100 dark:bg-gray-900;
-  padding: 15px 20px;
-  font-size: 14px;
-  border-radius: 8px;
-  margin: 0;
-  position: relative;
-
-  &__title {
-    font-weight: bold !important;
-    font-size: 16px !important;
-    background: transparent !important;
-    color: var(--primary-text-color) !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    text-transform: none !important;
-    text-align: left !important;
-    display: flex !important;
-    align-items: center;
-    border: 0;
-    width: 100%;
-
-    &::after {
-      @apply text-black dark:text-white;
-      content: '';
-      display: block;
-      font-family: 'Font Awesome 5 Free';
-      font-weight: 900;
-      font-size: 0.8em;
-      padding-left: 0.6em;
-      margin-left: auto;
-    }
-  }
-
-  &__menu {
-    position: absolute;
-    top: 17px;
-    right: 40px;
-  }
-
-  &__content {
-    height: 0;
-    overflow: hidden;
-  }
-
-  &--expanded &__title {
-    margin-bottom: 10px !important;
-
-    &::after {
-      @apply text-black dark:text-white;
-      content: '';
-    }
-  }
-
-  &--expanded &__content {
-    height: auto;
-  }
-
-  a {
-    color: var(--brand-color--hicontrast);
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}

app/styles/components/admin.scss

@@ -111,17 +111,6 @@
     }
   }
 
-  &__statuses .accordion {
-    padding: 10px;
-    margin-bottom: 6px;
-
-    &__title {
-      font-size: 12px !important;
-      font-weight: normal !important;
-      margin-bottom: 0 !important;
-    }
-  }
-
   &__status-content {
     overflow: hidden;
   }

app/styles/components/columns.scss

@@ -719,10 +719,6 @@
   font-size: 20px;
 }
 
-.column .explanation-box {
-  background: var(--foreground-color);
-}
-
 // Pull to refresh
 .columns-area .column {
   .ptr,