From c60f28b17953f5b187d3c0e1761d6aec92dbf003 Mon Sep 17 00:00:00 2001
From: MCatherine <Mcatherine1994@gmail.com>
Date: Wed, 10 Jan 2024 15:29:00 -0800
Subject: [PATCH] fix: #921 fix user identity card style on mobile (#1119)

---
 frontend/src/assets/styles/card.scss          | 50 +++++++++++++++++++
 .../grantaccess/ForestClientCard.vue          |  3 ++
 .../grantaccess/UserIdentityCard.vue          | 18 +++----
 3 files changed, 62 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/assets/styles/card.scss

diff --git a/frontend/src/assets/styles/card.scss b/frontend/src/assets/styles/card.scss
new file mode 100644
index 000000000..991579374
--- /dev/null
+++ b/frontend/src/assets/styles/card.scss
@@ -0,0 +1,50 @@
+@use 'sass:map';
+@use '@bcgov-nr/nr-theme/design-tokens/light-theme.scss' as lightTheme;
+
+.p-card .p-card-header {
+    display: flex;
+    padding: 1.5rem;
+    align-items: center;
+
+    svg {
+        color: map.get(lightTheme.$light-theme, 'support-success');
+        margin-bottom: 0.1rem;
+    }
+
+    p {
+        margin: 0;
+        padding: 0 0 0 1rem !important;
+        display: inline-flex;
+        margin-bottom: 0;
+        color: map.get(lightTheme.$light-theme, 'text-primary');
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 1.125rem; /* 128.571% */
+        letter-spacing: 0.01rem;
+    }
+}
+
+.p-card .p-card-content {
+    display: flex;
+    padding: 0;
+    margin: 0;
+
+    div {
+        display: flex;
+        flex-direction: column;
+        align-self: center;
+    }
+
+    label {
+        color: map.get(lightTheme.$light-theme, 'text-primary');
+        margin: 0 0 0.75rem;
+    }
+
+    span {
+        margin: 0 !important;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        letter-spacing: 0.01rem;
+    }
+}
diff --git a/frontend/src/components/grantaccess/ForestClientCard.vue b/frontend/src/components/grantaccess/ForestClientCard.vue
index 01fd6d77c..181d73152 100644
--- a/frontend/src/components/grantaccess/ForestClientCard.vue
+++ b/frontend/src/components/grantaccess/ForestClientCard.vue
@@ -185,3 +185,6 @@ p * {
     background-color: transparent !important;
 }
 </style>
+<style lang="scss">
+@import '@/assets/styles/card.scss';
+</style>
diff --git a/frontend/src/components/grantaccess/UserIdentityCard.vue b/frontend/src/components/grantaccess/UserIdentityCard.vue
index bc083c0a3..5f6d8c69c 100644
--- a/frontend/src/components/grantaccess/UserIdentityCard.vue
+++ b/frontend/src/components/grantaccess/UserIdentityCard.vue
@@ -26,20 +26,20 @@ const props = defineProps<{
             <p>Verified user information</p>
         </template>
         <template #content>
-            <div class="col-2">
+            <div class="col" style="margin-left: 2rem">
                 <label class="row">Username</label>
                 <span class="row">{{ props.userIdentity.userId }}</span>
             </div>
-            <div class="col-2" v-if="props.userIdentity.found">
+            <div class="col" v-if="props.userIdentity.found">
                 <label class="row">First Name</label>
                 <span class="row">{{ props.userIdentity.firstName }}</span>
             </div>
-            <div class="col-2" v-if="props.userIdentity.found">
+            <div class="col" v-if="props.userIdentity.found">
                 <label class="row">Last Name</label>
                 <span class="row">{{ props.userIdentity.lastName }}</span>
             </div>
             <div
-                class="col d-flex align-items-center"
+                class="col-6 d-flex"
                 v-if="!props.userIdentity.found"
             >
                 <span class="px-0 invalid"> User does not exist </span>
@@ -50,10 +50,10 @@ const props = defineProps<{
 
 <style lang="scss" scoped>
 @import '@/assets/styles/styles.scss';
-
-.col-2 {
-    margin-left: 2rem;
-    margin-right: 2.5rem;
-    flex-grow: 0;
+.col {
+    margin-right: 0.5rem;
 }
 </style>
+<style lang="scss">
+@import '@/assets/styles/card.scss';
+</style>