From 13e4f74ffed705bfd6e5495fda8d3d5cc8c71584 Mon Sep 17 00:00:00 2001
From: Zen McMillan <zenmcmillan@gmail.com>
Date: Mon, 5 Feb 2024 10:34:30 -0600
Subject: [PATCH 1/5] Restyle submit button

---
 src/assets/styles.css   | 5 -----
 src/views/AddReview.vue | 9 +++++++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/assets/styles.css b/src/assets/styles.css
index 89ae3877..67e2670a 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -14,7 +14,6 @@ body, .airport-details-page {
 }
 
 header{
-    /* margin: 20px; */
     font-size: 100px;
     padding-top: 70px;
     padding-bottom: 50px;
@@ -50,8 +49,4 @@ header{
     justify-content: center;
   }
 
-  .login-button:hover, a:hover {
-    background-color: green;
-    color: white;
-  }
 
diff --git a/src/views/AddReview.vue b/src/views/AddReview.vue
index 852e5008..6d21432f 100644
--- a/src/views/AddReview.vue
+++ b/src/views/AddReview.vue
@@ -36,7 +36,6 @@
 <style>
   .container {
     margin: 0;
-    /* height: 100vh; */
     display: flex;
     align-items: center;
     justify-content: center;
@@ -46,7 +45,6 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    outline: 3px solid black;
   }
 
   form {
@@ -56,6 +54,7 @@
     width: 60vw;
     height: 50vh;
     padding: 2em;
+    font-family: 'M PLUS Rounded 1c', sans-serif;
   }
 
   .item,
@@ -88,6 +87,12 @@
     font-size: 1.2em;
   }
 
+  .submit-review:hover {
+      cursor: pointer;  
+      transform:scale(1.3); 
+      text-decoration: underline;
+  }
+
   .review-label {
     font-size: 1.2em;
   }

From 3763f60c9627ff07939661246bb1f3e2cbc1d000 Mon Sep 17 00:00:00 2001
From: Zen McMillan <zenmcmillan@gmail.com>
Date: Mon, 5 Feb 2024 11:16:49 -0600
Subject: [PATCH 2/5] Restyle the AirportDetails Component

---
 src/assets/styles.css            |  7 +++++++
 src/views/AddReview.vue          |  8 +++++++-
 src/views/AirportDetailsPage.vue | 29 ++++++++++++++++++++++++-----
 src/views/Home.vue               |  4 ++--
 4 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/assets/styles.css b/src/assets/styles.css
index 67e2670a..8e7f5245 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -14,6 +14,7 @@ body, .airport-details-page {
 }
 
 header{
+
     font-size: 100px;
     padding-top: 70px;
     padding-bottom: 50px;
@@ -49,4 +50,10 @@ header{
     justify-content: center;
   }
 
+.login-button:hover, .login-words:hover {
+    background-color: green;
+    color: white;
+    transform:scale(1.3); 
+    text-decoration: underline;
+  }
 
diff --git a/src/views/AddReview.vue b/src/views/AddReview.vue
index 6d21432f..945daca4 100644
--- a/src/views/AddReview.vue
+++ b/src/views/AddReview.vue
@@ -2,7 +2,7 @@
   <div class="container">
     <form>
     <router-link to="/">
-        <button class="home-button link">Home</button>
+        <button class="close-button link">✖️</button>
     </router-link>
       <div class="item">
         <label class="review-label">Select a category:</label>
@@ -96,4 +96,10 @@
   .review-label {
     font-size: 1.2em;
   }
+
+  .close-button {
+    background-color: white;
+    border:0;
+    font-size: 1.6em;
+  }
 </style>
diff --git a/src/views/AirportDetailsPage.vue b/src/views/AirportDetailsPage.vue
index 82cf2117..d9811379 100644
--- a/src/views/AirportDetailsPage.vue
+++ b/src/views/AirportDetailsPage.vue
@@ -2,12 +2,14 @@
     <div class="airport-details-page">
         <h1 class="airport-name">{{ $route.params.airportName }} </h1>
         <div class="details-container">
+          <div class="buttons-container">
             <router-link to="/add-review">
-                <button class="link" id="add-review">Add Review</button>
+                <button class="link add-review" id="add-review">Add Review</button>
             </router-link>
             <router-link to="/">
-                <button class="home-button link">Home</button>
+                <button class="home-button-details-page link">Home</button>
             </router-link>
+          </div>
             <select class="details-dropdown-menu" v-model="categories" @change="filterByCategory">
                 <option v-for="category in categories" :key="category" :value="category">
                     {{ category }}
@@ -29,16 +31,33 @@ const categories = ['Security', 'Restaurants', 'General', 'Arrivals/Departures',
     display: flex;
     flex-direction: column;
     align-items: center;
-    height: 6em;
+    height: 5em;
     justify-content: space-between;
   }
 
   .details-dropdown-menu {
-    width: 19em;
-    height: 1.6em;
+    width: 20em;
+    height: 2.2em;
   }
 
   .link {
     font-size: 1.2em;
+    border: 0;
+    font-size: 1.3em;
   }
+ 
+.buttons-container {
+  display: flex;
+  width: 16.4em;
+  justify-content: space-between;
+}
+
+.home-button-details-page {
+  width: 6em;
+}
+.link:hover {
+  cursor: pointer;  
+  transform:scale(1.3); 
+  text-decoration: underline;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 11e1749b..50f028d2 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,6 +1,6 @@
 <template>
     <button v-if="!loginPressed" class="login-button">
-      <router-link to="/login" @click="handleLogin" :handleLogin="handleLogin" style="text-decoration: none;">Login</router-link>
+      <router-link to="/login" @click="handleLogin" :handleLogin="handleLogin" class="login-words">Login</router-link>
     </button>
     <AirportHeader />
     <AirportDropdown />
@@ -13,4 +13,4 @@
 
   const login = ref('');
 
-</script>
\ No newline at end of file
+</script>

From 56c7ca0aa92333abe9b97f791af0bc68a5f4924c Mon Sep 17 00:00:00 2001
From: Zen McMillan <zenmcmillan@gmail.com>
Date: Mon, 5 Feb 2024 11:26:16 -0600
Subject: [PATCH 3/5] Continue styling for Airport Details page

---
 src/assets/styles.css              | 4 ++--
 src/components/AirportDropdown.vue | 2 +-
 src/views/AirportDetailsPage.vue   | 5 +++++
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/assets/styles.css b/src/assets/styles.css
index 8e7f5245..821c35ac 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -23,8 +23,8 @@ header{
 }
 
 .airport-name {
-    font-size: 80px;
-    font-family: 'great vibes', 'sans-serif';
+    font-family: 'Nunito Sans', sans-serif;
+    font-size: 2.8em;
     color: white;
     margin: 0;
     padding-top: 70px;
diff --git a/src/components/AirportDropdown.vue b/src/components/AirportDropdown.vue
index 49cef50c..d85ac093 100644
--- a/src/components/AirportDropdown.vue
+++ b/src/components/AirportDropdown.vue
@@ -19,7 +19,7 @@
       { code: 'JFK', name: 'John F. Kennedy International Airport' },
       { code: 'DEN', name: 'Denver International Airport' },
       { code: 'DFW', name: 'Dallas Fort Worth International Airport' },
-      { code: 'CUN', name: 'Cancun International International Airport' },
+      { code: 'CUN', name: 'Cancun International Airport' },
       { code: 'LAX', name: 'Los Angeles International Airport' } 
     ]
   
diff --git a/src/views/AirportDetailsPage.vue b/src/views/AirportDetailsPage.vue
index d9811379..7b1284b0 100644
--- a/src/views/AirportDetailsPage.vue
+++ b/src/views/AirportDetailsPage.vue
@@ -60,4 +60,9 @@ const categories = ['Security', 'Restaurants', 'General', 'Arrivals/Departures',
   transform:scale(1.3); 
   text-decoration: underline;
 }
+
+/* .airport-name {
+  font-family: 'Nunito Sans', sans-serif;
+  font-size: 3em;
+} */
 </style>
\ No newline at end of file

From 4b5703dec28bed312aa55d75ea2424b0acca6d85 Mon Sep 17 00:00:00 2001
From: Zen McMillan <zenmcmillan@gmail.com>
Date: Mon, 5 Feb 2024 13:41:33 -0600
Subject: [PATCH 4/5] Style the login page

---
 src/views/Login.vue | 111 ++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 102 insertions(+), 9 deletions(-)

diff --git a/src/views/Login.vue b/src/views/Login.vue
index 2c0d8ae7..c3408e94 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,28 +1,41 @@
 <template>
     <AirportHeader />
     <form>
-        <label>Username</label>
-        <input 
+      <div class="home-create-account-container">
+        <router-link to="/">
+        <button @click="handleLogin" class="home-login">Home</button>
+    </router-link>
+    <button class="create-account">Create Account</button>
+      </div>
+    <div class="username-container">
+      <div class="username-label-container">
+        <label class="username-label">Username</label>
+      </div>
+      <input 
             type="text"
             placeholder="JohnDoe316"
             name="username"
             v-model="text"
             id="username"
+            class="input-box"
         />
+    </div>
+    <div class="password-container">
+      <div class="password-label-container">
         <label>Password</label>
+      </div>
+      
         <input 
             type="text"
-            placeholder="******"
+            placeholder="**********************"
             name="password"
             v-model="password"
             id="password"
+            class="input-box"
         />
-        <button>Login</button>
-        <button>Create Account</button>
+    </div>
+        <button class="login-on-page">Login</button>
     </form>
-    <router-link to="/">
-        <button @click="handleLogin">Back to Home</button>
-    </router-link>
 </template>
 
 <script setup>
@@ -39,4 +52,84 @@ const props = defineProps({
 const text = ref('')
 const password = ref('')
 
-</script>
\ No newline at end of file
+</script>
+
+<style>
+  form {
+    display: flex;
+    align-items: center;
+    outline: 2px solid red;
+   transform: translate(25%, -10%);
+   background-color: white;
+  }
+
+  .home-login {
+    display: flex;
+    font-size: 1.2em;
+    height: 2em;
+    width: 4em;
+    background-color: white;
+    border: 0;
+    text-decoration: underline;
+  }
+
+  .create-account {
+    display: flex;
+    border: 0;
+    background-color: white;
+    text-decoration: underline;
+    font-size: 1.2em;
+  }
+
+  .home-login:hover, .create-account:hover {
+    cursor: pointer;
+    color: white;
+    background-color: green;
+    text-decoration: underline;
+    transform:scale(1.3); 
+  }
+
+ .input-box {
+  width: 15em;
+  height: 2em;
+ }
+
+.username-container {
+  display: flex;
+  justify-content: space-between;
+  outline: 2px solid red;
+  width: 20em;
+  margin-top: -5em;
+}
+
+.password-container {
+  display: flex;
+  justify-content: space-between;
+  outline: 2px solid red;
+  width: 20em;
+  margin-top: -5em;
+}
+
+.home-create-account-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 16em;
+}
+
+.username-label-container {
+ outline: 2px solid purple;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.password-label-container {
+  display: flex;
+  outline: 2px solid green;
+  flex-direction: column;
+  justify-content: center;
+}
+
+
+</style>
\ No newline at end of file

From 506e81b293fd44a07dd2f86c0e6b846837d503c7 Mon Sep 17 00:00:00 2001
From: Zen McMillan <zenmcmillan@gmail.com>
Date: Mon, 5 Feb 2024 14:37:56 -0600
Subject: [PATCH 5/5] Restyle Login button

---
 src/views/Login.vue | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/views/Login.vue b/src/views/Login.vue
index c3408e94..2989d12b 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -58,9 +58,8 @@ const password = ref('')
   form {
     display: flex;
     align-items: center;
-    outline: 2px solid red;
-   transform: translate(25%, -10%);
-   background-color: white;
+    transform: translate(25%, -7%);
+    background-color: white;
   }
 
   .home-login {
@@ -97,17 +96,15 @@ const password = ref('')
 .username-container {
   display: flex;
   justify-content: space-between;
-  outline: 2px solid red;
   width: 20em;
-  margin-top: -5em;
+  margin-top: -2em;
 }
 
 .password-container {
   display: flex;
   justify-content: space-between;
-  outline: 2px solid red;
   width: 20em;
-  margin-top: -5em;
+  margin-top: -4em;
 }
 
 .home-create-account-container {
@@ -118,7 +115,6 @@ const password = ref('')
 }
 
 .username-label-container {
- outline: 2px solid purple;
  display: flex;
  flex-direction: column;
  justify-content: center;
@@ -126,10 +122,24 @@ const password = ref('')
 
 .password-label-container {
   display: flex;
-  outline: 2px solid green;
   flex-direction: column;
   justify-content: center;
 }
 
+.login-on-page {
+  width:  10em;
+  font-size: 1.2em;
+  height: 2em;
+  color: white;
+  background-color: green;
+  text-decoration: underline;
+  border-radius: 6px;
+  border: 0;
+}
+
+.login-on-page:hover {
+  cursor: pointer;
+  transform:scale(1.3); 
+}
 
 </style>
\ No newline at end of file