adding latest

firebase.md

@@ -365,6 +365,19 @@ We can add mulitple cards to this layout in this column - and control how they a
 
 We can add `<v-spacer>` and then add additional colums with the same props to add content in a column like manner.
 
+Important!
+
+If you want content to be aligned in a column with each item on a new line, then use:
+
+```html
+<v-col cols="6" align-self="center" class="">
+  <v-card color="rgb(0, 0, 0, 0)" flat class="d-flex align-center flex-column">
+    <v-icon color="white" size="3em">mdi-account-circle</v-icon>
+    <p class="mb-0 display-2">Login</p></v-card
+  ></v-col
+>
+```
+
 ## Helper classes
 
 ### Spacing
@@ -484,3 +497,47 @@ The variants you can use are:
 You can apply these as a class to the object you want to darken/lighten.
 For example:
 `<v-btn color="primary" class="darken-2">Hello</v-btn>`
+
+## Forms
+
+### Changing the colour of form inputs
+
+You can change the background colour, and the highlight colour (when clicked) with the following props:
+
+```html
+<v-text-field
+  v-model="username"
+  background-color="rgb(100%, 100%, 100%, 10%)"
+  color="rgb(100%, 100%, 100%, 10%)"
+  class="white-placeholder"
+></v-text-field>
+```
+
+To change the placeholder colour you should use a custom class that overwrites this colour:
+
+```css
+.white-placeholder ::v-deep input::placeholder {
+  color: white !important;
+  opacity: 1;
+}
+```
+
+To change the label colour:
+
+```css
+.white-placeholder ::v-deep .v-label {
+  color: white !important;
+  opacity: 1;
+}
+```
+
+To change the input colour (the text that is typed in by the user) we should use another custom class:
+
+```css
+.white-placeholder ::v-deep input {
+  color: white !important;
+  opacity: 1;
+}
+```
+
+We have to use `::v-deep` because we are in a scoped component. Any nested css classes/variables in a scoped component will have a random id attached to them (vue does this dynamically). The `::v-deep` will make sure that the nested css gets the formatting applied. See <https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors> for details.

src/components/Appbar.vue

@@ -24,18 +24,22 @@
     >
       <v-row>
         <v-spacer></v-spacer>
-        <v-col cols="4" class="d-flex justify-start">
+        <v-col cols="4" class="d-flex justify-start align-content-center">
           <router-link :to="{ name: 'Home' }" class="routerLink">
             <v-toolbar-title class="title">
-              <p class="mb-0 underline">Savvy Firebase Tutorial</p>
+              <p class="mb-0">Savvy Firebase Tutorial</p>
             </v-toolbar-title>
           </router-link>
         </v-col>
         <v-col cols="4" class="d-flex justify-end align-self-center">
-          <router-link :to="{ name: 'Login' }" class="routerLink">
-            <p class="mr-3 mb-0 underline">Sign In</p>
+          <router-link :to="{ name: 'Login' }" class="routerLink ma-0 pr-2">
+            <p class=" mb-0 underline">
+              Sign In
+            </p>
+          </router-link>
+          <router-link :to="{ name: 'Login' }" class="routerLink ma-0">
+            <p class="mb-0 underline">Register</p>
           </router-link>
-          <p class="mb-0 underline">Register</p>
         </v-col>
         <v-spacer></v-spacer>
       </v-row>
@@ -67,7 +71,7 @@ export default {
   left: 0;
   right: 0;
   transform: scaleX(0);
-  transition: transform 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035);
+  transition: transform 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035) 50ms;
 }
 .underline:hover::after {
   transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

src/plugins/vuetify.js

@@ -14,7 +14,6 @@ export default new Vuetify({
         primary: "#051937",
         secondary: "#374366",
         accent: "#d4a418",
-        // background: "#e7efff",
         background: "#e8e8e8"
       }
     }

src/scss/_variables.scss

@@ -71,13 +71,13 @@ $Gilroy-BoldItalic: "Gilroy-BoldItalic", sans-serif !default;
 
 // Replace default body fonts
 
-@import "../../node_modules/vuetify/src/styles/styles.sass";
-$body-font-family: $Gilroy-Regular;
-$heading-font-family: $Gilroy-Regular;
+// @import "../../node_modules/vuetify/src/styles/styles.sass";
+// $body-font-family: $Gilroy-Regular;
+// $heading-font-family: $Gilroy-Regular;
 
-@import "~vuetify/src/styles/settings/variables";
-$body-font-family: $Gilroy-Regular;
-$heading-font-family: $Gilroy-Regular;
+// @import "~vuetify/src/styles/settings/variables";
+// $body-font-family: $Gilroy-Regular;
+// $heading-font-family: $Gilroy-Regular;
 
 // Replace typography fonts
 
@@ -139,3 +139,6 @@ $mainColor: #323947;
 .theme--light.v-sheet {
   color: $mainColor !important;
 }
+
+$text-field-outlined-fieldset-border: white;
+$btn-font-weight: 1400;

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>