Merge pull request #3891 from AlexVelezLl/accounts-kds-buttons

[Accounts] Use KDS Buttons
learningequality · Apr 18, 2023 · 50b182f · 50b182f
2 parents c9cbc62 + 295bde7
commit 50b182f
Show file tree

Hide file tree

Showing 11 changed files with 91 additions and 42 deletions.
diff --git a/contentcuration/contentcuration/frontend/accounts/components/MessageLayout.vue b/contentcuration/contentcuration/frontend/accounts/components/MessageLayout.vue
@@ -13,7 +13,10 @@
           <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
@@ -163,9 +163,13 @@
           </div>
         </div>
 
-        <VBtn color="primary" large :disabled="offline" type="submit" class="mt-5">
-          {{ $tr('finishButton') }}
-        </VBtn>
+        <KButton
+          primary
+          class="mt-5"
+          :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
@@ -58,24 +58,20 @@
                 :text="$tr('forgotPasswordLink')"
               />
             </p>
-            <VBtn
-              block
-              color="primary"
-              large
-              type="submit"
+            <KButton
+              primary
+              class="w-100"
+              :text="$tr('signInButton')"
               :disabled="offline || busy"
-            >
-              {{ $tr('signInButton') }}
-            </VBtn>
-            <VBtn
-              block
-              flat
-              color="primary"
-              class="mt-2"
+              type="submit"
+            />
+            <KRouterLink
+              primary
+              class="mt-2 w-100"
+              :text="$tr('createAccountButton')"
               :to="{ name: 'Create' }"
-            >
-              {{ $tr('createAccountButton') }}
-            </VBtn>
+              appearance="flat-button"
+            />
           </VForm>
           <VDivider />
           <p class="mt-4 text-xs-center">
@@ -226,4 +222,8 @@
     content: '•';
   }
 
+  .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
@@ -5,7 +5,7 @@
   >
     <template #back>
       <VBtn color="primary" :to="{ name: 'Main' }" large>
-        {{ $tr('continueToSignIn') }}
+        {{ $tr('backToLogin') }}
       </VBtn>
     </template>
   </MessageLayout>
@@ -24,7 +24,7 @@
     },
     $trs: {
       accountDeletedTitle: 'Account successfully deleted',
-      continueToSignIn: 'Continue to sign-in page',
+      backToLogin: '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
@@ -5,7 +5,7 @@
   >
     <template #back>
       <VBtn color="primary" :to="{ name: 'Main' }" large>
-        {{ $tr('continueToSignIn') }}
+        {{ $tr('backToLogin') }}
       </VBtn>
     </template>
   </MessageLayout>
@@ -24,7 +24,7 @@
     },
     $trs: {
       accountCreatedTitle: 'Account successfully created',
-      continueToSignIn: 'Continue to sign-in',
+      backToLogin: 'Continue to sign-in page',
     },
   };
 

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>