Merge branch 'black-mode' into 'main'

Minor style improvements

See merge request soapbox-pub/soapbox!2962

src/components/account.tsx

@@ -286,9 +286,10 @@ const Account = ({
                 </Text>
               ) : withAccountNote && (
                 <Text
+                  truncate
                   size='sm'
                   dangerouslySetInnerHTML={{ __html: account.note_emojified }}
-                  className='mr-2 rtl:ml-2 rtl:mr-0'
+                  className='mr-2 rtl:ml-2 rtl:mr-0 [&_br]:hidden [&_p:first-child]:inline [&_p:first-child]:truncate [&_p]:hidden'
                 />
               )}
             </Stack>

src/components/scrollable-list.tsx

@@ -71,6 +71,8 @@ interface IScrollableList extends VirtuosoProps<any, any> {
   onRefresh?: () => Promise<any>;
   /** Extra class names on the Virtuoso element. */
   className?: string;
+  /** Extra class names on the list element. */
+  listClassName?: string;
   /** Class names on each item container. */
   itemClassName?: string;
   /** `id` attribute on the Virtuoso element. */
@@ -96,6 +98,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
   onScrollToTop,
   onLoadMore,
   className,
+  listClassName,
   itemClassName,
   id,
   hasMore,
@@ -233,9 +236,10 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
       itemContent={renderItem}
       initialTopMostItemIndex={initialIndex}
       rangeChanged={handleRangeChange}
+      className={className}
       style={style}
       context={{
-        listClassName: className,
+        listClassName,
         itemClassName,
       }}
       components={{

src/components/status-list.tsx

@@ -232,7 +232,7 @@ const StatusList: React.FC<IStatusList> = ({
       placeholderComponent={() => <PlaceholderStatus variant={divideType === 'border' ? 'slim' : 'rounded'} />}
       placeholderCount={20}
       ref={node}
-      className={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', {
+      listClassName={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', {
         'divide-none': divideType !== 'border',
       }, className)}
       itemClassName={clsx({

src/components/ui/accordion/accordion.tsx

@@ -81,7 +81,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
       <div
         className={
           clsx({
-            'p-4 rounded-b-lg border-t border-solid border-gray-100 dark:border-primary-900': true,
+            'p-4 rounded-b-lg border-t border-solid border-gray-100 dark:border-primary-900 black:border-black': true,
             'h-0 hidden': !expanded,
           })
         }

src/components/ui/checkbox/checkbox.tsx

@@ -9,7 +9,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => {
       {...props}
       ref={ref}
       type='checkbox'
-      className='h-4 w-4 rounded border-2 border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900'
+      className='h-4 w-4 rounded border-2 border-gray-300 text-primary-600 focus:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900'
     />
   );
 });

src/features/admin/moderation-log.tsx

@@ -56,7 +56,7 @@ const ModerationLog = () => {
         emptyMessage={intl.formatMessage(messages.emptyMessage)}
         hasMore={hasMore}
         onLoadMore={handleLoadMore}
-        className='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
+        listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
       >
         {items.map(item => item && (
           <LogItem key={item.id} log={item} />

src/features/admin/tabs/awaiting-approval.tsx

@@ -33,7 +33,7 @@ const AwaitingApproval: React.FC = () => {
       showLoading={showLoading}
       scrollKey='awaiting-approval'
       emptyMessage={intl.formatMessage(messages.emptyMessage)}
-      className='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
+      listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
     >
       {accountIds.map(id => (
         <div key={id} className='px-5 py-4'>

src/features/admin/tabs/reports.tsx

@@ -35,7 +35,7 @@ const Reports: React.FC = () => {
       showLoading={showLoading}
       scrollKey='admin-reports'
       emptyMessage={intl.formatMessage(messages.emptyMessage)}
-      className='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
+      listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
     >
       {reports.map(report => report && <Report id={report} key={report} />)}
     </ScrollableList>

src/features/auth-login/components/consumers-list.tsx

@@ -16,7 +16,7 @@ const ConsumersList: React.FC<IConsumersList> = () => {
 
   if (providers.length > 0) {
     return (
-      <Card className='bg-gray-50 p-4 sm:rounded-xl dark:bg-primary-800'>
+      <Card className='bg-gray-50 p-4 black:bg-black sm:rounded-xl dark:bg-primary-800'>
         <Text size='xs' theme='muted'>
           <FormattedMessage id='oauth_consumers.title' defaultMessage='Other ways to sign in' />
         </Text>

src/features/directory/components/account-card.tsx

@@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -57,7 +56,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
         <Text
           truncate
           align='left'
-          className={clsx('[&_br]:hidden [&_p:first-child]:inline [&_p:first-child]:truncate [&_p]:hidden')}
+          className='[&_br]:hidden [&_p:first-child]:inline [&_p:first-child]:truncate [&_p]:hidden'
           dangerouslySetInnerHTML={{ __html: account.note_emojified || '&nbsp;' }}
         />
       </Stack>

src/features/domain-blocks/index.tsx

@@ -45,7 +45,7 @@ const DomainBlocks: React.FC = () => {
         onLoadMore={() => handleLoadMore(dispatch)}
         hasMore={hasMore}
         emptyMessage={emptyMessage}
-        className='divide-y divide-gray-200 dark:divide-gray-800'
+        listClassName='divide-y divide-gray-200 dark:divide-gray-800'
       >
         {domains.map((domain) =>
           <Domain key={domain} domain={domain} />,

src/features/group/group-tags.tsx

@@ -35,7 +35,7 @@ const GroupTopics: React.FC<IGroupTopics> = (props) => {
       showLoading={!group || isLoading && tags.length === 0}
       placeholderComponent={PlaceholderAccount}
       placeholderCount={3}
-      className='divide-y divide-solid divide-gray-300 dark:divide-gray-800'
+      listClassName='divide-y divide-solid divide-gray-300 dark:divide-gray-800'
       itemClassName='py-3 last:pb-0'
       emptyMessage={
         <Stack space={4} className='pt-6' justifyContent='center' alignItems='center'>

src/features/notifications/index.tsx

@@ -164,7 +164,7 @@ const Notifications = () => {
       onLoadMore={handleLoadOlder}
       onScrollToTop={handleScrollToTop}
       onScroll={handleScroll}
-      className={clsx({
+      listClassName={clsx({
         '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/soapbox-config/components/icon-picker-menu.tsx

@@ -79,7 +79,7 @@ const IconPickerMenu: React.FC<IIconPickerMenu> = ({ icons, onClose, onPick, sty
 
   return (
     <div
-      className={clsx('absolute z-[101] -my-0.5')}
+      className='absolute z-[101] -my-0.5'
       style={{ transform: 'translateX(calc(-1 * env(safe-area-inset-right)))', ...style }}
       ref={setRef}
     >

src/features/status/components/thread-status.tsx

@@ -31,7 +31,7 @@ const ThreadStatus: React.FC<IThreadStatus> = (props): JSX.Element => {
 
     return (
       <div
-        className={clsx('absolute left-5 z-[1] hidden w-0.5 bg-gray-200 rtl:left-auto rtl:right-5 dark:bg-primary-800', {
+        className={clsx('absolute left-5 z-[1] hidden w-0.5 bg-gray-200 black:bg-gray-800 rtl:left-auto rtl:right-5 dark:bg-primary-800', {
           '!block top-[calc(12px+42px)] h-[calc(100%-42px-8px-1rem)]': isConnectedBottom,
         })}
       />

src/features/status/components/thread.tsx

@@ -382,7 +382,7 @@ const Thread = (props: IThread) => {
 
           {!isUnderReview ? (
             <>
-              <hr className='-mx-4 mb-2 max-w-[100vw] border-t-2 dark:border-gray-800' />
+              <hr className='-mx-4 mb-2 max-w-[100vw] border-t-2 black:border-t dark:border-gray-800' />
 
               <StatusActionBar
                 status={status}
@@ -396,7 +396,7 @@ const Thread = (props: IThread) => {
       </HotKeys>
 
       {hasDescendants && (
-        <hr className='-mx-4 mt-2 max-w-[100vw] border-t-2 dark:border-gray-800' />
+        <hr className='-mx-4 mt-2 max-w-[100vw] border-t-2 black:border-t dark:border-gray-800' />
       )}
     </div>
   );
@@ -445,7 +445,7 @@ const Thread = (props: IThread) => {
           initialTopMostItemIndex={initialTopMostItemIndex}
           useWindowScroll={useWindowScroll}
           itemClassName={itemClassName}
-          className={
+          listClassName={
             clsx({
               'h-full': !useWindowScroll,
             })

src/features/ui/components/modals/birthdays-modal.tsx

@@ -28,7 +28,7 @@ const BirthdaysModal = ({ onClose }: IBirthdaysModal) => {
       <ScrollableList
         scrollKey='birthdays'
         emptyMessage={emptyMessage}
-        className='max-w-full'
+        listClassName='max-w-full'
         itemClassName='pb-3'
       >
         {accountIds.map(id =>

src/features/ui/components/modals/dislikes-modal.tsx

@@ -40,7 +40,7 @@ const DislikesModal: React.FC<IDislikesModal> = ({ onClose, statusId }) => {
       <ScrollableList
         scrollKey='dislikes'
         emptyMessage={emptyMessage}
-        className='max-w-full'
+        listClassName='max-w-full'
         itemClassName='pb-3'
       >
         {accountIds.map(id =>

src/features/ui/components/modals/event-participants-modal.tsx

@@ -40,7 +40,7 @@ const EventParticipantsModal: React.FC<IEventParticipantsModal> = ({ onClose, st
       <ScrollableList
         scrollKey='event_participations'
         emptyMessage={emptyMessage}
-        className='max-w-full'
+        listClassName='max-w-full'
         itemClassName='pb-3'
       >
         {accountIds.map(id =>

src/features/ui/components/modals/favourites-modal.tsx

@@ -47,7 +47,7 @@ const FavouritesModal: React.FC<IFavouritesModal> = ({ onClose, statusId }) => {
       <ScrollableList
         scrollKey='favourites'
         emptyMessage={emptyMessage}
-        className='max-w-full'
+        listClassName='max-w-full'
         itemClassName='pb-3'
         style={{ height: '80vh' }}
         useWindowScroll={false}

src/features/ui/components/modals/mentions-modal.tsx

@@ -41,7 +41,7 @@ const MentionsModal: React.FC<IMentionsModal> = ({ onClose, statusId }) => {
     body = (
       <ScrollableList
         scrollKey='mentions'
-        className='max-w-full'
+        listClassName='max-w-full'
         itemClassName='pb-3'
       >
         {accountIds.map(id =>

src/features/ui/components/modals/reactions-modal.tsx

@@ -98,9 +98,10 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
       <ScrollableList
         scrollKey='reactions'
         emptyMessage={emptyMessage}
-        className={clsx('max-w-full', {
+        className={clsx({
           'mt-4': reactions.size > 0,
         })}
+        listClassName='max-w-full'
         itemClassName='pb-3'
       >
         {accounts.map((account) =>

src/features/ui/components/modals/reblogs-modal.tsx

@@ -48,7 +48,7 @@ const ReblogsModal: React.FC<IReblogsModal> = ({ onClose, statusId }) => {
       <ScrollableList
         scrollKey='reblogs'
         emptyMessage={emptyMessage}
-        className='max-w-full'
+        listClassName='max-w-full'
         itemClassName='pb-3'
         style={{ height: '80vh' }}
         useWindowScroll={false}