move more styles to sass from inline

Author: h15200

src/assets/style/sidebar.scss

@@ -45,6 +45,14 @@
   width: 100%;
 }
 
+.composerContents_content {
+  display: flex;
+  flex-direction: column;
+  outline: none;
+}
+
+
+
 .composer_submit,
 .addMetadata {
   -webkit-appearance: none;
@@ -426,6 +434,7 @@
   padding: 5px;
   width: 100%;
   font-size: 14px;
+  resize: none;
 
   &:focus {
     outline: 0 none;

src/client/components/composer/ComposerContainer.jsx

@@ -51,22 +51,6 @@ const mapDispatchToProps = (dispatch) => ({
 class ComposerContainer extends Component {
   constructor(props) {
     super(props);
-    // this.state = {};
-  }
-
-  componentDidMount() {
-    // this.setState({
-    //   composerDisplay: this.props.composerDisplay,
-    // });
-  }
-
-  componentDidUpdate() {
-    //keeping the redux store state in sync with this component's local state
-    // if (this.props.composerDisplay !== this.state.composerDisplay) {
-    //   this.setState({
-    //     composerDisplay: this.props.composerDisplay,
-    //   });
-    // }
   }
 
   render() {

src/client/components/composer/NewRequest/BodyEntryForm.jsx

@@ -18,17 +18,17 @@ class BodyEntryForm extends Component {
   }
 
   render() {
-    let rawTypeStyles = {
+    const rawTypeStyles = {
       display: this.props.newRequestBody.bodyType === "raw" ? "block" : "none",
     };
 
-    let bodyEntryArea = (() => {
+    const bodyEntryArea = (() => {
       //BodyType of none : display nothing
       if (this.props.newRequestBody.bodyType === "none") {
         return;
       }
       //BodyType of XWWW... : display WWWForm entry
-      else if (this.props.newRequestBody.bodyType === "x-www-form-urlencoded") {
+      if (this.props.newRequestBody.bodyType === "x-www-form-urlencoded") {
         return (
           <WWWForm
             setNewRequestBody={this.props.setNewRequestBody}
@@ -37,7 +37,7 @@ class BodyEntryForm extends Component {
         );
       }
       //RawType of application/json : Text area box with error checking
-      else if (this.props.newRequestBody.rawType === "application/json") {
+      if (this.props.newRequestBody.rawType === "application/json") {
         return (
           <JSONTextArea
             setNewRequestBody={this.props.setNewRequestBody}
@@ -46,24 +46,22 @@ class BodyEntryForm extends Component {
         );
       }
       //all other cases..just plain text area
-      else {
-        return (
-          <textarea
-            value={this.props.newRequestBody.bodyContent}
-            className={"composer_textarea"}
-            style={{ resize: "none" }}
-            type="text"
-            placeholder="Body"
-            rows={10}
-            onChange={(e) => {
-              this.props.setNewRequestBody({
-                ...this.props.newRequestBody,
-                bodyContent: e.target.value,
-              });
-            }}
-          ></textarea>
-        );
-      }
+
+      return (
+        <textarea
+          value={this.props.newRequestBody.bodyContent}
+          className="composer_textarea"
+          type="text"
+          placeholder="Body"
+          rows={10}
+          onChange={(e) => {
+            this.props.setNewRequestBody({
+              ...this.props.newRequestBody,
+              bodyContent: e.target.value,
+            });
+          }}
+        />
+      );
     })();
 
     const arrowClass = this.state.show
@@ -80,7 +78,7 @@ class BodyEntryForm extends Component {
           onClick={this.toggleShow}
           style={this.props.stylesObj}
         >
-          <img className={arrowClass} src={dropDownArrow}></img>
+          <img className={arrowClass} src={dropDownArrow} alt="down arrow" />
           Body
         </div>
 

src/client/components/composer/NewRequest/ComposerNewRequest.jsx

@@ -378,9 +378,9 @@ class ComposerNewRequest extends Component {
     }
     return (
       <div
+        className="composerContents_content"
         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex={0}
-        style={{ display: "flex", flexDirection: "column", outline: "none" }}
       >
         <h1 className="composer_title">Create New Request</h1>