enhance: Redesign layout for public (and remote) timeline

null2264 · Oct 22, 2023 · 66bcdb6 · 66bcdb6
1 parent 3204413
commit 66bcdb6
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 69 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,7 +9,7 @@
 - UX: fetch account when mention component is rendering
 - UX: "missing" account now show missing image icon as avatar next to user mention
 - UI: avatar size adjust depending on status' text size (kinda, currently only check for large text size)
-- UI: changed home timeline layout to border instead of space
+- UI: make home, fediverse, and remote (instance) timeline layout more consistent with the other pages
 
 ## 2023.10.3
 - UI: highlight mentions

diff --git a/src/soapbox/features/public-timeline/index.tsx b/src/soapbox/features/public-timeline/index.tsx
@@ -6,7 +6,7 @@ import { changeSetting } from 'soapbox/actions/settings';
 import { expandPublicTimeline } from 'soapbox/actions/timelines';
 import { usePublicStream } from 'soapbox/api/hooks';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import { Accordion, Column } from 'soapbox/components/ui';
+import { Accordion, Card, Column } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch, useInstance, useSettings } from 'soapbox/hooks';
 
 import PinnedHostsPicker from '../remote-timeline/components/pinned-hosts-picker';
@@ -54,47 +54,52 @@ const CommunityTimeline = () => {
   }, [onlyMedia]);
 
   return (
-    <Column className='-mt-3 sm:mt-0' label={intl.formatMessage(messages.title)} transparent>
+    <>
       <PinnedHostsPicker />
 
-      {showExplanationBox && <div className='mb-4'>
-        <Accordion
-          headline={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}
-          action={dismissExplanationBox}
-          actionIcon={require('@tabler/icons/x.svg')}
-          actionLabel={intl.formatMessage(messages.dismiss)}
-          expanded={explanationBoxExpanded}
-          onToggle={toggleExplanationBox}
-        >
-          <FormattedMessage
-            id='fediverse_tab.explanation_box.explanation'
-            defaultMessage='{site_title} is part of the Fediverse, a social network made up of thousands of independent social media sites (aka "servers"). The posts you see here are from 3rd-party servers. You have the freedom to engage with them, or to block any server you don&apos;t like. Pay attention to the full username after the second @ symbol to know which server a post is from. To see only {site_title} posts, visit {local}.'
-            values={{
-              site_title: instance.title,
-              local: (
-                <Link to='/timeline/local'>
-                  <FormattedMessage
-                    id='empty_column.home.local_tab'
-                    defaultMessage='the {site_title} tab'
-                    values={{ site_title: instance.title }}
-                  />
-                </Link>
-              ),
-            }}
-          />
-        </Accordion>
-      </div>}
-      <PullToRefresh onRefresh={handleRefresh}>
-        <Timeline
-          scrollKey={`${timelineId}_timeline`}
-          timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
-          prefix='home'
-          onLoadMore={handleLoadMore}
-          emptyMessage={<FormattedMessage id='empty_column.public' defaultMessage='There is nothing here! Write something publicly, or manually follow users from other servers to fill it up' />}
-          divideType='space'
-        />
-      </PullToRefresh>
-    </Column>
+      <Card variant='rounded'>
+        <Column className='-mt-3 sm:mt-0' label={intl.formatMessage(messages.title)} transparent>
+
+          {showExplanationBox && <div className='mb-4'>
+            <Accordion
+              headline={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}
+              action={dismissExplanationBox}
+              actionIcon={require('@tabler/icons/x.svg')}
+              actionLabel={intl.formatMessage(messages.dismiss)}
+              expanded={explanationBoxExpanded}
+              onToggle={toggleExplanationBox}
+            >
+              <FormattedMessage
+                id='fediverse_tab.explanation_box.explanation'
+                defaultMessage='{site_title} is part of the Fediverse, a social network made up of thousands of independent social media sites (aka "servers"). The posts you see here are from 3rd-party servers. You have the freedom to engage with them, or to block any server you don&apos;t like. Pay attention to the full username after the second @ symbol to know which server a post is from. To see only {site_title} posts, visit {local}.'
+                values={{
+                  site_title: instance.title,
+                  local: (
+                    <Link to='/timeline/local'>
+                      <FormattedMessage
+                        id='empty_column.home.local_tab'
+                        defaultMessage='the {site_title} tab'
+                        values={{ site_title: instance.title }}
+                      />
+                    </Link>
+                  ),
+                }}
+              />
+            </Accordion>
+          </div>}
+          <PullToRefresh onRefresh={handleRefresh}>
+            <Timeline
+              scrollKey={`${timelineId}_timeline`}
+              timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
+              prefix='home'
+              onLoadMore={handleLoadMore}
+              emptyMessage={<FormattedMessage id='empty_column.public' defaultMessage='There is nothing here! Write something publicly, or manually follow users from other servers to fill it up' />}
+              divideType='border'
+            />
+          </PullToRefresh>
+        </Column>
+      </Card>
+    </>
   );
 };
 

diff --git a/src/soapbox/features/remote-timeline/index.tsx b/src/soapbox/features/remote-timeline/index.tsx
@@ -5,7 +5,7 @@ import { useHistory } from 'react-router-dom';
 import { expandRemoteTimeline } from 'soapbox/actions/timelines';
 import { useRemoteStream } from 'soapbox/api/hooks';
 import IconButton from 'soapbox/components/icon-button';
-import { Column, HStack, Text } from 'soapbox/components/ui';
+import { Card, Column, HStack, Text } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks';
 
 import Timeline from '../ui/components/timeline';
@@ -47,36 +47,41 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
   }, [onlyMedia]);
 
   return (
-    <Column label={instance} transparent>
+    <>
       {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>
-      )}
-
-      <Timeline
-        scrollKey={`${timelineId}_${instance}_timeline`}
-        timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`}
-        onLoadMore={handleLoadMore}
-        emptyMessage={
-          <FormattedMessage
-            id='empty_column.remote'
-            defaultMessage='There is nothing here! Manually follow users from {instance} to fill it up.'
-            values={{ instance }}
+      <Card variant='rounded'>
+        <Column label={instance} transparent>
+
+          {!pinned && (
+            <HStack className='rounded-lg bg-white p-2 text-gray-900 shadow dark:bg-primary-800 dark:text-gray-100 dark:shadow-none' 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>
+          )}
+
+          <Timeline
+            scrollKey={`${timelineId}_${instance}_timeline`}
+            timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`}
+            onLoadMore={handleLoadMore}
+            emptyMessage={
+              <FormattedMessage
+                id='empty_column.remote'
+                defaultMessage='There is nothing here! Manually follow users from {instance} to fill it up.'
+                values={{ instance }}
+              />
+            }
+            divideType='border'
           />
-        }
-        divideType='space'
-      />
-    </Column>
+        </Column>
+      </Card>
+    </>
   );
 };