Style header

Author: ronellecaguioa

app/components/Header.tsx

@@ -30,6 +30,7 @@ const Header: React.SFC<HeaderProps> = ({ app, service, setLive, live }) => {
         </option>
       </select>
       <div className="header-btns">
+        <button onClick={() => history.goBack()}>Return to Applications</button>
         <button onClick={() => setLive(!live)}>
           {live ? (
             <div>
@@ -39,7 +40,6 @@ const Header: React.SFC<HeaderProps> = ({ app, service, setLive, live }) => {
             <div>Gather Live Data</div>
           )}
         </button>
-        <button onClick={() => history.goBack()}>Return to Applications</button>
       </div>
     </div>
   );

app/stylesheets/Header.scss

@@ -2,60 +2,50 @@
 
 .microservice-header {
   width: 100%;
-  display: flex;
+  @include centerWithFlex(center);
   flex-direction: column;
-  align-items: center;
-  justify-self: center;
-  padding: 30px 0;
-  background-color: $headerblue;
-  color: #fff;
+  padding: 30px 0 50px;
+  background-color: $headergray;
+  color: #333;
   margin-bottom: 30px;
-}
 
-.microservice-header h1 {
-  font-size: 350%;
-  margin: 0;
+  h1 {
+    font-size: 425%;
+    font-weight: 700;
+    letter-spacing: 2px;
+    margin: 0;
+  }
 }
 
 select {
   width: 250px;
-  text-align: center;
   padding: 5px 35px;
   font-size: 100%;
   border: 1px solid #ccc;
   height: 30px;
   appearance: none;
+  cursor: pointer;
   margin: 15px auto;
 }
 
 .header-btns {
   display: flex;
-}
 
-.header-btns button {
-  margin: 0 10px;
-  font-size: 115%;
-  padding: 10px;
-}
-
-/* Live data dot */
-.dot {
-  background-color: red;
-  display: inline-block;
-  height: 10px;
-  width: 10px;
-  border-radius: 50%;
-  margin-right: 5px;
-  animation: blink 1s infinite;
-}
+  button {
+    margin: 0 10px;
+    font-size: 115%;
+    letter-spacing: 1px;
+    padding: 10px;
 
-@keyframes blink {
-  0%,
-  65% {
-    background-color: red;
-  }
-  66%,
-  100% {
-    background-color: rgb(170, 1, 1);
+    /* Live data dot */
+    .dot {
+      background-color: red;
+      display: inline-block;
+      height: 10px;
+      width: 10px;
+      border-radius: 50%;
+      margin-right: 5px;
+      animation: blink 1s infinite;
+    }
   }
 }

app/stylesheets/constants.scss

@@ -1,9 +1,20 @@
 $brandgold: #fce356;
 $sidebarblue: #24262f;
-$headerblue: #484e63;
+$headergray: #dedede;
 
 @mixin centerWithFlex($justify: center) {
   display: flex;
   align-items: center;
   justify-content: $justify;
 }
+
+@keyframes blink {
+  0%,
+  65% {
+    background-color: red;
+  }
+  66%,
+  100% {
+    background-color: rgb(170, 1, 1);
+  }
+}