Improve dark mode of chats

app/soapbox/components/ui/divider/divider.tsx

@@ -1,11 +1,16 @@
 import React from 'react';
 
+import Text from '../text/text';
+
+import type { Sizes as TextSizes } from '../text/text';
+
 interface IDivider {
   text?: string
+  textSize?: TextSizes
 }
 
 /** Divider */
-const Divider = ({ text }: IDivider) => (
+const Divider = ({ text, textSize = 'md' }: IDivider) => (
   <div className='relative' data-testid='divider'>
     <div className='absolute inset-0 flex items-center' aria-hidden='true'>
       <div className='w-full border-t-2 border-gray-100 dark:border-gray-800 border-solid' />
@@ -13,7 +18,9 @@ const Divider = ({ text }: IDivider) => (
 
     {text && (
       <div className='relative flex justify-center'>
-        <span className='px-2 bg-white text-gray-400' data-testid='divider-text'>{text}</span>
+        <span className='px-2 bg-white dark:bg-gray-900 text-gray-400' data-testid='divider-text'>
+          <Text size={textSize} tag='span' theme='inherit'>{text}</Text>
+        </span>
       </div>
     )}
   </div>

app/soapbox/components/ui/text/text.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 type Themes = 'default' | 'danger' | 'primary' | 'muted' | 'subtle' | 'success' | 'inherit' | 'white'
 type Weights = 'normal' | 'medium' | 'semibold' | 'bold'
-type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+export type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
 type Alignments = 'left' | 'center' | 'right'
 type TrackingSizes = 'normal' | 'wide'
 type TransformProperties = 'uppercase' | 'normal'

app/soapbox/features/chats/components/chat-message-list.tsx

@@ -14,7 +14,7 @@ import { createSelector } from 'reselect';
 import { fetchChatMessages, deleteChatMessage } from 'soapbox/actions/chats';
 import { openModal } from 'soapbox/actions/modals';
 import { initReport, initReportById } from 'soapbox/actions/reports';
-import { Avatar, Button, HStack, IconButton, Spinner, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, Button, Divider, HStack, IconButton, Spinner, Stack, Text } from 'soapbox/components/ui';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 import { useChatContext } from 'soapbox/contexts/chat-context';
 import emojify from 'soapbox/features/emoji/emoji';
@@ -227,16 +227,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, chatMessageIds, aut
     // return emojify(formatted, emojiMap.toJS());
   };
 
-  const renderDivider = (key: React.Key, text: string) => (
+  const renderDivider = (key: React.Key, text: string) => <Divider text={text} textSize='sm' />;
-    <div className='relative' key={key}>
-      <div className='absolute inset-0 flex items-center' aria-hidden='true'>
-        <div className='w-full border-solid border-t border-gray-300' />
-      </div>
-      <div className='relative flex justify-center'>
-        <Text theme='muted' size='xs' className='px-2 bg-white' tag='span'>{text}</Text>
-      </div>
-    </div>
-  );
 
   const handleReportUser = (userId: string) => {
     return () => {
@@ -300,7 +291,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, chatMessageIds, aut
                   classNames({
                     'text-ellipsis break-words relative rounded-md p-2': true,
                     'bg-primary-500 text-white mr-2': isMyMessage,
-                    'bg-gray-200 text-gray-900 order-2 ml-2': !isMyMessage,
+                    'bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100 order-2 ml-2': !isMyMessage,
                   })
                 }
                 ref={setBubbleRef}

app/soapbox/features/chats/components/chat.tsx

@@ -16,7 +16,7 @@ const Chat: React.FC<IChatInterface> = ({ chat, onClick }) => {
       key={chat.id}
       type='button'
       onClick={() => onClick(chat)}
-      className='px-4 py-2 w-full flex flex-col hover:bg-gray-100'
+      className='px-4 py-2 w-full flex flex-col hover:bg-gray-100 dark:hover:bg-gray-800'
     >
       <HStack alignItems='center' space={2}>
         <Avatar src={chat.account?.avatar} size={40} />