Minor style improvements

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

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/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/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/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>
   );