Merge branch 'styles-' into 'develop'

Federation restrictions page styles

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

app/soapbox/features/federation_restrictions/components/instance_restrictions.js

@@ -50,8 +50,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
 
     if (followers_only) {
       items.push((
-        <Text key='followers_only'>
+        <Text key='followers_only' className='flex items-center gap-2' theme='muted'>
-          <Icon className='mr-2' src={require('@tabler/icons/lock.svg')} />
+          <Icon src={require('@tabler/icons/lock.svg')} />
           <FormattedMessage
             id='federation_restriction.followers_only'
             defaultMessage='Hidden except to followers'
@@ -60,8 +60,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
       ));
     } else if (federated_timeline_removal) {
       items.push((
-        <Text key='federated_timeline_removal'>
+        <Text key='federated_timeline_removal' className='flex items-center gap-2' theme='muted'>
-          <Icon className='mr-2' src={require('@tabler/icons/lock-open.svg')} />
+          <Icon src={require('@tabler/icons/lock-open.svg')} />
           <FormattedMessage
             id='federation_restriction.federated_timeline_removal'
             defaultMessage='Fediverse timeline removal'
@@ -72,8 +72,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
 
     if (fullMediaRemoval) {
       items.push((
-        <Text key='full_media_removal'>
+        <Text key='full_media_removal' className='flex items-center gap-2' theme='muted'>
-          <Icon className='mr-2' src={require('@tabler/icons/photo-off.svg')} />
+          <Icon src={require('@tabler/icons/photo-off.svg')} />
           <FormattedMessage
             id='federation_restriction.full_media_removal'
             defaultMessage='Full media removal'
@@ -82,8 +82,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
       ));
     } else if (partialMediaRemoval) {
       items.push((
-        <Text key='partial_media_removal'>
+        <Text key='partial_media_removal' className='flex items-center gap-2' theme='muted'>
-          <Icon className='mr-2' src={require('@tabler/icons/photo-off.svg')} />
+          <Icon src={require('@tabler/icons/photo-off.svg')} />
           <FormattedMessage
             id='federation_restriction.partial_media_removal'
             defaultMessage='Partial media removal'
@@ -94,8 +94,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
 
     if (!fullMediaRemoval && media_nsfw) {
       items.push((
-        <Text key='media_nsfw'>
+        <Text key='media_nsfw' className='flex items-center gap-2' theme='muted'>
-          <Icon className='mr-2' id='eye-slash' />
+          <Icon id='eye-slash' />
           <FormattedMessage
             id='federation_restriction.media_nsfw'
             defaultMessage='Attachments marked NSFW'
@@ -116,8 +116,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
 
     if (remoteInstance.getIn(['federation', 'reject']) === true) {
       return (
-        <Text>
+        <Text className='flex items-center gap-2' theme='muted'>
-          <Icon className='mr-2' id='times' />
+          <Icon id='times' />
           <FormattedMessage
             id='remote_instance.federation_panel.restricted_message'
             defaultMessage='{siteTitle} blocks all activities from {host}.'
@@ -128,7 +128,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
     } else if (hasRestrictions(remoteInstance)) {
       return [
         (
-          <Text>
+          <Text theme='muted'>
             <FormattedMessage
               id='remote_instance.federation_panel.some_restrictions_message'
               defaultMessage='{siteTitle} has placed some restrictions on {host}.'
@@ -140,8 +140,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
       ];
     } else {
       return (
-        <Text>
+        <Text className='flex items-center gap-2' theme='muted'>
-          <Icon className='mr-2' id='check' />
+          <Icon id='check' />
           <FormattedMessage
             id='remote_instance.federation_panel.no_restrictions_message'
             defaultMessage='{siteTitle} has placed no restrictions on {host}.'
@@ -153,7 +153,11 @@ class InstanceRestrictions extends ImmutablePureComponent {
   }
 
   render() {
-    return <div className='instance-restrictions'>{this.renderContent()}</div>;
+    return (
+      <div className='py-1 pl-4 mb-4 border-solid border-l-[3px] border-gray-300 dark:border-gray-500'>
+        {this.renderContent()}
+      </div>
+    );
   }
 
 }

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', {
+    <div>
-      'restricted-instance--reject': remoteInstance.getIn(['federation', 'reject']),
+      <a href='#' className='flex items-center gap-1 py-2.5 no-underline' onClick={toggleExpanded}>
-      'restricted-instance--expanded': expanded,
+        <Icon src={expanded ? require('@tabler/icons/caret-down.svg') : require('@tabler/icons/caret-right.svg')} />
-    })}
+        <div className={classNames({ 'line-through': remoteInstance.getIn(['federation', 'reject']) })}>
-    >
-      <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'>
           {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
-        <Accordion
+        headline={intl.formatMessage(messages.boxTitle)}
-          headline={intl.formatMessage(messages.boxTitle)}
+        expanded={explanationBoxExpanded}
-          expanded={explanationBoxExpanded}
+        onToggle={toggleExplanationBox}
-          onToggle={toggleExplanationBox}
+      >
-        >
+        {intl.formatMessage(messages.boxMessage, { siteTitle })}
-          {intl.formatMessage(messages.boxMessage, { siteTitle })}
+      </Accordion>
-        </Accordion>
-      </div>
 
-      <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;
-      }
-    }
-  }
-}