From 1ba551b88b872c47d379362abb3fee459061d733 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 3 Apr 2022 19:27:08 +0200
Subject: [PATCH] styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/ui/column/column.tsx   |   8 +-
 .../directory/components/account_card.js      |   2 +-
 .../export_data/components/csv_exporter.js    |  23 ++-
 app/soapbox/features/filters/index.js         | 183 +++++++++---------
 .../import_data/components/csv_importer.js    |  45 ++---
 app/soapbox/features/ui/index.js              |   8 +-
 app/styles/about.scss                         |   2 +-
 app/styles/components/directory.scss          |   9 +-
 app/styles/components/filters.scss            |  69 ++++---
 app/styles/components/radio-button.scss       |  15 +-
 app/styles/components/server-info.scss        |   3 +-
 11 files changed, 179 insertions(+), 188 deletions(-)

diff --git a/app/soapbox/components/ui/column/column.tsx b/app/soapbox/components/ui/column/column.tsx
index c66a57326..c647aa1f3 100644
--- a/app/soapbox/components/ui/column/column.tsx
+++ b/app/soapbox/components/ui/column/column.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 
@@ -10,10 +11,11 @@ interface IColumn {
   label?: string,
   transparent?: boolean,
   withHeader?: boolean,
+  className?: string,
 }
 
 const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element => {
-  const { backHref, children, label, transparent = false, withHeader = true } = props;
+  const { backHref, children, label, transparent = false, withHeader = true, className } = props;
 
   const history = useHistory();
 
@@ -32,11 +34,11 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
 
   const renderChildren = () => {
     if (transparent) {
-      return <div className='bg-white dark:bg-slate-800 sm:bg-transparent sm:dark:bg-transparent'>{children}</div>;
+      return <div className={classNames('bg-white dark:bg-slate-800 sm:bg-transparent sm:dark:bg-transparent', className)}>{children}</div>;
     }
 
     return (
-      <Card variant='rounded'>
+      <Card variant='rounded' className={className}>
         {withHeader ? (
           <CardHeader onBackClick={handleBackClick}>
             <CardTitle title={label} />
diff --git a/app/soapbox/features/directory/components/account_card.js b/app/soapbox/features/directory/components/account_card.js
index b40d85190..83a48b256 100644
--- a/app/soapbox/features/directory/components/account_card.js
+++ b/app/soapbox/features/directory/components/account_card.js
@@ -67,7 +67,7 @@ class AccountCard extends ImmutablePureComponent {
         </div>
 
         <div className='directory__card__extra'>
-          <div
+          <Text
             className={classNames('account__header__content', (account.get('note').length === 0 || account.get('note') === '<p></p>') && 'empty')}
             dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
           />
diff --git a/app/soapbox/features/export_data/components/csv_exporter.js b/app/soapbox/features/export_data/components/csv_exporter.js
index 87ca8ba50..bd47b83fb 100644
--- a/app/soapbox/features/export_data/components/csv_exporter.js
+++ b/app/soapbox/features/export_data/components/csv_exporter.js
@@ -4,7 +4,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { SimpleForm } from 'soapbox/features/forms';
+import { Button, Form, FormActions, Text } from 'soapbox/components/ui';
 
 export default @connect()
 @injectIntl
@@ -36,15 +36,18 @@ class CSVExporter extends ImmutablePureComponent {
     const { intl, messages } = this.props;
 
     return (
-      <SimpleForm>
-        <h2 className='export-title'>{intl.formatMessage(messages.input_label)}</h2>
-        <div>
-          <p className='export-hint hint'>{intl.formatMessage(messages.input_hint)}</p>
-          <button name='button' type='button' className='button button-primary' onClick={this.handleClick}>
-            {intl.formatMessage(messages.submit)}
-          </button>
-        </div>
-      </SimpleForm>
+      <>
+        <Form>
+          <Text size='xl' weight='bold'>{intl.formatMessage(messages.input_label)}</Text>
+          <Text theme='muted'>{intl.formatMessage(messages.input_hint)}</Text>
+
+          <FormActions>
+            <Button theme='primary' onClick={this.handleClick}>
+              {intl.formatMessage(messages.submit)}
+            </Button>
+          </FormActions>
+        </Form>
+      </>
     );
   }
 
diff --git a/app/soapbox/features/filters/index.js b/app/soapbox/features/filters/index.js
index e54b5668e..00e32d5f0 100644
--- a/app/soapbox/features/filters/index.js
+++ b/app/soapbox/features/filters/index.js
@@ -4,22 +4,17 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
+import { fetchFilters, createFilter, deleteFilter } from 'soapbox/actions/filters';
 import snackbar from 'soapbox/actions/snackbar';
 import Icon from 'soapbox/components/icon';
+import ScrollableList from 'soapbox/components/scrollable_list';
 import { Button } from 'soapbox/components/ui';
+import { CardHeader, CardTitle, Column, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui';
 import {
-  SimpleForm,
-  SimpleInput,
   FieldsGroup,
-  SelectDropdown,
   Checkbox,
 } from 'soapbox/features/forms';
 
-import { fetchFilters, createFilter, deleteFilter } from '../../actions/filters';
-import ScrollableList from '../../components/scrollable_list';
-import Column from '../ui/components/column';
-import ColumnSubheading from '../ui/components/column_subheading';
-
 const messages = defineMessages({
   heading: { id: 'column.filters', defaultMessage: 'Muted words' },
   subheading_add_new: { id: 'column.filters.subheading_add_new', defaultMessage: 'Add New Filter' },
@@ -41,14 +36,14 @@ const messages = defineMessages({
   delete: { id: 'column.filters.delete', defaultMessage: 'Delete' },
 });
 
-const expirations = {
-  null: 'Never',
-  // 3600: '30 minutes',
-  // 21600: '1 hour',
-  // 43200: '12 hours',
-  // 86400 : '1 day',
-  // 604800: '1 week',
-};
+// const expirations = {
+//   null: 'Never',
+//   // 3600: '30 minutes',
+//   // 21600: '1 hour',
+//   // 43200: '12 hours',
+//   // 86400 : '1 day',
+//   // 604800: '1 week',
+// };
 
 const mapStateToProps = state => ({
   filters: state.get('filters'),
@@ -136,91 +131,87 @@ class Filters extends ImmutablePureComponent {
 
     return (
       <Column className='filter-settings-panel' icon='filter' label={intl.formatMessage(messages.heading)}>
-        <ColumnSubheading text={intl.formatMessage(messages.subheading_add_new)} />
-        <SimpleForm>
-          <div className='filter-settings-panel'>
-            <fieldset disabled={false}>
-              <FieldsGroup>
-                <div className='two-col'>
-                  <SimpleInput
-                    label={intl.formatMessage(messages.keyword)}
-                    required
-                    type='text'
-                    name='phrase'
-                    onChange={this.handleInputChange}
-                  />
-                  <div className='input with_label required'>
-                    <SelectDropdown
-                      label={intl.formatMessage(messages.expires)}
-                      hint={intl.formatMessage(messages.expires_hint)}
-                      items={expirations}
-                      defaultValue={expirations.never}
-                      onChange={this.handleSelectChange}
-                    />
-                  </div>
-                </div>
-              </FieldsGroup>
+        <CardHeader>
+          <CardTitle title={intl.formatMessage(messages.subheading_add_new)} />
+        </CardHeader>
+        <Form onSubmit={this.handleAddNew}>
+          <FormGroup labelText={intl.formatMessage(messages.keyword)}>
+            <Input
+              required
+              type='text'
+              name='phrase'
+              onChange={this.handleInputChange}
+            />
+          </FormGroup>
+          {/* <FormGroup labelText={intl.formatMessage(messages.expires)} hintText={intl.formatMessage(messages.expires_hint)}>
+            <SelectDropdown
+              items={expirations}
+              defaultValue={expirations.never}
+              onChange={this.handleSelectChange}
+            />
+          </FormGroup> */}
 
-              <FieldsGroup>
-                <label className='checkboxes required'>
-                  <FormattedMessage id='filters.context_header' defaultMessage='Filter contexts' />
-                </label>
-                <span className='hint'>
-                  <FormattedMessage id='filters.context_hint' defaultMessage='One or multiple contexts where the filter should apply' />
-                </span>
-                <div className='two-col'>
-                  <Checkbox
-                    label={intl.formatMessage(messages.home_timeline)}
-                    name='home_timeline'
-                    checked={this.state.home_timeline}
-                    onChange={this.handleCheckboxChange}
-                  />
-                  <Checkbox
-                    label={intl.formatMessage(messages.public_timeline)}
-                    name='public_timeline'
-                    checked={this.state.public_timeline}
-                    onChange={this.handleCheckboxChange}
-                  />
-                  <Checkbox
-                    label={intl.formatMessage(messages.notifications)}
-                    name='notifications'
-                    checked={this.state.notifications}
-                    onChange={this.handleCheckboxChange}
-                  />
-                  <Checkbox
-                    label={intl.formatMessage(messages.conversations)}
-                    name='conversations'
-                    checked={this.state.conversations}
-                    onChange={this.handleCheckboxChange}
-                  />
-                </div>
+          <FieldsGroup>
+            <Text tag='label'>
+              <FormattedMessage id='filters.context_header' defaultMessage='Filter contexts' />
+            </Text>
+            <Text theme='muted' size='xs'>
+              <FormattedMessage id='filters.context_hint' defaultMessage='One or multiple contexts where the filter should apply' />
+            </Text>
+            <div className='two-col'>
+              <Checkbox
+                label={intl.formatMessage(messages.home_timeline)}
+                name='home_timeline'
+                checked={this.state.home_timeline}
+                onChange={this.handleCheckboxChange}
+              />
+              <Checkbox
+                label={intl.formatMessage(messages.public_timeline)}
+                name='public_timeline'
+                checked={this.state.public_timeline}
+                onChange={this.handleCheckboxChange}
+              />
+              <Checkbox
+                label={intl.formatMessage(messages.notifications)}
+                name='notifications'
+                checked={this.state.notifications}
+                onChange={this.handleCheckboxChange}
+              />
+              <Checkbox
+                label={intl.formatMessage(messages.conversations)}
+                name='conversations'
+                checked={this.state.conversations}
+                onChange={this.handleCheckboxChange}
+              />
+            </div>
 
-              </FieldsGroup>
+          </FieldsGroup>
 
-              <FieldsGroup>
-                <Checkbox
-                  label={intl.formatMessage(messages.drop_header)}
-                  hint={intl.formatMessage(messages.drop_hint)}
-                  name='irreversible'
-                  checked={this.state.irreversible}
-                  onChange={this.handleCheckboxChange}
-                />
-                <Checkbox
-                  label={intl.formatMessage(messages.whole_word_header)}
-                  hint={intl.formatMessage(messages.whole_word_hint)}
-                  name='whole_word'
-                  checked={this.state.whole_word}
-                  onChange={this.handleCheckboxChange}
-                />
-              </FieldsGroup>
-            </fieldset>
+          <FieldsGroup>
+            <Checkbox
+              label={intl.formatMessage(messages.drop_header)}
+              hint={intl.formatMessage(messages.drop_hint)}
+              name='irreversible'
+              checked={this.state.irreversible}
+              onChange={this.handleCheckboxChange}
+            />
+            <Checkbox
+              label={intl.formatMessage(messages.whole_word_header)}
+              hint={intl.formatMessage(messages.whole_word_hint)}
+              name='whole_word'
+              checked={this.state.whole_word}
+              onChange={this.handleCheckboxChange}
+            />
+          </FieldsGroup>
 
-            <Button className='button button-primary setup' text={intl.formatMessage(messages.add_new)} onClick={this.handleAddNew} />
+          <FormActions>
+            <Button type='submit' theme='primary'>{intl.formatMessage(messages.add_new)}</Button>
+          </FormActions>
+        </Form>
 
-          </div>
-        </SimpleForm>
-
-        <ColumnSubheading text={intl.formatMessage(messages.subheading_filters)} />
+        <CardHeader>
+          <CardTitle title={intl.formatMessage(messages.subheading_filters)} />
+        </CardHeader>
 
         <ScrollableList
           scrollKey='filters'
diff --git a/app/soapbox/features/import_data/components/csv_importer.js b/app/soapbox/features/import_data/components/csv_importer.js
index c0cc0114f..ff17cade4 100644
--- a/app/soapbox/features/import_data/components/csv_importer.js
+++ b/app/soapbox/features/import_data/components/csv_importer.js
@@ -4,11 +4,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 
-import {
-  SimpleInput,
-  SimpleForm,
-  FieldsGroup,
-} from 'soapbox/features/forms';
+import { Button, Form, FormActions, Text } from 'soapbox/components/ui';
 
 export default @connect()
 @injectIntl
@@ -51,29 +47,24 @@ class CSVImporter extends ImmutablePureComponent {
     const { intl, messages } = this.props;
 
     return (
-      <SimpleForm onSubmit={this.handleSubmit}>
-        <fieldset disabled={this.state.isLoading}>
-          <FieldsGroup>
-            <div className='fields-row file-picker'>
-              <div className='fields-row__column fields-group fields-row__column-6'>
-                <SimpleInput
-                  type='file'
-                  accept={['.csv', 'text/csv']}
-                  label={intl.formatMessage(messages.input_label)}
-                  hint={intl.formatMessage(messages.input_hint)}
-                  onChange={this.handleFileChange}
-                  required
-                />
-              </div>
-            </div>
-          </FieldsGroup>
-        </fieldset>
-        <div className='actions'>
-          <button name='button' type='submit' className='btn button button-primary'>
-            {intl.formatMessage(messages.submit)}
-          </button>
+      <Form onSubmit={this.handleSubmit} disabled={this.state.isLoading}>
+        <Text size='xl' weight='bold' tag='label'>{intl.formatMessage(messages.input_label)}</Text>
+        <div>
+          <input
+            className='text-black dark:text-white'
+            type='file'
+            accept={['.csv', 'text/csv']}
+            onChange={this.handleFileChange}
+            required
+          />
+          <Text theme='muted'>{intl.formatMessage(messages.input_hint)}</Text>
         </div>
-      </SimpleForm>
+        <FormActions>
+          <Button type='submit' theme='primary' disabled={this.state.isLoading}>
+            {intl.formatMessage(messages.submit)}
+          </Button>
+        </FormActions>
+      </Form>
     );
   }
 
diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js
index 8f3caa2f5..400cac95a 100644
--- a/app/soapbox/features/ui/index.js
+++ b/app/soapbox/features/ui/index.js
@@ -89,8 +89,8 @@ import {
   EmailConfirmation,
   DeleteAccount,
   SoapboxConfig,
-  // ExportData,
-  // ImportData,
+  ExportData,
+  ImportData,
   // Backups,
   MfaForm,
   ChatIndex,
@@ -318,8 +318,8 @@ class SwitchingColumnsArea extends React.PureComponent {
         <Redirect from='/auth/password/new' to='/reset-password' />
         <Redirect from='/auth/password/edit' to='/edit-password' />
         <WrappedRoute path='/settings/profile' page={DefaultPage} component={EditProfile} content={children} />
-        {/* <WrappedRoute path='/settings/export' page={DefaultPage} component={ExportData} content={children} /> */}
-        {/* <WrappedRoute path='/settings/import' page={DefaultPage} component={ImportData} content={children} /> */}
+        <WrappedRoute path='/settings/export' page={DefaultPage} component={ExportData} content={children} />
+        <WrappedRoute path='/settings/import' page={DefaultPage} component={ImportData} content={children} />
         {features.accountAliasesAPI && <WrappedRoute path='/settings/aliases' page={DefaultPage} component={Aliases} content={children} />}
         {features.accountMoving && <WrappedRoute path='/settings/migration' page={DefaultPage} component={Migration} content={children} />}
         <WrappedRoute path='/settings/email' page={DefaultPage} component={EditEmail} content={children} />
diff --git a/app/styles/about.scss b/app/styles/about.scss
index 70b757bec..380c7179d 100644
--- a/app/styles/about.scss
+++ b/app/styles/about.scss
@@ -1105,9 +1105,9 @@ $fluid-breakpoint: $maximum-width + 20px;
 }
 
 .brand__tagline {
+  @apply text-black dark:text-white;
   display: block;
   width: 470px;
-  color: var(--primary-text-color);
   font-size: 24px;
   line-height: 1.4;
   margin-top: 25px;
diff --git a/app/styles/components/directory.scss b/app/styles/components/directory.scss
index b07dabdb3..fa6925df7 100644
--- a/app/styles/components/directory.scss
+++ b/app/styles/components/directory.scss
@@ -1,10 +1,11 @@
 .directory {
   &__filter-form {
     display: flex;
+    gap: 30px;
     background: var(--foreground-color);
 
     &__column {
-      padding: 10px 15px;
+      padding-bottom: 10px;
     }
 
     .radio-button {
@@ -17,7 +18,6 @@
     grid-gap: 10px;
     grid-template-columns: minmax(0, 50%) minmax(0, 50%);
     width: 100%;
-    padding: 10px;
     transition: opacity 100ms ease-in;
     box-sizing: border-box;
 
@@ -118,6 +118,11 @@
           overflow: hidden;
           text-overflow: ellipsis;
         }
+
+        .verified-icon div,
+        .verified-icon svg {
+          @apply inline;
+        }
       }
     }
 
diff --git a/app/styles/components/filters.scss b/app/styles/components/filters.scss
index 030b3f9d2..d978995ac 100644
--- a/app/styles/components/filters.scss
+++ b/app/styles/components/filters.scss
@@ -1,12 +1,4 @@
 .filter-settings-panel {
-  h1 {
-    font-size: 18px;
-    line-height: 1.25;
-    color: var(--primary-text-color);
-    font-weight: 400;
-    margin: 20px auto;
-  }
-
   .item-list article {
     border-bottom: 1px solid var(--primary-text-color--faint);
 
@@ -43,62 +35,67 @@
     }
   }
 
+  .input.boolean {
+    .label_input {
+      @apply relative pl-7 text-black dark:text-white;
+
+      label {
+        @apply text-sm;
+      }
+
+      &__wrapper {
+        @apply static;
+      }
+
+      input[type="checkbox"] {
+        position: absolute;
+        top: 3px;
+        left: 0;
+      }
+    }
+
+    .hint {
+      @apply block pl-7 text-xs text-gray-500 dark:text-gray-400;
+    }
+  }
+
   .filter__container {
-    padding: 20px;
-    display: flex;
-    justify-content: space-between;
-    font-size: 14px;
+    @apply flex justify-between py-5 px-2 text-sm text-black dark:text-white;
 
     .filter__phrase,
     .filter__contexts,
     .filter__details {
-      padding: 5px 0;
+      @apply py-1;
     }
 
     span.filter__list-label {
-      padding-right: 5px;
-      color: var(--primary-text-color--faint);
+      @apply pr-1 text-gray-500 dark:text-gray-400;
     }
 
     span.filter__list-value span {
-      padding-right: 5px;
-      text-transform: capitalize;
+      @apply pr-1 capitalize;
 
       &::after {
-        content: ',';
+        content: ",";
       }
 
       &:last-of-type {
         &::after {
-          content: '';
+          content: "";
         }
       }
     }
 
     .filter__delete {
-      display: flex;
-      margin: 10px;
-      align-items: baseline;
-      cursor: pointer;
-      height: 20px;
+      @apply flex items-baseline h-5 m-2.5 cursor-pointer;
 
       span.filter__delete-label {
-        color: var(--primary-text-color--faint);
-        font-size: 14px;
-        font-weight: 800;
+        @apply text-gray-500 dark:text-gray-400 font-semibold;
       }
 
       .filter__delete-icon {
-        background: none;
-        color: var(--primary-text-color--faint);
-        padding: 0 5px;
-        margin: 0 auto;
-        font-size: 16px;
+        @apply px-1 mx-auto text-base text-gray-500 dark:text-gray-400;
       }
     }
   }
-
-  // .simple_form select {
-  //   margin-top: 0;
-  // }
 }
diff --git a/app/styles/components/radio-button.scss b/app/styles/components/radio-button.scss
index d1a303f3f..77fb82846 100644
--- a/app/styles/components/radio-button.scss
+++ b/app/styles/components/radio-button.scss
@@ -1,4 +1,5 @@
 .radio-button {
+  @apply text-black dark:text-white;
   font-size: 14px;
   position: relative;
   display: inline-block;
@@ -15,10 +16,7 @@
   }
 
   &__input {
-    display: inline-block;
-    position: relative;
-    border: 1px solid var(--primary-text-color--faint);
-    box-sizing: border-box;
+    @apply inline-block relative box-border border border-solid border-primary-600;
     width: 18px;
     height: 18px;
     flex: 0 0 auto;
@@ -28,8 +26,13 @@
     vertical-align: middle;
 
     &.checked {
-      border-color: var(--brand-color);
-      background: var(--brand-color);
+      @apply bg-primary-600;
+    }
+
+    &:active,
+    &:focus,
+    &:hover {
+      @apply border-4;
     }
   }
 }
diff --git a/app/styles/components/server-info.scss b/app/styles/components/server-info.scss
index f2714d68b..a24335eef 100644
--- a/app/styles/components/server-info.scss
+++ b/app/styles/components/server-info.scss
@@ -10,8 +10,7 @@
 
 .info__brand {
   .brand h1 {
-    color: var(--primary-text-color);
-    font-size: 26px;
+    @apply text-2xl text-black dark:text-white;
   }
 
   .brand__tagline {