Fix position of commit button

__tests__/app/containers/__snapshots__/CodeStatus.test.tsx.snap

@@ -2,8 +2,10 @@
 
 exports[`CodeStatus Container Should render 1`] = `
 <CodeStatus
+  commit={[Function]}
   currentCommitHash="latest"
   currentState="Idle"
+  getCommitLog={[Function]}
   isCodeSaved={true}
   lastSaveTime={1970-01-01T00:00:00.000Z}
   width={250}

src/app/components/SubmitBar/CommitMessageBox.tsx

@@ -25,7 +25,7 @@ export class CommitMessageBox extends React.Component<CommitMessageBoxInterfaces
                 <div className="col form-row mb-2">
                   <div className="input-group">
                     <input
-                      className="form-control"
+                      className={classnames('form-control', styles['commit-input'])}
                       id="validationCommitMessage"
                       placeholder="Describe your commit."
                       maxLength={50}

src/app/components/SubmitBar/index.tsx

@@ -1,7 +1,6 @@
 import {
   faChevronLeft,
   faChevronRight,
-  faCodeBranch,
   faCog,
   faLock,
   faPlay,
@@ -158,16 +157,7 @@ export class SubmitBar extends React.Component<
           </span>
           <span>SAVE</span>
         </button>
-        <button
-          id="commit_button"
-          className={classnames(styles.customBtn)}
-          onClick={() => this.toggleCommitMessageBox(!isCommitMessageBoxOpen)}
-        >
-          <span className={classnames(styles.icon)}>
-            <FontAwesomeIcon icon={faCodeBranch} />
-          </span>
-          <span>COMMIT</span>
-        </button>
+
         <button
           className={classnames(styles.customBtn)}
           title="Submit Code"

src/app/components/code/CodeStatus.tsx

@@ -1,4 +1,8 @@
+import { faCodeBranch } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { CommitMessageBox } from 'app/components/SubmitBar/CommitMessageBox';
 import * as styles from 'app/styles/CodeStatus.module.css';
+import * as Commitstyles from 'app/styles/SubmitBar.module.css';
 import * as CodeStatusInterfaces from 'app/types/code/CodeStatus';
 import classnames from 'classnames';
 import * as React from 'react';
@@ -11,6 +15,8 @@ export class CodeStatus extends React.Component<
   public constructor(props: CodeStatusInterfaces.Props) {
     super(props);
     this.state = {
+      commitMessage: '',
+      isCommitMessageBoxOpen: false,
       lastSaveMessage: '',
     };
   }
@@ -68,12 +74,13 @@ export class CodeStatus extends React.Component<
 
   public render() {
     const { currentState, width, isCodeSaved, currentCommitHash } = this.props;
+    const { isCommitMessageBoxOpen, commitMessage } = this.state;
     return (
       <Row
         className={classnames(styles.CodeStatusRow)}
         style={{
           width,
-          height: '3.5vh',
+          height: '6vh',
         }}
       >
         <Col sm={6} className={classnames(styles.StatusTextCol)}>
@@ -91,6 +98,25 @@ export class CodeStatus extends React.Component<
             </p>
           )}
         </Col>
+
+        <Col>
+          <button
+            id="commit_button"
+            className={classnames(Commitstyles.customBtn)}
+            onClick={() => this.toggleCommitMessageBox(!isCommitMessageBoxOpen)}
+          >
+            <span className={classnames(Commitstyles.icon)}>
+              <FontAwesomeIcon icon={faCodeBranch} />
+            </span>
+            <span>COMMIT</span>
+          </button>
+        </Col>
+        <CommitMessageBox
+          commitMessage={commitMessage}
+          isCommitMessageBoxOpen={isCommitMessageBoxOpen}
+          handleCommit={this.handleCommit}
+          updateCommitMessage={this.updateCommitMessage}
+        />
         <Col sm={5} className={classnames(styles.CommitStatusCol)}>
           <p className={classnames(styles.StatusText)} style={{ textAlign: 'right' }}>
             {currentState}
@@ -104,4 +130,22 @@ export class CodeStatus extends React.Component<
       </Row>
     );
   }
+  private toggleCommitMessageBox = (isCommitMessageBoxOpen: boolean) => {
+    this.setState({
+      isCommitMessageBoxOpen,
+    });
+  };
+
+  private handleCommit = async () => {
+    const { commitMessage } = this.state;
+    const { commit, getCommitLog } = this.props;
+    await commit(commitMessage);
+    await this.toggleCommitMessageBox(false);
+    await getCommitLog();
+  };
+  private updateCommitMessage = (commitMessage: string) => {
+    this.setState({
+      commitMessage,
+    });
+  };
 }

src/app/containers/code/CodeStatus.ts

@@ -1,3 +1,4 @@
+import { CodeActions } from 'app/actions';
 import { CodeStatus } from 'app/components/code/CodeStatus';
 import { RootState } from 'app/reducers';
 import * as CodeStatusInterfaces from 'app/types/code/CodeStatus';
@@ -47,11 +48,11 @@ const mapStateToProps = (rootState: RootState) => {
 
 const codeStatusContainer = connect<
   CodeStatusInterfaces.StateProps,
-  {},
+  CodeStatusInterfaces.DispatchProps,
   CodeStatusInterfaces.OwnProps
->(
-  mapStateToProps,
-  {},
-)(CodeStatus);
+>(mapStateToProps, {
+  commit: CodeActions.commit,
+  getCommitLog: CodeActions.getCommitLog,
+})(CodeStatus);
 
 export default codeStatusContainer;

src/app/styles/CodeStatus.module.css

@@ -1,6 +1,6 @@
 .CodeStatusRow {
   background-color: #202020;
-  height: 22px;
+  height: 50px;
   margin: 0px;
 }
 

src/app/styles/CommitMessageBox.module.css

@@ -1,9 +1,11 @@
 .CommitMessageBox {
   position: absolute;
-  left: 15px;
-  top: 45px;
+  left: 115px;
+  top: 40px;
   width: 350px;
-  background-color: rgb(41, 41, 41);
+  background-color: white;
+  border: 2px solid royalblue;
+  border-radius: 5px !important;
   color: #ddd;
   border-radius: 3px;
   z-index: 1000;
@@ -15,13 +17,25 @@
 
 .customBtn:hover {
   color: #fff;
+  background-color: royalblue;
+}
+.customBtn {
+  background-color: royalblue;
 }
 
 .customBtn:active {
   transform: scale(1.04);
+  background-color: royalblue;
 }
 
 .customBtn:focus {
   outline: none;
   box-shadow: none;
+  background-color: royalblue;
+}
+
+.commit-input:focus,
+.commit-input:active {
+  box-shadow: none;
+  outline: none;
 }

src/app/types/code/CodeStatus.ts

@@ -9,8 +9,15 @@ export interface OwnProps {
   width: number;
 }
 
+export interface DispatchProps {
+  commit: (commitMessage: string) => void;
+  getCommitLog: () => void;
+}
+
 export interface State {
+  commitMessage: string;
+  isCommitMessageBoxOpen: boolean;
   lastSaveMessage: string;
 }
 
-export type Props = OwnProps & StateProps & {};
+export type Props = OwnProps & StateProps & DispatchProps;