From 17e73a38462d1866680c533693fbb8c6b42ffd0c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 15 Oct 2021 19:23:24 -0500
Subject: [PATCH] Prepare Home ColumnSettings

---
 .../components/column_settings.js             | 39 +++++++++++++------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/app/soapbox/features/home_timeline/components/column_settings.js b/app/soapbox/features/home_timeline/components/column_settings.js
index da553e779..892d4d813 100644
--- a/app/soapbox/features/home_timeline/components/column_settings.js
+++ b/app/soapbox/features/home_timeline/components/column_settings.js
@@ -1,33 +1,50 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
 import SettingToggle from '../../notifications/components/setting_toggle';
+import IconButton from 'soapbox/components/icon_button';
+
+const messages = defineMessages({
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+});
 
 export default @injectIntl
 class ColumnSettings extends React.PureComponent {
 
   static propTypes = {
+    intl: PropTypes.object.isRequired,
     settings: ImmutablePropTypes.map.isRequired,
     onChange: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
   };
 
   render() {
-    const { settings, onChange } = this.props;
+    const { intl, settings, onChange, onClose } = this.props;
 
     return (
-      <div>
-        <div className='column-settings__row'>
-          <SettingToggle prefix='home_timeline' settings={settings} settingPath={['shows', 'reblog']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show reposts' />} />
+      <div className='column-settings'>
+        <div className='column-settings__header'>
+          <h1 className='column-settings__title'>
+            <FormattedMessage id='home.column_settings.title' defaultMessage='Home settings' />
+          </h1>
+          <div className='column-settings__close'>
+            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
+          </div>
         </div>
 
-        <div className='column-settings__row'>
-          <SettingToggle prefix='home_timeline' settings={settings} settingPath={['shows', 'reply']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_replies' defaultMessage='Show replies' />} />
-        </div>
+        <div className='column-settings__content'>
+          <div className='column-settings__row'>
+            <SettingToggle prefix='home_timeline' settings={settings} settingPath={['shows', 'reblog']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show reposts' />} />
+          </div>
 
-        <div className='column-settings__row'>
-          <SettingToggle prefix='home_timeline' settings={settings} settingPath={['shows', 'direct']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_direct' defaultMessage='Show direct messages' />} />
+          <div className='column-settings__row'>
+            <SettingToggle prefix='home_timeline' settings={settings} settingPath={['shows', 'reply']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_replies' defaultMessage='Show replies' />} />
+          </div>
+
+          <div className='column-settings__row'>
+            <SettingToggle prefix='home_timeline' settings={settings} settingPath={['shows', 'direct']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_direct' defaultMessage='Show direct messages' />} />
+          </div>
         </div>
       </div>
     );