Restyle the modals

Author: ronellecaguioa

app/modals/AddModal.tsx

@@ -46,7 +46,10 @@ const AddModal: React.FC<AddModalProps> = ({ setOpen }) => {
   const { database, URI, name } = fields;
   return (
     <div className="add-container">
-      <h2>Enter Your Database Information</h2>
+      <div className="add-header">
+        <h2>Add an Application</h2>
+        <p>Enter the database information used to track the service</p>
+      </div>
       <form onSubmit={handleSubmit}>
         <div className="input-field">
           <label htmlFor="db-type">Type</label>

app/stylesheets/AddModal.scss

@@ -4,8 +4,17 @@
   @include centerModal();
 
   /* Header */
-  h2 {
-    @include modalHeader();
+  .add-header {
+    padding: 20px 30px;
+    text-align: center;
+    border-bottom: thin solid $lightgray;
+    background-color: $headergray;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+
+    h2 {
+      @include modalHeader();
+    }
   }
 
   /* Form */
@@ -54,19 +63,19 @@
     button {
       font-size: 115%;
       width: 50%;
-      color: #333;
-      background-color: transparent;
+      color: #fff;
+      background-color: $sidebarblue;
       transition: 0.1s;
       margin: 20px 0;
       font-weight: 400;
       letter-spacing: 2px;
-      border: 2px solid #333;
+      border: thin solid $sidebarblue;
       padding: 4px;
       text-transform: uppercase;
 
       &:hover {
-        color: #fff;
-        background-color: #333;
+        color: $sidebarblue;
+        background-color: lighten($sidebarblue, 65%);
       }
     }
   }

app/stylesheets/ServicesModal.scss

@@ -1,20 +1,29 @@
 @import './constants.scss';
 
 .services-container {
-  @include centerModal(400px);
-  padding: 20px 20px 30px;
+  @include centerModal(375px);
 
   // Header
   .services-header {
+    background-color: $headergray;
+    width: 100%;
+    padding: 0 0 15px;
     text-align: center;
     margin-bottom: 20px;
+    border-bottom: thin solid $lightgray;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+
     h2 {
       @include modalHeader();
+      margin-top: 15px;
+      margin-bottom: 5px;
     }
   }
 
   // Buttons
   .services-links {
+    padding: 0 0 30px;
     width: 100%;
 
     .link {

app/stylesheets/constants.scss

@@ -18,6 +18,7 @@ $lightgray: #c3c3c3;
   transform: translate(-50%, -50%);
   border-radius: 5px;
   width: $width;
+  min-height: 100px;
   background-color: #f4f4f4;
 }