Merge pull request #22 from runway-reviews/feature/styling-2/zm

Feature/styling 2/zm

src/assets/styles.css

@@ -14,7 +14,7 @@ body, .airport-details-page {
 }
 
 header{
-    /* margin: 20px; */
+
     font-size: 100px;
     padding-top: 70px;
     padding-bottom: 50px;
@@ -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;
@@ -50,8 +50,10 @@ header{
     justify-content: center;
   }
 
-  .login-button:hover, a:hover {
+.login-button:hover, .login-words:hover {
     background-color: green;
     color: white;
+    transform:scale(1.3); 
+    text-decoration: underline;
   }
 

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' } 
     ]
   

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>
@@ -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,7 +87,19 @@
     font-size: 1.2em;
   }
 
+  .submit-review:hover {
+      cursor: pointer;  
+      transform:scale(1.3); 
+      text-decoration: underline;
+  }
+
   .review-label {
     font-size: 1.2em;
   }
+
+  .close-button {
+    background-color: white;
+    border:0;
+    font-size: 1.6em;
+  }
 </style>

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,38 @@ 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;
+}
+
+/* .airport-name {
+  font-family: 'Nunito Sans', sans-serif;
+  font-size: 3em;
+} */
 </style>

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>
+</script>

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,94 @@ const props = defineProps({
 const text = ref('')
 const password = ref('')
 
-</script>
+</script>
+
+<style>
+  form {
+    display: flex;
+    align-items: center;
+    transform: translate(25%, -7%);
+    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;
+  width: 20em;
+  margin-top: -2em;
+}
+
+.password-container {
+  display: flex;
+  justify-content: space-between;
+  width: 20em;
+  margin-top: -4em;
+}
+
+.home-create-account-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 16em;
+}
+
+.username-label-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.password-label-container {
+  display: flex;
+  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>