From 12d45ced848a6ca0ee7fef4edb6e4bbabea7867e Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 4 May 2022 10:14:59 -0400
Subject: [PATCH 1/4] Support dark-mode logo

---
 app/soapbox/features/ui/components/navbar.tsx     | 7 ++++++-
 app/soapbox/normalizers/soapbox/soapbox_config.ts | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index c6d810f0c..25085f6d7 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/app/soapbox/features/ui/components/navbar.tsx
@@ -23,6 +23,7 @@ const Navbar = () => {
 
   // In demo mode, use the Soapbox logo
   const logo = settings.get('demo') ? require('images/soapbox-logo.svg') : soapboxConfig.logo;
+  const logoDarkMode = soapboxConfig.logoDarkMode;
 
   const onOpenSidebar = () => dispatch(openSidebar());
 
@@ -47,7 +48,11 @@ const Navbar = () => {
           >
             {logo ? (
               <Link key='logo' to='/' data-preview-title-id='column.home' className='flex-shrink-0 flex items-center'>
-                <img alt='Logo' src={logo} className='h-5 lg:h-6 w-auto cursor-pointer' />
+                <img alt='Logo' src={logo} className={classNames('h-5 lg:h-6 w-auto cursor-pointer', { 'dark:hidden': logoDarkMode })} />
+                {logoDarkMode && (
+                  <img alt='Logo' src={logoDarkMode} className='h-5 lg:h-6 w-auto cursor-pointer hidden dark:block' />
+                )}
+
                 <span className='hidden'><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
               </Link>
             ) : (
diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts
index dd9d771a4..e37a4faad 100644
--- a/app/soapbox/normalizers/soapbox/soapbox_config.ts
+++ b/app/soapbox/normalizers/soapbox/soapbox_config.ts
@@ -82,6 +82,7 @@ export const CryptoAddressRecord = ImmutableRecord({
 export const SoapboxConfigRecord = ImmutableRecord({
   appleAppId: null,
   logo: '',
+  logoDarkMode: null,
   banner: '',
   brandColor: '', // Empty
   accentColor: '',

From 1a9b0be3abebf781daee0c9413c77f2310eb4b5f Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 4 May 2022 10:19:09 -0400
Subject: [PATCH 2/4] Improve dark-mode support for Emoji Picker

---
 app/styles/emoji_picker.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/styles/emoji_picker.scss b/app/styles/emoji_picker.scss
index 3b7f2bd3a..f1a3ea40d 100644
--- a/app/styles/emoji_picker.scss
+++ b/app/styles/emoji_picker.scss
@@ -13,7 +13,7 @@
 }
 
 .emoji-mart-bar {
-  border: 0 solid #e5e7eb;
+  @apply border-0 border-solid border-gray-200 dark:border-slate-700;
 }
 
 .emoji-mart-bar:first-child {
@@ -77,7 +77,7 @@
 }
 
 .emoji-mart-search input {
-  @apply text-sm pr-9 block w-full border-gray-300 dark:border-gray-600 rounded-full focus:ring-primary-500 focus:border-primary-500;
+  @apply text-sm pr-9 block w-full border-gray-300 dark:bg-slate-800 dark:border-gray-600 rounded-full focus:ring-primary-500 focus:border-primary-500;
 
   &::-moz-focus-inner {
     border: 0;

From a987b5f2966cdb22c55d10904cebd5cf2a617c10 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 4 May 2022 10:50:53 -0400
Subject: [PATCH 3/4] Improve dark-mode

---
 app/soapbox/components/list.tsx                        | 4 ++--
 app/soapbox/components/ui/button/useButtonStyles.ts    | 2 +-
 app/soapbox/components/ui/menu/menu.css                | 2 +-
 app/soapbox/components/ui/select/select.tsx            | 2 +-
 app/soapbox/components/ui/tabs/tabs.tsx                | 2 +-
 app/soapbox/features/account/components/header.js      | 6 +++---
 app/soapbox/features/notifications/index.js            | 2 +-
 app/soapbox/features/security/mfa/enable_otp_form.tsx  | 5 ++---
 app/soapbox/features/security/mfa/otp_confirm_form.tsx | 4 ++--
 9 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx
index 404fb8aa5..3adc81c38 100644
--- a/app/soapbox/components/list.tsx
+++ b/app/soapbox/components/list.tsx
@@ -37,8 +37,8 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick }) => {
   return (
     <Comp
       className={classNames({
-        'flex items-center justify-between px-3 py-2 first:rounded-t-lg last:rounded-b-lg bg-gradient-to-r from-gradient-purple/20 to-gradient-blue/20': true,
-        'cursor-pointer hover:from-gradient-purple/30 hover:to-gradient-blue/30': typeof onClick !== 'undefined',
+        'flex items-center justify-between px-3 py-2 first:rounded-t-lg last:rounded-b-lg bg-gradient-to-r from-gradient-purple/20 to-gradient-blue/20 dark:from-slate-900/25 dark:to-slate-900/50': true,
+        'cursor-pointer hover:from-gradient-purple/30 hover:to-gradient-blue/30 dark:hover:from-slate-900/40 dark:hover:to-slate-900/75': typeof onClick !== 'undefined',
       })}
       {...linkProps}
     >
diff --git a/app/soapbox/components/ui/button/useButtonStyles.ts b/app/soapbox/components/ui/button/useButtonStyles.ts
index f670d028e..2e92b33a6 100644
--- a/app/soapbox/components/ui/button/useButtonStyles.ts
+++ b/app/soapbox/components/ui/button/useButtonStyles.ts
@@ -21,7 +21,7 @@ const useButtonStyles = ({
       'border-transparent text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 focus:ring-2 focus:ring-offset-2',
     secondary:
       'border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 focus:ring-primary-500 focus:ring-2 focus:ring-offset-2',
-    ghost: 'shadow-none border-gray-200 text-gray-700 bg-white focus:ring-primary-500 focus:ring-2 focus:ring-offset-2',
+    ghost: 'shadow-none border-gray-200 text-gray-700 bg-white dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 focus:ring-primary-500 focus:ring-2 focus:ring-offset-2',
     accent: 'border-transparent text-white bg-accent-500 hover:bg-accent-300 focus:ring-pink-500 focus:ring-2 focus:ring-offset-2',
     danger: 'border-transparent text-danger-700 bg-danger-100 hover:bg-danger-200 focus:ring-danger-500 focus:ring-2 focus:ring-offset-2',
     transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
diff --git a/app/soapbox/components/ui/menu/menu.css b/app/soapbox/components/ui/menu/menu.css
index ca619a7be..cb72cd702 100644
--- a/app/soapbox/components/ui/menu/menu.css
+++ b/app/soapbox/components/ui/menu/menu.css
@@ -31,5 +31,5 @@ div:focus[data-reach-menu-list] {
 }
 
 [data-reach-menu-popover] hr {
-  @apply my-1 mx-2 border-t border-gray-100 dark:border-slate-600;
+  @apply my-1 mx-2 border-t border-gray-100 dark:border-slate-700;
 }
diff --git a/app/soapbox/components/ui/select/select.tsx b/app/soapbox/components/ui/select/select.tsx
index 33a57c30e..485b3238c 100644
--- a/app/soapbox/components/ui/select/select.tsx
+++ b/app/soapbox/components/ui/select/select.tsx
@@ -7,7 +7,7 @@ const Select = React.forwardRef<HTMLSelectElement>((props, ref) => {
   return (
     <select
       ref={ref}
-      className='pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-800 sm:text-sm rounded-md'
+      className='pl-3 pr-10 py-2 text-base border-gray-300 dark:border-slate-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-800 sm:text-sm rounded-md'
       {...filteredProps}
     >
       {children}
diff --git a/app/soapbox/components/ui/tabs/tabs.tsx b/app/soapbox/components/ui/tabs/tabs.tsx
index ec8a9a09e..60b63d633 100644
--- a/app/soapbox/components/ui/tabs/tabs.tsx
+++ b/app/soapbox/components/ui/tabs/tabs.tsx
@@ -45,7 +45,7 @@ const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
         ref={ref}
       >
         <div
-          className='w-full h-[3px] bg-primary-200 dark:bg-slate-600 absolute'
+          className='w-full h-[3px] bg-primary-200 dark:bg-slate-700 absolute'
           style={{ top }}
         />
         <div
diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js
index 1db5b1dd3..2e6e28407 100644
--- a/app/soapbox/features/account/components/header.js
+++ b/app/soapbox/features/account/components/header.js
@@ -557,7 +557,7 @@ class Header extends ImmutablePureComponent {
             <div className='-mt-12 flex items-end space-x-5'>
               <div className='flex relative'>
                 <div
-                  className='h-24 w-24 bg-gray-400 rounded-full ring-4 ring-white'
+                  className='h-24 w-24 bg-gray-400 rounded-full ring-4 ring-white dark:ring-slate-800'
                 />
               </div>
             </div>
@@ -603,7 +603,7 @@ class Header extends ImmutablePureComponent {
               <a href={account.get('avatar')} onClick={this.handleAvatarClick} target='_blank'>
                 <Avatar
                   account={account}
-                  className='h-24 w-24 rounded-full ring-4 ring-white'
+                  className='h-24 w-24 rounded-full ring-4 ring-white dark:ring-slate-800'
                 />
               </a>
             </div>
@@ -615,7 +615,7 @@ class Header extends ImmutablePureComponent {
                     <MenuButton
                       as={IconButton}
                       src={require('@tabler/icons/icons/dots.svg')}
-                      className='text-primary-700 bg-primary-100 hover:bg-primary-200 p-2'
+                      className='text-primary-700 bg-primary-100 dark:!bg-slate-700 dark:!text-white hover:bg-primary-200 p-2'
                       iconClassName='w-5 h-5'
                     />
 
diff --git a/app/soapbox/features/notifications/index.js b/app/soapbox/features/notifications/index.js
index 4437e47f8..69c18799e 100644
--- a/app/soapbox/features/notifications/index.js
+++ b/app/soapbox/features/notifications/index.js
@@ -35,7 +35,7 @@ const Footer = ({ context }) => (
 );
 
 const Item = ({ context, ...rest }) => (
-  <div className='border-solid border-b border-gray-200 dark:border-gray-600' {...rest} />
+  <div className='border-solid border-b border-gray-200 dark:border-slate-700' {...rest} />
 );
 
 const getNotifications = createSelector([
diff --git a/app/soapbox/features/security/mfa/enable_otp_form.tsx b/app/soapbox/features/security/mfa/enable_otp_form.tsx
index 6d82801ce..adb02faff 100644
--- a/app/soapbox/features/security/mfa/enable_otp_form.tsx
+++ b/app/soapbox/features/security/mfa/enable_otp_form.tsx
@@ -20,7 +20,6 @@ interface IEnableOtpForm {
 }
 
 const EnableOtpForm: React.FC<IEnableOtpForm> = ({ displayOtpForm, handleSetupProceedClick }) => {
-
   const dispatch = useAppDispatch();
   const intl = useIntl();
   const history = useHistory();
@@ -43,7 +42,7 @@ const EnableOtpForm: React.FC<IEnableOtpForm> = ({ displayOtpForm, handleSetupPr
           <FormattedMessage id='mfa.setup_warning' defaultMessage="Write these codes down or save them somewhere secure - otherwise you won't see them again. If you lose access to your 2FA app and recovery codes you'll be locked out of your account." />
         </Text>
 
-        <div className='bg-gray-100 dark:bg-slate-700 rounded-lg p-4'>
+        <div className='bg-gray-100 dark:bg-slate-900/50 rounded-lg p-4'>
           <Stack space={3}>
             <Text weight='medium' align='center'>
               <FormattedMessage id='mfa.setup_recoverycodes' defaultMessage='Recovery codes' />
@@ -85,4 +84,4 @@ const EnableOtpForm: React.FC<IEnableOtpForm> = ({ displayOtpForm, handleSetupPr
   );
 };
 
-export default EnableOtpForm;
\ No newline at end of file
+export default EnableOtpForm;
diff --git a/app/soapbox/features/security/mfa/otp_confirm_form.tsx b/app/soapbox/features/security/mfa/otp_confirm_form.tsx
index f8f17c40b..b5770d268 100644
--- a/app/soapbox/features/security/mfa/otp_confirm_form.tsx
+++ b/app/soapbox/features/security/mfa/otp_confirm_form.tsx
@@ -65,7 +65,7 @@ const OtpConfirmForm: React.FC = () => {
 
   return (
     <Stack space={4}>
-      <hr className='mt-4' />
+      <hr className='mt-4 dark:border-slate-700' />
 
       <Form onSubmit={handleSubmit}>
         <Stack>
@@ -137,4 +137,4 @@ const OtpConfirmForm: React.FC = () => {
   );
 };
 
-export default OtpConfirmForm;
\ No newline at end of file
+export default OtpConfirmForm;

From 07070b102378122de55b858e22ed4dd6b35c5651 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 4 May 2022 11:00:21 -0400
Subject: [PATCH 4/4] Change header image background

---
 app/soapbox/features/account/components/header.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js
index 2e6e28407..ddc479654 100644
--- a/app/soapbox/features/account/components/header.js
+++ b/app/soapbox/features/account/components/header.js
@@ -550,7 +550,7 @@ class Header extends ImmutablePureComponent {
       return (
         <div className='-mt-4 -mx-4'>
           <div>
-            <div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200' />
+            <div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-slate-900/50' />
           </div>
 
           <div className='px-4 sm:px-6'>
@@ -578,7 +578,7 @@ class Header extends ImmutablePureComponent {
     return (
       <div className='-mt-4 -mx-4'>
         <div>
-          <div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200'>
+          <div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-slate-900/50'>
             {header && (
               <a href={account.get('header')} onClick={this.handleHeaderClick} target='_blank'>
                 <StillImage