feat: #846 user information card new design style (#913)

bcgov · Sep 21, 2023 · 5986c57 · 5986c57
1 parent ab7c5ab
commit 5986c57
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 10 deletions.
diff --git a/frontend/src/assets/styles/default-theme.scss b/frontend/src/assets/styles/default-theme.scss
@@ -28,9 +28,12 @@ $light-text-secondary: map.get(lightTheme.$light-theme, 'text-secondary');
 $light-text-error: map.get(lightTheme.$light-theme, 'text-error');
 
 $light-background-brand: map.get(lightTheme.$light-theme, 'background-brand');
-$light-support-error: map.get(lightTheme.$light-theme, 'support-error');
 $light-interactive: map.get(lightTheme.$light-theme, 'interactive');
 
 //background
 $light-layer-one: map.get(lightTheme.$light-theme, 'layer-01');
-$light-layer-two: map.get(lightTheme.$light-theme, 'layer-02')
+$light-layer-two: map.get(lightTheme.$light-theme, 'layer-02');
+
+//support
+$light-support-error: map.get(lightTheme.$light-theme, 'support-error');
+$light-support-success: map.get(lightTheme.$light-theme, 'support-success');
diff --git a/frontend/src/components/grantaccess/UserIdentityCard.vue b/frontend/src/components/grantaccess/UserIdentityCard.vue
@@ -1,24 +1,30 @@
 <script setup lang="ts">
 import type { IdimProxyIdirInfo } from 'fam-api';
 import Card from 'primevue/card';
+import Icon from '@/components/common/Icon.vue';
+import { IconSize } from '@/enum/IconEnum';
 
 const props = defineProps<{
     userIdentity: IdimProxyIdirInfo;
 }>(); // Vue3 alternative way for Type the defineProps().
 </script>
 
 <template>
-    <Card class="mb-2 p-0">
+    <Card class="mb-2 p-0 custom-card">
+        <template #header>
+            <Icon icon="checkmark--filled" :size="IconSize.medium" />
+            <p>Verified user information</p>
+        </template>
         <template #content>
-            <div class="row align-items-center">
-                <label class="col-3">User ID:</label>
-                <span class="col-sm">{{ props.userIdentity.userId }}</span>
+            <div class="col">
+                <label class="row">User ID:</label>
+                <span class="row">{{ props.userIdentity.userId }}</span>
             </div>
-            <div class="row align-items-center" v-if="props.userIdentity.found">
-                <label class="col-3">Display Name: </label>
-                <span class="col-sm">{{ props.userIdentity.displayName }}</span>
+            <div class="col" v-if="props.userIdentity.found">
+                <label class="row" >Display Name: </label>
+                <span  class="row">{{ props.userIdentity.displayName }}</span>
             </div>
-            <div class="row" v-if="!props.userIdentity.found">
+            <div class="col d-flex align-items-center" v-if="!props.userIdentity.found">
                 <span class="px-0 invalid"> User does not exist </span>
             </div>
         </template>
@@ -28,6 +34,22 @@ const props = defineProps<{
 <style lang="scss" scoped>
 @import '@/assets/styles/styles.scss';
 
+.custom-card {
+    width: 38rem;
+}
+
+label {
+    color: $light-text-primary;
+    margin: 0 0 0.75rem !important;
+}
+
+span {
+    margin: 0 !important;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    letter-spacing: 0.01rem;
+}
+
 .invalid {
     font-size: 0.875em;
     color: $light-text-error;