Feature/tests

package.json

@@ -10,7 +10,7 @@
     "start": "node src/server.js",
     "db_init": "node src/model/db_init.js",
     "dev": "nodemon src/server.js",
-    "test": "NODE_ENV=test node tests/db_test.js | tap-spec"
+    "test": "NODE_ENV=test tape tests/*test.js | tap-spec"
   },
   "repository": {
     "type": "git",

public/css/finalStyle.css

@@ -1,4 +1,22 @@
-.dropbtn {
+/*-------------------------------BUTTON WRAP----------------------------------*/
+
+.next-step-icon-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/*--------------------------ADD TO CALENDAR BUTTON ---------------------------*/
+.add-to-calendar-button-wrap {
+  position: relative;
+  display: inline-block;
+}
+
+.add-to-calendar-button-wrap a:hover {
+  background-color: #ddd;
+}
+
+.add-to-calander-button {
   background-color: #637bd0;
   border: 2px solid #5366aa;
   color: #fff;
@@ -7,12 +25,7 @@
   cursor: pointer;
 }
 
-.dropdown {
-  position: relative;
-  display: inline-block;
-}
-
-.dropdown-content {
+.add-to-calendar-dropdown-content {
   display: none;
   position: absolute;
   background-color: #fff;
@@ -26,7 +39,7 @@
   text-align: center;
 }
 
-.dropdown-content a {
+.add-to-calendar-dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
@@ -35,25 +48,14 @@
   font-family: "Montserrat", sans-serif;
 }
 
-.dropdown a:hover {
-  background-color: #ddd;
-}
-
 .show {
   display: block;
 }
 
-.citymapper-logo {
+/*-----------------------------CITYMAPPER BUTTON------------------------------*/
+.citymapper-button {
   border-radius: 1rem;
-  /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
-  /* border: 2px solid #298b20; */
   width: 85px;
   height: 80px;
   padding: 0.5rem;
 }
-
-.next-step-icon-wrap {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}

public/css/formStyle.css

@@ -1,4 +1,4 @@
-/* ---------------------------------------------INPUT & BUTTONS ---------------------------------------------*/
+/* ---------------------------------FORM ------------------------------------*/
 .user-form {
   display: flex;
   flex-direction: column;
@@ -12,30 +12,46 @@
   width: 100vw;
 }
 
-input {
-  padding: 10px;
-  width: 100%;
-  font-size: 17px;
+/*---------------------------- INPUT BOXES ------------------------------*/
+.user-input-outer-wrap {
+  /*this is what hides each part of the form - don't remove!*/
+  display: none;
+}
+
+.user-input {
+  border-radius: 3rem;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border: 2px solid #ebfffb;
+  background: #ffffff;
+  font-family: "Roboto", sans-serif;
+  margin: 0 0 1.5rem 0;
+  max-width: 20rem;
+  font-size: 1.1rem;
+  padding: 0.7rem;
   text-align: center;
+  /*this keeps the text that user enters centered*/
 }
 
-input.invalid {
+.user-input.invalid {
   background-color: #ffdddd;
 }
 
-.user-input {
-  display: none;
+.user-input-title {
+  font-family: "Righteous", cursive;
 }
 
-.button-wrap {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  width: 100vw;
+.user-input::placeholder {
+  text-align: center;
+  font-family: "Roboto", sans-serif;
+  color: #a2a1a1;
 }
 
-/* ---------------------------------------------STEPS ---------------------------------------------*/
+.time-and-date-wrap {
+  display: flex;
+  flex-direction: column;
+}
 
+/* --------------------------STEPS/PAGINATION DOTS ---------------------------*/
 .step-wrap {
   display: flex;
   flex-direction: row;
@@ -45,30 +61,30 @@ input.invalid {
   height: 15px;
   width: 15px;
   margin: 0 2px;
-  background-color: #bbbbbb;
+  background-color: #97a3cc;
   border: none;
   border-radius: 50%;
   display: inline-block;
-  opacity: 0.5;
-  box-shadow: inset 0 0 10px #3232ff;
+  /* opacity: 0.5; */
+  box-shadow: inset 0 0 5px #6375b3;
 }
 
 .step.active {
   opacity: 1;
-  background-color: #637bd0;
+  background-color: #3b487a;
 }
 
 .step.finish {
-  background-color: #4a5b99;
+  background-color: #4f62a6;
 }
 
-/* ---------------------------------------------RADIO BUTTONS ---------------------------------------------*/
-
+/* -----------------------------RADIO BUTTONS -------------------------------*/
 .radio-toolbar {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
+
 .radio-toolbar input[type="radio"] {
   opacity: 0;
   position: fixed;
@@ -77,17 +93,9 @@ input.invalid {
 
 .radio-toolbar label {
   display: inline-block;
-  background-color: #ddd;
-  /* padding: 10px 20px; */
-  margin: 5px 0;
-  font-family: "Montserrat", sans-serif;
-  /* font-size: 16px; */
-  /* border: 2px solid #444; */
+  margin: 0.8rem 0;
   border-radius: 3rem;
-  padding: 10px;
-  width: 100%;
-  font-size: 17px;
-  text-align: center;
+  padding: 0.8rem;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   border: 2px solid #ebfffb;
   background: #ffffff;
@@ -97,11 +105,3 @@ input.invalid {
   background-color: #637bd0;
   border-color: #637bd0;
 }
-
-.radio-toolbar input[type="radio"]:focus + label {
-  /* border: 2px dashed #444; */
-}
-
-.radio-toolbar input[type="radio"]:hover + label {
-  /* border: 2px dashed #aaaaaa; */
-}