Adjust styling

Author: kgryte

src/components/CommitBox.tsx

@@ -2,12 +2,11 @@ import * as React from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import { classes } from 'typestyle';
 import {
-  stagedCommitButtonDisabledStyle,
-  stagedCommitButtonReadyStyle,
-  stagedCommitButtonStyle,
-  stagedCommitMessageStyle,
-  stagedCommitStyle,
-  textInputStyle
+  commitFormClass,
+  commitSummaryClass,
+  commitDescriptionClass,
+  commitButtonClass,
+  commitButtonDisabledClass
 } from '../style/CommitBox';
 
 /**
@@ -70,49 +69,39 @@ export class CommitBox extends React.Component<
    * @returns fragment
    */
   render() {
+    const disabled = !(this.props.hasFiles && this.state.summary);
     return (
-      <form className={stagedCommitStyle}>
-        <textarea
-          className={classes(textInputStyle, stagedCommitMessageStyle)}
+      <form className={commitFormClass}>
+        <input
+          className={commitSummaryClass}
+          type="text"
           placeholder="Summary (required)"
           value={this.state.summary}
           onChange={this._onSummaryChange}
           onKeyPress={this._onSummaryKeyPress}
         />
         <TextareaAutosize
-          className={classes(textInputStyle, stagedCommitMessageStyle)}
-          minRows={2}
+          className={commitDescriptionClass}
+          minRows={5}
           placeholder="Description"
           value={this.state.description}
           onChange={this._onDescriptionChange}
-          onKeyPress={this._onDescriptionKeyPress}
         />
         <input
-          className={this._commitButtonStyle()}
+          className={classes(
+            commitButtonClass,
+            disabled ? commitButtonDisabledClass : null
+          )}
           type="button"
           title="Commit"
-          disabled={!(this.props.hasFiles && this.state.summary)}
+          value="Commit"
+          disabled={disabled}
           onClick={this._onCommitClick}
         />
       </form>
     );
   }
 
-  /**
-   * Returns classes for toggling (and styling) the commit button.
-   *
-   * @returns classes to apply
-   */
-  private _commitButtonStyle = (): string => {
-    if (this.props.hasFiles) {
-      if (this.state.summary.length === 0) {
-        return classes(stagedCommitButtonStyle, stagedCommitButtonReadyStyle);
-      }
-      return stagedCommitButtonStyle;
-    }
-    return classes(stagedCommitButtonStyle, stagedCommitButtonDisabledStyle);
-  };
-
   /**
    * Callback invoked upon clicking a commit message submit button.
    *
@@ -137,24 +126,6 @@ export class CommitBox extends React.Component<
     });
   };
 
-  /**
-   * Callback invoked upon a `'keypress'` event when entering a commit message description.
-   *
-   * ## Notes
-   *
-   * -   Prevents triggering a `'submit'` action when hitting the `ENTER` key while entering a commit message description.
-   *
-   * @param event - event object
-   */
-  private _onDescriptionKeyPress(event: any): void {
-    if (event.which === 13) {
-      event.preventDefault();
-      this.setState({
-        description: this.state.description + '\n'
-      });
-    }
-  }
-
   /**
    * Callback invoked upon updating a commit message summary.
    *

src/style/CommitBox.ts

@@ -1,57 +1,65 @@
 import { style } from 'typestyle';
 
-// need to override font-size from user agent stylesheet
-export const stagedCommitButtonStyle = style({
-  backgroundColor: 'var(--jp-brand-color1)',
-  backgroundImage: 'var(--jp-checkmark)',
-  backgroundSize: '100%',
-  backgroundRepeat: 'no-repeat',
-  backgroundPosition: 'center',
-  border: '0',
-  color: 'white',
-  flex: '1 1 auto',
-  fontSize: 'var(--jp-ui-font-size1)',
-  height: 'calc(2 * (1.25em - 1px))',
-  padding: 'calc(var(--jp-code-padding) + 1px) 7px',
-  width: '40px'
-});
-
-export const stagedCommitButtonReadyStyle = style({
-  opacity: 0.3
-});
+export const commitFormClass = style({
+  display: 'flex',
+  flexWrap: 'wrap',
 
-export const stagedCommitButtonDisabledStyle = style({
-  backgroundColor: 'lightgray'
-});
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
 
-export const textInputStyle = style({
-  outline: 'none'
-});
+  padding: '8px',
+  paddingTop: '1em',
 
-export const stagedCommitStyle = style({
-  resize: 'none',
-  display: 'flex',
   alignItems: 'flex-start',
-  margin: '8px'
+
+  borderTop: 'var(--jp-border-width) solid var(--jp-border-color2)'
 });
 
-// need to override font-size from user agent stylesheet
-export const stagedCommitMessageStyle = style({
-  backgroundColor: 'var(--jp-layout-color1)',
-  border: 'var(--jp-border-width) solid var(--jp-border-color2)',
+export const commitSummaryClass = style({
+  width: '100%',
+  height: '1.5em',
+
+  marginBottom: '1em',
+  padding: 'var(--jp-code-padding)',
+
+  outline: 'none',
+  overflowX: 'auto',
+
   color: 'var(--jp-ui-font-color0)',
   fontSize: 'var(--jp-ui-font-size1)',
   fontWeight: 300,
-  flex: '20 1 auto',
-  overflowX: 'auto',
+
+  backgroundColor: 'var(--jp-layout-color1)',
+  border: 'var(--jp-border-width) solid var(--jp-border-color2)',
+  borderRadius: '3px'
+});
+
+export const commitDescriptionClass = style({
+  width: '100%',
+
+  marginBottom: '1em',
   padding: 'var(--jp-code-padding)',
+
+  outline: 'none',
+  overflowX: 'auto',
   resize: 'none',
-  width: '75%',
+
+  color: 'var(--jp-ui-font-color0)',
+  fontSize: 'var(--jp-ui-font-size1)',
+  fontWeight: 300,
+
+  backgroundColor: 'var(--jp-layout-color1)',
+  border: 'var(--jp-border-width) solid var(--jp-border-color2)',
+  borderRadius: '3px',
 
   $nest: {
     '&:focus': {
       outline: 'none'
     },
+    '&::placeholder': {
+      color: 'var(--jp-ui-font-color3)'
+    },
     '&::-webkit-input-placeholder': {
       color: 'var(--jp-ui-font-color3)'
     },
@@ -63,3 +71,19 @@ export const stagedCommitMessageStyle = style({
     }
   }
 });
+
+export const commitButtonClass = style({
+  width: '100%',
+  height: '2em',
+
+  color: 'white',
+  fontSize: 'var(--jp-ui-font-size1)',
+
+  backgroundColor: 'var(--jp-brand-color1)',
+  border: '0',
+  borderRadius: '3px'
+});
+
+export const commitButtonDisabledClass = style({
+  backgroundColor: '#d3d3d3' // lightgrey
+});