improvement: Move inline styles to SCSS instead (#5578)

* fix: convert propStyle to propClass

Author: tomdegoede

src/core/components/array-model.jsx

@@ -2,7 +2,7 @@ import React, { Component } from "react"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 
-const propStyle = { color: "#999", fontStyle: "italic" }
+const propClass = "property"
 
 export default class ArrayModel extends Component {
   static propTypes = {
@@ -44,7 +44,7 @@ export default class ArrayModel extends Component {
       <ModelCollapse title={titleEl} expanded={ depth <= expandDepth } collapsedContent="[...]">
         [
           {
-            properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
+            properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null
           }
           {
             !description ? (properties.size ? <div className="markdown"></div> : null) :

src/core/components/auth/error.jsx

@@ -15,8 +15,8 @@ export default class AuthError extends React.Component {
     let source = error.get("source")
 
     return (
-      <div className="errors" style={{ backgroundColor: "#ffeeee", color: "red", margin: "1em" }}>
-        <b style={{ textTransform: "capitalize", marginRight: "1em"}} >{ source } { level }</b>
+      <div className="errors">
+        <b>{ source } { level }</b>
         <span>{ message }</span>
       </div>
     )

src/core/components/curl.jsx

@@ -20,7 +20,7 @@ export default class Curl extends React.Component {
       <div>
         <h4>Curl</h4>
         <div className="copy-paste">
-          <textarea onFocus={this.handleFocus} readOnly={true} className="curl" style={{ whiteSpace: "normal" }} value={curl}></textarea>
+          <textarea onFocus={this.handleFocus} readOnly={true} className="curl" value={curl}></textarea>
         </div>
       </div>
     )

src/core/components/errors.jsx

@@ -72,10 +72,10 @@ const ThrownErrorItem = ( { error, jumpToLine } ) => {
           <h4>{ (error.get("source") && error.get("level")) ?
             toTitleCase(error.get("source")) + " " + error.get("level") : "" }
           { error.get("path") ? <small> at {error.get("path")}</small>: null }</h4>
-          <span style={{ whiteSpace: "pre-line", "maxWidth": "100%" }}>
+          <span className="message thrown">
             { error.get("message") }
           </span>
-          <div style={{ "text-decoration": "underline", "cursor": "pointer" }}>
+          <div className="error-line">
             { errorLine && jumpToLine ? <a onClick={jumpToLine.bind(null, errorLine)}>Jump to line { errorLine }</a> : null }
           </div>
         </div>
@@ -102,8 +102,8 @@ const SpecErrorItem = ( { error, jumpToLine } ) => {
       { !error ? null :
         <div>
           <h4>{ toTitleCase(error.get("source")) + " " + error.get("level") }&nbsp;{ locationMessage }</h4>
-          <span style={{ whiteSpace: "pre-line"}}>{ error.get("message") }</span>
-          <div style={{ "text-decoration": "underline", "cursor": "pointer" }}>
+          <span className="message">{ error.get("message") }</span>
+          <div className="error-line">
             { jumpToLine ? (
               <a onClick={jumpToLine.bind(null, error.get("line"))}>Jump to line { error.get("line") }</a>
             ) : null }

src/core/components/headers.jsx

@@ -2,7 +2,7 @@ import React from "react"
 import PropTypes from "prop-types"
 import Im from "immutable"
 
-const propStyle = { color: "#999", fontStyle: "italic" }
+const propClass = "header-example"
 
 export default class Headers extends React.Component {
   static propTypes = {
@@ -46,7 +46,7 @@ export default class Headers extends React.Component {
                 <td className="header-col">{
                   !description ? null : <Markdown source={ description } />
                 }</td>
-                <td className="header-col">{ type } { schemaExample ? <Property propKey={ "Example" } propVal={ schemaExample } propStyle={ propStyle } /> : null }</td>
+                <td className="header-col">{ type } { schemaExample ? <Property propKey={ "Example" } propVal={ schemaExample } propClass={ propClass } /> : null }</td>
               </tr>)
             }).toArray()
           }

src/core/components/layout-utils.jsx

@@ -73,10 +73,14 @@ export class Col extends React.Component {
       }
     }
 
+    if (hide) {
+      classesAr.push("hidden")
+    }
+
     let classes = xclass(rest.className, ...classesAr)
 
     return (
-      <section {...rest} style={{display: hide ? "none": null}} className={classes}/>
+      <section {...rest} className={classes}/>
     )
   }
 
@@ -213,7 +217,7 @@ Link.propTypes = {
   className: PropTypes.string
 }
 
-const NoMargin = ({children}) => <div style={{height: "auto", border: "none", margin: 0, padding: 0}}> {children} </div>
+const NoMargin = ({children}) => <div className="no-margin"> {children} </div>
 
 NoMargin.propTypes = {
   children: PropTypes.node

src/core/components/layouts/base.jsx

@@ -57,7 +57,7 @@ export default class BaseLayout extends React.Component {
     if (loadingStatus === "failedConfig") {
       const lastErr = errSelectors.lastError()
       const lastErrMsg = lastErr ? lastErr.get("message") : ""
-      loadingMessage = <div className="info" style={{ maxWidth: "880px", marginLeft: "auto", marginRight: "auto", textAlign: "center" }}>
+      loadingMessage = <div className="info failed-config">
         <div className="loading-container">
           <h4 className="title">Failed to load remote configuration.</h4>
           <p>{lastErrMsg}</p>

src/core/components/model-collapse.jsx

@@ -71,8 +71,8 @@ export default class ModelCollapse extends Component {
 
     return (
       <span className={classes || ""}>
-        { title && <span onClick={this.toggleCollapsed} style={{ "cursor": "pointer" }}>{title}</span> }
-        <span onClick={ this.toggleCollapsed } style={{ "cursor": "pointer" }}>
+        { title && <span onClick={this.toggleCollapsed} className="pointer">{title}</span> }
+        <span onClick={ this.toggleCollapsed } className="pointer">
           <span className={ "model-toggle" + ( this.state.expanded ? "" : " collapsed" ) }></span>
         </span>
         { this.state.expanded ? this.props.children :this.state.collapsedContent }

src/core/components/model.jsx

@@ -53,11 +53,7 @@ export default class Model extends ImmutablePureComponent {
     if(!schema) {
       return <span className="model model-title">
               <span className="model-title__text">{ displayName || name }</span>
-              <img src={require("core/../img/rolling-load.svg")} height={"20px"} width={"20px"} style={{
-                  marginLeft: "1em",
-                  position: "relative",
-                  bottom: "0px"
-                }} />
+              <img src={require("core/../img/rolling-load.svg")} height={"20px"} width={"20px"} />
             </span>
     }
 

src/core/components/object-model.jsx

@@ -79,8 +79,8 @@ export default class ObjectModel extends Component {
             {
               <table className="model"><tbody>
               {
-                !description ? null : <tr style={{ color: "#666", fontWeight: "normal" }}>
-                    <td style={{ fontWeight: "bold" }}>description:</td>
+                !description ? null : <tr className="description">
+                    <td>description:</td>
                     <td>
                       <Markdown source={ description } />
                     </td>
@@ -91,16 +91,22 @@ export default class ObjectModel extends Component {
                     ([key, value]) => {
                       let isDeprecated = isOAS3() && value.get("deprecated")
                       let isRequired = List.isList(requiredProperties) && requiredProperties.contains(key)
-                      let propertyStyle = { verticalAlign: "top", paddingRight: "0.2em" }
-                      if ( isRequired ) {
-                        propertyStyle.fontWeight = "bold"
+
+                      let classNames = ["property-row"]
+
+                      if (isDeprecated) {
+                        classNames.push("deprecated")
+                      }
+
+                      if (isRequired) {
+                        classNames.push("required")
                       }
 
-                      return (<tr key={key} className={isDeprecated && "deprecated"}>
-                        <td style={ propertyStyle }>
-                          { key }{ isRequired && <span style={{ color: "red" }}>*</span> }
+                      return (<tr key={key} className={classNames.join(" ")}>
+                        <td>
+                          { key }{ isRequired && <span className="star">*</span> }
                         </td>
-                        <td style={{ verticalAlign: "top" }}>
+                        <td>
                           <Model key={ `object-${name}-${key}_${value}` } { ...otherProps }
                                  required={ isRequired }
                                  getComponent={ getComponent }
@@ -126,11 +132,11 @@ export default class ObjectModel extends Component {
 
                       const normalizedValue = !value ? null : value.toJS ? value.toJS() : value
 
-                      return (<tr key={key} style={{ color: "#777" }}>
+                      return (<tr key={key} className="extension">
                         <td>
                           { key }
                         </td>
-                        <td style={{ verticalAlign: "top" }}>
+                        <td>
                           { JSON.stringify(normalizedValue) }
                         </td>
                       </tr>)