Merge branch 'styles-' into 'develop'

Federation restrictions page styles

See merge request soapbox-pub/soapbox-fe!1622

app/soapbox/features/federation_restrictions/components/restricted_instance.tsx

@@ -24,20 +24,19 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
   };
 
   return (
-    <div className={classNames('restricted-instance', {
-      'restricted-instance--reject': remoteInstance.getIn(['federation', 'reject']),
-      'restricted-instance--expanded': expanded,
-    })}
-    >
-      <a href='#' className='restricted-instance__header' onClick={toggleExpanded}>
-        <div className='restricted-instance__icon'>
-          <Icon src={expanded ? require('@tabler/icons/caret-down.svg') : require('@tabler/icons/caret-right.svg')} />
-        </div>
-        <div className='restricted-instance__host'>
+    <div>
+      <a href='#' className='flex items-center gap-1 py-2.5 no-underline' onClick={toggleExpanded}>
+        <Icon src={expanded ? require('@tabler/icons/caret-down.svg') : require('@tabler/icons/caret-right.svg')} />
+        <div className={classNames({ 'line-through': remoteInstance.getIn(['federation', 'reject']) })}>
           {remoteInstance.get('host')}
         </div>
       </a>
-      <div className='restricted-instance__restrictions'>
+      <div
+        className={classNames({
+          'h-0 overflow-hidden': !expanded,
+          'h-auto': expanded,
+        })}
+      >
         <InstanceRestrictions remoteInstance={remoteInstance} />
       </div>
     </div>

app/soapbox/features/federation_restrictions/index.tsx

@@ -40,17 +40,15 @@ const FederationRestrictions = () => {
 
   return (
     <Column icon='gavel' label={intl.formatMessage(messages.heading)}>
-      <div className='explanation-box'>
-        <Accordion
-          headline={intl.formatMessage(messages.boxTitle)}
-          expanded={explanationBoxExpanded}
-          onToggle={toggleExplanationBox}
-        >
-          {intl.formatMessage(messages.boxMessage, { siteTitle })}
-        </Accordion>
-      </div>
+      <Accordion
+        headline={intl.formatMessage(messages.boxTitle)}
+        expanded={explanationBoxExpanded}
+        onToggle={toggleExplanationBox}
+      >
+        {intl.formatMessage(messages.boxMessage, { siteTitle })}
+      </Accordion>
 
-      <div className='federation-restrictions'>
+      <div className='pt-4'>
         <ScrollableList emptyMessage={intl.formatMessage(emptyMessage, { siteTitle })}>
           {hosts.map((host) => <RestrictedInstance key={host} host={host} />)}
         </ScrollableList>

app/styles/application.scss

@@ -67,7 +67,6 @@
 @import 'components/backups';
 @import 'components/crypto-donate';
 @import 'components/remote-timeline';
-@import 'components/federation-restrictions';
 @import 'components/aliases';
 @import 'components/icon';
 @import 'components/radio-button';

app/styles/components/federation-restrictions.scss

@@ -1,69 +0,0 @@
-.federation-restrictions {
-  padding-top: 15px;
-
-  .slist .item-list > article {
-    padding: 0 20px;
-
-    &:last-child {
-      padding-bottom: 15px;
-    }
-  }
-}
-
-.restricted-instance {
-  &__header {
-    padding: 10px 0;
-    display: flex;
-    text-decoration: none;
-    color: var(--primary-text-color);
-  }
-
-  &__icon {
-    width: 16px;
-
-    .svg-icon svg {
-      stroke-width: 1.3;
-    }
-  }
-
-  &--expanded &__icon i.fa {
-    transform: translateX(-3px);
-  }
-
-  &--reject &__host {
-    text-decoration: line-through;
-  }
-
-  &__restrictions {
-    height: 0;
-    overflow: hidden;
-  }
-
-  &--expanded &__restrictions {
-    height: auto;
-  }
-
-  .instance-restrictions {
-    padding: 5px 0 5px 15px;
-    border-left: 3px solid hsla(var(--primary-text-color_hsl), 0.4);
-    color: var(--primary-text-color--faint);
-    margin-bottom: 15px;
-
-    .federation-restriction {
-      padding: 7px 0;
-      font-size: 14px;
-    }
-
-    &__message {
-      margin-bottom: 10px;
-
-      i.fa {
-        padding-right: 10px;
-      }
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-}