Update language, swap div for link button and add a dismiss zone.

thunderbird · Oct 2, 2024 · f1f60ac · f1f60ac
1 parent 75ecb4d
commit f1f60ac
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 8 deletions.
diff --git a/frontend/src/components/GenericModal.vue b/frontend/src/components/GenericModal.vue
@@ -5,6 +5,7 @@ import {
 import { refreshKey } from '@/keys';
 import NoticeBar from '@/tbpro/elements/NoticeBar.vue';
 import { useI18n } from 'vue-i18n';
+import LinkButton from '@/tbpro/elements/LinkButton.vue';
 
 const { t } = useI18n();
 
@@ -40,10 +41,11 @@ onUnmounted(() => {
 
 <template>
   <div class="new-design overlay" role="dialog" tabindex="-1" aria-labelledby="title" aria-modal="true">
+    <div class="dismiss-zone" @click="emits('close')"></div>
     <div class="modal">
-        <div class="modal-close" v-if="closable" @click="emits('close')" role="button" aria-labelledby="modal-close-button">
+        <link-button class="modal-close" v-if="closable" @click="emits('close')" aria-labelledby="modal-close-button">
           <img id="modal-close-button" src="@/assets/svg/icons/close.svg" :alt="t('label.close')" :title="t('label.close')"/>
-        </div>
+        </link-button>
         <div class="modal-header">
           <slot name="header"></slot>
           <notice-bar type="error" v-if="errorMessage">
@@ -88,6 +90,12 @@ onUnmounted(() => {
   justify-content: center;
 }
 
+.dismiss-zone {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
 .modal-close {
   position: absolute;
   right: 1rem;
@@ -96,7 +104,7 @@ onUnmounted(() => {
 }
 
 /* Filter it for dark-mode B^) */
-.dark .modal-close {
+.dark .modal-close > :deep(.text) {
   filter: invert(0.75)
 }
 

diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
@@ -334,16 +334,18 @@
       "title": "Complete your sign up"
     },
     "form": {
-      "email": "Enter your email to sign in or create an account:",
-      "email-waiting-list": "Enter your email to join the waiting list:",
+      "email": "Email address",
       "no-invite-code": "If you don't have an invite code, add your email to our waiting list.",
       "privacy": "Your privacy is important to us."
     },
     "login": {
-      "title": "Simplify your day – just enter your email:"
+      "title": "Sign in or create an account"
     },
     "signUp": {
       "title": "Have an invite code? Enter it here"
+    },
+    "waitingListSignUp": {
+      "title": "Enter your email to join the waiting list"
     }
   },
   "navBar": {

diff --git a/frontend/src/tbpro/elements/BaseButton.vue b/frontend/src/tbpro/elements/BaseButton.vue
@@ -88,6 +88,7 @@ button:hover > .tooltip,
   text-decoration: underline;
   box-shadow: none;
   border: none !important;
+  min-width: 0;
 
   .text {
     padding: 0;

diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
@@ -213,7 +213,10 @@ const onEnter = () => {
     <generic-modal :error-message="loginError" @close="() => router.push({name: 'home'})">
       <template v-slot:header>
         <word-mark/>
-        <h2 id="title" v-if="loginStep === LoginSteps.Login || hideInviteField">
+        <h2 id="title" v-if="hideInviteField">
+          {{ t('login.waitingListSignUp.title') }}
+        </h2>
+        <h2 id="title" v-else-if="loginStep === LoginSteps.Login">
           {{ t('login.login.title') }}
         </h2>
         <h2 id="title" v-else-if="loginStep === LoginSteps.SignUp">
@@ -229,7 +232,7 @@ const onEnter = () => {
       </div>
       <div class="form-body">
         <form v-if="loginStep !== LoginSteps.SignUpConfirm" class="form" ref="formRef" autocomplete="off" @submit.prevent @keyup.enter="() => onEnter()">
-          <text-input name="email" v-model="email" :required="true" :help="loginStep === LoginSteps.Login || hideInviteField ? t('login.form.privacy') : null">{{ hideInviteField ? t('login.form.email-waiting-list') : t('login.form.email') }}</text-input>
+          <text-input name="email" v-model="email" :required="true">{{ t('login.form.email') }}</text-input>
           <text-input v-if="isPasswordAuth" name="password" v-model="password" :required="true">{{ t('label.password') }}</text-input>
           <text-input v-if="loginStep === LoginSteps.SignUp && !hideInviteField" name="inviteCode" v-model="inviteCode" :help="t('login.form.no-invite-code')">{{ t('label.inviteCode') }}</text-input>
         </form>