From 23b251d8cdb055147719f5f876889aa4f8e983d7 Mon Sep 17 00:00:00 2001
From: Brian Bui <59684534+Umius-Brian@users.noreply.github.com>
Date: Thu, 14 May 2020 11:12:24 -0700
Subject: [PATCH] Fix add and delete database pages

---
 app/components/AddService.jsx      |  3 +-
 app/components/DeleteService.jsx   |  6 ++--
 app/stylesheets/AddService.css     | 40 +++++++++++++++++++++-----
 app/stylesheets/DeleteServices.css | 45 ++++++++++++++++++++++++++++--
 4 files changed, 80 insertions(+), 14 deletions(-)

diff --git a/app/components/AddService.jsx b/app/components/AddService.jsx
index 15e209aa1..5f36b9c88 100644
--- a/app/components/AddService.jsx
+++ b/app/components/AddService.jsx
@@ -33,11 +33,10 @@ const AddService = () => {
 
   return (
     <div className="mainContainer">
-      <img src="app/assets/logo2.png" alt="logo" id="addServiceLogo" />
       <h2 className="signUpHeader">
         Enter Your Database Information
       </h2>
-      <form>
+      <form className="inputForm">
         Database Type:
         <select id="dbType" onChange={() => setDbType(document.getElementById('dbType').value)}>
           <option value="SQL">SQL</option>
diff --git a/app/components/DeleteService.jsx b/app/components/DeleteService.jsx
index 16ea724ec..a58a7b1b6 100644
--- a/app/components/DeleteService.jsx
+++ b/app/components/DeleteService.jsx
@@ -37,7 +37,7 @@ const DeleteService = (props) => {
 
   /* Iterates over the serviceList to create a button for each service. Each button is pushed into the databaseButtons array as the button is created. Each button has an onclick function that invokes the window confirm function with a warning message (ex:'Are you sure you want to delete this service?') and stores the result of invoking confirm into a constant moveForward. If the moveForward is true, then onDelete function is invoked with the index of where the service is stored within the serviceList*/
   for(let i = 0; i<serviceList.length; i++){
-    databaseButtons.push(<button className="microserviceBtn deleteMicroservice" key ={"delete"+i} onClick={()=>{
+    databaseButtons.push(<button className="deleteMicroservice" key ={"delete"+i} onClick={()=>{
       const moveForward = confirm(`Are you sure you want to delete ${serviceList[i]}? \n If "YES" press the "OK" button, else press the "Cancel" button`);
       if (moveForward){onDelete(i)}
       
@@ -45,8 +45,8 @@ const DeleteService = (props) => {
   }
   // returns the title of the page with all of the services that can be deleted as buttons 
   return (
-    <div className="mainContainer">
-        <h1 className='overviewTitle'>Press on the Database You Want to Delete</h1>
+    <div className="deleteMainContainer">
+        <h1 className='overviewTitle'>Select Database To Delete</h1>
         <div className="servicesList">{databaseButtons}</div>
     </div>
   );
diff --git a/app/stylesheets/AddService.css b/app/stylesheets/AddService.css
index 241ae7b2c..5c1990e6a 100644
--- a/app/stylesheets/AddService.css
+++ b/app/stylesheets/AddService.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Nunito:wght@200&family=Quicksand:wght@300&display=swap');
+
 #addServiceLogo {
   margin-bottom: 0px;
 }
@@ -10,9 +12,31 @@ form {
   font-size: 2vh;
 }
 
+.mainContainer {
+  font-family: 'Nunito', sans-serif;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  align-self: center;
+}
+
+#addServiceLogo {
+  display: grid;
+  justify-items: center;
+  justify-content: center;
+}
+
+.inputForm {
+  color: black;
+}
+
+.dbType {
+  color: black;
+}
+
 .userInput {
   width: 70%;
-  border: 2px solid rgb(255, 206, 9);
+  border: 2px solid rgb(0, 0, 0);
   border-radius: 45px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   text-align: center;
@@ -20,6 +44,7 @@ form {
   font-size: 2vh;
   padding-left: 0.25%;
   margin: 15px auto 30px auto;
+  font-family: 'Nunito', sans-serif;
 }
 
 ::placeholder {
@@ -34,17 +59,18 @@ form {
   height: 40px;
   color: white;
   font-size: 2vh;
-  border: 1px solid rgb(255, 206, 9);
-  background-color: #333;
+  border: 1px solid rgb(0, 0, 0);
+  background-color: black;
   transition: 0.25s;
+  border-radius: 10px
 }
 
 .submitBtn:hover {
-  font-weight: 700;
+  font-size: 2vh;
   cursor: pointer;
   border-radius: 10px;
-  color: #333;
-  background-color: rgb(255, 206, 9);
+  color: white;
+  background-color: #494FEE;
 }
 
 .signUpHeader {
@@ -61,7 +87,7 @@ select {
   font-size: 1.75vh;
   font-weight: 400;
   /* background-color: rgb(196, 196, 196); */
-  border: 2px solid rgb(255, 206, 9);
+  border: 2px solid black;
   margin-top: 1%;
   margin-bottom: 2.5%;
 }
diff --git a/app/stylesheets/DeleteServices.css b/app/stylesheets/DeleteServices.css
index a5b829259..687662ff0 100644
--- a/app/stylesheets/DeleteServices.css
+++ b/app/stylesheets/DeleteServices.css
@@ -1,5 +1,46 @@
-.deleteMicroservice{
+.deleteMicroservice {
   padding: 10px;
   margin: 10px;
-  
+}
+
+.overviewTitle {
+  font-weight: 300;
+  font-size: 5.5vh;
+}
+
+.deleteMainContainer {
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  align-self: center;
+  font-family: 'Nunito', sans-serif;
+  width: 100%;
+}
+
+.servicesList {
+  display: flex;
+  justify-content: center;
+  align-self: flex-start;
+  width: 100%;
+}
+
+.deleteMicroservice {
+  margin-top: 6%;
+  margin-bottom: 10%;
+  width: 50%;
+  height: 40px;
+  color: white;
+  font-size: 2vh;
+  border: 1px solid rgb(0, 0, 0);
+  background-color: black;
+  transition: 0.25s;
+  border-radius: 10px
+}
+
+.deleteMicroservice:hover {
+  font-size: 2vh;
+  cursor: pointer;
+  border-radius: 10px;
+  color: white;
+  background-color: #494FEE;
 }