From ef0de13c918161e0fe6f39e5ef5db0be9fae8a83 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 24 Mar 2022 18:56:22 -0500
Subject: [PATCH] Improve dark mode

---
 app/soapbox/components/ui/card/card.tsx       |   6 ++++--
 .../features/compose/components/search.tsx    |   2 +-
 app/soapbox/features/status/index.js          | Bin 23963 -> 23157 bytes
 app/styles/components/detailed-status.scss    |   4 ++--
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index 6d20da5645..9754628c95 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -4,6 +4,8 @@ import InlineSVG from 'react-inlinesvg';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
+import { Text } from 'soapbox/components/ui';
+
 const sizes = {
   md: 'p-4 sm:rounded-xl',
   lg: 'p-4 sm:p-6 sm:rounded-xl',
@@ -51,7 +53,7 @@ const CardHeader: React.FC<ICardHeader> = ({ children, backHref, onBackClick }):
     const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick };
 
     return (
-      <Comp {...backAttributes} className='mr-2' aria-label={intl.formatMessage(messages.back)}>
+      <Comp {...backAttributes} className='mr-2 text-gray-900 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
         <InlineSVG src={require('@tabler/icons/icons/arrow-left.svg')} className='h-6 w-6' />
         <span className='sr-only'>Back</span>
       </Comp>
@@ -72,7 +74,7 @@ interface ICardTitle {
 }
 
 const CardTitle = ({ title }: ICardTitle): JSX.Element => (
-  <h1 className='text-xl font-bold'>{title}</h1>
+  <Text size='xl' weight='bold' tag='h1'>{title}</Text>
 );
 
 const CardBody: React.FC = ({ children }): JSX.Element => (
diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx
index 695163f3c5..a11c4a3e2a 100644
--- a/app/soapbox/features/compose/components/search.tsx
+++ b/app/soapbox/features/compose/components/search.tsx
@@ -120,7 +120,7 @@ const Search = (props: ISearch) => {
 
       <div className='relative'>
         <Component
-          className='block w-full pl-3 pr-10 py-2 border border-gray-100 rounded-full leading-5 bg-gray-100 placeholder-gray-500 focus:bg-white focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm'
+          className='block w-full pl-3 pr-10 py-2 border border-gray-100 dark:border-slate-600 rounded-full leading-5 bg-gray-100 placeholder-gray-500 dark:bg-slate-900 focus:bg-white focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm'
           type='text'
           id='search'
           placeholder={intl.formatMessage(messages.placeholder)}
diff --git a/app/soapbox/features/status/index.js b/app/soapbox/features/status/index.js
index cf8fce97b75bac28ac70dbc2119d8f0c06d9a92f..5392bc1bfb006e0612051005d6bb4686994f3416 100644
GIT binary patch
delta 85
zcmbQeoAK)w#tkO^j9imn1xsyS7_^gFTp=Z~DBCJ2zbGZONVhmAu_RU3%)mf>vO$={
T=Hjq)Hk=9^Vnio@h*=E)QEDFc

delta 725
zcmbu7%`QVh6vrbHkw$C?3Bs{)k+gTgN?Jujbkj;md~9Ugd-P6BXJlqtnx-i)U^8}J
zz*54_OW1e-Phe&5+?Liytjuc8nR9;UfBu=bhn}0qp1Z}Oo7(Sh*8TYebk2GWfd@*0
zRbV1@=0`k4U_wA{*8rEmz(yKbnEKL`_sSrZ1?sDE8DI$Nn92~UOjNKPaFc?(1&J6M
zf*hf>s3F9r;U%Klc0KAE2xP`~@$-J8Gm5lA8DVColL1KQl&F;DCTT+bB@ck-R<pH=
zwMu5{v)`Vm?WpyT*yybOaR~%7rohUW@q!jP8MV-dhwTpU2MEA&E8J^g#9gL_S0GCY
zjbSA;DUDTRVwKEW>Lz1DDK*#K>Qe#JoFyGAjK!elKR`<61P@L!bsLfG5tE_79aSoc
zc<>){Pc^B=FjN0n&)x0~#5%I1!#ifephsJHR#(vbiCF$+Nje|@Ax^lMF&8tihDk%-
zMlB9Szm04p+}qxCf7)+5?IsS!2mLObe!~4i@wxYYa{HpM*8|^OZH>C8;*fjUzkUb9
C<I3Rx

diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index 5bcab11c3a..a7906dc8bc 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -168,7 +168,7 @@
 }
 
 .thread {
-  @apply sm:bg-white p-4 sm:shadow-xl sm:p-6 sm:rounded-xl;
+  @apply sm:bg-white sm:dark:bg-slate-800 p-4 sm:shadow-xl sm:p-6 sm:rounded-xl;
 
   &__status {
     @apply relative;
@@ -222,7 +222,7 @@
   // }
 
   &__connector {
-    @apply bg-gray-200 absolute w-0.5 left-5 hidden;
+    @apply bg-gray-200 dark:bg-gray-600 absolute w-0.5 left-5 hidden;
 
     &--bottom {
       @apply block;