Remove 'accordian.scss'

app/soapbox/features/ui/components/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';
@@ -29,21 +29,38 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
   };
 
   return (
-    <div className={classNames('accordion', { 'accordion--expanded': expanded })}>
+    <div className='bg-white dark:bg-primary-800 text-gray-900 dark:text-gray-100 rounded-lg shadow dark:shadow-none'>
-      {menu && (
-        <div className='accordion__menu'>
-          <DropdownMenu items={menu} src={require('@tabler/icons/dots-vertical.svg')} />
-        </div>
-      )}
       <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/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,