Merge branch 'improve-divider' into 'develop'

Extend Divider with 'textSize' prop

See merge request soapbox-pub/soapbox!1776

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'