Change icon, rename theme, set divideType based on theme

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/components/scrollable-list.tsx

@@ -226,7 +226,6 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
       ref={ref}
       id={id}
       useWindowScroll={useWindowScroll}
-      className={className}
       data={data}
       startReached={onScrollToTop}
       endReached={handleEndReached}

src/components/status-list.tsx

@@ -56,6 +56,7 @@ const StatusList: React.FC<IStatusList> = ({
   isPartial,
   showAds = false,
   showGroup = true,
+  className,
   ...other
 }) => {
   const soapboxConfig = useSoapboxConfig();
@@ -232,8 +233,8 @@ const StatusList: React.FC<IStatusList> = ({
       placeholderCount={20}
       ref={node}
       className={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', {
-        'divide-none black:divide-solid': divideType !== 'border',
-      })}
+        'divide-none': divideType !== 'border',
+      }, className)}
       itemClassName={clsx({
         'pb-3': divideType !== 'border',
       })}

src/features/bookmarks/index.tsx

@@ -6,7 +6,7 @@ import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'soapbox/actio
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import StatusList from 'soapbox/components/status-list';
 import { Column } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useTheme } from 'soapbox/hooks';
 
 const messages = defineMessages({
   heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
@@ -19,6 +19,7 @@ const handleLoadMore = debounce((dispatch) => {
 const Bookmarks: React.FC = () => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
+  const theme = useTheme();
 
   const statusIds = useAppSelector((state) => state.status_lists.get('bookmarks')!.items);
   const isLoading = useAppSelector((state) => state.status_lists.get('bookmarks')!.isLoading);
@@ -38,13 +39,14 @@ const Bookmarks: React.FC = () => {
     <Column label={intl.formatMessage(messages.heading)} transparent>
       <PullToRefresh onRefresh={handleRefresh}>
         <StatusList
+          className='black:p-4 black:sm:p-5'
           statusIds={statusIds}
           scrollKey='bookmarked_statuses'
           hasMore={hasMore}
           isLoading={typeof isLoading === 'boolean' ? isLoading : true}
           onLoadMore={() => handleLoadMore(dispatch)}
           emptyMessage={emptyMessage}
-          divideType='space'
+          divideType={theme === 'black' ? 'border' : 'space'}
         />
       </PullToRefresh>
     </Column>

src/features/community-timeline/index.tsx

@@ -5,7 +5,7 @@ import { expandCommunityTimeline } from 'soapbox/actions/timelines';
 import { useCommunityStream } from 'soapbox/api/hooks';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { Column } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useSettings, useTheme } from 'soapbox/hooks';
 
 import Timeline from '../ui/components/timeline';
 
@@ -16,6 +16,7 @@ const messages = defineMessages({
 const CommunityTimeline = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const theme = useTheme();
 
   const settings = useSettings();
   const onlyMedia = settings.community.other.onlyMedia;
@@ -41,12 +42,13 @@ const CommunityTimeline = () => {
     <Column className='-mt-3 sm:mt-0' label={intl.formatMessage(messages.title)} transparent>
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
+          className='black:p-4 black:sm:p-5'
           scrollKey={`${timelineId}_timeline`}
           timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
           prefix='home'
           onLoadMore={handleLoadMore}
           emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}
-          divideType='space'
+          divideType={theme === 'black' ? 'border' : 'space'}
         />
       </PullToRefresh>
     </Column>

src/features/hashtag-timeline/index.tsx

@@ -7,7 +7,7 @@ import { useHashtagStream } from 'soapbox/api/hooks';
 import List, { ListItem } from 'soapbox/components/list';
 import { Column, Toggle } from 'soapbox/components/ui';
 import Timeline from 'soapbox/features/ui/components/timeline';
-import { useAppDispatch, useAppSelector, useFeatures, useLoggedIn } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useFeatures, useLoggedIn, useTheme } from 'soapbox/hooks';
 
 interface IHashtagTimeline {
   params?: {
@@ -23,6 +23,7 @@ export const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
   const tag = useAppSelector((state) => state.tags.get(id));
   const next = useAppSelector(state => state.timelines.get(`hashtag:${id}`)?.next);
   const { isLoggedIn } = useLoggedIn();
+  const theme = useTheme();
 
   const handleLoadMore = (maxId: string) => {
     dispatch(expandHashtagTimeline(id, { url: next, maxId }));
@@ -63,11 +64,12 @@ export const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
         </List>
       )}
       <Timeline
+        className='black:p-4 black:sm:p-5'
         scrollKey='hashtag_timeline'
         timelineId={`hashtag:${id}`}
         onLoadMore={handleLoadMore}
         emptyMessage={<FormattedMessage id='empty_column.hashtag' defaultMessage='There is nothing in this hashtag yet.' />}
-        divideType='space'
+        divideType={theme === 'black' ? 'border' : 'space'}
       />
     </Column>
   );

src/features/home-timeline/index.tsx

@@ -6,7 +6,7 @@ import { expandHomeTimeline } from 'soapbox/actions/timelines';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { Column, Stack, Text } from 'soapbox/components/ui';
 import Timeline from 'soapbox/features/ui/components/timeline';
-import { useAppSelector, useAppDispatch, useFeatures, useInstance } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useFeatures, useInstance, useTheme } from 'soapbox/hooks';
 
 const messages = defineMessages({
   title: { id: 'column.home', defaultMessage: 'Home' },
@@ -17,6 +17,7 @@ const HomeTimeline: React.FC = () => {
   const dispatch = useAppDispatch();
   const features = useFeatures();
   const instance = useInstance();
+  const theme = useTheme();
 
   const polling = useRef<NodeJS.Timeout | null>(null);
 
@@ -62,10 +63,11 @@ const HomeTimeline: React.FC = () => {
     <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
+          className='black:p-4 black:sm:p-5'
           scrollKey='home_timeline'
           onLoadMore={handleLoadMore}
           timelineId='home'
-          divideType='space'
+          divideType={theme === 'black' ? 'border' : 'space'}
           showAds
           emptyMessage={
             <Stack space={1}>

src/features/landing-timeline/index.tsx

@@ -5,7 +5,7 @@ import { expandCommunityTimeline } from 'soapbox/actions/timelines';
 import { useCommunityStream } from 'soapbox/api/hooks';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { Column } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch, useInstance } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useInstance, useTheme } from 'soapbox/hooks';
 
 import AboutPage from '../about';
 import Timeline from '../ui/components/timeline';
@@ -15,6 +15,7 @@ import { SiteBanner } from './components/site-banner';
 const LandingTimeline = () => {
   const dispatch = useAppDispatch();
   const instance = useInstance();
+  const theme = useTheme();
 
   const timelineEnabled = !instance.pleroma.metadata.restrict_unauthenticated.timelines.local;
   const next = useAppSelector(state => state.timelines.get('community')?.next);
@@ -50,12 +51,13 @@ const LandingTimeline = () => {
       {timelineEnabled ? (
         <PullToRefresh onRefresh={handleRefresh}>
           <Timeline
+            className='black:p-4 black:sm:p-5'
             scrollKey={`${timelineId}_timeline`}
             timelineId={timelineId}
             prefix='home'
             onLoadMore={handleLoadMore}
             emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}
-            divideType='space'
+            divideType={theme === 'black' ? 'border' : 'space'}
           />
         </PullToRefresh>
       ) : (

src/features/list-timeline/index.tsx

@@ -8,13 +8,14 @@ import { expandListTimeline } from 'soapbox/actions/timelines';
 import { useListStream } from 'soapbox/api/hooks';
 import MissingIndicator from 'soapbox/components/missing-indicator';
 import { Column, Button, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks';
 
 import Timeline from '../ui/components/timeline';
 
 const ListTimeline: React.FC = () => {
   const dispatch = useAppDispatch();
   const { id } = useParams<{ id: string }>();
+  const theme = useTheme();
 
   const list = useAppSelector((state) => state.lists.get(id));
   const next = useAppSelector(state => state.timelines.get(`list:${id}`)?.next);
@@ -61,11 +62,12 @@ const ListTimeline: React.FC = () => {
   return (
     <Column label={title} transparent>
       <Timeline
+        className='black:p-4 black:sm:p-5'
         scrollKey='list_timeline'
         timelineId={`list:${id}`}
         onLoadMore={handleLoadMore}
         emptyMessage={emptyMessage}
-        divideType='space'
+        divideType={theme === 'black' ? 'border' : 'space'}
       />
     </Column>
   );

src/features/notifications/index.tsx

@@ -165,7 +165,7 @@ const Notifications = () => {
       onScrollToTop={handleScrollToTop}
       onScroll={handleScroll}
       className={clsx({
-        'divide-y divide-gray-200 dark:divide-primary-800 divide-solid': notifications.size > 0,
+        'divide-y divide-gray-200 black:divide-gray-800 dark:divide-primary-800 divide-solid': notifications.size > 0,
         'space-y-2': notifications.size === 0,
       })}
     >

src/features/public-timeline/index.tsx

@@ -7,7 +7,7 @@ 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 { useAppSelector, useAppDispatch, useInstance, useSettings } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useInstance, useSettings, useTheme } from 'soapbox/hooks';
 
 import PinnedHostsPicker from '../remote-timeline/components/pinned-hosts-picker';
 import Timeline from '../ui/components/timeline';
@@ -20,6 +20,7 @@ const messages = defineMessages({
 const CommunityTimeline = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const theme = useTheme();
 
   const instance = useInstance();
   const settings = useSettings();
@@ -86,12 +87,13 @@ const CommunityTimeline = () => {
       </div>}
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
+          className='black:p-4 black:sm:p-5'
           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'
+          divideType={theme === 'black' ? 'border' : 'space'}
         />
       </PullToRefresh>
     </Column>

src/features/quotes/index.tsx

@@ -7,7 +7,7 @@ import { useParams } from 'react-router-dom';
 import { expandStatusQuotes, fetchStatusQuotes } from 'soapbox/actions/status-quotes';
 import StatusList from 'soapbox/components/status-list';
 import { Column } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks';
 
 const messages = defineMessages({
   heading: { id: 'column.quotes', defaultMessage: 'Post quotes' },
@@ -20,6 +20,7 @@ const Quotes: React.FC = () => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
   const { statusId } = useParams<{ statusId: string }>();
+  const theme = useTheme();
 
   const statusIds = useAppSelector((state) => state.status_lists.getIn([`quotes:${statusId}`, 'items'], ImmutableOrderedSet<string>()));
   const isLoading = useAppSelector((state) => state.status_lists.getIn([`quotes:${statusId}`, 'isLoading'], true));
@@ -38,6 +39,7 @@ const Quotes: React.FC = () => {
   return (
     <Column label={intl.formatMessage(messages.heading)} transparent>
       <StatusList
+        className='black:p-4 black:sm:p-5'
         statusIds={statusIds as ImmutableOrderedSet<string>}
         scrollKey={`quotes:${statusId}`}
         hasMore={hasMore}
@@ -45,7 +47,7 @@ const Quotes: React.FC = () => {
         onLoadMore={() => handleLoadMore(statusId, dispatch)}
         onRefresh={handleRefresh}
         emptyMessage={emptyMessage}
-        divideType='space'
+        divideType={theme === 'black' ? 'border' : 'space'}
       />
     </Column>
   );

src/features/remote-timeline/index.tsx

@@ -6,7 +6,7 @@ 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 { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useSettings, useTheme } from 'soapbox/hooks';
 
 import Timeline from '../ui/components/timeline';
 
@@ -22,6 +22,7 @@ interface IRemoteTimeline {
 const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
   const history = useHistory();
   const dispatch = useAppDispatch();
+  const theme = useTheme();
 
   const instance = params?.instance as string;
   const settings = useSettings();
@@ -64,6 +65,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
       )}
 
       <Timeline
+        className='black:p-4 black:sm:p-5'
         scrollKey={`${timelineId}_${instance}_timeline`}
         timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`}
         onLoadMore={handleLoadMore}
@@ -74,7 +76,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
             values={{ instance }}
           />
         }
-        divideType='space'
+        divideType={theme === 'black' ? 'border' : 'space'}
       />
     </Column>
   );

src/features/test-timeline/index.tsx

@@ -3,7 +3,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import { importFetchedStatuses } from 'soapbox/actions/importer';
 import { expandTimelineSuccess } from 'soapbox/actions/timelines';
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch, useTheme } from 'soapbox/hooks';
 
 import { Column } from '../../components/ui';
 import Timeline from '../ui/components/timeline';
@@ -31,6 +31,7 @@ const onlyMedia = false;
 const TestTimeline: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const theme = useTheme();
 
   React.useEffect(() => {
     dispatch(importFetchedStatuses(MOCK_STATUSES));
@@ -43,7 +44,7 @@ const TestTimeline: React.FC = () => {
         scrollKey={`${timelineId}_timeline`}
         timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
         emptyMessage={<FormattedMessage id='empty_column.test' defaultMessage='The test timeline is empty.' />}
-        divideType='space'
+        divideType={theme === 'black' ? 'border' : 'space'}
       />
     </Column>
   );

src/features/ui/components/theme-selector.tsx

@@ -6,7 +6,7 @@ import { Icon, Select } from 'soapbox/components/ui';
 const messages = defineMessages({
   light: { id: 'theme_toggle.light', defaultMessage: 'Light' },
   dark: { id: 'theme_toggle.dark', defaultMessage: 'Dark' },
-  black: { id: 'theme_toggle.black', defaultMessage: 'Pure Black (beta)' },
+  black: { id: 'theme_toggle.black', defaultMessage: 'Black' },
   system: { id: 'theme_toggle.system', defaultMessage: 'System' },
 });
 
@@ -28,7 +28,7 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
       case 'dark':
         return require('@tabler/icons/moon.svg');
       case 'black':
-        return require('@tabler/icons/moon-off.svg');
+        return require('@tabler/icons/shadow.svg');
       default:
         return null;
     }