design button container and add submit and cancel functions

packages/strapi-plugin-setings-manager/admin/src/components/Button/index.js

@@ -12,7 +12,7 @@ class Button extends React.Component {
   // eslint-disable-line react/prefer-stateless-function
   render() {
     return (
-      <button className={`btn btn-primary ${styles.button}`} {...this.props}>
+      <button className={`${styles[this.props.buttonSize]} ${styles[this.props.buttonBackground]} ${styles.button}`} {...this.props}>
         {this.props.label}
       </button>
     );
@@ -20,6 +20,8 @@ class Button extends React.Component {
 }
 
 Button.propTypes = {
+  buttonBackground: React.PropTypes.string,
+  buttonSize: React.PropTypes.string,
   label: React.PropTypes.string.isRequired,
 };
 

packages/strapi-plugin-setings-manager/admin/src/components/Button/styles.scss

@@ -1,3 +1,24 @@
 .button {
-
+  height: 3rem;
+  border-radius: 0.3rem;
+  text-transform: capitalize;
+  margin-right: 1.8rem;
+}
+
+.buttonLg {
+  width: 15rem;
+}
+
+.buttonMd {
+  width: 10rem;
+}
+
+.primary {
+  background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%);
+  color: white;
+}
+
+.secondary {
+  color: #F64D0A;
+  border: 0.1rem solid #F64D0A;
 }

packages/strapi-plugin-setings-manager/admin/src/components/ContentHeader/styles.scss

@@ -1,4 +1,5 @@
 .contentHeader { /* stylelint-disable */
+  position: relative;
   padding: 3rem 4rem;
   font-family: Lato;
   > span {

packages/strapi-plugin-setings-manager/admin/src/components/EditForm/index.js

@@ -6,6 +6,7 @@
 
 import React from 'react';
 import { map } from 'lodash';
+import Button from 'components/Button';
 import EditFormSection from 'components/EditFormSection';
 import styles from './styles.scss';
 
@@ -28,13 +29,19 @@ class EditForm extends React.Component { // eslint-disable-line react/prefer-sta
             )
           })}
         </div>
+        <div className={styles.buttonContainer}>
+          <Button label={"cancel"} buttonSize={"buttonMd"} buttonBackground={"secondary"} onClick={this.props.handleCancel} />
+          <Button label={"save"} buttonSize={"buttonLg"} buttonBackground={"primary"} onClick={this.props.handleSubmit} />
+        </div>
       </div>
     );
   }
 }
 
 EditForm.propTypes = {
+  handleCancel: React.PropTypes.func,
   handleChange: React.PropTypes.func.isRequired,
+  handleSubmit: React.PropTypes.func,
   sections: React.PropTypes.array,
   values: React.PropTypes.object,
 };

packages/strapi-plugin-setings-manager/admin/src/components/EditForm/styles.scss

@@ -11,3 +11,11 @@
   box-shadow: 0 0.2rem 0.4rem 0 #E3E9F3;
 
 }
+
+.buttonContainer {
+  position: absolute;
+  top: 3rem;
+  right: 3.3rem;
+  padding-top: 0.5rem;
+  padding-right: 2.8rem;
+}

packages/strapi-plugin-setings-manager/admin/src/containers/Home/actions.js

@@ -9,6 +9,8 @@ import {
   CONFIG_FETCH,
   CONFIG_FETCH_SUCCEEDED,
   CHANGE_INPUT,
+  CANCEL_CHANGES,
+  SUBMIT_CHANGES,
   DEFAULT_ACTION,
 } from './constants';
 
@@ -47,3 +49,16 @@ export function changeInput(key, value) {
     value,
   };
 }
+
+export function cancelChanges() {
+  return {
+    type: CANCEL_CHANGES,
+  };
+}
+
+export function submitChanges() {
+  console.log('ok');
+  return {
+    type: SUBMIT_CHANGES,
+  };
+}

packages/strapi-plugin-setings-manager/admin/src/containers/Home/constants.js

@@ -7,4 +7,6 @@
 export const CONFIG_FETCH = 'src/Home/CONFIG_FETCH';
 export const CONFIG_FETCH_SUCCEEDED = 'src/Home/CONFIG_FETCH_SUCCEEDED';
 export const CHANGE_INPUT = 'src/Home/CHANGE_INPUT';
+export const CANCEL_CHANGES = 'src/Home/CANCEL_CHANGES';
+export const SUBMIT_CHANGES = 'src/Home/SUBMIT_CHANGES';
 export const DEFAULT_ACTION = 'src/Home/DEFAULT_ACTION';

packages/strapi-plugin-setings-manager/admin/src/containers/Home/index.js

@@ -19,7 +19,7 @@ import EditForm from 'components/EditForm';
 
 import { makeSelectSections } from 'containers/App/selectors';
 import selectHome from './selectors';
-import { configFetch, changeInput } from './actions'
+import { configFetch, changeInput, cancelChanges, submitChanges } from './actions'
 import styles from './styles.scss';
 import config from './config.json';
 
@@ -66,6 +66,15 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
     this.props.changeInput(target.name, target.value);
   }
 
+  handleCancel = () => {
+    console.log('click');
+    this.props.cancelChanges();
+  }
+
+  handleSubmit = () => {
+    this.props.submitChanges();
+  }
+
   render() {
     if (this.props.home.loading) {
       return <div />;
@@ -88,7 +97,13 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
           name={this.props.home.configsDisplay.name}
           description={this.props.home.configsDisplay.description}
         />
-        <Form sections={this.props.home.configsDisplay.sections} values={this.props.home.modifiedData} handleChange={this.handleChange} />
+        <Form
+          sections={this.props.home.configsDisplay.sections}
+          values={this.props.home.modifiedData}
+          handleChange={this.handleChange}
+          handleCancel={this.handleCancel}
+          handleSubmit={this.handleSubmit}
+        />
       </div>
     );
   }
@@ -103,19 +118,23 @@ const mapStateToProps = createStructuredSelector({
 function mapDispatchToProps(dispatch) {
   return bindActionCreators(
     {
+      cancelChanges,
       changeInput,
       configFetch,
+      submitChanges,
     },
     dispatch
   )
 }
 
 Home.propTypes = {
+  cancelChanges: React.PropTypes.func,
   changeInput: React.PropTypes.func,
   configFetch: React.PropTypes.func.isRequired,
   home: React.PropTypes.object,
   params: React.PropTypes.object.isRequired,
   sections: React.PropTypes.array,
+  submitChanges: React.PropTypes.func,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Home);

packages/strapi-plugin-setings-manager/admin/src/containers/Home/reducer.js

@@ -9,6 +9,7 @@ import {
   CONFIG_FETCH,
   CONFIG_FETCH_SUCCEEDED,
   CHANGE_INPUT,
+  CANCEL_CHANGES,
 } from './constants';
 
 /* eslint-disable new-cap */
@@ -31,6 +32,8 @@ function homeReducer(state = initialState, action) {
         .set('modifiedData', Map(action.data));
     case CHANGE_INPUT:
       return state.updateIn(['modifiedData', action.key], value => action.value); // eslint-disable-line no-unused-vars
+    case CANCEL_CHANGES:
+      return state.set('modifiedData', state.get('initialData'));
     default:
       return state;
   }