dark styles on public pages

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

app/soapbox/components/ui/input/input.tsx

@@ -70,7 +70,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
                 type='button'
                 onClick={togglePassword}
                 tabIndex={-1}
-                className='text-gray-400 hover:text-gray-500 h-full px-2 focus:ring-primary-500 focus:ring-2'
+                className='text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 h-full px-2 focus:ring-primary-500 focus:ring-2'
               >
                 <SvgIcon
                   src={revealed ? require('@tabler/icons/icons/eye-off.svg') : require('@tabler/icons/icons/eye.svg')}

app/soapbox/features/auth_layout/index.tsx

@@ -20,7 +20,7 @@ const AuthLayout = () => {
 
   return (
     <div>
-      <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-cyan-50' />
+      <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 dark:from-slate-700 via-white dark:via-slate-900 to-cyan-50 dark:to-cyan-900' />
 
       <main className='relative flex flex-col h-screen'>
         <header className='pt-10 flex justify-center relative'>
@@ -29,7 +29,7 @@ const AuthLayout = () => {
               <img src={logo} alt={siteTitle} className='h-7' />
             ) : (
               <SvgIcon
-                className='w-7 h-7'
+                className='w-7 h-7 dark:text-white'
                 alt={siteTitle}
                 src={require('@tabler/icons/icons/home.svg')}
               />

app/soapbox/features/auth_login/components/password_reset.js

@@ -42,7 +42,7 @@ class PasswordReset extends ImmutablePureComponent {
 
     return (
       <div>
-        <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
+        <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
           <h1 className='text-center font-bold text-2xl'>
             {intl.formatMessage({ id: 'password_reset.header', defaultMessage: 'Reset Password' })}
           </h1>

app/soapbox/features/public_layout/components/header.tsx

@@ -128,7 +128,7 @@ const Header = () => {
                 <Tooltip text={intl.formatMessage(messages.forgotPassword)}>
                   <IconButton
                     src={require('@tabler/icons/icons/help.svg')}
-                    className='bg-transparent text-gray-400 hover:text-gray-700 cursor-pointer'
+                    className='bg-transparent text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer'
                     iconClassName='w-5 h-5'
                   />
                 </Tooltip>

app/soapbox/features/public_layout/index.js

@@ -35,7 +35,7 @@ class PublicLayout extends ImmutablePureComponent {
 
     return (
       <div className='h-full'>
-        <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-cyan-50' />
+        <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 dark:from-slate-700 via-white dark:via-slate-900 to-cyan-50 dark:to-cyan-900' />
 
         <div className='flex flex-col h-screen'>
           <div className='flex-shrink-0'>

app/soapbox/features/verification/waitlist_page.js

@@ -25,7 +25,7 @@ const WaitlistPage = ({ account }) => {
   };
 
   return (
-    <div className='h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-cyan-50'>
+    <div className='h-screen w-full bg-gradient-to-tr from-primary-50 dark:from-slate-700 via-white dark:via-slate-900 to-cyan-50 dark:to-cyan-900'>
       <main className='relative flex flex-col h-screen max-w-7xl mx-auto px-2 sm:px-6 lg:px-8'>
         <header className='relative flex justify-between h-16'>
           <div className='flex-1 flex items-stretch justify-center relative'>

app/styles/about.scss

@@ -709,11 +709,11 @@ $fluid-breakpoint: $maximum-width + 20px;
 }
 
 .rich-formatting {
+  @apply text-gray-900 dark:text-gray-100;
   font-family: var(--font-sans-serif), sans-serif;
   font-size: 16px;
   font-weight: 400;
   line-height: 30px;
-  color: $color-5-dark;
   padding: 15px 30px;
 
   .text-center {
@@ -735,11 +735,11 @@ $fluid-breakpoint: $maximum-width + 20px;
 
   p,
   li {
+    @apply text-gray-900 dark:text-gray-100;
     font-family: var(--font-sans-serif), sans-serif;
     font-size: 16px;
     font-weight: 400;
     line-height: 30px;
-    color: $color-5-dark;
 
     a {
       color: var(--highlight-text-color);
@@ -760,10 +760,10 @@ $fluid-breakpoint: $maximum-width + 20px;
   h4,
   h5,
   h6 {
+    @apply text-gray-900 dark:text-gray-100;
     font-family: var(--font-display), sans-serif;
     margin-top: 2em;
     margin-bottom: 1.25em;
-    color: $color-5-dark;
   }
 
   hr + {
@@ -1050,8 +1050,7 @@ $fluid-breakpoint: $maximum-width + 20px;
   }
 
   .simple_form .user_agreement .label_input > label {
-    font-weight: 400;
+    @apply text-gray-900 dark:text-gray-100 font-normal;
-    color: $color-5-dark;
   }
 
   .simple_form p.lead {

app/styles/forms.scss

@@ -69,10 +69,10 @@ code {
       position: relative;
 
       .label_input > label {
+        @apply text-black dark:text-white;
         font-family: inherit;
         font-size: 14px;
         padding-top: 5px;
-        color: var(--primary-text-color);
         display: block;
         width: auto;
       }
@@ -190,9 +190,9 @@ code {
 
   .input {
     .label_input > label {
+      @apply text-gray-700 dark:text-gray-400;
       font-family: inherit;
       font-size: 14px;
-      color: var(--gray-700);
       display: block;
       word-wrap: break-word;
       font-weight: 500;