From ef3ccd7a2317711da5a2ab40f7f0e4eb6c23211e Mon Sep 17 00:00:00 2001
From: Kyle Shockey <shockey@users.noreply.github.com>
Date: Thu, 30 Nov 2017 17:06:17 -0800
Subject: [PATCH] Move server styles into its own scss file; add a little
 polish

---
 src/core/components/layouts/base.jsx          |  2 +-
 .../oas3/components/operation-servers.jsx     |  6 +-
 src/core/plugins/oas3/components/servers.jsx  |  2 +-
 src/style/_layout.scss                        | 74 ------------------
 src/style/_servers.scss                       | 75 +++++++++++++++++++
 src/style/main.scss                           |  1 +
 6 files changed, 82 insertions(+), 78 deletions(-)
 create mode 100644 src/style/_servers.scss

diff --git a/src/core/components/layouts/base.jsx b/src/core/components/layouts/base.jsx
index dea681a7..d944a3c8 100644
--- a/src/core/components/layouts/base.jsx
+++ b/src/core/components/layouts/base.jsx
@@ -94,7 +94,7 @@ export default class BaseLayout extends React.Component {
             ) : null }
 
             { servers && servers.size ? (
-              <div className="server-container">
+              <div className="global-server-container">
                 <span className="servers-title">Server</span>
                 <Col className="servers wrapper" mobile={12}>
                   <Servers
diff --git a/src/core/plugins/oas3/components/operation-servers.jsx b/src/core/plugins/oas3/components/operation-servers.jsx
index f5c27583..e1e8d641 100644
--- a/src/core/plugins/oas3/components/operation-servers.jsx
+++ b/src/core/plugins/oas3/components/operation-servers.jsx
@@ -74,14 +74,16 @@ export default class OperationServers extends React.Component {
     const serversToDisplay = operationServers || pathServers
     const displaying = operationServers ? "operation" : "path"
 
-    return <div className="opblock-section">
+    return <div className="opblock-section operation-servers">
       <div className="opblock-section-header">
         <div className="tab-header">
           <h4 className="opblock-title">Servers</h4>
         </div>
       </div>
       <div className="opblock-description-wrapper">
-        <h4>These {displaying}-level options override the global server options.</h4>
+        <h4 className="message">
+          These {displaying}-level options override the global server options.
+        </h4>
         <Servers
           servers={serversToDisplay}
           currentServer={this.getSelectedServer()}
diff --git a/src/core/plugins/oas3/components/servers.jsx b/src/core/plugins/oas3/components/servers.jsx
index 5ebfcf5a..1e941b38 100644
--- a/src/core/plugins/oas3/components/servers.jsx
+++ b/src/core/plugins/oas3/components/servers.jsx
@@ -93,7 +93,7 @@ export default class Servers extends React.Component {
     let shouldShowVariableUI = currentServerVariableDefs.size !== 0
 
     return (
-      <div>
+      <div className="servers">
         <label htmlFor="servers">
           <select onChange={ this.onServerChange }>
             { servers.valueSeq().map(
diff --git a/src/style/_layout.scss b/src/style/_layout.scss
index e5fac6e2..1d399f76 100644
--- a/src/style/_layout.scss
+++ b/src/style/_layout.scss
@@ -650,80 +650,6 @@
     }
 }
 
-.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);
-
-    .computed-url {
-      margin: 2em 0;
-
-      code {
-        color: $server-container-computed-url-code-font-color;
-        display: inline-block;
-        padding: 4px;
-        font-size: 16px;
-        margin: 0 1em;
-        font-style: italic;
-      }
-    }
-
-    .servers-title {
-      margin: 20px;
-      line-height: 2em;
-      font-weight: bold;
-    }
-
-    .servers
-    {
-        display: flex;
-        align-items: center;
-
-         > label
-        {
-            font-size: 12px;
-
-            display: flex;
-            flex-direction: column;
-
-            margin: -20px 15px 0 0;
-
-            @include text_headline();
-
-            select
-            {
-                min-width: 130px;
-            }
-        }
-
-        table {
-            tr {
-                width: 30em;
-            }
-            td {
-                display: inline-block;
-                max-width: 15em;
-                vertical-align: middle;
-                padding-top: 10px;
-                padding-bottom: 10px;
-
-                &:first-of-type {
-                  padding-right: 2em;
-                }
-
-                input {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-        }
-    }
-}
-
-
 .loading-container
 {
     padding: 40px 0 60px;
diff --git a/src/style/_servers.scss b/src/style/_servers.scss
new file mode 100644
index 00000000..d23b4d41
--- /dev/null
+++ b/src/style/_servers.scss
@@ -0,0 +1,75 @@
+.servers
+{
+     > label
+    {
+        font-size: 12px;
+
+        margin: -20px 15px 0 0;
+
+        @include text_headline();
+
+        select
+        {
+            min-width: 130px;
+        }
+    }
+
+    h4.message {
+      padding-bottom: 2em;
+    }
+
+    table {
+        tr {
+            width: 30em;
+        }
+        td {
+            display: inline-block;
+            max-width: 15em;
+            vertical-align: middle;
+            padding-top: 10px;
+            padding-bottom: 10px;
+
+            &:first-of-type {
+              padding-right: 2em;
+            }
+
+            input {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    .computed-url {
+      margin: 2em 0;
+
+      code {
+        display: inline-block;
+        padding: 4px;
+        font-size: 16px;
+        margin: 0 1em;
+      }
+    }
+}
+
+
+.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 {
+      margin: 20px;
+      line-height: 2em;
+      font-weight: bold;
+    }
+}
+
+.operation-servers {
+  h4.message {
+    margin-bottom: 2em;
+  }
+}
diff --git a/src/style/main.scss b/src/style/main.scss
index edc7e4f3..23bf2585 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -9,6 +9,7 @@
     @import 'form';
     @import 'modal';
     @import 'models';
+    @import 'servers';
     @import 'table';
     @import 'topbar';
     @import 'information';