minimal update to styling

dist/index.html

@@ -71,6 +71,7 @@
 <script src="./swagger-ui-standalone-preset.js"> </script>
 <script>
 window.onload = function() {
+  
   // Build a system
   const ui = SwaggerUIBundle({
     url: "http://petstore.swagger.io/v2/swagger.json",

src/plugins/topbar/topbar.jsx

@@ -83,7 +83,13 @@ export default class Topbar extends React.Component {
         rows.push(<option key={i} value={link.url} selected={i===this.state.selectedIndex}>{link.name}</option>)
       })
 
-      control.push(<select disabled={isLoading} onChange={ this.onUrlSelect }>{rows}</select>)
+      control.push(
+        <label className="select-label" htmlFor="select"><span>Select a URL</span>
+          <select id="select" disabled={isLoading} onChange={ this.onUrlSelect }>
+            {rows}
+          </select>
+        </label>
+      )
     }
     else {
       formOnSubmit = this.downloadUrl

src/plugins/topbar/topbar.less

@@ -1,11 +1,10 @@
 .swagger-ui {
-
   .topbar {
     background-color: #89bf04;
   }
 
   .topbar-wrapper {
-    padding: 0.7em
+    padding: 0.7em;
   }
 
   .topbar-logo__img {

src/style/_topbar.scss

@@ -6,7 +6,6 @@
     .topbar-wrapper
     {
         display: flex;
-
         align-items: center;
     }
     a
@@ -15,13 +14,13 @@
         font-weight: bold;
 
         display: flex;
+        align-items: center;
+        flex: 1;
 
         max-width: 300px;
 
         text-decoration: none;
 
-        flex: 1;
-        align-items: center;
         @include text_headline(#fff);
 
         span
@@ -48,15 +47,35 @@
             outline: none;
         }
 
-        select
+        .select-label
         {
-            min-width: 200px;
+            display: flex;
+            align-items: center;
 
-            border: 2px solid #547f00;
+            width: 100%;
-            outline: none;
+            max-width: 600px;
-            box-shadow: none;
+            span
+            {
+                flex: 1;
+
+                padding: 0 10px 0 0;
+
+                text-align: right;
+            }
+
+            select
+            {
+                flex: 2;
+
+                width: 100%;
+
+                border: 2px solid #547f00;
+                outline: none;
+                box-shadow: none;
+            }
         }
 
+
         .download-url-button
         {
             font-size: 16px;