Style ServicesModal

Author: ronellecaguioa

app/modals/ServicesModal.tsx

@@ -1,15 +1,16 @@
 import React, { useContext, useEffect } from 'react';
-import { ApplicationContext } from '../context/ApplicationContext';
-import '../stylesheets/ServicesModal.css';
 import { Link } from 'react-router-dom';
 
+import { ApplicationContext } from '../context/ApplicationContext';
+import '../stylesheets/ServicesModal.scss';
+
 interface ServicesModalProps {
   i: number;
-  app: string
+  app: string;
 }
 
 interface IService {
-  microservice: string
+  microservice: string;
 }
 
 const ServicesModal: React.SFC<ServicesModalProps> = ({ i, app }) => {
@@ -30,7 +31,7 @@ const ServicesModal: React.SFC<ServicesModalProps> = ({ i, app }) => {
    * TEMPORARY fix to allow us to fetch service names
    * AFTER we connect to the Mongo Database. This error does
    * not occur with PostgreSQL databases.
-   * 
+   *
    * Just click on the whitespace of the modal to run another
    * fetch request for service names
    */
@@ -39,18 +40,25 @@ const ServicesModal: React.SFC<ServicesModalProps> = ({ i, app }) => {
   };
 
   return (
-    <div className="modal" onClick={() => fetchStuff()}>
+    <div className="services-container" onClick={() => fetchStuff()}>
       {!servicesData.length ? (
-        <h3>Loading...</h3>
+        <h2>Loading...</h2>
       ) : (
         <>
-          <h3>Microservices for <strong>{app}</strong></h3>
-          {servicesData.map((service: IService, i: number) => (
-          <Link key={i} className="link" to={`/applications/${app}/${service.microservice}`}>
-            {service.microservice}
-          </Link>
-          ))}
-          <Link className="link" to={`/applications/${app}/communications`}>communications</Link>
+          <div className="services-header">
+            <h2>{app}</h2>
+            <p>Select a server to monitor</p>
+          </div>
+          <div className="services-links">
+            {servicesData.map((service: IService, i: number) => (
+              <Link key={i} className="link" to={`/applications/${app}/${service.microservice}`}>
+                {service.microservice}
+              </Link>
+            ))}
+            <Link className="link" to={`/applications/${app}/communications`}>
+              communications
+            </Link>
+          </div>
         </>
       )}
     </div>

app/stylesheets/AddModal.scss

@@ -1,23 +1,11 @@
 @import './constants.scss';
 
 .add-container {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  padding: 50px 40px;
-  background-color: #f4f4f4;
-  border-radius: 5px;
-  width: 50%;
-  max-width: 600px;
+  @include centerModal();
 
   /* Header */
   h2 {
-    margin: 0 auto 35px;
-    text-align: center;
-    font-weight: 700;
-    font-size: 200%;
-    color: #333;
+    @include modalHeader();
   }
 
   /* Form */

app/stylesheets/ServicesModal.css

@@ -0,0 +1,45 @@
+@import './constants.scss';
+
+.services-container {
+  @include centerModal(400px);
+  padding: 20px 20px 30px;
+
+  // Header
+  .services-header {
+    text-align: center;
+    margin-bottom: 20px;
+    h2 {
+      @include modalHeader();
+    }
+  }
+
+  // Buttons
+  .services-links {
+    width: 100%;
+
+    .link {
+      display: block;
+      width: 80%;
+      font-size: 110%;
+      text-decoration: none;
+      border: thin solid lighten($sidebarblue, 35%);
+      border-bottom: none;
+      padding: 12px;
+      margin: 0 auto;
+      background-color: lighten($sidebarblue, 70%);
+      color: rgb(31, 31, 31);
+      transition: 0.1s;
+      text-align: center;
+      font-weight: 700;
+
+      &:last-of-type {
+        border-bottom: thin solid lighten($sidebarblue, 35%);
+      }
+    }
+
+    .link:hover {
+      color: #fff;
+      background-color: $sidebarblue;
+    }
+  }
+}

app/stylesheets/ServicesModal.scss

@@ -10,6 +10,23 @@ $lightgray: #c3c3c3;
   flex-direction: $direction;
 }
 
+@mixin centerModal($width: auto) {
+  @include centerWithFlex(center, column);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 5px;
+  width: $width;
+  background-color: #f4f4f4;
+}
+
+@mixin modalHeader() {
+  font-weight: 700;
+  font-size: 200%;
+  color: #333;
+}
+
 @keyframes blink {
   0%,
   65% {
@@ -28,4 +45,4 @@ $lightgray: #c3c3c3;
   to {
     transform: rotateZ(360deg);
   }
-}
+}