fix(FSADT1-892): fixing submission page

bcgov · Sep 25, 2023 · f34029d · f34029d
1 parent 7ccc5b8
commit f34029d
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 29 deletions.
diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
@@ -72,6 +72,12 @@
 
   --cds-notification-background-error: #FFEAE5;
   --cds-support-error: #E72000;
+
+  --light-theme-background-background-selected: #93939533;
+}
+
+*, *::before, *::after {
+  box-sizing: unset;
 }
 
 .heading-buttons {
@@ -180,6 +186,13 @@ hr {
   width: 100%;
 }
 
+div#app {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
 .bulleted-list {
   list-style: decimal;
   margin-left: 1.5rem;
@@ -203,7 +216,7 @@ hr {
   width: 414px;
   height: 414px;
   flex-grow: 1;
-  fill: var(--cds-hover-primary, #0353e9);
+  fill: var(--cds-button-primary, #0353e9);
 }
 
 .form-header-progress {
@@ -223,22 +236,23 @@ hr {
   padding: 8.125rem 13.375rem 15rem 2.5rem;
   align-items: center;
   background: var(--light-theme-layer-layer-02, #fff);
+  flex-grow: 1;
 }
 .full {
   margin: 0rem;
   padding-bottom: 0px;
   display: flex;
-  align-items: stretch;
-  height: 100vh;
-  width: 100vw;
-  overflow: hidden;
+  align-items: stretch;  
   background: var(--light-theme-background-background, #fff);
+  flex-grow: 1;
 }
 .screen {
   margin: 3rem 2.5rem 2.5rem 2.5rem;
   padding-bottom: 0px;
   display: flex;
+  align-items: stretch;  
   background: var(--light-theme-background-background, #fff);
+  flex-grow: 1;
 }
 .headers {
   display: flex;
@@ -417,6 +431,11 @@ hr {
 }
 .form-header-stretched {
   align-self: stretch;
+  width: 50%;
+}
+
+.form-header-stretched cds-button{
+  width: 15rem;
 }
 
 .form-header-title {

diff --git a/frontend/src/pages/FormSubmittedPage.vue b/frontend/src/pages/FormSubmittedPage.vue
@@ -1,31 +1,12 @@
-<template>
-  <div class="frame-03">
-    <SVG alt="Badge pictogram" class="submission-badge"></SVG>
-    <div ref="i"></div>
-    <div class="form-header form-header-stretched">
-      <h1>Application submitted!</h1>
-      <p>Your application for a client number has been submitted.</p>
-      <p>
-        We’ll send the client number to {{ submitterInformation?.email }} once
-        we confirm the information you provided.
-      </p>
-      <cds-button
-        kind="primary"
-        @click.prevent="newFormSubmission()"
-        size="field">
-        <span>Create another client</span>
-      </cds-button>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { inject } from 'vue'
+// Composables
 import { useRouter } from 'vue-router'
-import badgePictogram from '@carbon/pictograms/es/badge'
-
-import type { Submitter } from '@/dto/CommonTypesDto'
 import useSvg from '@/composables/useSvg'
+// Types
+import type { Submitter } from '@/dto/CommonTypesDto'
+// @ts-ignore
+import badgePictogram from '@carbon/pictograms/es/badge'
 
 const submitterInformation = inject<Submitter>('submitterInformation')
 
@@ -37,3 +18,24 @@ const newFormSubmission = () => {
 
 const SVG = useSvg(badgePictogram)
 </script>
+
+<template>
+  <div class="frame-03">
+    <SVG alt="Badge pictogram" class="submission-badge"></SVG>    
+    <div class="form-header form-header-stretched">
+      <p class="fluid-heading-05">Application submitted!</p>
+      <p class="fluid-paragraph-01">Your application for a client number has been submitted.</p>
+      <p class="fluid-paragraph-01">
+        We’ll send the client number to {{ $session.user?.email }} once
+        we confirm the information you provided.
+      </p>
+      <cds-button
+        kind="primary"
+        @click.prevent="newFormSubmission()"
+        size="field">
+        <span>Create another client</span>
+      </cds-button>
+    </div>
+  </div>
+</template>
+