diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 9f6ed7caa..b3a61c40a 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@bcgov-nr/nr-theme": "^1.8.9", "@carbon/icons-vue": "^10.99.1", + "@carbon/themes": "^11.43.0", "@carbon/type": "^11.31.0", "@tanstack/vue-query": "^5.56.2", "aws-amplify": "^5.3.21", @@ -18,7 +19,6 @@ "fam-admin-mgmt-api": "file:../client-code-gen/gen/admin-management-api", "fam-app-acsctl-api": "file:../client-code-gen/gen/app-access-control-api", "luxon": "^3.5.0", - "primeflex": "^3.3.1", "primevue": "3.46.0", "vee-validate": "^4.12.6", "vue": "^3.4.23", @@ -7605,13 +7605,24 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, + "node_modules/@carbon/colors": { + "version": "11.28.0", + "resolved": "https://registry.npmjs.org/@carbon/colors/-/colors-11.28.0.tgz", + "integrity": "sha512-zmNJk5Ec453aL3bk9RRSmM+dkVbyVMvUuKd6szJCOWLoqBFBXbd3PDRZO0AZeHp/Iel9sBRf1gUYej1BJ/5+hw==", + "hasInstallScript": true, + "license": "Apache-2.0", + "dependencies": { + "@ibm/telemetry-js": "^1.5.0" + } + }, "node_modules/@carbon/grid": { - "version": "11.27.0", - "resolved": "https://registry.npmjs.org/@carbon/grid/-/grid-11.27.0.tgz", - "integrity": "sha512-UfFFpZCagdQf/PRmCQrmx8OnOBwgNmef0C0XP8tWt07DBCaa4cKI7/GI1hR2RW6EnrlHT1+d2Uk81e3EHnovmw==", + "version": "11.29.0", + "resolved": "https://registry.npmjs.org/@carbon/grid/-/grid-11.29.0.tgz", + "integrity": "sha512-SAJhTexN6TjbItcUczOqhzgHBGXLhvUhlTdyqj+wzUH0tqEN8g6gLp+1sn9+rL+kV4obSb/7bdSESZtwQr/tQg==", "hasInstallScript": true, + "license": "Apache-2.0", "dependencies": { - "@carbon/layout": "^11.26.0", + "@carbon/layout": "^11.28.0", "@ibm/telemetry-js": "^1.5.0" } }, @@ -7637,22 +7648,38 @@ } }, "node_modules/@carbon/layout": { - "version": "11.26.0", - "resolved": "https://registry.npmjs.org/@carbon/layout/-/layout-11.26.0.tgz", - "integrity": "sha512-PYA2c9y9OaVwuxnTo9ez2FQfKZKejIvbpRdCedB4Z61JAfv03e7ZKU55AdKUstdElanL4HS/drEE/H71siPoiw==", + "version": "11.28.0", + "resolved": "https://registry.npmjs.org/@carbon/layout/-/layout-11.28.0.tgz", + "integrity": "sha512-Yl0Dsxs00EgAaCKpZCXgebuf9BwiBK66a1Oiao6D12p3ViciZ4L18mlRgOPBcDlolP2tUtncz48TlfkWC097hQ==", "hasInstallScript": true, + "license": "Apache-2.0", "dependencies": { "@ibm/telemetry-js": "^1.5.0" } }, + "node_modules/@carbon/themes": { + "version": "11.43.0", + "resolved": "https://registry.npmjs.org/@carbon/themes/-/themes-11.43.0.tgz", + "integrity": "sha512-iBDxHVn1y7QYKVCeBqMjLzryDl5mUG2C67KQbJqGqCfYMKI8L+dkw6KmeeWUYv8rhRhqZq27mm+AODchXO0zcw==", + "hasInstallScript": true, + "license": "Apache-2.0", + "dependencies": { + "@carbon/colors": "^11.28.0", + "@carbon/layout": "^11.28.0", + "@carbon/type": "^11.33.0", + "@ibm/telemetry-js": "^1.5.0", + "color": "^4.0.0" + } + }, "node_modules/@carbon/type": { - "version": "11.31.0", - "resolved": "https://registry.npmjs.org/@carbon/type/-/type-11.31.0.tgz", - "integrity": "sha512-ehcLIp8MOUy828hkcU5TZldvJPmXHAu55f9cUa5K9OU2LRjddwdYUIqOr3PlCiPQgXl9M/rvce4hXAHCfdwYeg==", + "version": "11.33.0", + "resolved": "https://registry.npmjs.org/@carbon/type/-/type-11.33.0.tgz", + "integrity": "sha512-v3lfot0vcHNw6WDe32ap3ewpMGwUqhZ6z56sN11jzngRrWVPFgA9U7NciuoylFw301l2htJuZu0dBS2F4ViCXQ==", "hasInstallScript": true, + "license": "Apache-2.0", "dependencies": { - "@carbon/grid": "^11.27.0", - "@carbon/layout": "^11.26.0", + "@carbon/grid": "^11.29.0", + "@carbon/layout": "^11.28.0", "@ibm/telemetry-js": "^1.5.0" } }, @@ -10393,6 +10420,19 @@ "node": ">=6" } }, + "node_modules/color": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", + "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==", + "license": "MIT", + "dependencies": { + "color-convert": "^2.0.1", + "color-string": "^1.9.0" + }, + "engines": { + "node": ">=12.5.0" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -10409,6 +10449,16 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, + "node_modules/color-string": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz", + "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==", + "license": "MIT", + "dependencies": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } + }, "node_modules/colorette": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz", @@ -14045,11 +14095,6 @@ "@types/yargs-parser": "*" } }, - "node_modules/primeflex": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-3.3.1.tgz", - "integrity": "sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ==" - }, "node_modules/primevue": { "version": "3.46.0", "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.46.0.tgz", @@ -14960,6 +15005,21 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==", + "license": "MIT", + "dependencies": { + "is-arrayish": "^0.3.1" + } + }, + "node_modules/simple-swizzle/node_modules/is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==", + "license": "MIT" + }, "node_modules/sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", diff --git a/frontend/package.json b/frontend/package.json index 4b3d6f9fd..a82842bc6 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,6 +18,7 @@ "dependencies": { "@bcgov-nr/nr-theme": "^1.8.9", "@carbon/icons-vue": "^10.99.1", + "@carbon/themes": "^11.43.0", "@carbon/type": "^11.31.0", "@tanstack/vue-query": "^5.56.2", "aws-amplify": "^5.3.21", @@ -26,7 +27,6 @@ "fam-admin-mgmt-api": "file:../client-code-gen/gen/admin-management-api", "fam-app-acsctl-api": "file:../client-code-gen/gen/app-access-control-api", "luxon": "^3.5.0", - "primeflex": "^3.3.1", "primevue": "3.46.0", "vee-validate": "^4.12.6", "vue": "^3.4.23", diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 05600fb76..4bd34b25b 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -25,8 +25,8 @@ const layoutComponent = computed(() => { diff --git a/frontend/src/assets/styles/card.scss b/frontend/src/assets/styles/card.scss index 31af8ab16..ff3eac10d 100644 --- a/frontend/src/assets/styles/card.scss +++ b/frontend/src/assets/styles/card.scss @@ -1,50 +1,34 @@ -@use 'sass:map'; -@use '@bcgov-nr/nr-theme/design-tokens/light-theme.scss' as lightTheme; +@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; +.custom-card-container { + .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; - 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; - } -} + svg { + color: map.get(lightTheme.$light-theme, "support-success"); + margin-bottom: 0.1rem; + } -.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; - } + p { + margin: 0; + padding: 0 0 0 1rem; + 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; + } + } - span { - margin: 0; - font-size: 0.875rem; - line-height: 1.25rem; - letter-spacing: 0.01rem; + .custom-carbon-icon-misuse { + fill: var(--support-error); + } } } diff --git a/frontend/src/assets/styles/default-theme.scss b/frontend/src/assets/styles/default-theme.scss index 0c8170256..3f614839c 100644 --- a/frontend/src/assets/styles/default-theme.scss +++ b/frontend/src/assets/styles/default-theme.scss @@ -1,61 +1,64 @@ -@use 'sass:map'; -@use '@bcgov-nr/nr-theme/design-tokens/light-theme.scss' as lightTheme; -@use '@bcgov-nr/nr-theme/design-tokens/dark-theme.scss' as darkTheme; -@use '@bcgov-nr/nr-theme/design-tokens/light-notifications.scss' as lightNotifications; +@use "sass:map"; +@use "@bcgov-nr/nr-theme/design-tokens/light-theme.scss" as lightTheme; +@use "@bcgov-nr/nr-theme/design-tokens/dark-theme.scss" as darkTheme; + +@use "@bcgov-nr/nr-theme/design-tokens/light-notifications.scss" as + lightNotifications; // 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-theme/design-tokens/type-family.scss'; -@use '@bcgov-nr/nr-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; $header-width: 100vw; // Card -$card-width: 38rem; -$card-margin-top: 2rem; //darkTheme -$dark-text-primary: map.get(darkTheme.$dark-theme, 'text-primary'); -$text-on-color: map.get(darkTheme.$dark-theme, 'text-on-color'); +$dark-text-primary: map.get(darkTheme.$dark-theme, "text-primary"); +$text-on-color: map.get(darkTheme.$dark-theme, "text-on-color"); //lightTheme -$light-layer-selected-01: map.get(lightTheme.$light-theme, 'layer-selected-01'); -$light-layer-hover-01: map.get(lightTheme.$light-theme, 'layer-hover-01'); +$light-layer-selected-01: map.get(lightTheme.$light-theme, "layer-selected-01"); +$light-layer-hover-01: map.get(lightTheme.$light-theme, "layer-hover-01"); $light-layer-selected-hover-01: map.get( lightTheme.$light-theme, - 'layer-selected-hover-01' + "layer-selected-hover-01" ); -$light-link-primary: map.get(lightTheme.$light-theme, 'link-primary'); +$light-link-primary: map.get(lightTheme.$light-theme, "link-primary"); $light-link-primary-hover: map.get( lightTheme.$light-theme, - 'link-primary-hover' + "link-primary-hover" +); +$light-background-inverse: map.get( + lightTheme.$light-theme, + "background-inverse" ); -$light-background-inverse: map.get(lightTheme.$light-theme, 'background-inverse'); //border $light-border-interactive: map.get( lightTheme.$light-theme, - 'border-interactive' + "border-interactive" ); -$light-border-subtle-00: map.get(lightTheme.$light-theme, 'border-subtle-00'); -$light-border-strong-01: map.get(lightTheme.$light-theme, 'border-strong-01'); +$light-border-subtle-00: map.get(lightTheme.$light-theme, "border-subtle-00"); +$light-border-strong-01: map.get(lightTheme.$light-theme, "border-strong-01"); //text -$light-text-primary: map.get(lightTheme.$light-theme, 'text-primary'); -$light-text-secondary: map.get(lightTheme.$light-theme, 'text-secondary'); -$light-text-error: map.get(lightTheme.$light-theme, 'text-error'); +$light-text-primary: map.get(lightTheme.$light-theme, "text-primary"); +$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-interactive: map.get(lightTheme.$light-theme, 'interactive'); +$light-background-brand: map.get(lightTheme.$light-theme, "background-brand"); +$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-one: map.get(lightTheme.$light-theme, "layer-01"); +$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'); +$light-support-error: map.get(lightTheme.$light-theme, "support-error"); +$light-support-success: map.get(lightTheme.$light-theme, "support-success"); //icon -$light-icon-primary: map.get(lightTheme.$light-theme, 'icon-primary'); -$light-icon-on-color: map.get(lightTheme.$light-theme, 'icon-on-color'); +$light-icon-primary: map.get(lightTheme.$light-theme, "icon-primary"); +$light-icon-on-color: map.get(lightTheme.$light-theme, "icon-on-color"); diff --git a/frontend/src/assets/styles/layout.scss b/frontend/src/assets/styles/layout.scss index e42bdd09b..d1ac605a0 100644 --- a/frontend/src/assets/styles/layout.scss +++ b/frontend/src/assets/styles/layout.scss @@ -34,7 +34,7 @@ input::-webkit-inner-spin-button { } /* Firefox */ -input[type='number'] { +input[type="number"] { -moz-appearance: textfield; } @@ -69,15 +69,8 @@ input[type='number'] { .invalid { font-size: 0.875em; color: $light-text-error; -} - -.custom-card { - margin-top: $card-margin-top; - width: 100%; -} - -.data-table-container { - z-index: -1; + display: flex; + align-items: center; } .custom-data-table { @@ -94,34 +87,15 @@ input[type='number'] { } } -@media (max-width: 390px) { - .data-table-container { - margin: 0; - padding: 0; - } -} - @media (min-width: 768px) { .main { padding: 2.5rem 2.5rem 0 2.5rem; width: 100vw; } + .form-container { width: 38rem; } - - .custom-card { - width: $card-width; - } - - .data-table-container { - margin: 0; - padding: 0; - } - - .no-app-selected { - margin: 0 14rem; - } } @media (min-width: 1024px) { @@ -134,22 +108,3 @@ input[type='number'] { width: calc(100vw - 16rem); } } - -@media (min-width: 1280px) { - .no-app-selected { - margin: 0 25rem; - } -} - -@media (min-width: 1536px) { - .no-app-selected { - margin: 0 33rem; - } -} - -@media (min-width: 1920px) { - .no-app-selected { - margin: 0 43.3rem; - width: auto; - } -} diff --git a/frontend/src/assets/styles/styles.scss b/frontend/src/assets/styles/styles.scss index 8ceb02e2a..5e6332052 100644 --- a/frontend/src/assets/styles/styles.scss +++ b/frontend/src/assets/styles/styles.scss @@ -1,14 +1,12 @@ @use "sass:map"; @use "@bcgov-nr/nr-theme/design-tokens/type-family.scss" as typeFamily; +@use "@carbon/type" as type; // Import all of Bootstrap's CSS @import "~bootstrap/scss/bootstrap"; @import "base"; -// Components -@import "@bcgov-nr/nr-theme/style-sheets/primevue-components-overrides.scss"; - :root { --font-family: map.get(typeFamily.$type-family, "sans"); --primevue-striped-row-color: rgba(0, 0, 0, 0.05); @@ -19,10 +17,6 @@ body { } /* ----------------- form input styles --------------------------- */ -.form-field { - margin-bottom: 1.5rem; -} - .input-with-verify-button { padding: 0; width: 100%; @@ -31,7 +25,7 @@ body { } .custom-height { - max-height: 2.813rem; + max-height: 2.5rem; } .button-stack { @@ -48,6 +42,10 @@ body { } } +p { + margin: 0; +} + // when screen width < 390px @media (max-width: 390px) { .input-with-verify-button { @@ -72,3 +70,33 @@ body { max-width: 40rem; } } + +.fam-table { + p { + margin: 0; + } + + background: var(--layer-02, #fff); + + border-radius: 0 0.25rem 0.25rem 0.25rem; + border: 0.0625rem solid var(--border-subtle-00); + + .p-datatable-thead { + .p-column-title { + padding: 1rem 1rem 1rem 0; + color: var(--text-primary); + } + svg { + margin: 0; + } + } + + .p-datatable-tbody { + @include type.type-style("body-01"); + color: var(--text-primary); + } +} + +.error-icon { + fill: var(--support-error); +} diff --git a/frontend/src/assets/styles/themes.scss b/frontend/src/assets/styles/themes.scss new file mode 100644 index 000000000..4c5ad8329 --- /dev/null +++ b/frontend/src/assets/styles/themes.scss @@ -0,0 +1,17 @@ +@use "sass:map"; +@use "@bcgov-nr/nr-theme/design-tokens/light-theme.scss" as light; +@use "@bcgov-nr/nr-theme/design-tokens/dark-theme.scss" as dark; + +@use "@carbon/themes/scss/themes"; +@use "@carbon/themes/scss/theme" with ( + $theme: light.$light-theme, + $fallback: themes.$white +); + +@forward "@carbon/themes/scss/theme"; + +:root { + @each $key, $value in light.$light-theme { + --#{$key}: #{$value}; + } +} diff --git a/frontend/src/components/AddPermissions/ForestClientCard.vue b/frontend/src/components/AddPermissions/ForestClientCard.vue new file mode 100644 index 000000000..b31b6b1ec --- /dev/null +++ b/frontend/src/components/AddPermissions/ForestClientCard.vue @@ -0,0 +1,174 @@ + + + + diff --git a/frontend/src/components/AddPermissions/ForestClientSection.vue b/frontend/src/components/AddPermissions/ForestClientSection.vue new file mode 100644 index 000000000..9941b9ccc --- /dev/null +++ b/frontend/src/components/AddPermissions/ForestClientSection.vue @@ -0,0 +1,400 @@ + + + + + diff --git a/frontend/src/components/AddPermissions/RoleSelectTable.vue b/frontend/src/components/AddPermissions/RoleSelectTable.vue new file mode 100644 index 000000000..f276ba612 --- /dev/null +++ b/frontend/src/components/AddPermissions/RoleSelectTable.vue @@ -0,0 +1,90 @@ + + + + diff --git a/frontend/src/components/grantaccess/form/UserDomainSelect.vue b/frontend/src/components/AddPermissions/UserDomainSelect.vue similarity index 64% rename from frontend/src/components/grantaccess/form/UserDomainSelect.vue rename to frontend/src/components/AddPermissions/UserDomainSelect.vue index 1f7aba581..a860dbdb1 100644 --- a/frontend/src/components/grantaccess/form/UserDomainSelect.vue +++ b/frontend/src/components/AddPermissions/UserDomainSelect.vue @@ -1,22 +1,26 @@ @@ -29,7 +33,7 @@ const computedDomain = computed({ v-model="computedDomain" inputId="idirSelect" name="domainRadioOptions" - :value="domainOptions.IDIR" + :value="UserType.I" /> @@ -38,7 +42,7 @@ const computedDomain = computed({ v-model="computedDomain" inputId="businessBceidSelect" name="domainRadioOptions" - :value="domainOptions.BCEID" + :value="UserType.B" />