From 239e4b9d619b9ba52e82e42a068f1c4a46dc92ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 16 Apr 2022 23:25:15 +0200
Subject: [PATCH] modals?
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/features/list_adder/index.js  | 28 +++++++++++------------
 app/soapbox/features/list_editor/index.js | 16 ++++++++-----
 app/styles/components/modal.scss          |  3 ---
 3 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/app/soapbox/features/list_adder/index.js b/app/soapbox/features/list_adder/index.js
index 7df28d07f..7b7a6fb55 100644
--- a/app/soapbox/features/list_adder/index.js
+++ b/app/soapbox/features/list_adder/index.js
@@ -6,16 +6,15 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 
-import IconButton from 'soapbox/components/icon_button';
+import { setupListAdder, resetListAdder } from 'soapbox/actions/lists';
+import { CardHeader, CardTitle, Modal } from 'soapbox/components/ui';
 
-import { setupListAdder, resetListAdder } from '../../actions/lists';
 import NewListForm from '../lists/components/new_list_form';
-import ColumnSubheading from '../ui/components/column_subheading';
 
 import Account from './components/account';
 import List from './components/list';
-// hack
 
+// hack
 const getOrderedLists = createSelector([state => state.get('lists')], lists => {
   if (!lists) {
     return lists;
@@ -72,13 +71,10 @@ class ListAdder extends ImmutablePureComponent {
     const { accountId, listIds, intl } = this.props;
 
     return (
-      <div className='modal-root__modal compose-modal list-editor__content'>
-        <div className='compose-modal__header'>
-          <h3 className='compose-modal__header__title'>
-            <FormattedMessage id='list_adder.header_title' defaultMessage='Add or Remove from Lists' />
-          </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='list_adder.header_title' defaultMessage='Add or Remove from Lists' />}
+        onClose={this.onClickClose}
+      >
         <div className='compose-modal__content'>
           <div className='list-adder'>
             <div className='list-adder__account'>
@@ -87,18 +83,22 @@ class ListAdder extends ImmutablePureComponent {
 
             <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>
             <div className='list-adder__lists'>
               {listIds.map(ListId => <List key={ListId} listId={ListId} />)}
             </div>
           </div>
         </div>
-      </div>
+      </Modal>
     );
   }
 
diff --git a/app/soapbox/features/list_editor/index.js b/app/soapbox/features/list_editor/index.js
index 913cbfe50..82c943d21 100644
--- a/app/soapbox/features/list_editor/index.js
+++ b/app/soapbox/features/list_editor/index.js
@@ -6,9 +6,7 @@ import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import { setupListEditor, clearListSuggestions, resetListEditor } from 'soapbox/actions/lists';
-import { Modal } from 'soapbox/components/ui';
-
-import ColumnSubheading from '../ui/components/column_subheading';
+import { CardHeader, CardTitle, Modal } from 'soapbox/components/ui';
 
 import Account from './components/account';
 import EditListForm from './components/edit_list_form';
@@ -72,14 +70,18 @@ class ListEditor extends ImmutablePureComponent {
       >
         <div className='compose-modal__content list-editor__content'>
           <div className='list-editor'>
-            <ColumnSubheading text={intl.formatMessage(messages.changeTitle)} />
+            <CardHeader>
+              <CardTitle title={intl.formatMessage(messages.changeTitle)} />
+            </CardHeader>
             <EditListForm />
             <br />
 
             {
               accountIds.size > 0 &&
               <div>
-                <ColumnSubheading text={intl.formatMessage(messages.removeFromList)} />
+                <CardHeader>
+                  <CardTitle title={intl.formatMessage(messages.removeFromList)} />
+                </CardHeader>
                 <div className='list-editor__accounts'>
                   {accountIds.map(accountId => <Account key={accountId} accountId={accountId} added />)}
                 </div>
@@ -87,7 +89,9 @@ class ListEditor extends ImmutablePureComponent {
             }
 
             <br />
-            <ColumnSubheading text={intl.formatMessage(messages.addToList)} />
+            <CardHeader>
+              <CardTitle title={intl.formatMessage(messages.addToList)} />
+            </CardHeader>
             <Search />
             <div className='list-editor__accounts'>
               {searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)}
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index 728044af3..0b2e8ddba 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -709,9 +709,6 @@
     display: flex;
     flex-direction: row;
     flex: 1;
-    padding: 10px;
-    padding-left: max(10px, env(safe-area-inset-left));
-    padding-right: max(10px, env(safe-area-inset-right));
     overflow-y: hidden;
 
     &--scroll {