From ab886e647c9e31e3bb1feadff235326349ac70a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 30 Dec 2021 13:25:50 +0100
Subject: [PATCH] Minor styles improvements
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/filters/index.js     | 84 +++++++++++------------
 app/soapbox/features/list_adder/index.js  |  2 +-
 app/soapbox/features/list_editor/index.js |  2 +-
 app/styles/components/list-forms.scss     |  6 +-
 app/styles/ui.scss                        |  4 ++
 5 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/app/soapbox/features/filters/index.js b/app/soapbox/features/filters/index.js
index 753fda7a5..abd497fa5 100644
--- a/app/soapbox/features/filters/index.js
+++ b/app/soapbox/features/filters/index.js
@@ -215,54 +215,50 @@ class Filters extends ImmutablePureComponent {
 
             <Button className='button button-primary setup' text={intl.formatMessage(messages.add_new)} onClick={this.handleAddNew} />
 
-            <ColumnSubheading text={intl.formatMessage(messages.subheading_filters)} />
-
-            <ScrollableList
-              scrollKey='filters'
-              emptyMessage={emptyMessage}
-            >
-              {filters.map((filter, i) => (
-                <div key={i} className='filter__container'>
-                  <div className='filter__details'>
-                    <div className='filter__phrase'>
-                      <span className='filter__list-label'><FormattedMessage id='filters.filters_list_phrase_label' defaultMessage='Keyword or phrase:' /></span>
-                      <span className='filter__list-value'>{filter.get('phrase')}</span>
-                    </div>
-                    <div className='filter__contexts'>
-                      <span className='filter__list-label'><FormattedMessage id='filters.filters_list_context_label' defaultMessage='Filter contexts:' /></span>
-                      <span className='filter__list-value'>
-                        {filter.get('context').map((context, i) => (
-                          <span key={i} className='context'>{context}</span>
-                        ))}
-                      </span>
-                    </div>
-                    <div className='filter__details'>
-                      <span className='filter__list-label'><FormattedMessage id='filters.filters_list_details_label' defaultMessage='Filter settings:' /></span>
-                      <span className='filter__list-value'>
-                        {filter.get('irreversible') ?
-                          <span><FormattedMessage id='filters.filters_list_drop' defaultMessage='Drop' /></span> :
-                          <span><FormattedMessage id='filters.filters_list_hide' defaultMessage='Hide' /></span>
-                        }
-                        {filter.get('whole_word') &&
-                          <span><FormattedMessage id='filters.filters_list_whole-word' defaultMessage='Whole word' /></span>
-                        }
-                      </span>
-                    </div>
-                  </div>
-                  <div className='filter__delete' role='button' tabIndex='0' onClick={this.handleFilterDelete} data-value={filter.get('id')} aria-label={intl.formatMessage(messages.delete)}>
-                    <Icon className='filter__delete-icon' id='times' size={40} />
-                    <span className='filter__delete-label'><FormattedMessage id='filters.filters_list_delete' defaultMessage='Delete' /></span>
-                  </div>
-                </div>
-              ))}
-            </ScrollableList>
-
           </div>
         </SimpleForm>
 
+        <ColumnSubheading text={intl.formatMessage(messages.subheading_filters)} />
 
-
-
+        <ScrollableList
+          scrollKey='filters'
+          emptyMessage={emptyMessage}
+        >
+          {filters.map((filter, i) => (
+            <div key={i} className='filter__container'>
+              <div className='filter__details'>
+                <div className='filter__phrase'>
+                  <span className='filter__list-label'><FormattedMessage id='filters.filters_list_phrase_label' defaultMessage='Keyword or phrase:' /></span>
+                  <span className='filter__list-value'>{filter.get('phrase')}</span>
+                </div>
+                <div className='filter__contexts'>
+                  <span className='filter__list-label'><FormattedMessage id='filters.filters_list_context_label' defaultMessage='Filter contexts:' /></span>
+                  <span className='filter__list-value'>
+                    {filter.get('context').map((context, i) => (
+                      <span key={i} className='context'>{context}</span>
+                    ))}
+                  </span>
+                </div>
+                <div className='filter__details'>
+                  <span className='filter__list-label'><FormattedMessage id='filters.filters_list_details_label' defaultMessage='Filter settings:' /></span>
+                  <span className='filter__list-value'>
+                    {filter.get('irreversible') ?
+                      <span><FormattedMessage id='filters.filters_list_drop' defaultMessage='Drop' /></span> :
+                      <span><FormattedMessage id='filters.filters_list_hide' defaultMessage='Hide' /></span>
+                    }
+                    {filter.get('whole_word') &&
+                      <span><FormattedMessage id='filters.filters_list_whole-word' defaultMessage='Whole word' /></span>
+                    }
+                  </span>
+                </div>
+              </div>
+              <div className='filter__delete' role='button' tabIndex='0' onClick={this.handleFilterDelete} data-value={filter.get('id')} aria-label={intl.formatMessage(messages.delete)}>
+                <Icon className='filter__delete-icon' id='times' size={40} />
+                <span className='filter__delete-label'><FormattedMessage id='filters.filters_list_delete' defaultMessage='Delete' /></span>
+              </div>
+            </div>
+          ))}
+        </ScrollableList>
       </Column>
     );
   }
diff --git a/app/soapbox/features/list_adder/index.js b/app/soapbox/features/list_adder/index.js
index 88e212fe4..0c159bc90 100644
--- a/app/soapbox/features/list_adder/index.js
+++ b/app/soapbox/features/list_adder/index.js
@@ -69,7 +69,7 @@ class ListAdder extends ImmutablePureComponent {
     const { accountId, listIds, intl } = this.props;
 
     return (
-      <div className='modal-root__modal compose-modal'>
+      <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' />
diff --git a/app/soapbox/features/list_editor/index.js b/app/soapbox/features/list_editor/index.js
index c9c732586..1e07ce853 100644
--- a/app/soapbox/features/list_editor/index.js
+++ b/app/soapbox/features/list_editor/index.js
@@ -70,7 +70,7 @@ class ListEditor extends ImmutablePureComponent {
           </h3>
           <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={this.onClickClose} />
         </div>
-        <div className='compose-modal__content'>
+        <div className='compose-modal__content list-editor__content'>
           <div className='list-editor'>
             <ColumnSubheading text={intl.formatMessage(messages.changeTitle)} />
             <EditListForm />
diff --git a/app/styles/components/list-forms.scss b/app/styles/components/list-forms.scss
index bc784fd31..354d170ec 100644
--- a/app/styles/components/list-forms.scss
+++ b/app/styles/components/list-forms.scss
@@ -14,6 +14,10 @@
     border-radius: 8px 8px 0 0;
   }
 
+  &__content {
+    padding: 0;
+  }
+
   &__accounts {
     background: var(--background-color);
     overflow-y: auto;
@@ -33,7 +37,7 @@
   .search {
     display: flex;
     flex-direction: row;
-    margin: 10px 0;
+    margin: 10px;
 
     > label {
       flex: 1 1;
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index 7e8d8018c..f29c89ba0 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -246,6 +246,10 @@
   }
 }
 
+article:last-child > .domain {
+  border-bottom: none;
+}
+
 .domain__wrapper {
   display: flex;
 }