[Accounts] Use KDS Buttons

learningequality · Dec 19, 2022 · d7e44a5 · d7e44a5
1 parent 2ac10c1
commit d7e44a5
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 44 deletions.
diff --git a/contentcuration/contentcuration/frontend/accounts/components/MessageLayout.vue b/contentcuration/contentcuration/frontend/accounts/components/MessageLayout.vue
@@ -13,7 +13,7 @@
           <slot></slot>
           <p class="mt-4">
             <slot name="back">
-              <ActionLink :to="{ name: 'Main' }" :text="$tr('backToLogin')" />
+              <KRouterLink :to="{ name: 'Main' }" :text="$tr('backToLogin')" />
             </slot>
           </p>
         </div>

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/Create.vue b/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
@@ -164,9 +164,12 @@
         <p class="mb-4">
           {{ $tr('contactMessage') }}
         </p>
-        <VBtn color="primary" large :disabled="offline" type="submit">
-          {{ $tr('finishButton') }}
-        </VBtn>
+        <KButton
+          primary
+          :disabled="offline"
+          :text="$tr('finishButton')"
+          type="submit"
+        />
       </VForm>
 
     </VLayout>

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/Main.vue b/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
@@ -36,12 +36,20 @@
             <p>
               <ActionLink :to="{ name: 'ForgotPassword' }" :text="$tr('forgotPasswordLink')" />
             </p>
-            <VBtn block color="primary" large type="submit" :disabled="offline || busy">
-              {{ $tr('signInButton') }}
-            </VBtn>
-            <VBtn block flat color="primary" class="mt-2" :to="{ name: 'Create' }">
-              {{ $tr('createAccountButton') }}
-            </VBtn>
+            <KButton
+              primary
+              class="w-100"
+              :disabled="offline || busy"
+              :text="$tr('signInButton')"
+              type="submit"
+            />
+            <KRouterLink
+              primary
+              class="w-100 mt-2"
+              :text="$tr('createAccountButton')"
+              :to="{ name: 'Create' }"
+              appearance="flat-button"
+            />
           </VForm>
           <VDivider />
           <p class="mt-4 text-xs-center">
@@ -197,4 +205,8 @@
     left: 1em;
   }
 
+  .w-100 {
+    width: 100%;
+  }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/accountDeleted/AccountDeleted.vue b/contentcuration/contentcuration/frontend/accounts/pages/accountDeleted/AccountDeleted.vue
@@ -2,13 +2,7 @@
 
   <MessageLayout
     :header="$tr('accountDeletedTitle')"
-  >
-    <template #back>
-      <VBtn color="primary" :to="{ name: 'Main' }" large>
-        {{ $tr('continueToSignIn') }}
-      </VBtn>
-    </template>
-  </MessageLayout>
+  />
 
 </template>
 
@@ -24,7 +18,6 @@
     },
     $trs: {
       accountDeletedTitle: 'Account successfully deleted',
-      continueToSignIn: 'Continue to sign-in page',
     },
   };
 

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountCreated.vue b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountCreated.vue
@@ -2,13 +2,7 @@
 
   <MessageLayout
     :header="$tr('accountCreatedTitle')"
-  >
-    <template #back>
-      <VBtn color="primary" :to="{ name: 'Main' }" large>
-        {{ $tr('continueToSignIn') }}
-      </VBtn>
-    </template>
-  </MessageLayout>
+  />
 
 </template>
 
@@ -24,7 +18,6 @@
     },
     $trs: {
       accountCreatedTitle: 'Account successfully created',
-      continueToSignIn: 'Continue to sign-in',
     },
   };
 

diff --git a/...tcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountNotActivated.vue b/...tcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountNotActivated.vue
@@ -4,9 +4,12 @@
     :header="$tr('title')"
     :text="$tr('text')"
   >
-    <VBtn color="primary" large :to="{ name: 'RequestNewActivationLink' }">
-      {{ $tr('requestNewLink') }}
-    </VBtn>
+    <KRouterLink
+      primary
+      :text="$tr('requestNewLink')"
+      :to="{ name: 'RequestNewActivationLink' }"
+      appearance="raised-button"
+    />
   </MessageLayout>
 
 </template>

diff --git a/...entcuration/contentcuration/frontend/accounts/pages/activateAccount/ActivationExpired.vue b/...entcuration/contentcuration/frontend/accounts/pages/activateAccount/ActivationExpired.vue
@@ -4,9 +4,12 @@
     :header="$tr('activationExpiredTitle')"
     :text="$tr('activationExpiredText')"
   >
-    <VBtn color="primary" large :to="{ name: 'RequestNewActivationLink' }" class="mb-4">
-      {{ $tr('requestNewLink') }}
-    </VBtn>
+    <KRouterLink
+      primary
+      :text="$tr('requestNewLink')"
+      :to="{ name: 'RequestNewActivationLink' }"
+      appearance="raised-button"
+    />
   </MessageLayout>
 
 </template>

diff --git a/...tion/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue b/...tion/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
@@ -11,9 +11,12 @@
     >
       <Banner :text="$tr('activationRequestFailed')" :value="error" error class="mb-4" />
       <EmailField v-model="email" autofocus />
-      <VBtn color="primary" large type="submit" block>
-        {{ $tr('submitButton') }}
-      </VBtn>
+      <KButton
+        primary
+        class="w-100"
+        :text="$tr('submitButton')"
+        type="submit"
+      />
     </VForm>
   </MessageLayout>
 
@@ -64,3 +67,11 @@
   };
 
 </script>
+
+<style lang="less" scoped>
+
+  .w-100 {
+    width: 100%;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
@@ -7,9 +7,12 @@
     <VForm ref="form" lazy-validation @submit.prevent="submit">
       <Banner :text="$tr('forgotPasswordFailed')" :value="error" error class="mb-4" />
       <EmailField v-model="email" autofocus />
-      <VBtn block color="primary" large type="submit">
-        {{ $tr('submitButton') }}
-      </VBtn>
+      <KButton
+        primary
+        class="w-100"
+        :text="$tr('submitButton')"
+        type="submit"
+      />
     </VForm>
   </MessageLayout>
 
@@ -65,3 +68,11 @@
   };
 
 </script>
+
+<style lang="less" scoped>
+
+  .w-100 {
+    width: 100%;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetLinkExpired.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetLinkExpired.vue
@@ -4,9 +4,12 @@
     :header="$tr('resetExpiredTitle')"
     :text="$tr('resetExpiredText')"
   >
-    <VBtn color="primary" large :to="{ name: 'ForgotPassword' }" class="mb-4">
-      {{ $tr('requestNewLink') }}
-    </VBtn>
+    <KRouterLink
+      primary
+      :text="$tr('requestNewLink')"
+      :to="{ name: 'ForgotPassword' }"
+      appearance="raised-button"
+    />
   </MessageLayout>
 
 </template>

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue
@@ -16,9 +16,12 @@
         :label="$tr('passwordConfirmLabel')"
         :additionalRules="passwordConfirmRules"
       />
-      <VBtn block color="primary" large type="submit">
-        {{ $tr('submitButton') }}
-      </VBtn>
+      <KButton
+        primary
+        class="w-100"
+        :text="$tr('submitButton')"
+        type="submit"
+      />
     </VForm>
   </MessageLayout>
 
@@ -84,3 +87,11 @@
   };
 
 </script>
+
+<style lang="less" scoped>
+
+  .w-100 {
+    width: 100%;
+  }
+
+</style>