From f0f0da8bcae5edb66d7a2014bd86318225d2e50c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 25 Mar 2024 11:28:06 +0100
Subject: [PATCH 1/2] Minor style improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/components/account.tsx                                  | 3 ++-
 src/components/ui/accordion/accordion.tsx                   | 2 +-
 src/components/ui/checkbox/checkbox.tsx                     | 2 +-
 src/features/auth-login/components/consumers-list.tsx       | 2 +-
 src/features/directory/components/account-card.tsx          | 3 +--
 src/features/soapbox-config/components/icon-picker-menu.tsx | 2 +-
 src/features/status/components/thread-status.tsx            | 2 +-
 src/features/status/components/thread.tsx                   | 4 ++--
 8 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/account.tsx b/src/components/account.tsx
index cca7f47ce..d4c252654 100644
--- a/src/components/account.tsx
+++ b/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>
diff --git a/src/components/ui/accordion/accordion.tsx b/src/components/ui/accordion/accordion.tsx
index f415dac08..7e959c227 100644
--- a/src/components/ui/accordion/accordion.tsx
+++ b/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,
           })
         }
diff --git a/src/components/ui/checkbox/checkbox.tsx b/src/components/ui/checkbox/checkbox.tsx
index fe31e8089..3ae46c131 100644
--- a/src/components/ui/checkbox/checkbox.tsx
+++ b/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'
     />
   );
 });
diff --git a/src/features/auth-login/components/consumers-list.tsx b/src/features/auth-login/components/consumers-list.tsx
index 799238449..e236ff101 100644
--- a/src/features/auth-login/components/consumers-list.tsx
+++ b/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>
diff --git a/src/features/directory/components/account-card.tsx b/src/features/directory/components/account-card.tsx
index 21e0eb89e..3e28821b1 100644
--- a/src/features/directory/components/account-card.tsx
+++ b/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>
diff --git a/src/features/soapbox-config/components/icon-picker-menu.tsx b/src/features/soapbox-config/components/icon-picker-menu.tsx
index 8267d83a6..8287e1fc1 100644
--- a/src/features/soapbox-config/components/icon-picker-menu.tsx
+++ b/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}
     >
diff --git a/src/features/status/components/thread-status.tsx b/src/features/status/components/thread-status.tsx
index fe43f62ed..a3674aa68 100644
--- a/src/features/status/components/thread-status.tsx
+++ b/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,
         })}
       />
diff --git a/src/features/status/components/thread.tsx b/src/features/status/components/thread.tsx
index f5cb59d96..ada189026 100644
--- a/src/features/status/components/thread.tsx
+++ b/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>
   );

From 7749f93c2151e89e62592590deb80eb294cb2a0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 25 Mar 2024 11:38:46 +0100
Subject: [PATCH 2/2] Fix ScrollableList class names regression
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/components/scrollable-list.tsx                          | 6 +++++-
 src/components/status-list.tsx                              | 2 +-
 src/features/admin/moderation-log.tsx                       | 2 +-
 src/features/admin/tabs/awaiting-approval.tsx               | 2 +-
 src/features/admin/tabs/reports.tsx                         | 2 +-
 src/features/domain-blocks/index.tsx                        | 2 +-
 src/features/group/group-tags.tsx                           | 2 +-
 src/features/notifications/index.tsx                        | 2 +-
 src/features/status/components/thread.tsx                   | 2 +-
 src/features/ui/components/modals/birthdays-modal.tsx       | 2 +-
 src/features/ui/components/modals/dislikes-modal.tsx        | 2 +-
 .../ui/components/modals/event-participants-modal.tsx       | 2 +-
 src/features/ui/components/modals/favourites-modal.tsx      | 2 +-
 src/features/ui/components/modals/mentions-modal.tsx        | 2 +-
 src/features/ui/components/modals/reactions-modal.tsx       | 3 ++-
 src/features/ui/components/modals/reblogs-modal.tsx         | 2 +-
 16 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/components/scrollable-list.tsx b/src/components/scrollable-list.tsx
index ffce6e844..8a352034a 100644
--- a/src/components/scrollable-list.tsx
+++ b/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={{
diff --git a/src/components/status-list.tsx b/src/components/status-list.tsx
index ed1f391b1..621a659f0 100644
--- a/src/components/status-list.tsx
+++ b/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({
diff --git a/src/features/admin/moderation-log.tsx b/src/features/admin/moderation-log.tsx
index 6486185eb..004d87997 100644
--- a/src/features/admin/moderation-log.tsx
+++ b/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} />
diff --git a/src/features/admin/tabs/awaiting-approval.tsx b/src/features/admin/tabs/awaiting-approval.tsx
index b59a9a56c..1b2d0c6a6 100644
--- a/src/features/admin/tabs/awaiting-approval.tsx
+++ b/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'>
diff --git a/src/features/admin/tabs/reports.tsx b/src/features/admin/tabs/reports.tsx
index d066f34e1..99ed6be91 100644
--- a/src/features/admin/tabs/reports.tsx
+++ b/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>
diff --git a/src/features/domain-blocks/index.tsx b/src/features/domain-blocks/index.tsx
index 17d6f4757..cf8978ad9 100644
--- a/src/features/domain-blocks/index.tsx
+++ b/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} />,
diff --git a/src/features/group/group-tags.tsx b/src/features/group/group-tags.tsx
index 5bbf5364c..e3b65b5f4 100644
--- a/src/features/group/group-tags.tsx
+++ b/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'>
diff --git a/src/features/notifications/index.tsx b/src/features/notifications/index.tsx
index 174041990..870ce8ad1 100644
--- a/src/features/notifications/index.tsx
+++ b/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,
       })}
diff --git a/src/features/status/components/thread.tsx b/src/features/status/components/thread.tsx
index ada189026..b6a7c4514 100644
--- a/src/features/status/components/thread.tsx
+++ b/src/features/status/components/thread.tsx
@@ -445,7 +445,7 @@ const Thread = (props: IThread) => {
           initialTopMostItemIndex={initialTopMostItemIndex}
           useWindowScroll={useWindowScroll}
           itemClassName={itemClassName}
-          className={
+          listClassName={
             clsx({
               'h-full': !useWindowScroll,
             })
diff --git a/src/features/ui/components/modals/birthdays-modal.tsx b/src/features/ui/components/modals/birthdays-modal.tsx
index 01afe0db0..d6d17781a 100644
--- a/src/features/ui/components/modals/birthdays-modal.tsx
+++ b/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 =>
diff --git a/src/features/ui/components/modals/dislikes-modal.tsx b/src/features/ui/components/modals/dislikes-modal.tsx
index fadfef168..7689d7047 100644
--- a/src/features/ui/components/modals/dislikes-modal.tsx
+++ b/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 =>
diff --git a/src/features/ui/components/modals/event-participants-modal.tsx b/src/features/ui/components/modals/event-participants-modal.tsx
index bb8614d47..85324546d 100644
--- a/src/features/ui/components/modals/event-participants-modal.tsx
+++ b/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 =>
diff --git a/src/features/ui/components/modals/favourites-modal.tsx b/src/features/ui/components/modals/favourites-modal.tsx
index 9fd1fbf57..d2b9b9ea7 100644
--- a/src/features/ui/components/modals/favourites-modal.tsx
+++ b/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}
diff --git a/src/features/ui/components/modals/mentions-modal.tsx b/src/features/ui/components/modals/mentions-modal.tsx
index eca249b93..4d16afc75 100644
--- a/src/features/ui/components/modals/mentions-modal.tsx
+++ b/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 =>
diff --git a/src/features/ui/components/modals/reactions-modal.tsx b/src/features/ui/components/modals/reactions-modal.tsx
index 8b9c923cf..431430edf 100644
--- a/src/features/ui/components/modals/reactions-modal.tsx
+++ b/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) =>
diff --git a/src/features/ui/components/modals/reblogs-modal.tsx b/src/features/ui/components/modals/reblogs-modal.tsx
index c86c731ad..5107fa881 100644
--- a/src/features/ui/components/modals/reblogs-modal.tsx
+++ b/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}