Merge branch 'remote-timeline-styles' into 'develop'

Remote timeline styles

Closes #1182

See merge request soapbox-pub/soapbox!1952

app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
-import { Text } from 'soapbox/components/ui';
+import { HStack, Stack, Text } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 
 import type { Map as ImmutableMap } from 'immutable';
@@ -16,6 +16,23 @@ const hasRestrictions = (remoteInstance: ImmutableMap<string, any>): boolean =>
     .reduce((acc: boolean, value: boolean) => acc || value, false);
 };
 
+interface IRestriction {
+  icon: string,
+  children: React.ReactNode,
+}
+
+const Restriction: React.FC<IRestriction> = ({ icon, children }) => {
+  return (
+    <HStack space={3}>
+      <Icon className='flex-none w-5 h-5' src={icon} />
+
+      <Text theme='muted'>
+        {children}
+      </Text>
+    </HStack>
+  );
+};
+
 interface IInstanceRestrictions {
   remoteInstance: ImmutableMap<string, any>,
 }
@@ -40,57 +57,52 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (followers_only) {
       items.push((
-        <Text key='followers_only' className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/lock.svg')} />
+        <Restriction key='followersOnly' icon={require('@tabler/icons/lock.svg')}>
           <FormattedMessage
             id='federation_restriction.followers_only'
             defaultMessage='Hidden except to followers'
           />
-        </Text>
+        </Restriction>
       ));
     } else if (federated_timeline_removal) {
       items.push((
-        <Text key='federated_timeline_removal' className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/lock-open.svg')} />
+        <Restriction key='federatedTimelineRemoval' icon={require('@tabler/icons/lock-open.svg')}>
           <FormattedMessage
             id='federation_restriction.federated_timeline_removal'
             defaultMessage='Fediverse timeline removal'
           />
-        </Text>
+        </Restriction>
       ));
     }
 
     if (fullMediaRemoval) {
       items.push((
-        <Text key='full_media_removal' className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/photo-off.svg')} />
+        <Restriction key='fullMediaRemoval' icon={require('@tabler/icons/photo-off.svg')}>
           <FormattedMessage
             id='federation_restriction.full_media_removal'
             defaultMessage='Full media removal'
           />
-        </Text>
+        </Restriction>
       ));
     } else if (partialMediaRemoval) {
       items.push((
-        <Text key='partial_media_removal' className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/photo-off.svg')} />
+        <Restriction key='partialMediaRemoval' icon={require('@tabler/icons/photo-off.svg')}>
           <FormattedMessage
             id='federation_restriction.partial_media_removal'
             defaultMessage='Partial media removal'
           />
-        </Text>
+        </Restriction>
       ));
     }
 
     if (!fullMediaRemoval && media_nsfw) {
       items.push((
-        <Text key='media_nsfw' className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/eye-off.svg')} />
+        <Restriction key='mediaNsfw' icon={require('@tabler/icons/eye-off.svg')}>
           <FormattedMessage
             id='federation_restriction.media_nsfw'
             defaultMessage='Attachments marked NSFW'
           />
-        </Text>
+        </Restriction>
       ));
     }
 
@@ -105,46 +117,45 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (remoteInstance.getIn(['federation', 'reject']) === true) {
       return (
-        <Text className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/x.svg')} />
+        <Restriction icon={require('@tabler/icons/shield-x.svg')}>
           <FormattedMessage
             id='remote_instance.federation_panel.restricted_message'
             defaultMessage='{siteTitle} blocks all activities from {host}.'
             values={{ host, siteTitle }}
           />
-        </Text>
+        </Restriction>
       );
     } else if (hasRestrictions(remoteInstance)) {
-      return [
-        (
-          <Text theme='muted'>
+      return (
+        <>
+          <Restriction icon={require('@tabler/icons/shield-lock.svg')}>
             <FormattedMessage
               id='remote_instance.federation_panel.some_restrictions_message'
               defaultMessage='{siteTitle} has placed some restrictions on {host}.'
               values={{ host, siteTitle }}
             />
-          </Text>
-        ),
-        renderRestrictions(),
-      ];
+          </Restriction>
+
+          {renderRestrictions()}
+        </>
+      );
     } else {
       return (
-        <Text className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/check.svg')} />
+        <Restriction icon={require('@tabler/icons/shield-check.svg')}>
           <FormattedMessage
             id='remote_instance.federation_panel.no_restrictions_message'
             defaultMessage='{siteTitle} has placed no restrictions on {host}.'
             values={{ host, siteTitle }}
           />
-        </Text>
+        </Restriction>
       );
     }
   };
 
   return (
-    <div className='py-1 pl-4 mb-4 border-solid border-l-[3px] border-gray-300 dark:border-gray-500'>
+    <Stack space={3}>
       {renderContent()}
-    </div>
+    </Stack>
   );
 };
 

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

@@ -5,8 +5,8 @@ import { useHistory } from 'react-router-dom';
 import { connectRemoteStream } from 'soapbox/actions/streaming';
 import { expandRemoteTimeline } from 'soapbox/actions/timelines';
 import IconButton from 'soapbox/components/icon-button';
-import { HStack, Text } from 'soapbox/components/ui';
-import Column from 'soapbox/features/ui/components/column';
+import SubNavigation from 'soapbox/components/sub-navigation';
+import { Column, HStack, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useSettings } from 'soapbox/hooks';
 
 import Timeline from '../ui/components/timeline';
@@ -14,7 +14,7 @@ import Timeline from '../ui/components/timeline';
 import PinnedHostsPicker from './components/pinned-hosts-picker';
 
 const messages = defineMessages({
-  title: { id: 'column.remote', defaultMessage: 'Federated timeline' },
+  heading: { id: 'column.remote', defaultMessage: 'Federated timeline' },
 });
 
 interface IRemoteTimeline {
@@ -65,18 +65,26 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
   }, [onlyMedia]);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} heading={instance} transparent withHeader={false}>
-      {instance && <PinnedHostsPicker host={instance} />}
-      {!pinned && <HStack className='mb-4 px-2' space={2}>
-        <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleCloseClick} />
-        <Text>
-          <FormattedMessage
-            id='remote_timeline.filter_message'
-            defaultMessage='You are viewing the timeline of {instance}.'
-            values={{ instance }}
-          />
-        </Text>
-      </HStack>}
+    <Column label={intl.formatMessage(messages.heading)} transparent withHeader={false}>
+      <div className='px-4 pt-4 sm:p-0'>
+        <SubNavigation message={instance} />
+
+        {instance && <PinnedHostsPicker host={instance} />}
+
+        {!pinned && (
+          <HStack className='mb-4 px-2' space={2}>
+            <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleCloseClick} />
+            <Text>
+              <FormattedMessage
+                id='remote_timeline.filter_message'
+                defaultMessage='You are viewing the timeline of {instance}.'
+                values={{ instance }}
+              />
+            </Text>
+          </HStack>
+        )}
+      </div>
+
       <Timeline
         scrollKey={`${timelineId}_${instance}_timeline`}
         timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`}

app/soapbox/features/ui/components/modals/edit-federation-modal.tsx

@@ -1,17 +1,15 @@
 import { Map as ImmutableMap } from 'immutable';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import Toggle from 'react-toggle';
 
 import { updateMrf } from 'soapbox/actions/mrf';
 import snackbar from 'soapbox/actions/snackbar';
-import { HStack, Modal, Stack, Text } from 'soapbox/components/ui';
-import { SimpleForm } from 'soapbox/features/forms';
+import List, { ListItem } from 'soapbox/components/list';
+import { Modal } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { makeGetRemoteInstance } from 'soapbox/selectors';
 
-const getRemoteInstance = makeGetRemoteInstance();
-
 const messages = defineMessages({
   mediaRemoval: { id: 'edit_federation.media_removal', defaultMessage: 'Strip media' },
   forceNsfw: { id: 'edit_federation.force_nsfw', defaultMessage: 'Force attachments to be marked sensitive' },
@@ -31,6 +29,7 @@ const EditFederationModal: React.FC<IEditFederationModal> = ({ host, onClose })
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
+  const getRemoteInstance = useCallback(makeGetRemoteInstance(), []);
   const remoteInstance = useAppSelector(state => getRemoteInstance(state, host));
 
   const [data, setData] = useState(ImmutableMap<string, any>());
@@ -82,74 +81,56 @@ const EditFederationModal: React.FC<IEditFederationModal> = ({ host, onClose })
       confirmationAction={handleSubmit}
       confirmationText={intl.formatMessage(messages.save)}
     >
-      <SimpleForm onSubmit={handleSubmit}>
-        <Stack space={2}>
-          <HStack space={2} alignItems='center'>
-            <Toggle
-              checked={reject}
-              onChange={handleDataChange('reject')}
-              icons={false}
-              id='reject'
-            />
+      <List>
+        <ListItem label={<FormattedMessage id='edit_federation.reject' defaultMessage='Reject all activities' />}>
+          <Toggle
+            checked={reject}
+            onChange={handleDataChange('reject')}
+            icons={false}
+            id='reject'
+          />
+        </ListItem>
 
-            <Text theme='muted' tag='label' size='sm' htmlFor='reject'>
-              <FormattedMessage id='edit_federation.reject' defaultMessage='Reject all activities' />
-            </Text>
-          </HStack>
-          <HStack space={2} alignItems='center'>
-            <Toggle
-              checked={fullMediaRemoval}
-              onChange={handleMediaRemoval}
-              icons={false}
-              id='media_removal'
-              disabled={reject}
-            />
+        <ListItem label={<FormattedMessage id='edit_federation.media_removal' defaultMessage='Strip media' />}>
+          <Toggle
+            checked={fullMediaRemoval}
+            onChange={handleMediaRemoval}
+            icons={false}
+            id='media_removal'
+            disabled={reject}
+          />
+        </ListItem>
 
-            <Text theme='muted' tag='label' size='sm' htmlFor='media_removal'>
-              <FormattedMessage id='edit_federation.media_removal' defaultMessage='Strip media' />
-            </Text>
-          </HStack>
-          <HStack space={2} alignItems='center'>
-            <Toggle
-              checked={media_nsfw}
-              onChange={handleDataChange('media_nsfw')}
-              icons={false}
-              id='media_nsfw'
-              disabled={reject || media_removal}
-            />
+        <ListItem label={<FormattedMessage id='edit_federation.force_nsfw' defaultMessage='Force attachments to be marked sensitive' />}>
+          <Toggle
+            checked={media_nsfw}
+            onChange={handleDataChange('media_nsfw')}
+            icons={false}
+            id='media_nsfw'
+            disabled={reject || media_removal}
+          />
+        </ListItem>
 
-            <Text theme='muted' tag='label' size='sm' htmlFor='media_nsfw'>
-              <FormattedMessage id='edit_federation.force_nsfw' defaultMessage='Force attachments to be marked sensitive' />
-            </Text>
-          </HStack>
-          <HStack space={2} alignItems='center'>
-            <Toggle
-              checked={followers_only}
-              onChange={handleDataChange('followers_only')}
-              icons={false}
-              id='followers_only'
-              disabled={reject}
-            />
+        <ListItem label={<FormattedMessage id='edit_federation.followers_only' defaultMessage='Hide posts except to followers' />}>
+          <Toggle
+            checked={followers_only}
+            onChange={handleDataChange('followers_only')}
+            icons={false}
+            id='followers_only'
+            disabled={reject}
+          />
+        </ListItem>
 
-            <Text theme='muted' tag='label' size='sm' htmlFor='followers_only'>
-              <FormattedMessage id='edit_federation.followers_only' defaultMessage='Hide posts except to followers' />
-            </Text>
-          </HStack>
-          <HStack space={2} alignItems='center'>
-            <Toggle
-              checked={federated_timeline_removal}
-              onChange={handleDataChange('federated_timeline_removal')}
-              icons={false}
-              id='federated_timeline_removal'
-              disabled={reject || followers_only}
-            />
-
-            <Text theme='muted' tag='label' size='sm' htmlFor='federated_timeline_removal'>
-              <FormattedMessage id='edit_federation.unlisted' defaultMessage='Force posts unlisted' />
-            </Text>
-          </HStack>
-        </Stack>
-      </SimpleForm>
+        <ListItem label={<FormattedMessage id='edit_federation.unlisted' defaultMessage='Force posts unlisted' />}>
+          <Toggle
+            checked={federated_timeline_removal}
+            onChange={handleDataChange('federated_timeline_removal')}
+            icons={false}
+            id='federated_timeline_removal'
+            disabled={reject || followers_only}
+          />
+        </ListItem>
+      </List>
     </Modal>
   );
 };