fix: #897 frontend minor style changes (#914)

bcgov · Sep 26, 2023 · 2a2a291 · 2a2a291
1 parent 5986c57
commit 2a2a291
Show file tree

Hide file tree

Showing 9 changed files with 195 additions and 187 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -13,7 +13,7 @@
         "test-coverage": "vitest run --coverage"
     },
     "dependencies": {
-        "@bcgov-nr/nr-fsa-theme": "^1.2.0",
+        "@bcgov-nr/nr-theme": "^1.3.0",
         "@carbon/icons-vue": "^10.72.1",
         "aws-amplify": "^5.3.6",
         "axios": "0.26.1",
@@ -40,4 +40,4 @@
         "vue-tsc": "^1.0.0",
         "yup": "^1.0.0"
     }
-}
+}
diff --git a/frontend/src/assets/styles/default-theme.scss b/frontend/src/assets/styles/default-theme.scss
@@ -1,9 +1,9 @@
 @use 'sass:map';
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/light-theme.scss' as lightTheme;
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/dark-theme.scss' as darkTheme;
+@use '@bcgov-nr/nr-theme/design-tokens/light-theme.scss' as lightTheme;
+@use '@bcgov-nr/nr-theme/design-tokens/dark-theme.scss' as darkTheme;
 // need to use type family first, and then use stylesheet, so the body type tokens can get the font path correctly
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/type-family.scss';
-@use '@bcgov-nr/nr-fsa-theme/style-sheets/primevue-components-overrides.scss';
+@use '@bcgov-nr/nr-theme/design-tokens/type-family.scss';
+@use '@bcgov-nr/nr-theme/style-sheets/primevue-components-overrides.scss';
 
 // Header
 $header-height: 3rem;

diff --git a/frontend/src/assets/styles/styles.scss b/frontend/src/assets/styles/styles.scss
@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/type-family.scss' as typeFamily;
+@use '@bcgov-nr/nr-theme/design-tokens/type-family.scss' as typeFamily;
 
 // Import all of Bootstrap's CSS
 @import '~bootstrap/scss/bootstrap';
@@ -8,7 +8,7 @@
 
 // Components
 
-@import '@bcgov-nr/nr-fsa-theme/style-sheets/primevue-components-overrides.scss';
+@import '@bcgov-nr/nr-theme/style-sheets/primevue-components-overrides.scss';
 
 :root {
     --font-family: map.get(typeFamily.$type-family, 'sans');

diff --git a/frontend/src/components/Landing.vue b/frontend/src/components/Landing.vue
@@ -20,15 +20,16 @@ import TreeLogs from '@/assets/images/tree-logs.jpg';
                     Grant access to your users
                 </p>
                 <Button
-                    class="landing-button p-button-primary"
+                    class="landing-button"
                     label="Login with IDIR"
                     id="login-idir-button"
                     @click="authService.methods.login()"
                 >
                     <Icon icon="login" :size="IconSize.medium" />
                 </Button>
                 <Button
-                    class="landing-button p-button-outlined"
+                    class="landing-button"
+                    outlined
                     label="Login with BCeID"
                     id="login-bceid-button"
                     disabled
@@ -49,5 +50,5 @@ import TreeLogs from '@/assets/images/tree-logs.jpg';
 </template>
 
 <style scoped lang="scss">
-@import '@bcgov-nr/nr-fsa-theme/style-sheets/landing-page-components-overrides.scss';
+@import '@bcgov-nr/nr-theme/style-sheets/landing-page-components-overrides.scss';
 </style>
diff --git a/frontend/src/components/common/SideNav.vue b/frontend/src/components/common/SideNav.vue
@@ -90,29 +90,29 @@ const props = defineProps({
 
 .sidenav-logo {
     img {
-        margin: 0px 0px 16px 3px;
-        width: 140px;
-        height: 32px;
+        margin: 0px 0px 1rem 0.188rem;
+        width: 8.75rem;
+        height: 2rem;
     }
 }
 
 .sidenav {
     position: fixed;
-    padding: 16px 0px;
-    width: 256px;
-    height: calc(100vh - 50px);
-    left: 0px;
-    top: 48px;
+    padding: 1rem 0rem;
+    width: 16rem;
+    height: calc(100vh - 3.125rem);
+    left: 0rem;
+    top: 3rem;
     overflow-x: hidden;
     overflow-y: auto;
-    box-shadow: inset -1px 0px 0px $light-border-subtle-00;
+    box-shadow: inset -0.063rem 0rem 0rem $light-border-subtle-00;
     .content {
         position: relative;
         min-height: auto;
     }
     .support-section {
         position: absolute;
-        bottom: 0px;
+        bottom: 0rem;
     }
 }
 
@@ -129,7 +129,7 @@ const props = defineProps({
     @extend %helper-text-01;
     color: $light-text-secondary;
     align-items: center;
-    padding: 15px 16px;
+    padding: 0.9375rem 1rem;
     i {
         vertical-align: middle;
     }
@@ -138,9 +138,13 @@ const props = defineProps({
     }
 }
 
+.sidenav li.child {
+    font-size: 0.875rem;
+}
+
 .sidenav li.child:hover {
     background: $light-layer-selected-01;
-    box-shadow: inset 3px 0px 0px $light-border-interactive;
+    box-shadow: inset 0.188rem 0rem 0rem $light-border-interactive;
     color: $light-text-primary;
     cursor: pointer;
 }
@@ -152,7 +156,7 @@ const props = defineProps({
 
 .sidenav-selected {
     background: $light-layer-selected-01;
-    box-shadow: inset 3px 0px 0px $light-border-interactive;
+    box-shadow: inset 0.188rem 0rem 0rem $light-border-interactive;
     color: $light-text-primary !important;
     cursor: pointer;
 }
@@ -161,14 +165,6 @@ const props = defineProps({
 ul#nav li.active a {
     color: $light-text-primary;
     background: $light-layer-selected-01;
-    box-shadow: inset 3px 0px 0px $light-border-interactive;
-}
-
-.sidenav-padding-icon {
-    margin-right: 25px;
-}
-
-.sidenav-color-icon {
-    color: $light-interactive;
+    box-shadow: inset 0.188rem 0rem 0rem $light-border-interactive;
 }
 </style>
diff --git a/frontend/src/components/grantaccess/GrantAccess.vue b/frontend/src/components/grantaccess/GrantAccess.vue
@@ -261,7 +261,8 @@ function roleSelected(evt: any) {
                             "
                         >
                             <Button
-                                class="button p-button-tertiary p-button-outlined"
+                                class="button"
+                                outlined
                                 aria-label="Verify user IDIR"
                                 :name="'verifyIdir'"
                                 :label="'Verify'"
@@ -360,7 +361,8 @@ function roleSelected(evt: any) {
 
                         <div class="col-md-2">
                             <Button
-                                class="button p-button-tertiary p-button-outlined"
+                                class="button"
+                                outlined
                                 aria-label="Verify forest client number"
                                 :name="'verifyFC'"
                                 :label="'Verify'"
@@ -393,7 +395,7 @@ function roleSelected(evt: any) {
                             <Button
                                 type="button"
                                 id="grantAccessSubmit"
-                                class="mb-3 button p-button"
+                                class="mb-3 button"
                                 label="Next"
                                 :disabled="
                                     !(meta.valid && areVerificationsPassed())