fix: fixing buttons

bcgov · Sep 1, 2023 · eafd13b · eafd13b
1 parent 3437f63
commit eafd13b
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 45 deletions.
diff --git a/frontend/src/components/MainHeaderComponent.vue b/frontend/src/components/MainHeaderComponent.vue
@@ -44,24 +44,27 @@ onMounted(() => window.addEventListener('resize', updateScreenWidth));
 
   <div class="heading-space"></div>
 
-  <!-- Remember to add profile button here -->
-  <cds-button
-    v-if="$session?.isLoggedIn() && (isSmallScreen || isMediumScreen)"
-    data-id="logout-btn"
-    kind="tertiary"
-    @click.prevent="$session?.logOut"
-  >
-    <Logout16 slot="icon" />
-  </cds-button>
+  <div class="heading-buttons">
 
-  <cds-button
-    v-if="$session?.isLoggedIn() && (!isSmallScreen && !isMediumScreen)"
-    data-id="logout-btn"
-    kind="tertiary"
-    @click.prevent="$session?.logOut"
-  >
-    <span>Logout</span>
-    <Logout16 slot="icon" />
-  </cds-button>
+    <!-- Remember to add profile button here -->
+    <cds-button
+      v-if="$session?.isLoggedIn() && (isSmallScreen || isMediumScreen)"
+      data-id="logout-btn"
+      kind="tertiary"
+      size="sm"
+      @click.prevent="$session?.logOut"
+    >
+      <Logout16 slot="icon" />
+    </cds-button>
 
+    <cds-button
+      v-if="$session?.isLoggedIn() && (!isSmallScreen && !isMediumScreen)"
+      data-id="logout-btn"
+      kind="tertiary"
+      @click.prevent="$session?.logOut"
+    >
+      <span>Logout</span>
+      <Logout16 slot="icon" />
+    </cds-button>
+  </div>
 </template>
diff --git a/frontend/src/components/grouping/AddressGroupComponent.vue b/frontend/src/components/grouping/AddressGroupComponent.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { reactive, watch, computed, ref, onMounted } from 'vue'
+// Carbon
+import '@carbon/web-components/es/components/button/index';
 // Composables
 import { useEventBus } from '@vueuse/core'
 import { useFetchTo } from '@/composables/useFetch'
@@ -330,14 +332,15 @@ onMounted(() =>{
     @error="validation.postalCode = !$event"
     @empty="validation.postalCode = !$event"
   />
-
+<div class="grouping-06">
   <cds-button
     v-if="id > 0"
-    kind="danger-tertiary"
+    kind="danger--tertiary"
     @click.prevent="emit('remove', id)"
   >
     <span>Delete address</span>
     <Delete16 slot="icon" />
   </cds-button>
+</div>
   </div>
 </template>
diff --git a/frontend/src/components/grouping/ContactGroupComponent.vue b/frontend/src/components/grouping/ContactGroupComponent.vue
@@ -185,13 +185,15 @@ onMounted(() =>{
     @empty="validation.phoneNumber = !$event"
   />
 
+  <div class="grouping-06">
   <cds-button
     v-if="id > 0"
-    kind="danger-tertiary"
+    kind="danger--tertiary"
     @click.prevent="emit('remove', id)"
   >
     <span>Delete contact</span>
     <Delete16 slot="icon" />
   </cds-button>
 </div>
+</div>
 </template>
diff --git a/frontend/src/pages/ApplyClientNumberPage.vue b/frontend/src/pages/ApplyClientNumberPage.vue
@@ -433,6 +433,7 @@ generalErrorBus.on((event: string) => (globalErrorMessage.value = event));
         <cds-button
             v-if="!isFirst"
             kind="secondary"
+            size="lg"
             :disabled="isFirst"
             v-on:click="onBack"
             data-test="wizard-back-button"
@@ -444,6 +445,7 @@ generalErrorBus.on((event: string) => (globalErrorMessage.value = event));
           v-if="!isLast && !isFormValid && !endAndLogOut && !mailAndLogOut"
           id="nextBtn"
           kind="primary"
+          size="lg"
           v-on:click="onNext"
           :disabled="progressData[currentTab].valid === false"
           data-test="wizard-next-button"
@@ -459,8 +461,7 @@ generalErrorBus.on((event: string) => (globalErrorMessage.value = event));
           v-if="isLast && !endAndLogOut && !mailAndLogOut"
             data-test="wizard-submit-button"
             kind="primary"
-            iconLayout=""
-            class="bx--btn"
+            size="lg"
             @click.prevent="submit"
           >
           <span>Submit application</span>
@@ -470,8 +471,7 @@ generalErrorBus.on((event: string) => (globalErrorMessage.value = event));
         <cds-button
           data-test="wizard-save-button"
           kind="primary"
-          iconLayout=""
-          class="bx--btn"
+          size="lg"
           :disabled="isNextAvailable"
           v-if="!isLast && isFormValid && !endAndLogOut && !mailAndLogOut"
           @click.prevent="saveChange"
@@ -483,8 +483,7 @@ generalErrorBus.on((event: string) => (globalErrorMessage.value = event));
         <cds-button
           data-test="wizard-logout-button"
           kind="primary"
-          iconLayout=""
-          class="bx--btn"
+          size="lg"
           v-show="!isLast && (endAndLogOut || mailAndLogOut)"
           @click.prevent="processAndLogOut"
         >

diff --git a/frontend/src/pages/applyform/ReviewWizardStep.vue b/frontend/src/pages/applyform/ReviewWizardStep.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import { watch, ref, onMounted } from 'vue'
+// Carbon
+import '@carbon/web-components/es/components/button/index';
+// Composables
 import { useEventBus } from '@vueuse/core'
+// Types
 import type { FormDataDto } from '@/dto/ApplyClientNumberDto'
+// @ts-ignore
 import Edit16 from '@carbon/icons-vue/es/edit/16'
 
 //Defining the props and emiter to reveice the data and emit an update
@@ -49,17 +54,15 @@ onMounted(() => {
         }}
       </p>
     </div>
-
-    <bx-btn
+<div class="grouping-06">
+    <cds-button
       kind="tertiary"
-      iconLayout=""
-      class="bx--btn"
-      size="field"
       @click.prevent="goToStep(0)"
     >
       <span>Edit business information</span>
       <Edit16 slot="icon" />
-    </bx-btn>
+    </cds-button>
+    </div>
   </div>
 
   <div class="grouping-05">
@@ -77,17 +80,15 @@ onMounted(() => {
       <span class="body-compact-01">{{ address.country.text }}</span>
       <span class="body-compact-01">{{ address.postalCode }}</span>
     </div>
-
-    <bx-btn
+<div class="grouping-06">
+    <cds-button
       kind="tertiary"
-      iconLayout=""
-      class="bx--btn"
-      size="field"
       @click.prevent="goToStep(1)"
     >
       <span>Edit address</span>
       <Edit16 slot="icon" />
-    </bx-btn>
+    </cds-button>
+    </div>
   </div>
 
   <div class="grouping-05">
@@ -107,16 +108,14 @@ onMounted(() => {
       <span class="body-compact-01">{{ contact.email }}</span>
       <span class="body-compact-01">{{ contact.phoneNumber }}</span>
     </div>
-
-    <bx-btn
+<div class="grouping-06">
+    <cds-button
       kind="tertiary"
-      iconLayout=""
-      class="bx--btn"
-      size="field"
       @click.prevent="goToStep(2)"
     >
       <span>Edit contacts</span>
       <Edit16 slot="icon" />
-    </bx-btn>
+    </cds-button>
+    </div>
   </div>
 </template>