Merge branch 'next-dark-improvements' into 'next'

Next: Improve dark mode

See merge request soapbox-pub/soapbox-fe!1148

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 => (

app/soapbox/components/ui/column/__tests__/__snapshots__/column.test.js.snap

@@ -13,7 +13,7 @@ exports[`<Column /> renders correctly with minimal props 1`] = `
     >
       <button
         aria-label="Back"
-        className="mr-2"
+        className="mr-2 text-gray-900 dark:text-gray-100"
         onClick={[Function]}
       >
         <svg
@@ -30,7 +30,7 @@ exports[`<Column /> renders correctly with minimal props 1`] = `
         </span>
       </button>
       <h1
-        className="text-xl font-bold"
+        className="text-xl text-gray-900 dark:text-gray-100 font-bold tracking-normal font-sans"
       />
     </div>
     <div />

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)}

app/soapbox/features/status/index.js

@@ -647,28 +647,6 @@ class Status extends ImmutablePureComponent {
         <div className='px-4 pt-4 sm:p-0'>
           <SubNavigation message={intl.formatMessage(titleMessage, { username })} />
         </div>
-        {/*
-          Eye icon to show/hide all CWs in a thread.
-          I'm not convinced of the value of this. It needs a better design at the very least.
-        */}
-        {/* me &&
-          <ColumnHeader
-            extraButton={(
-              <button
-                className='column-header__button'
-                title={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)}
-                aria-label={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)}
-                onClick={this.handleToggleAll}
-                aria-pressed={
-                  status.get('hidden') ? 'false' : 'true'}
-              >
-                <Icon id={status.get('hidden') ? 'eye-slash' : 'eye'
-                }
-                />
-              </button>
-            )}
-          />
-        */}
 
         <div ref={this.setRef} className='thread'>
           <PullToRefresh onRefresh={this.handleRefresh}>
@@ -689,7 +667,7 @@ class Status extends ImmutablePureComponent {
                     onToggleMediaVisibility={this.handleToggleMediaVisibility}
                   />
 
-                  <hr className='mb-2' />
+                  <hr className='mb-2 dark:border-slate-600' />
 
                   <ActionBar
                     status={status}
@@ -724,7 +702,7 @@ class Status extends ImmutablePureComponent {
 
             {descendants && (
               <>
-                <hr className='mt-2' />
+                <hr className='mt-2 dark:border-slate-600' />
                 <div className='thread__descendants space-y-4'>{descendants}</div>
               </>
             )}

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;