working commit

app/src/configure-activity.css

@@ -4,7 +4,6 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    padding: 0 10px;
 }
 
 .configure-upper {

app/src/configure-activity.js

@@ -15,23 +15,28 @@ class ConfigureActivity extends Component {
         height: props.height,
         width: props.width,
       },
+      editorConfig: { ...this.props.editorOptions },
     };
 
     props.editorConfig(api.editorConfigResource());
   }
 
   updateConfiguration(key, val) {
-    const newEditorConfig = { ...this.props.editorOptions, [key]: val };
+    this.setState({
+      editorConfig: { ...this.state.editorConfig, [key]: val },
+    });
+  }
 
-    this.props.updateEditorConfig(api.editorConfigResource(), newEditorConfig);
+  save() {
+    this.props.updateEditorConfig(api.editorConfigResource(), this.state.editorConfig);
   }
 
   renderEditorOption(key, val, label) {
     const editorOptionClasses = (key, val) => {
       if (val) {
-        return cx('configure-option', { 'is-selected': this.props.editorOptions[key] === val });
+        return cx('configure-option', { 'is-selected': this.state.editorConfig[key] === val });
       }
-      return cx('configure-option', { 'is-selected': !this.props.editorOptions[key] });
+      return cx('configure-option', { 'is-selected': !this.state.editorConfig[key] });
     };
 
     return (
@@ -76,6 +81,8 @@ class ConfigureActivity extends Component {
             <span>maiden version: {VERSION} ({COMMIT})</span>
           </div>
         </div>
+        {/* TODO: instead of onclick, I need the other TODO statement to call this.save() as defined in this file */}
+        <div onClick={() => this.save()}>save</div>
       </div>
     );
   }

app/src/workspace.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import ReactModal from 'react-modal';
+import ModalContent from './modal-content';
 import BoundConfigureActivity from './bound-configure-activity';
 import ActivityBar from './activity-bar';
 import activities from './activities';
@@ -108,6 +109,13 @@ class Workspace extends Component {
         this.props.toggleComponent('config');
     }
 
+    handleConfigModalAction = (choice) => {
+        if (choice === 'ok') {
+            // TODO: this needs to call the ConfigActivity's save method
+        }
+        this.handleCloseConfigModal();
+    }
+
     render() {
         const selectedActivity = this.props.activities.find(a => {
             return this.props.selected === a.selector
@@ -136,23 +144,15 @@ class Workspace extends Component {
                 </ReactModal>
                 <ReactModal
                     isOpen={!this.props.configHidden}
-                    onRequestClose={this.handleCloseConfigModal}
                     contentLabel={"configure"}
                     className="workspace-modal workspace-modal--config"
                     overlayClassName="workspace-modal-overlay"
                 >
-                    <div className="workspace-modal-close-container">
-                        <IconButton
-                            key="cancel"
-                            action={() => this.props.toggleComponent('config')}
-                            tooltipMessage="cancel"
-                            tooltipPosition="left"
-                            icon={ICONS.cross}
-                            color="hsl(0, 0%, 59%)"
-                            size="12"
-                        />
-                    </div>
-                    <BoundConfigureActivity></BoundConfigureActivity>
+                    <ModalContent
+                        message={"configure"}
+                        buttonAction={this.handleConfigModalAction}>
+                            <BoundConfigureActivity></BoundConfigureActivity>
+                    </ModalContent>
                 </ReactModal>
             </div>
         )