adding latest

src/views/forms/LoginForm.vue

@@ -3,15 +3,12 @@
     <!-- <v-form v-model="valid"> -->
     <v-row>
       <v-spacer></v-spacer>
-      <v-col
-        cols="5"
-        align-self="stretch"
-        class="d-flex flex-column justify-space-between"
-      >
+      <v-col cols="5" align-self="stretch" class="">
         <v-card
           color="rgb(0, 0, 0, 0)"
           flat
           class="d-flex align-end flex-column"
+          height="150px"
         >
           <h1 class="whiteText display-2 font-weight-bold">
             Savvy Firebase Tutorial
@@ -35,16 +32,42 @@
         <!-- </v-card> -->
       </v-col>
       <v-spacer></v-spacer>
-      <v-col cols="6" align-self="center" class="d-flex justify-start">
-        <v-card color="rgb(0, 0, 0, 0)" flat>
-          <h1 class="whiteText">Hello</h1>
-          <h1 class="whiteText">Hello</h1>
-          <h1 class="whiteText">Hello</h1>
-          <h1 class="whiteText">Hello</h1>
-          <h1 class="whiteText">Hello</h1>
-          <h1 class="whiteText">Hello</h1>
+      <v-col cols="5" align-self="center" class="d-flex justify-start">
+        <v-card
+          color="rgb(0, 0, 0, 0)"
+          flat
+          class="d-flex align-center flex-column"
+        >
+          <v-icon color="white" size="3em" class="pb-4"
+            >mdi-account-circle</v-icon
+          >
+          <v-form v-model="valid" class="pt-4 d-flex flex-column align-center">
+            <v-text-field
+              v-model="username"
+              outlined
+              rounded
+              placeholder="Username"
+              background-color="rgb(100%, 100%, 100%, 10%)"
+              color="rgb(100%, 100%, 100%, 10%)"
+              class="white-placeholder"
+            ></v-text-field>
+            <v-text-field
+              v-model="password"
+              outlined
+              rounded
+              type="password"
+              placeholder="Password"
+              background-color="rgb(100%, 100%, 100%, 10%)"
+              color="rgb(100%, 100%, 100%, 10%)"
+              class="white-placeholder"
+            ></v-text-field>
+            <v-btn depressed color="primary" class="lighten-2">Submit</v-btn>
+          </v-form>
+          <p class="whiteText mb-0 pt-5">Forgot password?</p>
+          <p class="whiteText display-1">{{ username }}</p>
         </v-card>
       </v-col>
+      <v-spacer></v-spacer>
     </v-row>
     <!-- </v-form> -->
   </v-container>
@@ -55,18 +78,41 @@ export default {
   name: "LoginForm",
   data() {
     return {
-      valid: false
+      valid: false,
+      username: "",
+      password: ""
     };
   }
 };
 </script>
 
 <style lang="scss" scoped>
+@import "../../scss/_variables.scss";
+
 .whiteText {
   color: white;
 }
 
 .title {
-    font-size: 2.0rem !important;
+  font-size: 2rem !important;
+}
+
+.white-placeholder ::v-deep input::placeholder {
+  color: white !important;
+  opacity: 1;
+}
+
+.white-placeholder ::v-deep input {
+  color: white !important;
+  opacity: 1;
+}
+
+.white-placeholder ::v-deep .v-label {
+  color: white !important;
+  opacity: 1;
+}
+
+.v-input__slot:hover {
+  border-color: #6fbd44;
 }
 </style>