wip dark mode

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

app/soapbox/components/ui/form-group/form-group.tsx

@@ -24,12 +24,12 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
     <div>
       <label
         htmlFor={formFieldId}
-        className='block text-sm font-medium text-gray-700'
+        className='block text-sm font-medium text-gray-700 dark:text-gray-400'
       >
         {labelText}
       </label>
 
-      <div className='mt-1'>
+      <div className='mt-1 dark:text-white'>
         {firstChild}
         {inputChildren.filter((_, i) => i !== 0)}
 

app/soapbox/components/ui/modal/modal.tsx

@@ -46,11 +46,11 @@ const Modal: React.FC<IModal> = ({
   }, [buttonRef]);
 
   return (
-    <div className='block w-full max-w-xl p-6 mx-auto overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl pointer-events-auto'>
+    <div className='block w-full max-w-xl p-6 mx-auto overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-800 shadow-xl rounded-2xl pointer-events-auto'>
       <div className='sm:flex sm:items-start w-full justify-between'>
         <div className='w-full'>
           <div className='w-full flex flex-row justify-between items-center'>
-            <h3 className='text-lg leading-6 font-medium text-gray-900'>
+            <h3 className='text-lg leading-6 font-medium text-gray-900 dark:text-white'>
               {title}
             </h3>
 

app/soapbox/components/ui/tabs/tabs.tsx

@@ -40,7 +40,7 @@ const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
         ref={ref}
       >
         <div
-          className='w-full h-[3px] bg-primary-200 absolute'
+          className='w-full h-[3px] bg-primary-200 dark:bg-slate-600 absolute'
           style={{ top }}
         />
         <div

app/styles/components/display-name.scss

@@ -10,7 +10,7 @@
 .status__display-name,
 .account__display-name {
   strong {
-    color: var(--primary-text-color);
+    @apply text-gray-800 dark:text-gray-200;
   }
 }