Progress

app/javascript/gabsocial/components/modal/display_options_modal.js

@@ -1,24 +1,30 @@
 import { injectIntl, defineMessages } from 'react-intl'
-import { muteAccount } from '../../actions/accounts'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ModalLayout from './modal_layout'
+import Button from '../button'
+import Text from '../text'
+import SettingSwitch from '../setting_switch'
 
 const messages = defineMessages({
-  muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
-  cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
-  title: { id: 'display_options', defaultMessage: 'Display Options' },
+  message: { id: 'display_options.message', defaultMessage: 'Display settings affect your Gab account on this browser. These settings are only visible to you.' },
+  title: { id: 'display_options', defaultMessage: 'Customize your view' },
 })
 
 const mapStateToProps = (state) => ({
-  
+  settings: state.getIn(['notifications', 'filter']),
 })
 
 const mapDispatchToProps = (dispatch) => ({
-  
+  onChange(path, value) {
+    dispatch(setFilter(path, value))
+  },
 })
 
 export default
 @connect(mapStateToProps, mapDispatchToProps)
 @injectIntl
-class DisplayOptionsModal extends PureComponent {
+class DisplayOptionsModal extends ImmutablePureComponent {
 
   static propTypes = {
     isSubmitting: PropTypes.bool.isRequired,
@@ -26,10 +32,8 @@ class DisplayOptionsModal extends PureComponent {
     onConfirm: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
-  }
-
-  componentDidMount() {
-    this.button.focus()
+    onChange: PropTypes.func.isRequired,
+    settings: ImmutablePropTypes.map.isRequired,
   }
 
   handleClick = () => {
@@ -37,20 +41,107 @@ class DisplayOptionsModal extends PureComponent {
     this.props.onConfirm(this.props.account, this.props.notifications)
   }
 
-  handleCancel = () => {
-    this.props.onClose()
-  }
-
   // document.documentElement.style.setProperty("--color-surface", "black");
   
   render() {
-    const { account, intl } = this.props
+    const {
+      account,
+      intl,
+      settings,
+      onChange,
+      onClose,
+    } = this.props
+
+    // theme - light, muted, dark
+    // text size - extra small, small, normal, medium, large, extra large
+    // rounded borders
 
     return (
       <ModalLayout
-        width={320}
+        onClose={onClose}
+        width={520}
         title={intl.formatMessage(messages.title)}
       >
+
+        <div className={[_s.default, _s.mb15].join(' ')}>
+          <Text>
+            {intl.formatMessage(messages.message)}
+          </Text>
+        </div>
+
+        <div className={[_s.default, _s.mb10].join(' ')}>
+          <Text weight='bold' color='secondary'>
+            Font Size
+          </Text>
+          <div className={[_s.default, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
+            test
+          </div>
+        </div>
+
+        <div className={[_s.default, _s.mb10].join(' ')}>
+          <Text weight='bold' color='secondary'>
+            Rounded
+          </Text>
+          <div className={[_s.default, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
+            <SettingSwitch
+              prefix='notification'
+              settings={settings}
+              settingPath={'onlyVerified'}
+              onChange={onChange}
+              label={'Small Radius'}
+            />
+
+            <SettingSwitch
+              prefix='notification'
+              settings={settings}
+              settingPath={'onlyVerified'}
+              onChange={onChange}
+              label={'Circle Radius'}
+            />
+          </div>
+        </div>
+
+        <div className={[_s.default, _s.mb10].join(' ')}>
+          <Text weight='bold' color='secondary'>
+            Theme
+          </Text>
+          <div className={[_s.default, _s.radiusSmall, _s.flexRow, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
+
+            <div className={[_s.default, _s.py10, _s.px10, _s.flexGrow1].join(' ')}>
+              <div className={[_s.default, _s.bgPrimary, _s.radiusSmall]}>
+                <Text>
+                  Light
+                </Text>
+              </div>
+            </div>
+
+            <div className={[_s.default, _s.py10, _s.px10, _s.flexGrow1].join(' ')}>
+              <div className={[_s.default, _s.bgPrimary, _s.radiusSmall]}>
+                <Text>
+                  Muted
+                </Text>
+              </div>
+            </div>
+
+            <div className={[_s.default, _s.py10, _s.px10, _s.flexGrow1].join(' ')}>
+              <div className={[_s.default, _s.bgPrimary, _s.radiusSmall]}>
+                <Text>
+                  Black
+                </Text>
+              </div>
+            </div>
+
+          </div>
+        </div>
+        
+        <div className={[_s.mlAuto, _s.mrAuto].join(' ')}>
+          <Button>
+            <Text size='medium' color='inherit'>
+              Done
+            </Text>
+          </Button>
+        </div>
+
       </ModalLayout> 
     )
   }