more font and label adjustments for forms

src/styles/styles.scss

@@ -1,27 +1,28 @@
 .cwhq-app {
-  @import "./colors.scss";
-  @import "./application.scss";
-  @import "./quiz-scroll.scss";
-  @import "./quiz-answer.scss";
-  @import "./quiz-need-help.scss";
-  @import "./quiz-bar-rank.scss";
-  @import "./content.scss";
-  @import "./social-pop-over.scss";
-  @import "./casing.scss";
-  @import "./cwhq-bar.scss";
-  @import "./quiz-bar.scss";
-  @import "./leaderboard-bar.scss";
-  @import "./ballot-card.scss";
-  @import "./ballot-modal.scss";
-  @import "./buttons.scss";
-  @import "./mobile-warning.scss";
+  @import './colors.scss';
+  @import './application.scss';
+  @import './quiz-scroll.scss';
+  @import './quiz-answer.scss';
+  @import './quiz-need-help.scss';
+  @import './quiz-bar-rank.scss';
+  @import './content.scss';
+  @import './social-pop-over.scss';
+  @import './casing.scss';
+  @import './cwhq-bar.scss';
+  @import './quiz-bar.scss';
+  @import './leaderboard-bar.scss';
+  @import './ballot-card.scss';
+  @import './ballot-modal.scss';
+  @import './buttons.scss';
+  @import './mobile-warning.scss';
 
   .v-alert {
     font-size: 20px;
   }
 
   .v-input {
     font-size: 20px;
+    margin-bottom: 12px;
   }
 
   .v-messages {
@@ -35,3 +36,14 @@
     }
   }
 }
+
+.v-form {
+  .v-select__slot {
+    padding-top: 10px;
+  }
+
+  label {
+    font-size: 22px !important;
+    top: -2px;
+  }
+}

src/views/Accounts/Register/Step1.vue

@@ -26,6 +26,7 @@
       />
 
       <v-select
+        single-line
         color="input"
         v-bind="fields.heardAboutUs"
         v-model="fields.heardAboutUs.value"

src/views/Accounts/Register/Step2.vue

@@ -27,6 +27,7 @@
         :disabled="isSubmitting"
       />
       <v-select
+        single-line
         v-bind="fields.age"
         v-model="fields.age.value"
         :disabled="isSubmitting"
@@ -92,7 +93,8 @@ export default {
   props: ["fields"],
   computed: {
     needsParentConsent() {
-      return this.fields.age.value === "12 years old or lower";
+      const ageNum = parseInt(this.fields.age.value);
+      return ageNum < 13;
     }
   },
   methods: {

src/views/Accounts/Register/index.vue

@@ -208,7 +208,7 @@ export default {
           label: "How did you hear about the Code Challange?",
           type: "select",
           items: [
-            "Choose an option",
+            "How did you hear about the Code Challange?",
             "I'm a CodeWizardsHQ Student",
             "CWHQ newsletter",
             "CWHQ website",
@@ -218,8 +218,12 @@ export default {
             "Your school or PTA",
             "Other"
           ],
-          value: "Choose an option",
-          rules: [v => v !== "Choose an option" || "Please choose an option"]
+          value: "How did you hear about the Code Challange?",
+          rules: [
+            v =>
+              v !== "How did you hear about the Code Challange?" ||
+              "Please choose an option"
+          ]
         },
         heardAboutUsText: {
           label: "Tell us where you heard about the Code Challenge!",
@@ -237,20 +241,26 @@ export default {
           rules: [v => !!v || "Please enter a date of birth"]
         },
         age: {
-          label: "Hold old is the student?",
+          label: "How old is the student?",
           type: "select",
           items: [
-            "Choose an option",
-            "12 years old or lower",
+            "How old is the student?",
+            "8 years old",
+            "9 years old",
+            "10 years old",
+            "11 years old",
+            "12 years old",
             "13 years old",
             "14 years old",
             "15 years old",
             "16 years old",
             "17 years old",
             "18 years old or older"
           ],
-          value: "Choose an option",
-          rules: [v => v !== "Choose an option" || "Please choose an option"]
+          value: "How old is the student?",
+          rules: [
+            v => v !== "How old is the student?" || "Please choose an option"
+          ]
         },
         tos: {
           label: "I agree to the Terms of Use and Privacy Policy",