feat(Premium): add info about PPP discount & improve accessibility

Rule-34 · Mar 28, 2023 · cf323d7 · cf323d7
1 parent a2cbaee
commit cf323d7
Show file tree

Hide file tree

Showing 4 changed files with 417 additions and 362 deletions.
diff --git a/components/layout/navigation/sidenav/SideNavToggler.vue b/components/layout/navigation/sidenav/SideNavToggler.vue
@@ -1,30 +1,35 @@
 <template>
-  <button
-    aria-label='Toggle the menu'
-    class='focus-visible:focus-util flex h-12 w-12 items-center justify-center rounded-full border-0 bg-gradient-to-b from-primary-400 to-accent-400 p-4 shadow md:h-16 md:w-16'
-    title='Menu'
-    type='menu'
-    @click='toggleSideNav'
-  >
-    <MenuIcon class='icon' />
-  </button>
+	<button
+		aria-label="Toggle the menu"
+		class="focus-visible:focus-util flex h-12 w-12 items-center justify-center rounded-full border-0 bg-gradient-to-b from-primary-400 to-accent-400 p-4 shadow md:h-16 md:w-16"
+		title="Menu"
+		type="menu"
+		@click="toggleSideNav"
+	>
+		<span class="sr-only">Toggle the menu</span>
+
+		<MenuIcon
+			aria-hidden="true"
+			class="icon"
+		/>
+	</button>
 </template>
 
 <script>
-  import { mapActions } from 'vuex'
-  import { MenuIcon } from 'vue-feather-icons'
+import { mapActions } from 'vuex'
+import { MenuIcon } from 'vue-feather-icons'
 
-  export default {
-    components: {
-      MenuIcon
-    },
+export default {
+	components: {
+		MenuIcon
+	},
 
-    methods: {
-      ...mapActions('navigation', ['sideNavNavigationManager']),
+	methods: {
+		...mapActions('navigation', ['sideNavNavigationManager']),
 
-      toggleSideNav() {
-        this.sideNavNavigationManager({ operation: 'toggle' })
-      }
-    }
-  }
+		toggleSideNav() {
+			this.sideNavNavigationManager({ operation: 'toggle' })
+		}
+	}
+}
 </script>
diff --git a/components/pages/premium/PremiumLogin.vue b/components/pages/premium/PremiumLogin.vue
@@ -1,71 +1,75 @@
 <template>
-  <div class='material-container p-4'>
-    <form @submit.prevent='userLogin'>
-      <label
-        class='mb-2 block text-lg font-medium leading-tight text-white'
-        for='license-key'
-      >
-        License Key
-      </label>
+	<div class="material-container p-4">
+		<form @submit.prevent="userLogin">
+			<label
+				class="mb-2 block text-lg font-medium leading-tight text-white"
+				for="license-key"
+			>
+				License Key
+			</label>
 
-      <div class='mt-1 flex w-full flex-row items-center gap-1'>
-        <input
-          id='license-key'
-          v-model='login.password'
-          autocomplete='current-password'
-          class='focus-visible:focus-util material-container block w-10/12 grow appearance-none border-darkGray-100 bg-darkGray-700 p-2 text-sm font-light text-gray-300 outline-none'
-          name='license-key'
-          placeholder='XXXXXXXX-XXXXXXXX-XXXXXXXX-XXXXXXXX'
-          required
-          type='text'
-        />
+			<div class="mt-1 flex w-full flex-row items-center gap-1">
+				<input
+					id="license-key"
+					v-model="login.password"
+					autocomplete="current-password"
+					class="focus-visible:focus-util material-container block w-10/12 grow appearance-none border-darkGray-100 bg-darkGray-700 p-2 text-sm font-light text-gray-300 outline-none"
+					name="license-key"
+					placeholder="XXXXXXXX-XXXXXXXX-XXXXXXXX-XXXXXXXX"
+					required
+					type="text"
+				/>
 
-        <!-- Action -->
-        <button
-          class='focus-visible:focus-util ml-1 appearance-none rounded-full border-0 bg-gradient-to-br from-primary-400 to-accent-400'
-          type='submit'
-        >
-          <chevron-right-icon class='icon h-9 w-9' />
-        </button>
-      </div>
-    </form>
-  </div>
+				<!-- Action -->
+				<button
+					class="focus-visible:focus-util ml-1 appearance-none rounded-full border-0 bg-gradient-to-br from-primary-400 to-accent-400"
+					type="submit"
+				>
+					<span class="sr-only">Login</span>
+
+					<chevron-right-icon
+						aria-hidden="true"
+						class="icon h-9 w-9"
+					/>
+				</button>
+			</div>
+		</form>
+	</div>
 </template>
 
 <script>
-  import { mapActions } from 'vuex'
-  import { ChevronRightIcon } from 'vue-feather-icons'
-
-  export default {
-    components: {
-      ChevronRightIcon
-    },
+import { mapActions } from 'vuex'
+import { ChevronRightIcon } from 'vue-feather-icons'
 
-    data() {
-      return {
-        login: {
-          password: ''
-        }
-      }
-    },
+export default {
+	components: {
+		ChevronRightIcon
+	},
 
-    watch: {
-      login: {
-        handler() {
+	data() {
+		return {
+			login: {
+				password: ''
+			}
+		}
+	},
 
-          this.login.password = this.login.password.trim()
-        },
+	watch: {
+		login: {
+			handler() {
+				this.login.password = this.login.password.trim()
+			},
 
-        deep: true
-      }
-    },
+			deep: true
+		}
+	},
 
-    methods: {
-      ...mapActions('premium', ['authenticate']),
+	methods: {
+		...mapActions('premium', ['authenticate']),
 
-      async userLogin() {
-        await this.authenticate(this.login)
-      }
-    }
-  }
+		async userLogin() {
+			await this.authenticate(this.login)
+		}
+	}
+}
 </script>