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

* fix: convert propStyle to propClass

src/core/plugins/oas3/components/operation-link.jsx

@@ -12,8 +12,8 @@ class OperationLink extends Component {
     let parameters = link.get("parameters") && link.get("parameters").toJS()
     let description = link.get("description")
 
-    return <div style={{ marginBottom: "1.5em" }}>
-      <div style={{ marginBottom: ".5em" }}>
+    return <div className="operation-link">
+      <div className="description">
         <b><code>{name}</code></b>
         { description ? <Markdown source={description}></Markdown> : null }
       </div>

src/core/plugins/oas3/components/request-body.jsx

@@ -145,7 +145,7 @@ const RequestBody = ({
                 <td className="parameters-col_name">
                         <div className={required ? "parameter__name required" : "parameter__name"}>
                           { key }
-                          { !required ? null : <span style={{color: "red"}}>&nbsp;*</span> }
+                          { !required ? null : <span>&nbsp;*</span> }
                         </div>
                         <div className="parameter__type">
                           { type }

src/core/plugins/oas3/wrap-components/version-stamp.jsx

@@ -6,7 +6,7 @@ export default OAS3ComponentWrapFactory((props) => {
 
   return <span>
     <Ori {...props} />
-    <small style={{ backgroundColor: "#89bf04" }}>
+    <small className="version-stamp">
       <pre className="version">OAS3</pre>
     </small>
   </span>

src/core/plugins/view/root-injects.jsx

@@ -76,10 +76,9 @@ const createClass = component => class extends Component {
   }
 }
 
-const Fallback = ({ name }) => <div style={{ // eslint-disable-line react/prop-types
-    padding: "1em",
-    "color": "#aaa"
-  }}>😱 <i>Could not render { name === "t" ? "this component" : name }, see the console.</i></div>
+const Fallback = ({ 
+  name // eslint-disable-line react/prop-types
+}) => <div className="fallback">😱 <i>Could not render { name === "t" ? "this component" : name }, see the console.</i></div>
 
 const wrapRender = (component) => {
   const isStateless = component => !(component.prototype && component.prototype.isReactComponent)