From c5c4e083685e95c76c9710bad3e792ebc21e941f Mon Sep 17 00:00:00 2001
From: kyle <shockey@users.noreply.github.com>
Date: Fri, 28 Sep 2018 20:33:06 -0500
Subject: [PATCH] improve: nest Servers within Schemes container (via #4911)

* improve: nest Servers within Schemes container

* linter fixes
---
 src/core/components/layouts/base.jsx          |  5 +--
 src/core/containers/schemes.jsx               |  2 ++
 .../oas3/components/servers-container.jsx     | 33 +++++++------------
 src/style/_layout.scss                        |  2 +-
 src/style/_servers.scss                       | 16 ++-------
 5 files changed, 21 insertions(+), 37 deletions(-)

diff --git a/src/core/components/layouts/base.jsx b/src/core/components/layouts/base.jsx
index f1d09b89..0c58a598 100644
--- a/src/core/components/layouts/base.jsx
+++ b/src/core/components/layouts/base.jsx
@@ -60,9 +60,10 @@ export default class BaseLayout extends React.Component {
               </Col>
             </Row>
 
-            <SchemesContainer/>
+            <SchemesContainer>
+              <ServersContainer/>
+            </SchemesContainer>
 
-            <ServersContainer/>
 
             <FilterContainer/>
 
diff --git a/src/core/containers/schemes.jsx b/src/core/containers/schemes.jsx
index 8d64c283..fb5414f2 100644
--- a/src/core/containers/schemes.jsx
+++ b/src/core/containers/schemes.jsx
@@ -7,6 +7,7 @@ export default class SchemesContainer extends React.Component {
     specActions: PropTypes.object.isRequired,
     specSelectors: PropTypes.object.isRequired,
     getComponent: PropTypes.func.isRequired,
+    children: PropTypes.any
   }
 
   render () {
@@ -24,6 +25,7 @@ export default class SchemesContainer extends React.Component {
         {schemes && schemes.size || securityDefinitions ? (
           <div className="scheme-container">
             <Col className="schemes wrapper" mobile={12}>
+              {this.props.children}
               {schemes && schemes.size ? (
                 <Schemes
                   currentScheme={currentScheme}
diff --git a/src/core/plugins/oas3/components/servers-container.jsx b/src/core/plugins/oas3/components/servers-container.jsx
index 8476496a..819c4e58 100644
--- a/src/core/plugins/oas3/components/servers-container.jsx
+++ b/src/core/plugins/oas3/components/servers-container.jsx
@@ -15,28 +15,19 @@ export default class ServersContainer extends React.Component {
 
     const servers = specSelectors.servers()
 
-    const Col = getComponent("Col")
     const Servers = getComponent("Servers")
 
-    return (
+    return servers && servers.size ? (
       <div>
-        {servers && servers.size ? (
-          <div className="global-server-container">
-            <Col className="servers wrapper" mobile={12}>
-              <span className="servers-title">Server</span>
-              <Servers
-                servers={servers}
-                currentServer={oas3Selectors.selectedServer()}
-                setSelectedServer={oas3Actions.setSelectedServer}
-                setServerVariableValue={oas3Actions.setServerVariableValue}
-                getServerVariable={oas3Selectors.serverVariableValue}
-                getEffectiveServerValue={oas3Selectors.serverEffectiveValue}
-              />
-            </Col>
-          </div>
-
-        ) : null}
-      </div>
-    )
+        <span className="servers-title">Servers</span>
+        <Servers
+          servers={servers}
+          currentServer={oas3Selectors.selectedServer()}
+          setSelectedServer={oas3Actions.setSelectedServer}
+          setServerVariableValue={oas3Actions.setServerVariableValue}
+          getServerVariable={oas3Selectors.serverVariableValue}
+          getEffectiveServerValue={oas3Selectors.serverEffectiveValue}
+        />
+      </div> ) : null
   }
-}
+}
\ No newline at end of file
diff --git a/src/style/_layout.scss b/src/style/_layout.scss
index 0c47c617..45eb9fe9 100644
--- a/src/style/_layout.scss
+++ b/src/style/_layout.scss
@@ -667,7 +667,7 @@
     .schemes
     {
         display: flex;
-        align-items: center;
+        align-items: flex-end;
 
          > label
         {
diff --git a/src/style/_servers.scss b/src/style/_servers.scss
index 6df9756e..fc350ec9 100644
--- a/src/style/_servers.scss
+++ b/src/style/_servers.scss
@@ -53,19 +53,9 @@
     }
 }
 
-
-.global-server-container
-{
-    margin: 0 0 20px 0;
-    padding: 30px 0;
-
-    background: $server-container-background-color;
-    box-shadow: 0 1px 2px 0 rgba($server-container-box-shadow-color,.15);
-
-    .servers-title {
-      line-height: 2em;
-      font-weight: bold;
-    }
+.servers-title {
+    font-size: 12px;
+    font-weight: bold;
 }
 
 .operation-servers {