Merge branch 'next_' into 'next'

next

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

app/soapbox/components/list.js

@@ -51,7 +51,7 @@ const ListItem = ({ label, hint, children, onClick }) => {
       </div>
 
       {onClick ? (
-        <div className='flex flex-row items-center text-gray-500'>
+        <div className='flex flex-row items-center text-gray-500 dark:text-gray-400'>
           {children}
 
           <Icon src={require('@tabler/icons/icons/chevron-right.svg')} className='ml-1' />

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

@@ -50,7 +50,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
           type={revealed ? 'text' : type}
           ref={ref}
           className={classNames({
-            'block w-full sm:text-sm border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500':
+            'dark:bg-slate-800 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500':
                 true,
             'pr-7': isPassword,
             'pl-8': typeof icon !== 'undefined',

app/soapbox/features/aliases/index.js

@@ -7,11 +7,10 @@ import { connect } from 'react-redux';
 import { fetchAliases, removeFromAliases } from 'soapbox/actions/aliases';
 import Icon from 'soapbox/components/icon';
 import ScrollableList from 'soapbox/components/scrollable_list';
+import { CardHeader, CardTitle, Column, HStack, Text } from 'soapbox/components/ui';
 import { makeGetAccount } from 'soapbox/selectors';
 import { getFeatures } from 'soapbox/utils/features';
 
-import Column from '../ui/components/column';
-import ColumnSubheading from '../ui/components/column_subheading';
 
 import Account from './components/account';
 import Search from './components/search';
@@ -71,7 +70,9 @@ class Aliases extends ImmutablePureComponent {
 
     return (
       <Column className='aliases-settings-panel' icon='suitcase' label={intl.formatMessage(messages.heading)}>
-        <ColumnSubheading text={intl.formatMessage(messages.subheading_add_new)} />
+        <CardHeader>
+          <CardTitle title={intl.formatMessage(messages.subheading_add_new)} />
+        </CardHeader>
         <Search />
         {
           loaded && searchAccountIds.size === 0 ? (
@@ -84,23 +85,26 @@ class Aliases extends ImmutablePureComponent {
             </div>
           )
         }
-        <ColumnSubheading text={intl.formatMessage(messages.subheading_aliases)} />
+        <CardHeader>
+          <CardTitle title={intl.formatMessage(messages.subheading_aliases)} />
+        </CardHeader>
         <div className='aliases-settings-panel'>
           <ScrollableList
             scrollKey='aliases'
             emptyMessage={emptyMessage}
           >
             {aliases.map((alias, i) => (
-              <div key={i} className='alias__container'>
-                <div className='alias__details'>
-                  <span className='alias__list-label'><FormattedMessage id='aliases.account_label' defaultMessage='Old account:' /></span>
-                  <span className='alias__list-value'>{alias}</span>
+              <HStack alignItems='center' justifyContent='between' space={1} key={i} className='p-2'>
+                <div>
+                  <Text tag='span' theme='muted'><FormattedMessage id='aliases.account_label' defaultMessage='Old account:' /></Text>
+                  {' '}
+                  <Text tag='span'>{alias}</Text>
                 </div>
-                <div className='alias__delete' role='button' tabIndex='0' onClick={this.handleFilterDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>
-                  <Icon className='alias__delete-icon' id='times' size={40} />
-                  <span className='alias__delete-label'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></span>
+                <div className='flex items-center' role='button' tabIndex='0' onClick={this.handleFilterDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>
+                  <Icon className='pr-1.5 text-lg' id='times' size={40} />
+                  <Text weight='bold' theme='muted'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></Text>
                 </div>
-              </div>
+              </HStack>
             ))}
           </ScrollableList>
         </div>

app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap

@@ -36,7 +36,7 @@ exports[`<LoginForm /> renders for Mastodon 1`] = `
               autoCapitalize="off"
               autoComplete="off"
               autoCorrect="off"
-              className="block w-full sm:text-sm border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
+              className="dark:bg-slate-800 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
               id="field-1"
               name="username"
               placeholder="Email address"
@@ -64,7 +64,7 @@ exports[`<LoginForm /> renders for Mastodon 1`] = `
               autoCapitalize="off"
               autoComplete="off"
               autoCorrect="off"
-              className="block w-full sm:text-sm border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 pr-7"
+              className="dark:bg-slate-800 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500 pr-7"
               id="field-1"
               name="password"
               placeholder="Password"
@@ -169,7 +169,7 @@ exports[`<LoginForm /> renders for Pleroma 1`] = `
               autoCapitalize="off"
               autoComplete="off"
               autoCorrect="off"
-              className="block w-full sm:text-sm border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
+              className="dark:bg-slate-800 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
               id="field-1"
               name="username"
               placeholder="Email address"
@@ -197,7 +197,7 @@ exports[`<LoginForm /> renders for Pleroma 1`] = `
               autoCapitalize="off"
               autoComplete="off"
               autoCorrect="off"
-              className="block w-full sm:text-sm border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 pr-7"
+              className="dark:bg-slate-800 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500 pr-7"
               id="field-1"
               name="password"
               placeholder="Password"

app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap

@@ -37,7 +37,7 @@ exports[`<LoginPage /> renders correctly on load 1`] = `
               autoCapitalize="off"
               autoComplete="off"
               autoCorrect="off"
-              className="block w-full sm:text-sm border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
+              className="dark:bg-slate-800 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
               id="field-1"
               name="username"
               placeholder="Email address"
@@ -65,7 +65,7 @@ exports[`<LoginPage /> renders correctly on load 1`] = `
               autoCapitalize="off"
               autoComplete="off"
               autoCorrect="off"
-              className="block w-full sm:text-sm border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 pr-7"
+              className="dark:bg-slate-800 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500 pr-7"
               id="field-1"
               name="password"
               placeholder="Password"

app/soapbox/features/bookmarks/index.js

@@ -74,6 +74,7 @@ class Bookmarks extends ImmutablePureComponent {
           shouldUpdateScroll={shouldUpdateScroll}
           emptyMessage={emptyMessage}
           bindToDocument={!multiColumn}
+          divideType='space'
         />
       </Column>
     );

app/soapbox/features/chats/chat_room.js

@@ -5,11 +5,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
 
 import { fetchChat, markChatRead } from 'soapbox/actions/chats';
-import Avatar from 'soapbox/components/avatar';
-import ColumnBackButton from 'soapbox/components/column_back_button';
 import { Column } from 'soapbox/components/ui';
 import { makeGetChat } from 'soapbox/selectors';
 import { getAcct } from 'soapbox/utils/accounts';
@@ -78,8 +75,8 @@ class ChatRoom extends ImmutablePureComponent {
     const account = chat.get('account');
 
     return (
-      <Column>
-        <div className='chatroom__back'>
+      <Column label={`@${getAcct(account, displayFqn)}`}>
+        {/* <div className='chatroom__back'>
           <ColumnBackButton />
           <Link to={`/@${account.get('acct')}`} className='chatroom__header'>
             <Avatar account={account} size={18} />
@@ -87,7 +84,7 @@ class ChatRoom extends ImmutablePureComponent {
               @{getAcct(account, displayFqn)}
             </div>
           </Link>
-        </div>
+        </div> */}
         <ChatBox
           chatId={chat.get('id')}
           onSetInputRef={this.handleInputRef}

app/soapbox/features/chats/components/chat_box.js

@@ -174,13 +174,11 @@ class ChatBox extends ImmutablePureComponent {
     const { resetFileKey } = this.state;
 
     return this.canSubmit() ? (
-      <div className='chat-box__send'>
-        <IconButton
-          src={require('@tabler/icons/icons/send.svg')}
-          title={intl.formatMessage(messages.send)}
-          onClick={this.sendMessage}
-        />
-      </div>
+      <IconButton
+        src={require('@tabler/icons/icons/send.svg')}
+        title={intl.formatMessage(messages.send)}
+        onClick={this.sendMessage}
+      />
     ) : (
       <UploadButton onSelectFile={this.handleFiles} resetFileKey={resetFileKey} />
     );
@@ -197,7 +195,9 @@ class ChatBox extends ImmutablePureComponent {
         {this.renderAttachment()}
         <UploadProgress active={isUploading} progress={uploadProgress*100} />
         <div className='chat-box__actions simple_form'>
-          {this.renderActionButton()}
+          <div className='chat-box__send'>
+            {this.renderActionButton()}
+          </div>
           <textarea
             rows={1}
             placeholder={intl.formatMessage(messages.placeholder)}

app/soapbox/features/chats/components/chat_message_list.js

@@ -12,6 +12,7 @@ import { createSelector } from 'reselect';
 import { fetchChatMessages, deleteChatMessage } from 'soapbox/actions/chats';
 import { openModal } from 'soapbox/actions/modals';
 import { initReportById } from 'soapbox/actions/reports';
+import { Text } from 'soapbox/components/ui';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 import emojify from 'soapbox/features/emoji/emoji';
 import Bundle from 'soapbox/features/ui/components/bundle';
@@ -293,10 +294,7 @@ class ChatMessageList extends ImmutablePureComponent {
           tabIndex={0}
         >
           {this.maybeRenderMedia(chatMessage)}
-          <span
-            className='chat-message__content'
-            dangerouslySetInnerHTML={{ __html: this.parseContent(chatMessage) }}
-          />
+          <Text size='sm' dangerouslySetInnerHTML={{ __html: this.parseContent(chatMessage) }} />
           <div className='chat-message__menu'>
             <DropdownMenuContainer
               items={menu}

app/soapbox/features/community_timeline/index.js

@@ -87,6 +87,7 @@ class CommunityTimeline extends React.PureComponent {
           onLoadMore={this.handleLoadMore}
           onRefresh={this.handleRefresh}
           emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}
+          divideType='space'
         />
       </Column>
     );

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 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'
+          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 dark:text-white placeholder-gray-500 dark:placeholder-gray-300 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/list_editor/index.js

@@ -2,12 +2,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { injectIntl, defineMessages } from 'react-intl';
+import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import IconButton from 'soapbox/components/icon_button';
+import { setupListEditor, clearListSuggestions, resetListEditor } from 'soapbox/actions/lists';
+import { Modal } from 'soapbox/components/ui';
 
-import { setupListEditor, clearListSuggestions, resetListEditor } from '../../actions/lists';
 import ColumnSubheading from '../ui/components/column_subheading';
 
 import Account from './components/account';
@@ -66,13 +66,10 @@ class ListEditor extends ImmutablePureComponent {
     const { accountIds, searchAccountIds, intl } = this.props;
 
     return (
-      <div className='modal-root__modal compose-modal'>
-        <div className='compose-modal__header'>
-          <h3 className='compose-modal__header__title'>
-            {intl.formatMessage(messages.editList)}
-          </h3>
-          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={this.onClickClose} />
-        </div>
+      <Modal
+        title={<FormattedMessage id='lists.edit' defaultMessage='Edit list' />}
+        onClose={this.onClickClose}
+      >
         <div className='compose-modal__content list-editor__content'>
           <div className='list-editor'>
             <ColumnSubheading text={intl.formatMessage(messages.changeTitle)} />
@@ -97,7 +94,7 @@ class ListEditor extends ImmutablePureComponent {
             </div>
           </div>
         </div>
-      </div>
+      </Modal>
     );
   }
 

app/soapbox/features/list_timeline/index.js

@@ -149,6 +149,7 @@ class ListTimeline extends React.PureComponent {
           timelineId={`list:${id}`}
           onLoadMore={this.handleLoadMore}
           emptyMessage={emptyMessage}
+          divideType='space'
         />
       </Column>
     );

app/soapbox/features/lists/index.js

@@ -6,13 +6,14 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 
+import { fetchLists } from 'soapbox/actions/lists';
+import ScrollableList from 'soapbox/components/scrollable_list';
 import { Spinner } from 'soapbox/components/ui';
+import { CardHeader, CardTitle } from 'soapbox/components/ui';
+
 
-import { fetchLists } from '../../actions/lists';
-import ScrollableList from '../../components/scrollable_list';
 import Column from '../ui/components/column';
 import ColumnLink from '../ui/components/column_link';
-import ColumnSubheading from '../ui/components/column_subheading';
 
 import NewListForm from './components/new_list_form';
 
@@ -65,10 +66,14 @@ class Lists extends ImmutablePureComponent {
     return (
       <Column icon='list-ul' label={intl.formatMessage(messages.heading)}>
         <br />
-        <ColumnSubheading text={intl.formatMessage(messages.add)} />
+        <CardHeader>
+          <CardTitle title={intl.formatMessage(messages.add)} />
+        </CardHeader>
         <NewListForm />
         <br />
-        <ColumnSubheading text={intl.formatMessage(messages.subheading)} />
+        <CardHeader>
+          <CardTitle title={intl.formatMessage(messages.subheading)} />
+        </CardHeader>
         <ScrollableList
           scrollKey='lists'
           emptyMessage={emptyMessage}

app/soapbox/features/migration/index.js

@@ -7,9 +7,8 @@ import { Link } from 'react-router-dom';
 
 import { moveAccount } from 'soapbox/actions/security';
 import snackbar from 'soapbox/actions/snackbar';
-import ShowablePassword from 'soapbox/components/showable_password';
-import { FieldsGroup, SimpleForm, TextInput } from 'soapbox/features/forms';
-import Column from 'soapbox/features/ui/components/column';
+// import Column from 'soapbox/features/ui/components/column';
+import { Button, Column, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui';
 
 const messages = defineMessages({
   heading: { id: 'column.migration', defaultMessage: 'Account migration' },
@@ -63,51 +62,56 @@ class Migration extends ImmutablePureComponent {
 
     return (
       <Column label={intl.formatMessage(messages.heading)}>
-        <SimpleForm onSubmit={this.handleSubmit}>
-          <fieldset disabled={this.state.isLoading}>
-            <FieldsGroup>
-              <p className='hint'>
-                <FormattedMessage
-                  id='migration.hint'
-                  defaultMessage='This will move your followers to the new account. No other data will be moved. To perform migration, you need to {link} on your new account first.'
-                  values={{
-                    link: (
-                      <Link to='/settings/aliases'>
-                        <FormattedMessage
-                          id='migration.hint.link'
-                          defaultMessage='create an account alias'
-                        />
-                      </Link>
-                    ),
-                  }}
-                />
-              </p>
-              <TextInput
-                label={intl.formatMessage(messages.acctFieldLabel)}
-                placeholder={intl.formatMessage(messages.acctFieldPlaceholder)}
-                name='targetAccount'
-                value={this.state.targetAccount}
-                onChange={this.handleInputChange}
-              />
-              <ShowablePassword
-                label={intl.formatMessage(messages.currentPasswordFieldLabel)}
-                name='password'
-                value={this.state.password}
-                onChange={this.handleInputChange}
-              />
-              <div className='actions'>
-                <button
-                  name='button'
-                  type='submit'
-                  className='btn button button-primary'
-                  disabled={!this.state.password || !this.state.targetAccount}
-                >
-                  {intl.formatMessage(messages.submit)}
-                </button>
-              </div>
-            </FieldsGroup>
-          </fieldset>
-        </SimpleForm>
+        <Form onSubmit={this.handleSubmit}>
+          <Text theme='muted'>
+            <FormattedMessage
+              id='migration.hint'
+              defaultMessage='This will move your followers to the new account. No other data will be moved. To perform migration, you need to {link} on your new account first.'
+              values={{
+                link: (
+                  <Link
+                    className='hover:underline text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-500'
+                    to='/settings/aliases'
+                  >
+                    <FormattedMessage
+                      id='migration.hint.link'
+                      defaultMessage='create an account alias'
+                    />
+                  </Link>
+                ),
+              }}
+            />
+          </Text>
+          <FormGroup
+            labelText={intl.formatMessage(messages.acctFieldLabel)}
+          >
+            <Input
+              name='targetAccount'
+              placeholder={intl.formatMessage(messages.acctFieldPlaceholder)}
+              onChange={this.handleInputChange}
+              value={this.state.targetAccount}
+              required
+            />
+          </FormGroup>
+          <FormGroup
+            labelText={intl.formatMessage(messages.currentPasswordFieldLabel)}
+          >
+            <Input
+              type='password'
+              name='password'
+              onChange={this.handleInputChange}
+              value={this.state.password}
+              required
+            />
+          </FormGroup>
+          <FormActions>
+            <Button
+              theme='primary'
+              text={intl.formatMessage(messages.submit)}
+              onClick={this.handleSubmit}
+            />
+          </FormActions>
+        </Form>
       </Column>
     );
   }

app/soapbox/features/public_timeline/index.js

@@ -136,6 +136,7 @@ class CommunityTimeline extends React.PureComponent {
           onLoadMore={this.handleLoadMore}
           onRefresh={this.handleRefresh}
           emptyMessage={<FormattedMessage id='empty_column.public' defaultMessage='There is nothing here! Write something publicly, or manually follow users from other servers to fill it up' />}
+          divideType='space'
         />
       </Column>
     );

app/soapbox/features/remote_timeline/index.js

@@ -107,6 +107,7 @@ class RemoteTimeline extends React.PureComponent {
               values={{ instance }}
             />
           }
+          divideType='space'
         />
       </Column>
     );

app/soapbox/features/ui/components/hotkeys_modal.js

@@ -1,13 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { injectIntl, FormattedMessage } from 'react-intl';
 
-import IconButton from 'soapbox/components/icon_button';
-
-const messages = defineMessages({
-  close: { id: 'lightbox.close', defaultMessage: 'Close' },
-});
+import { Modal } from 'soapbox/components/ui';
 
 export default @injectIntl
 class HotkeysModal extends ImmutablePureComponent {
@@ -18,14 +14,13 @@ class HotkeysModal extends ImmutablePureComponent {
   };
 
   render() {
-    const { intl, onClose } = this.props;
+    const { onClose } = this.props;
 
     return (
-      <div className='modal-root__modal hotkeys-modal'>
-        <div className='compose-modal__header'>
-          <h3 className='compose-modal__header__title'><FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' /></h3>
-          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
-        </div>
+      <Modal
+        title={<FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' />}
+        onClose={onClose}
+      >
         <div className='compose-modal__content'>
           <table>
             <thead>
@@ -159,7 +154,7 @@ class HotkeysModal extends ImmutablePureComponent {
             </tbody>
           </table>
         </div>
-      </div>
+      </Modal>
     );
   }
 

app/soapbox/features/ui/components/reactions_modal.js

@@ -7,9 +7,8 @@ import { connect } from 'react-redux';
 
 import { fetchFavourites, fetchReactions } from 'soapbox/actions/interactions';
 import FilterBar from 'soapbox/components/filter_bar';
-import IconButton from 'soapbox/components/icon_button';
 import ScrollableList from 'soapbox/components/scrollable_list';
-import { Spinner } from 'soapbox/components/ui';
+import { Modal, Spinner } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
 
 const messages = defineMessages({
@@ -89,7 +88,7 @@ class ReactionsModal extends React.PureComponent {
   }
 
   render() {
-    const { intl, reactions } = this.props;
+    const { reactions } = this.props;
     const { reaction } = this.state;
 
     const accounts = reactions && (reaction
@@ -118,20 +117,12 @@ class ReactionsModal extends React.PureComponent {
 
 
     return (
-      <div className='modal-root__modal reactions-modal'>
-        <div className='compose-modal__header'>
-          <h3 className='compose-modal__header__title'>
-            <FormattedMessage id='column.reactions' defaultMessage='Reactions' />
-          </h3>
-          <IconButton
-            className='compose-modal__close'
-            title={intl.formatMessage(messages.close)}
-            src={require('@tabler/icons/icons/x.svg')}
-            onClick={this.onClickClose} size={20}
-          />
-        </div>
+      <Modal
+        title={<FormattedMessage id='column.reactions' defaultMessage='Reactions' />}
+        onClose={this.onClickClose}
+      >
         {body}
-      </div>
+      </Modal>
     );
   }
 

app/soapbox/features/ui/components/report_modal.js

@@ -7,15 +7,15 @@ import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import Toggle from 'react-toggle';
 
+import { blockAccount } from 'soapbox/actions/accounts';
+import { changeReportComment, changeReportForward, changeReportBlock, submitReport } from 'soapbox/actions/reports';
+import { expandAccountTimeline } from 'soapbox/actions/timelines';
+import { Button, Modal } from 'soapbox/components/ui';
+import { makeGetAccount } from 'soapbox/selectors';
 import { isRemote, getDomain } from 'soapbox/utils/accounts';
 import { getFeatures } from 'soapbox/utils/features';
 
-import { blockAccount } from '../../../actions/accounts';
-import { changeReportComment, changeReportForward, changeReportBlock, submitReport } from '../../../actions/reports';
-import { expandAccountTimeline } from '../../../actions/timelines';
-import IconButton from '../../../components/icon_button';
-import { Button } from '../../../components/ui';
-import { makeGetAccount } from '../../../selectors';
+
 import StatusCheckBox from '../../report/containers/status_check_box_container';
 
 const messages = defineMessages({
@@ -107,12 +107,10 @@ class ReportModal extends ImmutablePureComponent {
     }
 
     return (
-      <div className='modal-root__modal report-modal'>
-        <div className='report-modal__target'>
-          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
-          <FormattedMessage id='report.target' defaultMessage='Reporting {target}' values={{ target: <strong>{account.get('acct')}</strong> }} />
-        </div>
-
+      <Modal
+        title={<FormattedMessage id='report.target' defaultMessage='Reporting {target}' values={{ target: <strong>{account.get('acct')}</strong> }} />}
+        onClose={onClose}
+      >
         <div className='report-modal__container'>
           <div className='report-modal__comment'>
             <p><FormattedMessage id='report.hint' defaultMessage='The report will be sent to your server moderators. You can provide an explanation of why you are reporting this account below:' /></p>
@@ -156,7 +154,7 @@ class ReportModal extends ImmutablePureComponent {
             </div>
           </div>
         </div>
-      </div>
+      </Modal>
     );
   }
 

app/styles/chats.scss

@@ -30,13 +30,7 @@
   }
 
   &__header {
-    @apply bg-primary-900 text-white;
-    box-sizing: border-box;
-    padding: 0 10px;
-    font-weight: bold;
-    border-radius: 6px 6px 0 0;
-    display: flex;
-    align-items: center;
+    @apply flex items-center py-0 px-2.5 box-border rounded-t-md font-bold bg-primary-600 text-white;
     height: 31px;
 
     .account__avatar {
@@ -151,11 +145,8 @@
   display: flex;
 
   &__bubble {
-    font-size: 15px;
-    padding: 4px 10px;
+    @apply px-2.5 py-1 rounded-lg bg-primary-50 dark:bg-slate-700;
     max-width: 70%;
-    border-radius: 10px;
-    background-color: var(--background-color);
     text-overflow: ellipsis;
     overflow-wrap: break-word;
     white-space: break-spaces;
@@ -185,8 +176,8 @@
   }
 
   &--me .chat-message__bubble {
+    @apply bg-primary-200 dark:bg-primary-900;
     margin-left: auto;
-    background-color: hsla(var(--brand-color_hsl), 0.2);
   }
 
   &--pending .chat-message__bubble {
@@ -286,25 +277,6 @@
     padding: 6px;
     position: relative;
 
-    .icon-button {
-      color: var(--primary-text-color);
-      position: absolute;
-      right: 10px;
-      top: 50%;
-      transform: translateY(-50%);
-      width: auto;
-      height: auto;
-      background: transparent !important;
-      border: 0;
-      padding: 0;
-      margin: 0;
-
-      .svg-icon {
-        width: 18px;
-        height: 18px;
-      }
-    }
-
     textarea {
       width: 100%;
       height: 100%;
@@ -320,6 +292,20 @@
       overflow: hidden;
     }
   }
+
+  &__send {
+    .icon-button,
+    button {
+      @apply absolute right-2.5 w-auto h-auto border-0 p-0 m-0 text-black dark:text-white;
+      top: 50%;
+      transform: translateY(-50%);
+
+      .svg-icon,
+      svg {
+        @apply w-[18px] h-[18px];
+      }
+    }
+  }
 }
 
 .ui--chatroom {
@@ -491,9 +477,7 @@
 }
 
 .chat-messages__divider {
-  text-align: center;
-  text-transform: uppercase;
+  @apply pt-3.5 pb-0.5 text-center uppercase text-black dark:text-white;
   font-size: 13px;
-  padding: 14px 0 2px;
   opacity: 0.8;
 }

app/styles/components/aliases.scss

@@ -51,53 +51,6 @@
     }
   }
 
-  .alias__container {
-    padding: 20px;
-    display: flex;
-    justify-content: space-between;
-    font-size: 14px;
-
-    span.alias__list-label {
-      padding-right: 5px;
-      color: var(--primary-text-color--faint);
-    }
-
-    span.alias__list-value span {
-      padding-right: 5px;
-      text-transform: capitalize;
-
-      &::after {
-        content: ',';
-      }
-
-      &:last-of-type {
-        &::after {
-          content: '';
-        }
-      }
-    }
-
-    .alias__delete {
-      display: flex;
-      align-items: baseline;
-      cursor: pointer;
-
-      span.alias__delete-label {
-        color: var(--primary-text-color--faint);
-        font-size: 14px;
-        font-weight: 800;
-      }
-
-      .alias__delete-icon {
-        background: none;
-        color: var(--primary-text-color--faint);
-        padding: 0 5px;
-        margin: 0 auto;
-        font-size: 16px;
-      }
-    }
-  }
-
   .slist--flex {
     height: 100%;
   }

app/styles/components/compose-form.scss

@@ -28,21 +28,14 @@
   }
 
   &__warning {
-    color: var(--primary-text-color);
-    margin-bottom: 10px;
-    background: var(--brand-color--faint);
-    box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
-    padding: 8px 10px;
-    border-radius: 4px;
-    font-size: 13px;
-    font-weight: 400;
+    @apply text-xs mb-2.5 px-2.5 py-2 shadow-md rounded bg-accent-300 text-white;
 
     strong {
-      color: var(--primary-text-color);
-      font-weight: 500;
+      @apply font-medium;
+
       @each $lang in $cjk-langs {
         &:lang(#{$lang}) {
-          font-weight: 700;
+          @apply font-bold;
         }
       }
     }

app/styles/components/snackbar.scss

@@ -3,7 +3,7 @@
 }
 
 .notification-bar {
-  @apply max-w-sm w-full flex flex-row items-center bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden;
+  @apply max-w-sm w-full flex flex-row items-center bg-white dark:bg-slate-900 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden;
 
   &::before {
     font-family: 'Font Awesome 5 Free';
@@ -44,11 +44,11 @@
 }
 
 .notification-bar-title {
-  @apply mb-1 text-sm font-medium text-gray-900;
+  @apply mb-1 text-sm font-medium text-gray-900 dark:text-gray-300;
 }
 
 .notification-bar-message {
-  @apply text-sm text-gray-700;
+  @apply text-sm text-gray-700 dark:text-gray-400;
 }
 
 .notification-bar-action a {