From 0cdee1cddbcc7dd827bdf58941fdf9d25c254b8b Mon Sep 17 00:00:00 2001 From: Simen Fivelstad Smaaberg <66635118+simensma-fresh@users.noreply.github.com> Date: Thu, 24 Oct 2024 15:46:02 -0700 Subject: [PATCH] [MDS-6103] Upgraded build related npm packages + upgraded codebase to support newest sass version (#3278) * MDS-6103 Fixed scss build warnings. Upgraded build webpack configs * MDS-6103 Fixed syncfusion imports * Updated webpack scss config for minespace * MDS-6103 Fixed minespace web scss upgrade * MDS-6103 Fixed minespace scss warnings + webpack import warning * Removed unused packages * Removed husky warning * Updated package versions * Fixed tests after upgrades * MDS-6103 Reverted permit changes * Removed unused code * MDS-6103 Cleanup * Updated ts-node version * MDS-6103 Fix cypress video uploading * MDS-6103 Updated timeAgo func * Fixed spec * Updated helper.ts * Updated helper * Update * Fixed cypress tests * Updated cypress tests * Updated cypress test * Click on first doc --- .husky/pre-commit | 1 - .husky/pre-push | 1 - docs/feature_flags.md | 8 +- package.json | 33 +- services/common/jest.config.js | 2 +- services/common/package.json | 31 +- .../projectSummary/ProjectManagement.spec.tsx | 6 +- services/common/src/redux/utils/helpers.ts | 28 +- services/core-web/common/utils/helpers.ts | 18 +- services/core-web/cypress.config.ts | 2 +- .../core-web/cypress/e2e/majorprojects.cy.ts | 37 +- services/core-web/jest.config.js | 2 +- services/core-web/package.json | 88 +- .../mine/Permit/PermitConditions.tsx | 10 +- services/core-web/src/styles/base.scss | 17 + .../src/styles/components/Button.scss | 4 + .../src/styles/components/Comments.scss | 25 +- .../src/styles/components/CorePageHeader.scss | 2 + .../styles/components/CustomDashboard.scss | 6 +- .../src/styles/components/Dashboard.scss | 4 +- .../DocumentTableWithExpandedRows.scss | 2 + .../core-web/src/styles/components/Forms.scss | 2 + .../src/styles/components/HomePage.scss | 2 + .../src/styles/components/Loading.scss | 2 + .../src/styles/components/Logout.scss | 5 +- .../core-web/src/styles/components/Maps.scss | 3 +- .../core-web/src/styles/components/Menu.scss | 52 +- .../src/styles/components/MergeContacts.scss | 4 +- .../src/styles/components/MineCompliance.scss | 7 +- .../src/styles/components/MineDashboard.scss | 13 +- .../components/MineExplosivesPermitTable.scss | 2 + .../core-web/src/styles/components/Modal.scss | 3 + .../src/styles/components/NavBar.scss | 2 + .../styles/components/NoticeOfDeparture.scss | 2 + .../src/styles/components/NoticeOfWork.scss | 3 + .../styles/components/NotificationDrawer.scss | 39 +- .../src/styles/components/NullScreen.scss | 6 +- .../styles/components/PermitConditions.scss | 2 + .../ProjectSubmissionStatusPage.scss | 2 + .../src/styles/components/Reports.scss | 2 + .../components/ScrollSideMenuWrapper.scss | 2 + .../src/styles/components/SearchBar.scss | 5 +- .../src/styles/components/SteppedForm.scss | 2 + .../src/styles/components/Tables.scss | 10 +- .../core-web/src/styles/components/Tag.scss | 10 +- .../core-web/src/styles/components/Tags.scss | 2 + .../src/styles/components/ViewPermit.scss | 2 + .../src/styles/elements/elements.scss | 4 + .../core-web/src/styles/generic/helpers.scss | 34 +- .../core-web/src/styles/generic/layout.scss | 221 +- services/core-web/src/styles/index.scss | 109 +- .../styles/settings/filepond-overrides.scss | 7 +- .../core-web/src/styles/settings/theme.scss | 21 +- .../src/styles/settings/themeOverride.scss | 87 +- .../src/styles/settings/variables.scss | 13 +- .../core-web/src/styles/tools/syncfusion.scss | 11 +- .../src/styles/tools/syncfusion_imports.scss | 32 +- .../__snapshots__/MineRecordForm.spec.js.snap | 8 +- .../AddFullPartyForm.spec.js.snap | 4 +- .../AddVarianceForm.spec.js.snap | 4 +- .../__snapshots__/FilePicker.spec.js.snap | 4 +- .../RenderRadioButtons.spec.js.snap | 2 +- .../__snapshots__/ModalWrapper.spec.tsx.snap | 2 - services/core-web/webpack.config.ts | 4 +- services/core-web/webpack.parts.js | 7 +- .../minespace-web/common/utils/helpers.ts | 18 +- services/minespace-web/cypress.config.ts | 2 +- services/minespace-web/package.json | 88 +- services/minespace-web/src/styles/base.scss | 16 + .../src/styles/components/ContactCard.scss | 4 +- .../DocumentTableWithExpandedRows.scss | 2 + .../src/styles/components/Footer.scss | 6 +- .../src/styles/components/Forms.scss | 2 + .../src/styles/components/Header.scss | 40 +- .../src/styles/components/Loading.scss | 2 + .../components/MajorMineApplication.scss | 2 + .../styles/components/NoticeOfDeparture.scss | 2 + .../src/styles/components/Overview.scss | 2 + .../src/styles/components/Reports.scss | 2 + .../components/ScrollSideMenuWrapper.scss | 2 + .../src/styles/components/SideNavigation.scss | 2 + .../src/styles/components/SteppedForm.scss | 2 + .../styles/components/TableSummaryCard.scss | 4 +- .../src/styles/components/Tables.scss | 2 + .../src/styles/elements/elements.scss | 18 +- .../src/styles/generic/helpers.scss | 78 +- .../src/styles/generic/layout.scss | 19 +- services/minespace-web/src/styles/index.scss | 66 +- .../src/styles/overrides/antd-overrides.scss | 4 + .../styles/overrides/filepond-overrides.scss | 3 + .../src/styles/settings/theme.scss | 149 +- .../src/styles/settings/variables.scss | 20 +- .../src/styles/tools/mixins.scss | 13 +- .../src/styles/tools/syncfusion.scss | 4 +- .../src/styles/tools/syncfusion_imports.scss | 32 +- .../__snapshots__/ModalWrapper.spec.tsx.snap | 2 - services/minespace-web/webpack.config.ts | 11 +- services/minespace-web/webpack.parts.js | 7 - .../filter_conditions_paragraphs.py | 2 +- yarn.lock | 7196 +++++++++-------- 100 files changed, 4723 insertions(+), 4188 deletions(-) create mode 100644 services/core-web/src/styles/base.scss create mode 100644 services/minespace-web/src/styles/base.scss diff --git a/.husky/pre-commit b/.husky/pre-commit index eb36219e7e..dc52f0135d 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,5 +1,4 @@ #!/usr/bin/env sh -. "$(dirname -- "$0")/_/husky.sh" echo "linting staged files" yarn lint-staged diff --git a/.husky/pre-push b/.husky/pre-push index f46e4c7287..9e2a842224 100755 --- a/.husky/pre-push +++ b/.husky/pre-push @@ -1,5 +1,4 @@ #!/usr/bin/env sh -. "$(dirname -- "$0")/_/husky.sh" #echo "pre-push lint" yarn lint-prepush diff --git a/docs/feature_flags.md b/docs/feature_flags.md index 3db8a9555f..6abdd46bf1 100644 --- a/docs/feature_flags.md +++ b/docs/feature_flags.md @@ -28,7 +28,7 @@ Preferred method if using feature flag in a functional React component. ```typescript import { useFeatureFlag } from "@mds/common/providers/featureFlags/useFeatureFlag"; -import { Feature } from "@mds/common"; +import { Feature } from "@mds/common/utils/featureFlag";; const ThisIsAReactComponent = () => { const { isFeatureEnabled } = useFeatureFlag(); @@ -45,7 +45,7 @@ Alternative method if using feature flag in a React component and you cannot use ```typescript import withFeatureFlag from "@mds/common/providers/featureFlags/withFeatureFlag"; -import { Feature } from "@mds/common"; +import { Feature } from "@mds/common/utils/featureFlag";; class ThisIsAReactComponent { render() { @@ -66,7 +66,7 @@ You can use the `FeatureFlagGuard` and pass along the feature you want to check If it's not enabled, you get a nice little "you don't have access" notice. ```typescript -import { Feature } from "@mds/common"; +import { Feature } from "@mds/common/utils/featureFlag"; import FeatureFlagGuard from "@/components/common/featureFlag.guard"; const DamsPage: React.FC = (props) => { @@ -96,7 +96,7 @@ Please use the other methods above as far as you can. ```typescript import { isFeatureEnabled } from @mds/common; -import { Feature } from "@mds/common"; +import { Feature } from "@mds/common/utils/featureFlag";; console.log(isFeatureEnabled(Feature.TSF_V2)); diff --git a/package.json b/package.json index 72466175cb..5328375897 100644 --- a/package.json +++ b/package.json @@ -14,26 +14,27 @@ ] }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "^5.59.1", - "@typescript-eslint/parser": "^5.59.1", - "eslint": "7.27.0", - "eslint-config-airbnb": "18.2.1", - "eslint-config-airbnb-typescript": "^17.0.0", - "eslint-config-prettier": "6.9.0", + "@typescript-eslint/eslint-plugin": "^8.10.0", + "@typescript-eslint/parser": "^8.10.0", + "eslint": "7.32.0", + "eslint-config-airbnb": "19.0.4", + "eslint-config-airbnb-typescript": "^18.0.0", + "eslint-config-prettier": "9.1.0", "eslint-import-resolver-alias": "1.1.2", - "eslint-plugin-import": "2.26.0", - "eslint-plugin-jest": "27.1.6", - "eslint-plugin-jsx-a11y": "6.2.3", - "eslint-plugin-react": "7.18.0", - "husky": "8.0.2", - "lint-prepush": "2.2.1", - "lint-staged": "10.0.0", - "prettier": "1.19.1" + "eslint-plugin-import": "2.31.0", + "eslint-plugin-jest": "28.8.3", + "eslint-plugin-jsx-a11y": "6.10.1", + "eslint-plugin-react": "7.37.1", + "husky": "9.1.6", + "lint-prepush": "3.0.2", + "lint-staged": "15.2.10", + "prettier": "3.3.3" }, "resolutions": { "@types/react": "16.9.49", "@types/react-dom": "16.9.8", - "@types/react-router-dom": "5.3.3" + "@types/react-router-dom": "5.3.3", + "cheerio": "1.0.0-rc.3" }, "scripts": { "postinstall": "husky install" @@ -54,7 +55,7 @@ }, "dependencies": { "dompurify": "^3.1.7", - "html-react-parser": "^5.1.17", + "html-react-parser": "^5.1.18", "react-quill": "^2.0.0" } } diff --git a/services/common/jest.config.js b/services/common/jest.config.js index f99beb220f..7e519b840b 100644 --- a/services/common/jest.config.js +++ b/services/common/jest.config.js @@ -3,7 +3,7 @@ module.exports = { "^.+\\.(t|j)sx?$": [ "ts-jest", { - tsConfigFile: "./tsconfig.json", + tsconfig: "./tsconfig.json", isolatedModules: true, }, ], diff --git a/services/common/package.json b/services/common/package.json index a46ceea815..f3b32f7b16 100644 --- a/services/common/package.json +++ b/services/common/package.json @@ -47,36 +47,35 @@ "devDependencies": { "@testing-library/jest-dom": "6.4.8", "clean-webpack-plugin": "4.0.0", - "copy-webpack-plugin": "10.1.0", + "copy-webpack-plugin": "12.0.2", "hard-source-webpack-plugin": "0.13.1", - "html-webpack-plugin": "5.5.3", - "image-minimizer-webpack-plugin": "3.8.3", - "imagemin": "8.0.1", + "html-webpack-plugin": "5.6.2", + "image-minimizer-webpack-plugin": "4.1.0", + "imagemin": "9.0.0", "jest": "29.7.0", - "jest-dom": "4.0.0", - "mini-css-extract-plugin": "2.7.6", + "mini-css-extract-plugin": "2.9.1", "msw": "2.3.5", - "postcss-loader": "7.3.3", - "prettier": "1.19.1", + "postcss": "8.4.47", + "postcss-loader": "8.1.1", + "prettier": "3.3.3", "react-hot-loader": "4.12.21", "sharp": "^0.33.3", - "style-loader": "3.3.3", - "terser-webpack-plugin": "5.3.9", - "ts-jest": "29.1.2", + "style-loader": "4.0.0", + "ts-jest": "29.2.5", "typescript": "4.7.4", "undici": "6.19.7", - "webpack": "5.88.1", + "webpack": "5.95.0", "webpack-cli": "5.1.4", - "webpack-dev-server": "4.15.1", + "webpack-dev-server": "5.1.0", "webpack-manifest-plugin": "5.0.0", - "webpack-merge": "5.9.0", + "webpack-merge": "6.0.1", "webpack-node-externals": "3.0.0" }, "optionalDependencies": { - "jest-canvas-mock": "2.1.0", + "jest-canvas-mock": "2.5.2", "jest-environment-jsdom": "29.7.0", "jest-environment-jsdom-global": "4.0.0", - "jest-junit": "6.4.0", + "jest-junit": "16.0.0", "jest-sonar-reporter": "2.0.0" }, "jestSonar": { diff --git a/services/common/src/components/projectSummary/ProjectManagement.spec.tsx b/services/common/src/components/projectSummary/ProjectManagement.spec.tsx index 3568d56e52..77255fc7d2 100644 --- a/services/common/src/components/projectSummary/ProjectManagement.spec.tsx +++ b/services/common/src/components/projectSummary/ProjectManagement.spec.tsx @@ -24,8 +24,8 @@ const initialState = { projectSummaryMinistryComments: MOCK.PROJECT_SUMMARY_MINISTRY_COMMENTS.map((comment) => { return { ...comment, - update_timestamp: subDays(new Date(), 10).toISOString(), - create_timestamp: subDays(new Date(), 10).toISOString(), + update_timestamp: subDays(new Date(), 10).toUTCString(), + create_timestamp: subDays(new Date(), 10).toUTCString(), }; }), }, @@ -46,7 +46,7 @@ describe("Project Management", () => { {}} + onSubmit={() => { }} > diff --git a/services/common/src/redux/utils/helpers.ts b/services/common/src/redux/utils/helpers.ts index 80a06b4c24..3256cdfadf 100644 --- a/services/common/src/redux/utils/helpers.ts +++ b/services/common/src/redux/utils/helpers.ts @@ -109,16 +109,15 @@ export const formatDateTimeUserTz = (dateTime: Date | string): string => { export const timeAgo = (dateTime, unit = "day") => { const startDate = dateTime; - const endDate = new Date().toUTCString(); - + const endDate = moment(); if (unit === "day") { - return moment(endDate).diff(moment(startDate), "days"); + return endDate.diff(moment(startDate), "days"); } else if (unit === "hours") { - return moment(endDate).diff(moment(startDate), "hours"); + return endDate.diff(moment(startDate), "hours"); } else if (unit === "minutes") { - return moment(endDate).diff(moment(startDate), "minutes"); + return endDate.diff(moment(startDate), "minutes"); } else { - return moment(endDate).diff(moment(startDate), "seconds"); + return endDate.diff(moment(startDate), "seconds"); } }; @@ -653,7 +652,7 @@ export const getHighestConsequence = (tsf) => { const highestRankedDam = tsf.dams.reduce((prev, current) => CONSEQUENCE_CLASSIFICATION_RANK_HASH[prev.consequence_classification] > - CONSEQUENCE_CLASSIFICATION_RANK_HASH[current.consequence_classification] + CONSEQUENCE_CLASSIFICATION_RANK_HASH[current.consequence_classification] ? prev : current ); @@ -670,20 +669,17 @@ export const getMineReportStatusDescription = ( const update_timestamp = latestSubmission?.update_timestamp; const updatedDate = moment(update_timestamp).format("YYYY-MM-DD"); const MINE_REPORT_STATUS_DESCRIPTION_HASH = { - [MINE_REPORT_SUBMISSION_CODES.NON]: `The ministry has requested for the report from the proponent through MineSpace. Requested by ${ - latestSubmission?.update_user - } on ${formatDate(updatedDate)}`, + [MINE_REPORT_SUBMISSION_CODES.NON]: `The ministry has requested for the report from the proponent through MineSpace. Requested by ${latestSubmission?.update_user + } on ${formatDate(updatedDate)}`, [MINE_REPORT_SUBMISSION_CODES.ACC]: "The Ministry has reviewed the report, no more revision is required", [MINE_REPORT_SUBMISSION_CODES.REC]: "Ministry has received changes after requesting for more information. The revised information has not been reviewed.", - [MINE_REPORT_SUBMISSION_CODES.REQ]: `Requesting more information from the proponent through MineSpace. Requested by ${ - latestSubmission?.update_user - } on ${formatDate(updatedDate)}`, + [MINE_REPORT_SUBMISSION_CODES.REQ]: `Requesting more information from the proponent through MineSpace. Requested by ${latestSubmission?.update_user + } on ${formatDate(updatedDate)}`, [MINE_REPORT_SUBMISSION_CODES.INI]: "The report has been submitted successfully", - [MINE_REPORT_SUBMISSION_CODES.WTD]: `The report has been withdrawn. Withdrew by ${ - latestSubmission?.update_user - } on ${formatDate(updatedDate)}`, + [MINE_REPORT_SUBMISSION_CODES.WTD]: `The report has been withdrawn. Withdrew by ${latestSubmission?.update_user + } on ${formatDate(updatedDate)}`, [MINE_REPORT_SUBMISSION_CODES.NRQ]: "This report is not requested", }; return MINE_REPORT_STATUS_DESCRIPTION_HASH[statusCode] || ""; diff --git a/services/core-web/common/utils/helpers.ts b/services/core-web/common/utils/helpers.ts index 4c518b84d2..c5363217c9 100644 --- a/services/core-web/common/utils/helpers.ts +++ b/services/core-web/common/utils/helpers.ts @@ -10,8 +10,9 @@ import moment from "moment-timezone"; import { reset } from "redux-form"; import { ItemMap } from "@mds/common"; + /** - * Helper function to clear redux form after submission + * Helper function to clear redux form after submissions * * Usage: * export default (reduxForm({ @@ -94,19 +95,20 @@ export const formatDateTimeUserTz = (dateTime: Date | string): string => { export const timeAgo = (dateTime, unit = "day") => { const startDate = dateTime; - const endDate = new Date().toUTCString(); - + const endDate = moment(); if (unit === "day") { - return moment(endDate).diff(moment(startDate), "days"); + return endDate.diff(moment(startDate), "days"); } else if (unit === "hours") { - return moment(endDate).diff(moment(startDate), "hours"); + return endDate.diff(moment(startDate), "hours"); } else if (unit === "minutes") { - return moment(endDate).diff(moment(startDate), "minutes"); + return endDate.diff(moment(startDate), "minutes"); } else { - return moment(endDate).diff(moment(startDate), "seconds"); + return endDate.diff(moment(startDate), "seconds"); } }; + + export const formatPostalCode = (code) => code && code.replace(/.{3}$/, " $&"); export const formatTitleString = (input) => @@ -591,7 +593,7 @@ export const getHighestConsequence = (tsf) => { const highestRankedDam = tsf.dams.reduce((prev, current) => CONSEQUENCE_CLASSIFICATION_RANK_HASH[prev.consequence_classification] > - CONSEQUENCE_CLASSIFICATION_RANK_HASH[current.consequence_classification] + CONSEQUENCE_CLASSIFICATION_RANK_HASH[current.consequence_classification] ? prev : current ); diff --git a/services/core-web/cypress.config.ts b/services/core-web/cypress.config.ts index ee795f7ef9..5b16ff9ed1 100644 --- a/services/core-web/cypress.config.ts +++ b/services/core-web/cypress.config.ts @@ -4,7 +4,7 @@ export default defineConfig({ chromeWebSecurity: false, viewportWidth: 1960, viewportHeight: 1080, - videoUploadOnPasses: false, + video: true, supportFolder: "cypress/support", defaultCommandTimeout: 15000, e2e: { diff --git a/services/core-web/cypress/e2e/majorprojects.cy.ts b/services/core-web/cypress/e2e/majorprojects.cy.ts index 55beab3c03..3efab17fc1 100644 --- a/services/core-web/cypress/e2e/majorprojects.cy.ts +++ b/services/core-web/cypress/e2e/majorprojects.cy.ts @@ -90,28 +90,37 @@ describe("Major Projects", () => { }); }); - // Intercept the GET request and stub the response - cy.intercept("GET", "**/documents**", (req) => { - // Set the desired response properties - req.reply({ - statusCode: 301, - body: "Mocked response data", - }); - }).as("downloadRequest"); + cy.wait(2500); cy.get("[data-cy=menu-actions-button]") - .last() + .first() .click({ force: true }); + + cy.intercept( + "GET", + /.*download-token\/.*$/, + { + statusCode: 200, + body: { + token_guid: "ec851412-9c91-48cd-8917-dd58f0934b16" + }, + } + ).as('dlReq'); + + cy.window().then((win) => { + cy.stub(win, 'open').as('windowOpen'); + }); + + // Click the Download file button in the dropdown cy.contains("button", "Download file", { timeout: 3000 }) .find("div") .click({ force: true }); - // Wait for the network request to complete - cy.wait("@downloadRequest").then((interception) => { - // Check that the download request was made successfully - expect(interception.response.statusCode).to.equal(301); - }); + cy.wait('@dlReq'); + + cy.get('@windowOpen').should('have.been.calledWith', `${Cypress.env("CYPRESS_DOC_MAN_URL")}/documents?token=ec851412-9c91-48cd-8917-dd58f0934b16`, '_blank') + }); }); diff --git a/services/core-web/jest.config.js b/services/core-web/jest.config.js index c824be9799..6a94846269 100644 --- a/services/core-web/jest.config.js +++ b/services/core-web/jest.config.js @@ -3,7 +3,7 @@ module.exports = { "^.+\\.(t|j)sx?$": [ "ts-jest", { - tsConfigFile: "./tsconfig.json", + tsconfig: "./tsconfig.json", isolatedModules: true, }, ], diff --git a/services/core-web/package.json b/services/core-web/package.json index d4c4b9bc71..17757000f9 100644 --- a/services/core-web/package.json +++ b/services/core-web/package.json @@ -23,11 +23,11 @@ "array-move": "3.0.1", "axios": "1.7.2", "axios-mock-adapter": "1.17.0", - "core-js": "3.6.4", + "core-js": "3.38.1", "date-fns": "2.28.0", - "dotenv": "8.2.0", + "dotenv": "16.4.5", "enzyme": "3.11.0", - "enzyme-adapter-react-16": "1.14.0", + "enzyme-adapter-react-16": "1.15.8", "filepond": "4.30.4", "filepond-plugin-file-encode": "2.1.10", "filepond-plugin-file-validate-size": "2.2.8", @@ -36,9 +36,8 @@ "filepond-plugin-image-exif-orientation": "1.0.11", "filepond-plugin-image-preview": "4.6.11", "filepond-polyfill": "1.0.4", - "hoist-non-react-statics": "3.3.1", - "jest-dom": "4.0.0", - "jest-localstorage-mock": "2.4.0", + "hoist-non-react-statics": "3.3.2", + "jest-localstorage-mock": "2.4.26", "keycloak-js": "20.0.1", "leaflet": "1.5.1", "leaflet.markercluster": "1.4.1", @@ -63,7 +62,6 @@ "react-router-dom": "5.3.3", "react-scroll": "1.7.12", "react-sortable-hoc": "2.0.0", - "reactour": "1.18.0", "redux": "5.0.0", "redux-form": "8.2.6", "redux-form-input-masks": "2.0.1", @@ -71,10 +69,9 @@ "redux-thunk": "3.1.0", "regenerator-runtime": "0.13.3", "reselect": "5.0.1", - "sass": "1.63.6", - "sass-loader": "13.3.2", + "sass": "1.80.3", + "sass-loader": "16.0.2", "string-similarity": "3.0.0", - "styled-components": "5.2.0", "test-reducer-package": "1.0.14", "ts-loader": "9.5.1", "tus-js-client": "3.1.0", @@ -88,65 +85,64 @@ "@types/react-router-dom": "5.3.3", "@types/redux": "^3.6.0", "@types/redux-form": "8.2.6", - "@types/styled-components": "5.1.26", "acorn": "6.4.1", - "autoprefixer": "10.4.14", + "autoprefixer": "10.4.20", "clean-webpack-plugin": "4.0.0", - "copy-webpack-plugin": "10.1.0", - "cross-env": "5.2.1", - "css-loader": "6.8.1", + "copy-webpack-plugin": "12.0.2", + "cross-env": "7.0.3", + "css-loader": "7.1.2", "css-minimizer-webpack-plugin": "5.0.1", - "cssnano": "6.0.1", - "cypress": "12.17.4", + "cssnano": "7.0.6", + "cypress": "13.15.0", "cypress-file-upload": "^5.0.8", - "enzyme-to-json": "3.3.5", - "esbuild-loader": "4.1.0", - "eslint": "6.8.0", - "eslint-config-airbnb": "17.1.1", - "eslint-config-prettier": "6.9.0", + "enzyme-to-json": "3.6.2", + "esbuild-loader": "4.2.2", + "eslint": "9.13.0", + "eslint-config-airbnb": "19.0.4", + "eslint-config-prettier": "9.1.0", "eslint-import-resolver-alias": "1.1.2", - "eslint-plugin-import": "2.20.0", - "eslint-plugin-jest": "22.21.0", - "eslint-plugin-jsx-a11y": "6.2.3", - "eslint-plugin-react": "7.18.0", - "file-loader": "4.3.0", - "fork-ts-checker-webpack-plugin": "6", - "fsevents": "^2.3.2", + "eslint-plugin-import": "2.31.0", + "eslint-plugin-jest": "28.8.3", + "eslint-plugin-jsx-a11y": "6.10.1", + "eslint-plugin-react": "7.37.1", + "file-loader": "6.2.0", + "fork-ts-checker-webpack-plugin": "9.0.2", + "fsevents": "^2.3.3", "hard-source-webpack-plugin": "0.13.1", - "html-webpack-plugin": "5.5.3", + "html-webpack-plugin": "5.6.2", "http-server-spa": "1.3.0", "image-webpack-loader": "8.1.0", "jest": "29.7.0", - "less": "4.1.3", - "less-loader": "11.1.3", - "mini-css-extract-plugin": "2.7.6", + "less": "4.2.0", + "less-loader": "12.2.0", + "mini-css-extract-plugin": "2.9.1", "moment-timezone-data-webpack-plugin": "1.5.1", "msw": "2.3.5", - "postcss-loader": "7.3.3", - "prettier": "1.19.1", + "postcss": "8.4.47", + "postcss-loader": "8.1.1", + "prettier": "3.3.3", "react-hot-loader": "4.12.21", "speed-measure-webpack-plugin": "^1.5.0", - "style-loader": "3.3.3", - "terser-webpack-plugin": "5.3.9", - "thread-loader": "4.0.2", - "ts-jest": "29.1.2", + "style-loader": "4.0.0", + "thread-loader": "4.0.4", + "ts-jest": "29.2.5", "ts-node": "^10.9.1", "tsconfig-paths-webpack-plugin": "^4.1.0", "typescript": "4.7.4", "undici": "^6.19.7", - "url-loader": "2.3.0", - "webpack": "5.88.1", - "webpack-bundle-analyzer": "^4.10.1", + "url-loader": "4.1.1", + "webpack": "5.95.0", + "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "5.1.4", - "webpack-dev-server": "4.15.1", + "webpack-dev-server": "5.1.0", "webpack-manifest-plugin": "5.0.0", - "webpack-merge": "5.9.0" + "webpack-merge": "6.0.1" }, "optionalDependencies": { - "jest-canvas-mock": "2.1.0", + "jest-canvas-mock": "2.5.2", "jest-environment-jsdom": "29.7.0", "jest-environment-jsdom-global": "4.0.0", - "jest-junit": "6.4.0", + "jest-junit": "16.0.0", "jest-sonar-reporter": "2.0.0" }, "scripts": { diff --git a/services/core-web/src/components/mine/Permit/PermitConditions.tsx b/services/core-web/src/components/mine/Permit/PermitConditions.tsx index d83a8c3e84..17e92a0e00 100644 --- a/services/core-web/src/components/mine/Permit/PermitConditions.tsx +++ b/services/core-web/src/components/mine/Permit/PermitConditions.tsx @@ -68,11 +68,11 @@ const PermitConditions: FC = ({ const title = cat.description.replace("Conditions", "").trim(); return conditions.length > 0 ? { - href: cat.condition_category_code.toLowerCase(), - title, - conditions, - condition_category_code: cat.condition_category_code, - } + href: cat.condition_category_code.toLowerCase(), + title, + conditions, + condition_category_code: cat.condition_category_code, + } : false; }) .filter(Boolean); diff --git a/services/core-web/src/styles/base.scss b/services/core-web/src/styles/base.scss new file mode 100644 index 0000000000..3adec53cfa --- /dev/null +++ b/services/core-web/src/styles/base.scss @@ -0,0 +1,17 @@ +// SETTINGS - Used with pre-processors. Global settings that contain font, colors definitions, etc. +@forward "./settings/variables.scss"; +@forward "./settings/theme.scss"; +@forward "./settings/themeOverride.scss"; +@forward "./settings/filepond-overrides.scss"; + +// TOOLS - globally used mixins and functions. (ie gradient mixins, font-sizing mixins) +@forward "./tools/mixins.scss"; +@forward "./tools/syncfusion.scss"; + +// GENERIC - Very high level, far-reaching styles. Contains Normalize.css, Box-sizing rules, CSS resets etc. +@forward "./generic/Normalize.scss"; +@forward "./generic/layout.scss"; +@forward "./generic/helpers.scss"; + +// ELEMENTS - Bare, un-classed HTML elements (like H1, A, etc.). This layer is rarely touched after initial setup. +@forward "./elements/elements.scss"; \ No newline at end of file diff --git a/services/core-web/src/styles/components/Button.scss b/services/core-web/src/styles/components/Button.scss index fc5ed4cadd..85c6cfd02d 100644 --- a/services/core-web/src/styles/components/Button.scss +++ b/services/core-web/src/styles/components/Button.scss @@ -1,3 +1,7 @@ +@use "../settings/theme.scss" as *; +@use "../settings/variables.scss" as *; +@use "../tools/mixins.scss" as *; + // BUTTON .ant-btn, .core-btn, diff --git a/services/core-web/src/styles/components/Comments.scss b/services/core-web/src/styles/components/Comments.scss index 578d15e7df..b8bba0082b 100644 --- a/services/core-web/src/styles/components/Comments.scss +++ b/services/core-web/src/styles/components/Comments.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + .speech-bubble { background: $pure-white; border: 1px solid $card-body-border-color; @@ -14,6 +16,7 @@ .speech-bubble p { margin-bottom: 10px; } + .speech-bubble p:last-of-type { margin-bottom: 0; } @@ -23,6 +26,7 @@ position: absolute; right: 100px; } + .speech-bubble-arrow::before { border-left: 13px solid transparent; border-top: 13px solid $card-body-border-color; @@ -31,6 +35,7 @@ position: absolute; right: 5px; } + .speech-bubble-arrow::after { border-left: 11px solid transparent; border-top: 12px solid $pure-white; @@ -41,21 +46,21 @@ } .comment { - background: $pure-white; - line-height: 1.3; - margin: 0 auto auto; - margin-top: 5px; - margin-bottom: 30px; - padding: 0px 10px 10px 0px; - position: relative; + background: $pure-white; + line-height: 1.3; + margin: 0 auto auto; + margin-top: 5px; + margin-bottom: 30px; + padding: 0px 10px 10px 0px; + position: relative; } -.comment-author{ +.comment-author { color: #5e46a1; font-weight: 600; } -.comment-time{ +.comment-time { color: #000000de; font-weight: 400; -} +} \ No newline at end of file diff --git a/services/core-web/src/styles/components/CorePageHeader.scss b/services/core-web/src/styles/components/CorePageHeader.scss index 52689104e2..1980146fd9 100644 --- a/services/core-web/src/styles/components/CorePageHeader.scss +++ b/services/core-web/src/styles/components/CorePageHeader.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + .core-page { background-color: #F9F9F9; diff --git a/services/core-web/src/styles/components/CustomDashboard.scss b/services/core-web/src/styles/components/CustomDashboard.scss index 373af0a5a8..18d7e334d3 100644 --- a/services/core-web/src/styles/components/CustomDashboard.scss +++ b/services/core-web/src/styles/components/CustomDashboard.scss @@ -1,13 +1,17 @@ +@use "../base.scss" as *; + .custom-dashboard { position: relative; top: -25px; background-color: $secondary-background-colour; height: 100vh; + &__container { &--white { h5 { padding-bottom: 20px; } + position: relative; top: 40px; background-color: $pure-white; @@ -15,4 +19,4 @@ margin: 30px; } } -} +} \ No newline at end of file diff --git a/services/core-web/src/styles/components/Dashboard.scss b/services/core-web/src/styles/components/Dashboard.scss index 3d015a641b..0129086d6f 100644 --- a/services/core-web/src/styles/components/Dashboard.scss +++ b/services/core-web/src/styles/components/Dashboard.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + .landing-page { background-color: $secondary-background-colour; @@ -47,4 +49,4 @@ padding: $default-padding-xl; } } -} +} \ No newline at end of file diff --git a/services/core-web/src/styles/components/DocumentTableWithExpandedRows.scss b/services/core-web/src/styles/components/DocumentTableWithExpandedRows.scss index cec67e396c..3303ff28f1 100644 --- a/services/core-web/src/styles/components/DocumentTableWithExpandedRows.scss +++ b/services/core-web/src/styles/components/DocumentTableWithExpandedRows.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + .ant-table-row-level-0.no-sub-table-expandable-rows { .file-history-container { display: flex; diff --git a/services/core-web/src/styles/components/Forms.scss b/services/core-web/src/styles/components/Forms.scss index 7dc5069a7b..ddbc987a90 100644 --- a/services/core-web/src/styles/components/Forms.scss +++ b/services/core-web/src/styles/components/Forms.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + .form { &__parties { border: 1px solid $violet; diff --git a/services/core-web/src/styles/components/HomePage.scss b/services/core-web/src/styles/components/HomePage.scss index 71b3c331da..ac0d2055ca 100644 --- a/services/core-web/src/styles/components/HomePage.scss +++ b/services/core-web/src/styles/components/HomePage.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + .background { background-size: cover; min-height: 100vh; diff --git a/services/core-web/src/styles/components/Loading.scss b/services/core-web/src/styles/components/Loading.scss index b52985ead9..ed2b3b34b3 100644 --- a/services/core-web/src/styles/components/Loading.scss +++ b/services/core-web/src/styles/components/Loading.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + #loading-screen { z-index: 99999; position: fixed; diff --git a/services/core-web/src/styles/components/Logout.scss b/services/core-web/src/styles/components/Logout.scss index 31b461f945..b9e47379ed 100644 --- a/services/core-web/src/styles/components/Logout.scss +++ b/services/core-web/src/styles/components/Logout.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + .logout-screen { text-align: center; margin-top: $default-margin-lg; @@ -8,7 +10,8 @@ } @include center(true, true); + @include mobile { margin: 0; } -} +} \ No newline at end of file diff --git a/services/core-web/src/styles/components/Maps.scss b/services/core-web/src/styles/components/Maps.scss index c8cea043ef..f63451d5ed 100644 --- a/services/core-web/src/styles/components/Maps.scss +++ b/services/core-web/src/styles/components/Maps.scss @@ -1,3 +1,4 @@ +@use "../base.scss" as *; /* This file contains the style overrides for ArcGIS Map components */ @@ -68,4 +69,4 @@ div[id="base-container"] { .leaflet-control-layers-scrollbar { overflow-y: scroll; padding-right: 10px; -} +} \ No newline at end of file diff --git a/services/core-web/src/styles/components/Menu.scss b/services/core-web/src/styles/components/Menu.scss index 70fa94a314..1d94080ca4 100644 --- a/services/core-web/src/styles/components/Menu.scss +++ b/services/core-web/src/styles/components/Menu.scss @@ -1,8 +1,11 @@ +@use "../base.scss" as *; + // item-menu has been added as a class to indicate which menus have been updated to use items instead of children // using items instead of children places the icon on the left, instead of the right // the following moves it back to the right // the item-menu class should be able to be removed down the road. -ul.ant-menu.item-menu > li, ul.ant-menu.item-menu > li > div.ant-menu-submenu-title { +ul.ant-menu.item-menu>li, +ul.ant-menu.item-menu>li>div.ant-menu-submenu-title { display: flex; align-items: center; @@ -19,30 +22,33 @@ ul.ant-menu.item-menu > li, ul.ant-menu.item-menu > li > div.ant-menu-submenu-ti // new ant-generated classnames // the custom rules ".ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected" produces conflicts // dealt with by "li.ant-menu-item.ant-menu-item-selected" -div.ant-menu-submenu > ul.ant-menu-sub { - a, li.ant-menu-item-selected > span.ant-menu-title-content > a, - link { - color: unset !important; - text-decoration: none; - - &:hover { - color: $pure-white; - } +div.ant-menu-submenu>ul.ant-menu-sub { + + a, + li.ant-menu-item-selected>span.ant-menu-title-content>a, + link { + color: unset !important; + text-decoration: none; + + &:hover { + color: $pure-white; } + } - background-color: $light-grey; + background-color: $light-grey; - li, li.ant-menu-item.ant-menu-item-selected { - background-color: transparent; - color: $darkest-grey; + li, + li.ant-menu-item.ant-menu-item-selected { + background-color: transparent; + color: $darkest-grey; - .ant-menu-title-content { - transition: none; - } + .ant-menu-title-content { + transition: none; + } - &:hover { - color: $pure-white; - background-color: $violet; - } - } - } \ No newline at end of file + &:hover { + color: $pure-white; + background-color: $violet; + } + } +} \ No newline at end of file diff --git a/services/core-web/src/styles/components/MergeContacts.scss b/services/core-web/src/styles/components/MergeContacts.scss index 995882ae57..9bf76fdc7a 100644 --- a/services/core-web/src/styles/components/MergeContacts.scss +++ b/services/core-web/src/styles/components/MergeContacts.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + .merge-dashboard { padding: $default-padding-md; border: 1px solid $lightest-grey; @@ -32,4 +34,4 @@ .roles-container { overflow: scroll; max-height: 370px; -} +} \ No newline at end of file diff --git a/services/core-web/src/styles/components/MineCompliance.scss b/services/core-web/src/styles/components/MineCompliance.scss index c8cfab5214..ac936cf4c1 100644 --- a/services/core-web/src/styles/components/MineCompliance.scss +++ b/services/core-web/src/styles/components/MineCompliance.scss @@ -1,13 +1,18 @@ +@use "../base.scss" as *; + .compliance-card { .ant-card-head { background: transparent; } + .ant-card-body { background: $card-body-background-color; } + .ant-card-head-title { white-space: normal; } + .ant-row-flex { min-height: 100px; } @@ -15,4 +20,4 @@ .compliance-filter--content { margin: $default-margin-xl; -} +} \ No newline at end of file diff --git a/services/core-web/src/styles/components/MineDashboard.scss b/services/core-web/src/styles/components/MineDashboard.scss index b3042287c0..3dbd97d170 100644 --- a/services/core-web/src/styles/components/MineDashboard.scss +++ b/services/core-web/src/styles/components/MineDashboard.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + .dashboard { background-color: $secondary-background-colour; padding-top: $default-padding-xl; @@ -39,6 +41,7 @@ position: relative; height: 80px; opacity: 0.9; + @include large { padding: $default-padding-lg; } @@ -61,6 +64,7 @@ // MINE SUMMARY NAVIGATION .sub-menu { + a, link { color: $darkest-grey; @@ -134,7 +138,7 @@ justify-content: space-between; } -.default-contact > * { +.default-contact>* { margin-bottom: 20px; } @@ -148,15 +152,16 @@ height: 88px; } -.abandoned-mine > div>span { +.abandoned-mine>div>span { font-size: 36px; } -.abandoned-mine > div > div > p, .abandoned-mine > div > div > h4 { +.abandoned-mine>div>div>p, +.abandoned-mine>div>div>h4 { color: $white; } .dashboard-tab { margin-bottom: 0; padding: 32px 40px; -} +} \ No newline at end of file diff --git a/services/core-web/src/styles/components/MineExplosivesPermitTable.scss b/services/core-web/src/styles/components/MineExplosivesPermitTable.scss index 0186a9ae67..f91f2f35fb 100644 --- a/services/core-web/src/styles/components/MineExplosivesPermitTable.scss +++ b/services/core-web/src/styles/components/MineExplosivesPermitTable.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + .amendments-badge { background-color: $violet; color: white; diff --git a/services/core-web/src/styles/components/Modal.scss b/services/core-web/src/styles/components/Modal.scss index 1ef7820bf3..48b8d5b56e 100644 --- a/services/core-web/src/styles/components/Modal.scss +++ b/services/core-web/src/styles/components/Modal.scss @@ -1,3 +1,6 @@ +@use "../base.scss" as *; + + .modal__close { position: absolute; top: 7px; diff --git a/services/core-web/src/styles/components/NavBar.scss b/services/core-web/src/styles/components/NavBar.scss index c9736bdf1e..4de63cfe39 100644 --- a/services/core-web/src/styles/components/NavBar.scss +++ b/services/core-web/src/styles/components/NavBar.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + // TOP LEVEL MENU .menu { @include flex; diff --git a/services/core-web/src/styles/components/NoticeOfDeparture.scss b/services/core-web/src/styles/components/NoticeOfDeparture.scss index aa0c28483e..75f8fc3b26 100644 --- a/services/core-web/src/styles/components/NoticeOfDeparture.scss +++ b/services/core-web/src/styles/components/NoticeOfDeparture.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + .nod-modal-section-header { color: #000; font-size: 1.125rem; diff --git a/services/core-web/src/styles/components/NoticeOfWork.scss b/services/core-web/src/styles/components/NoticeOfWork.scss index dbc3b726a3..6e23dfe051 100644 --- a/services/core-web/src/styles/components/NoticeOfWork.scss +++ b/services/core-web/src/styles/components/NoticeOfWork.scss @@ -1,3 +1,6 @@ +@use "../base.scss" as *; + + // mineHeader on NoW verification step of NoticeOfWorkApplication .mine-content__card { @include flex; diff --git a/services/core-web/src/styles/components/NotificationDrawer.scss b/services/core-web/src/styles/components/NotificationDrawer.scss index 0bf68a0105..a3db8b9d5d 100644 --- a/services/core-web/src/styles/components/NotificationDrawer.scss +++ b/services/core-web/src/styles/components/NotificationDrawer.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + .notification-icon { color: #FFF; font-size: 24px; @@ -24,7 +26,7 @@ font-size: 20px; } -.notification-button .ant-scroll-number-only > span.ant-scroll-number-only-unit { +.notification-button .ant-scroll-number-only>span.ant-scroll-number-only-unit { font-size: 12px; } @@ -45,9 +47,21 @@ } @keyframes fadeIn { - 0% { opacity: 0; top: 52px; transform: translateX(10000px);} - 1% { transform: translateX(0);} - 100% { opacity: 1; top: 62px; transform: translateX(0); } + 0% { + opacity: 0; + top: 52px; + transform: translateX(10000px); + } + + 1% { + transform: translateX(0); + } + + 100% { + opacity: 1; + top: 62px; + transform: translateX(0); + } } .notification-drawer { @@ -92,11 +106,11 @@ background-color: #FFF !important; } -.notification-drawer .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap { +.notification-drawer .ant-tabs>.ant-tabs-nav .ant-tabs-nav-wrap { border-bottom: unset !important; } -.notification-drawer .ant-tabs > .ant-tabs-nav .ant-tabs-tab-active > div > article { +.notification-drawer .ant-tabs>.ant-tabs-nav .ant-tabs-tab-active>div>article { color: #5E46A1; text-shadow: none; } @@ -147,9 +161,9 @@ } .header-flex { - display: flex; - align-items: center; - justify-content: space-between; + display: flex; + align-items: center; + justify-content: space-between; } .notification-tab-header { @@ -166,7 +180,8 @@ background-color: #FFFFFF; } -.notification-button-all, .notification-button-all:active { +.notification-button-all, +.notification-button-all:active { border: none; background-color: #FFFFFF; display: flex; @@ -174,7 +189,7 @@ transition: 0.3s ease-in-out; } -.notification-button-all > span { +.notification-button-all>span { font-size: 14px; } @@ -183,6 +198,6 @@ border: none; } -.notification-button-all:hover > span { +.notification-button-all:hover>span { text-decoration: underline; } \ No newline at end of file diff --git a/services/core-web/src/styles/components/NullScreen.scss b/services/core-web/src/styles/components/NullScreen.scss index 5a42f8fc3c..6341f6c54a 100644 --- a/services/core-web/src/styles/components/NullScreen.scss +++ b/services/core-web/src/styles/components/NullScreen.scss @@ -1,6 +1,9 @@ +@use "../base.scss" as *; + .null-screen { text-align: center; margin-top: $default-margin-lg; + div { img { max-width: 150px; @@ -19,6 +22,7 @@ h3 { margin-top: 15px; } + @include mobile { display: block; } @@ -27,4 +31,4 @@ .no-nav-bar { @include center(true, true); } -} +} \ No newline at end of file diff --git a/services/core-web/src/styles/components/PermitConditions.scss b/services/core-web/src/styles/components/PermitConditions.scss index 442c48130c..2726b6f1fa 100644 --- a/services/core-web/src/styles/components/PermitConditions.scss +++ b/services/core-web/src/styles/components/PermitConditions.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + div.condition-layer { padding: 12px 8px 0 8px; font-weight: normal; diff --git a/services/core-web/src/styles/components/ProjectSubmissionStatusPage.scss b/services/core-web/src/styles/components/ProjectSubmissionStatusPage.scss index ad9f180e01..0916e7ce6f 100644 --- a/services/core-web/src/styles/components/ProjectSubmissionStatusPage.scss +++ b/services/core-web/src/styles/components/ProjectSubmissionStatusPage.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + .status-page-container { padding: $default-padding-xl; } diff --git a/services/core-web/src/styles/components/Reports.scss b/services/core-web/src/styles/components/Reports.scss index e3c9201155..845a83afc0 100644 --- a/services/core-web/src/styles/components/Reports.scss +++ b/services/core-web/src/styles/components/Reports.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + /* Minespace is wrapped with antD Row/Col components to control max width, since Core isn't, this needed to be added to keep display in line with the design on Core. */ diff --git a/services/core-web/src/styles/components/ScrollSideMenuWrapper.scss b/services/core-web/src/styles/components/ScrollSideMenuWrapper.scss index 8724e73d03..dc36d0df21 100644 --- a/services/core-web/src/styles/components/ScrollSideMenuWrapper.scss +++ b/services/core-web/src/styles/components/ScrollSideMenuWrapper.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + // overriding styles that weren't quite working, confining changes to where wrapper is used .scroll-side-menu-wrapper { .view--header.fixed-scroll { diff --git a/services/core-web/src/styles/components/SearchBar.scss b/services/core-web/src/styles/components/SearchBar.scss index 792cd9498f..10e27a45cc 100644 --- a/services/core-web/src/styles/components/SearchBar.scss +++ b/services/core-web/src/styles/components/SearchBar.scss @@ -1,9 +1,12 @@ +@use "../base.scss" as *; + .search-bar { .ant-dropdown-menu-body { margin-right: 0; } .ant-menu-item { + img, i { padding-right: $default-padding-md; @@ -18,4 +21,4 @@ background-color: $lightest-grey; } } -} +} \ No newline at end of file diff --git a/services/core-web/src/styles/components/SteppedForm.scss b/services/core-web/src/styles/components/SteppedForm.scss index c27d4891c8..5ce1a04d16 100644 --- a/services/core-web/src/styles/components/SteppedForm.scss +++ b/services/core-web/src/styles/components/SteppedForm.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + .stepped-form-menu-container { position: relative; padding-right: 10px; diff --git a/services/core-web/src/styles/components/Tables.scss b/services/core-web/src/styles/components/Tables.scss index 4d84588fe7..2c11ec183d 100644 --- a/services/core-web/src/styles/components/Tables.scss +++ b/services/core-web/src/styles/components/Tables.scss @@ -1,3 +1,7 @@ +@use "sass:list"; +@use "sass:string"; +@use "../base.scss" as *; + .cap-col-height { max-height: 25px * 6; overflow-y: auto; @@ -134,11 +138,11 @@ $pagination-widths: $pagination-width-1, $pagination-width-2, $pagination-width- $pagination-width-8, $pagination-width-9, $pagination-width-full; .center-pagination { - @for $i from 1 through length($pagination-widths) { + @for $i from 1 through list.length($pagination-widths) { &.page-count-#{$i} { .ant-table-pagination.ant-pagination { - $pagination-width: nth($pagination-widths, $i); - margin-right: unquote("calc( 50% - #{$pagination-width} / 2 )"); + $pagination-width: list.nth($pagination-widths, $i); + margin-right: string.unquote("calc( 50% - #{$pagination-width} / 2 )"); } } } diff --git a/services/core-web/src/styles/components/Tag.scss b/services/core-web/src/styles/components/Tag.scss index eb7c7e7c2d..53fb96c85e 100644 --- a/services/core-web/src/styles/components/Tag.scss +++ b/services/core-web/src/styles/components/Tag.scss @@ -1,11 +1,17 @@ +@use "../base.scss" as *; + .tag { background-color: $lightest-violet; padding: 1px 8px; border-radius: 2px; border: 1px solid $primary-btn-color; - svg, svg path, svg rect, svg mask, span { + svg, + svg path, + svg rect, + svg mask, + span { stroke: $primary-btn-color; color: $primary-btn-color; } -} +} \ No newline at end of file diff --git a/services/core-web/src/styles/components/Tags.scss b/services/core-web/src/styles/components/Tags.scss index ef18524718..09487aa5f4 100644 --- a/services/core-web/src/styles/components/Tags.scss +++ b/services/core-web/src/styles/components/Tags.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + .page-header-title-tag { margin-left: 16px; border-width: 2px; diff --git a/services/core-web/src/styles/components/ViewPermit.scss b/services/core-web/src/styles/components/ViewPermit.scss index b08cfb67e3..9a7d01addc 100644 --- a/services/core-web/src/styles/components/ViewPermit.scss +++ b/services/core-web/src/styles/components/ViewPermit.scss @@ -1,3 +1,5 @@ +@use "../base.scss" as *; + .view-permits-content { background-color: #f9f9f9; padding: 0 20px 16px; diff --git a/services/core-web/src/styles/elements/elements.scss b/services/core-web/src/styles/elements/elements.scss index e887ebcd18..ecb8fcf361 100644 --- a/services/core-web/src/styles/elements/elements.scss +++ b/services/core-web/src/styles/elements/elements.scss @@ -1,3 +1,7 @@ +@use "../settings/theme.scss" as *; +@use "../settings/variables.scss" as *; +@use "../tools/mixins.scss" as *; + h1, h2, h3, diff --git a/services/core-web/src/styles/generic/helpers.scss b/services/core-web/src/styles/generic/helpers.scss index 2fbc052b80..74f8761701 100644 --- a/services/core-web/src/styles/generic/helpers.scss +++ b/services/core-web/src/styles/generic/helpers.scss @@ -1,41 +1,53 @@ +@use "../settings/theme.scss"; +@use "../settings/variables.scss"; + // Colours .color { + // Theme Colours &-primary { - color: $primary-color !important; + color: theme.$primary-color !important; } + &-error { - color: $error-color !important; + color: theme.$error-color !important; } + &-warning { - color: $warning-color !important; + color: theme.$warning-color !important; } + &-white { - color: $white !important; + color: theme.$white !important; } // Brand Colours &-gov-grey { - color: $gov-grey !important; + color: variables.$gov-grey !important; } } // Background Colours .bg-color { + // Theme Colours &-primary { - background-color: $primary-color !important; + background-color: theme.$primary-color !important; } + &-error { - background-color: $error-color !important; + background-color: theme.$error-color !important; } + &-warning { - background-color: $warning-color !important; + background-color: theme.$warning-color !important; } + &-white { - background-color: $white !important; + background-color: theme.$white !important; } + &-black { - background-color: $black !important; + background-color: variables.$black !important; } -} +} \ No newline at end of file diff --git a/services/core-web/src/styles/generic/layout.scss b/services/core-web/src/styles/generic/layout.scss index 65936c9b01..d916665368 100644 --- a/services/core-web/src/styles/generic/layout.scss +++ b/services/core-web/src/styles/generic/layout.scss @@ -1,5 +1,10 @@ +@use "sass:color"; +@use "../settings/variables.scss"; +@use "../settings/theme.scss"; +@use "../tools/mixins.scss"; + body { - font-family: $default-font; + font-family: variables.$default-font; } html { @@ -11,7 +16,7 @@ html { } .header { - height: $header-height; + height: variables.$header-height; } .line-height-none { @@ -21,29 +26,29 @@ html { .content { overflow: initial; min-height: 100vh; - background-color: $pure-white; + background-color: variables.$pure-white; padding-bottom: 80px; &--light-grey { - background-color: $lightest-grey; + background-color: variables.$lightest-grey; border-radius: 2px; } } .grey-background { - background-color: $lightest-grey; + background-color: variables.$lightest-grey; padding: 20px; margin: 20px; } .grey-filled-box { - background: $background; + background: variables.$background; padding: 16px 24px; } .footer { height: 45px; - background-color: $nav-color; + background-color: variables.$nav-color; z-index: 100; } @@ -60,23 +65,23 @@ html { } .violet { - color: $violet; + color: variables.$violet; &-border { - border-color: $violet; + border-color: variables.$violet; } } .grey { - color: $medium-grey; + color: variables.$medium-grey; } .red { - color: $alert-red; + color: variables.$alert-red; } .green { - color: $ok-green; + color: variables.$ok-green; } .right { @@ -123,7 +128,7 @@ html { } .inline-flex { - @include flex; + @include mixins.flex; &--img { margin-top: 5px; @@ -161,30 +166,30 @@ html { .block { &-mobile { - @include mobile { + @include mixins.mobile { display: block; } } &-tablet { - @include tablet { + @include mixins.tablet { display: block; } } } .flex { - @include flex; + @include mixins.flex; &-mobile { - @include mobile { - @include flex; + @include mixins.mobile { + @include mixins.flex; } } &-tablet { - @include tablet { - @include flex; + @include mixins.tablet { + @include mixins.flex; } } } @@ -214,7 +219,7 @@ html { } .center-mobile { - @include mobile { + @include mixins.mobile { display: block; text-align: center !important; margin: 0 !important; @@ -222,7 +227,7 @@ html { } .full-mobile { - @include mobile { + @include mixins.mobile { width: 100% !important; margin: 5px 0; } @@ -230,21 +235,21 @@ html { .page__content, .tab__content { - padding: $default-padding-lg 40px; + padding: variables.$default-padding-lg 40px; margin-bottom: 100px; - @include mobile { - padding: 0 $default-padding-lg; + @include mixins.mobile { + padding: 0 variables.$default-padding-lg; } &--nested { - padding: 0 $default-padding-lg; + padding: 0 variables.$default-padding-lg; - @include large { - padding: 0 $default-padding-sm; + @include mixins.large { + padding: 0 variables.$default-padding-sm; } - @include mobile { + @include mixins.mobile { padding: 0; } } @@ -272,7 +277,7 @@ html { .btn--expand { background: none; - color: $hover-blue; + color: variables.$hover-blue; align-self: flex-end; margin: 0; height: 100%; @@ -284,7 +289,7 @@ html { &:hover, &:active, &:focus { - color: $hover-blue; + color: variables.$hover-blue; background: none; border: none; padding: 0; @@ -306,116 +311,118 @@ html { } .padding-sm { + padding: variables.$default-padding-sm; + &--left { - padding-left: $default-padding-sm; + padding-left: variables.$default-padding-sm; } &--right { - padding-right: $default-padding-sm; + padding-right: variables.$default-padding-sm; } &--top { - padding-top: $default-padding-sm; + padding-top: variables.$default-padding-sm; } &--bottom { - padding-bottom: $default-padding-sm; + padding-bottom: variables.$default-padding-sm; } &--y { - padding-top: $default-padding-sm; - padding-bottom: $default-padding-sm; + padding-top: variables.$default-padding-sm; + padding-bottom: variables.$default-padding-sm; } - padding: $default-padding-sm; + } .padding-md { + padding: variables.$default-padding-md; + &--top { - padding-top: $default-padding-md; + padding-top: variables.$default-padding-md; } &--bottom { - padding-bottom: $default-padding-md; + padding-bottom: variables.$default-padding-md; } &--right { - padding-right: $default-padding-md; + padding-right: variables.$default-padding-md; } &--left { - padding-left: $default-padding-md; + padding-left: variables.$default-padding-md; } - padding: $default-padding-md; - &--sides { - padding-left: $default-padding-md; - padding-right: $default-padding-md; + padding-left: variables.$default-padding-md; + padding-right: variables.$default-padding-md; &--y { - padding-top: $default-padding-md; - padding-bottom: $default-padding-md; + padding-top: variables.$default-padding-md; + padding-bottom: variables.$default-padding-md; } - @include tablet { + @include mixins.tablet { padding: 0; } } } .padding-lg { + padding: variables.$default-padding-lg; + &--top { - padding-top: $default-padding-lg; + padding-top: variables.$default-padding-lg; } &--bottom { - padding-bottom: $default-padding-lg; + padding-bottom: variables.$default-padding-lg; } &--right { - padding-right: $default-padding-lg; + padding-right: variables.$default-padding-lg; } &--left { - padding-left: $default-padding-lg; + padding-left: variables.$default-padding-lg; } - padding: $default-padding-lg; - &--sides { - padding-left: $default-padding-lg; - padding-right: $default-padding-lg; + padding-left: variables.$default-padding-lg; + padding-right: variables.$default-padding-lg; - @include tablet { + @include mixins.tablet { padding: 0; } } &--y { - margin-top: $default-margin-lg; - margin-bottom: $default-margin-lg; + margin-top: variables.$default-margin-lg; + margin-bottom: variables.$default-margin-lg; } } .padding-xxl { + padding: variables.$default-padding-xxl; + &--top { - padding-top: $default-padding-xxl; + padding-top: variables.$default-padding-xxl; } &--bottom { - padding-bottom: $default-padding-xxl; + padding-bottom: variables.$default-padding-xxl; } &--right { - padding-right: $default-padding-xxl; + padding-right: variables.$default-padding-xxl; } &--left { - padding-left: $default-padding-xxl; + padding-left: variables.$default-padding-xxl; } - - padding: $default-padding-xxl; } .margin-none { @@ -423,70 +430,70 @@ html { } .margin-small { + margin: variables.$default-margin-sm; + &--left { - margin-left: $default-margin-sm !important; + margin-left: variables.$default-margin-sm !important; } &--right { - margin-right: $default-margin-sm !important; + margin-right: variables.$default-margin-sm !important; } &--top { - margin-top: $default-margin-sm !important; + margin-top: variables.$default-margin-sm !important; } &--bottom { - margin-bottom: $default-margin-sm !important; + margin-bottom: variables.$default-margin-sm !important; } - - margin: $default-margin-sm; } .margin-medium { &--left { - margin-left: $default-margin-md !important; + margin-left: variables.$default-margin-md !important; } &--right { - margin-right: $default-margin-md !important; + margin-right: variables.$default-margin-md !important; } &--top { - margin-top: $default-margin-md !important; + margin-top: variables.$default-margin-md !important; } &--bottom { - margin-bottom: $default-margin-md !important; + margin-bottom: variables.$default-margin-md !important; } &--y { - margin-top: $default-margin-md !important; - margin-bottom: $default-margin-md !important; + margin-top: variables.$default-margin-md !important; + margin-bottom: variables.$default-margin-md !important; } } .margin-large { + margin: variables.$default-margin-lg !important; + &--left { - margin-left: $default-margin-lg !important; + margin-left: variables.$default-margin-lg !important; } &--right { - margin-right: $default-margin-lg !important; + margin-right: variables.$default-margin-lg !important; } &--top { - margin-top: $default-margin-lg !important; + margin-top: variables.$default-margin-lg !important; } &--bottom { - margin-bottom: $default-margin-lg !important; + margin-bottom: variables.$default-margin-lg !important; } - margin: $default-margin-lg !important; - &--y { - margin-top: $default-margin-lg !important; - margin-bottom: $default-margin-lg !important; + margin-top: variables.$default-margin-lg !important; + margin-bottom: variables.$default-margin-lg !important; } } @@ -495,13 +502,13 @@ html { } .lightest-grey-bg { - background: $secondary-background-colour; + background: variables.$secondary-background-colour; } .nested-table-header { - font-size: $default-h2; - font-weight: $semi-bold; - color: $h4-color; + font-size: variables.$default-h2; + font-weight: variables.$semi-bold; + color: variables.$h4-color; } // reusable icon classes @@ -524,22 +531,22 @@ html { &--lightgrey { @extend .icon-lg; - color: $light-grey; + color: variables.$light-grey; } &--green { @extend .icon-lg; - color: $ok-green; + color: variables.$ok-green; } &--warning { @extend .icon-lg; - color: $warning-color; + color: theme.$warning-color; } &--danger { @extend .icon-lg; - color: $error-color; + color: theme.$error-color; } } @@ -548,12 +555,12 @@ html { &--lightgrey { @extend .icon-xxl; - color: $light-grey; + color: variables.$light-grey; } &--violet { @extend .icon-xxl; - color: $violet; + color: variables.$violet; } } @@ -562,12 +569,12 @@ html { &--lightgrey { @extend .icon-xxxl; - color: $light-grey; + color: variables.$light-grey; } &--violet { @extend .icon-xxxl; - color: $violet; + color: variables.$violet; } } @@ -590,9 +597,9 @@ html { .border { &--right { &--layout { - border-right: 1px solid $layout-grey; + border-right: 1px solid theme.$layout-grey; - @include tablet { + @include mixins.tablet { border-right: 0; } } @@ -600,9 +607,9 @@ html { &--left { &--layout { - border-left: 1px solid $layout-grey; + border-left: 1px solid theme.$layout-grey; - @include tablet { + @include mixins.tablet { border-left: 0; } } @@ -624,7 +631,7 @@ html { .underline { text-decoration: underline; - color: $hover-blue; + color: variables.$hover-blue; cursor: pointer; } @@ -638,7 +645,7 @@ html { cursor: pointer; &:hover { - background-color: darken(white, 2%); + background-color: color.adjust(white, $lightness: -2%); } } @@ -703,7 +710,7 @@ img.lessOpacity { } .faded-text { - color: $non-textual-grey; + color: variables.$non-textual-grey; text-decoration: none; } @@ -726,9 +733,9 @@ img.lessOpacity { } .desktop-bold { - font-size: $default-p; + font-size: variables.$default-p; font-style: normal; - font-weight: $bold; + font-weight: variables.$bold; line-height: 24px; color: #606060; } diff --git a/services/core-web/src/styles/index.scss b/services/core-web/src/styles/index.scss index c545c9b517..539124311d 100755 --- a/services/core-web/src/styles/index.scss +++ b/services/core-web/src/styles/index.scss @@ -1,70 +1,53 @@ -@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"); -@import url("https://js.arcgis.com/4.8/esri/themes/light/main.css"); // ITCSS file structure, layers include: (Settings, Tools, Generic, Elements, Objects, Components, Utilities) // most styling will be found in the Components and Objects folder. -// SETTINGS - Used with pre-processors. Global settings that contain font, colors definitions, etc. -@import "./settings/variables.scss"; -@import "./settings/theme.scss"; -@import "./settings/themeOverride.scss"; -@import "./settings/filepond-overrides.scss"; - -// TOOLS - globally used mixins and functions. (ie gradient mixins, font-sizing mixins) -@import "./tools/mixins.scss"; -@import "./tools/syncfusion.scss"; - -// GENERIC - Very high level, far-reaching styles. Contains Normalize.css, Box-sizing rules, CSS resets etc. -@import "./generic/Normalize.scss"; -@import "./generic/layout.scss"; -@import "./generic/helpers.scss"; - -// ELEMENTS - Bare, un-classed HTML elements (like H1, A, etc.). This layer is rarely touched after initial setup. -@import "./elements/elements.scss"; - // OBJECTS - layouts (CSS Grid or flexbox) // COMPONENTS - specific UI components. -@import "./components/Loading.scss"; -@import "./components/Button.scss"; -@import "./components/MineDashboard.scss"; -@import "./components/Comments.scss"; -@import "./components/CustomDashboard.scss"; -@import "./components/NavBar.scss"; -@import "./components/NullScreen.scss"; -@import "./components/Logout.scss"; -@import "./components/Dashboard.scss"; -@import "./components/Forms.scss"; -@import "./components/Maps.scss"; -@import "./components/MineList.scss"; -@import "./components/Tables.scss"; -@import "./components/MineCompliance.scss"; -@import "./components/Modal.scss"; -@import "./components/MinePermitTable.scss"; -@import "./components/HomePage.scss"; -@import "./components/NoticeOfWork.scss"; -@import "./components/SearchBar.scss"; -@import "./components/CoreTooltip.scss"; -@import "./components/MergeContacts.scss"; -@import "./components/NoticeOfDeparture.scss"; -@import "./components/NotificationDrawer.scss"; -@import "./components/SteppedForm.scss"; -@import "./components/DocumentTableWithExpandedRows.scss"; -@import "./components/DocumentCompressionProgressBar.scss"; -@import "./components/Menu.scss"; -@import "./components/Permit.scss"; -@import "./components/ExplosivesPermits.scss"; -@import "./components/MineExplosivesPermitTable.scss"; -@import "./components/ScrollSideMenuWrapper.scss"; -@import "./components/Tags.scss"; -@import "./components/Reports.scss"; -@import "./components/FontAwesomeIcon.scss"; -@import "./components/ProjectSubmissionStatusPage.scss"; -@import "./components/Tag.scss"; -@import "./components/ViewPermit.scss"; -@import "./components/Callout.scss"; -@import "./components/CorePageHeader.scss"; -@import "./components/PermitConditions.scss"; -@import "./components/HelpGuide.scss"; -@import "./components/RichTextEditor.scss"; +@forward "./components/Loading.scss"; +@forward "./components/Button.scss"; +@forward "./components/MineDashboard.scss"; +@forward "./components/Comments.scss"; +@forward "./components/CustomDashboard.scss"; +@forward "./components/NavBar.scss"; +@forward "./components/NullScreen.scss"; +@forward "./components/Logout.scss"; +@forward "./components/Dashboard.scss"; +@forward "./components/Forms.scss"; +@forward "./components/Maps.scss"; +@forward "./components/MineList.scss"; +@forward "./components/Tables.scss"; +@forward "./components/MineCompliance.scss"; +@forward "./components/Modal.scss"; +@forward "./components/MinePermitTable.scss"; +@forward "./components/HomePage.scss"; +@forward "./components/NoticeOfWork.scss"; +@forward "./components/SearchBar.scss"; +@forward "./components/CoreTooltip.scss"; +@forward "./components/MergeContacts.scss"; +@forward "./components/NoticeOfDeparture.scss"; +@forward "./components/NotificationDrawer.scss"; +@forward "./components/SteppedForm.scss"; +@forward "./components/DocumentTableWithExpandedRows.scss"; +@forward "./components/DocumentCompressionProgressBar.scss"; +@forward "./components/Menu.scss"; +@forward "./components/Permit.scss"; +@forward "./components/ExplosivesPermits.scss"; +@forward "./components/MineExplosivesPermitTable.scss"; +@forward "./components/ScrollSideMenuWrapper.scss"; +@forward "./components/Tags.scss"; +@forward "./components/Reports.scss"; +@forward "./components/FontAwesomeIcon.scss"; +@forward "./components/ProjectSubmissionStatusPage.scss"; +@forward "./components/Tag.scss"; +@forward "./components/ViewPermit.scss"; +@forward "./components/Callout.scss"; +@forward "./components/CorePageHeader.scss"; +@forward "./components/PermitConditions.scss"; +@forward "./components/HelpGuide.scss"; +@forward "./components/RichTextEditor.scss"; + +// UTILITIES - utilities and helper classes. This layer has the highest specificity. -// UTILITIES - utilities and helper classes. This layer has the highest specificity. \ No newline at end of file +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"); +@import url("https://js.arcgis.com/4.8/esri/themes/light/main.css"); \ No newline at end of file diff --git a/services/core-web/src/styles/settings/filepond-overrides.scss b/services/core-web/src/styles/settings/filepond-overrides.scss index 964e50848f..652a9c6263 100644 --- a/services/core-web/src/styles/settings/filepond-overrides.scss +++ b/services/core-web/src/styles/settings/filepond-overrides.scss @@ -1,5 +1,8 @@ +@use "./variables.scss"; +@use "./theme.scss"; + .filepond--root { - font-family: $default-font; + font-family: variables.$default-font; font-size: 0.7rem; margin-bottom: 0 !important; @@ -28,7 +31,7 @@ background-repeat: no-repeat; background-size: cover; border-radius: 10px; - background-color: $blue; + background-color: theme.$blue; opacity: 0.9; } diff --git a/services/core-web/src/styles/settings/theme.scss b/services/core-web/src/styles/settings/theme.scss index 1b6bc1e7bc..5f61266234 100755 --- a/services/core-web/src/styles/settings/theme.scss +++ b/services/core-web/src/styles/settings/theme.scss @@ -1,34 +1,29 @@ // theme.scss holds overrides for ant-design // refer to (https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less) for ant design variable names; +@use "./variables.scss"; $blue: #003366; $white: #f1f1f2; -$violet: #5e46a1; $yellow: #f3cd65; $red: #d40d0d; -$light-grey: #ded9d9; -$lightest-grey: #f4f0f0; -$medium-grey: #6b6363; // Below matches ant design divider colour $layout-grey: #e8e8e8; -$alert-red: #d40d0d; -$ok-green: #45a766; -$primary-color: $violet; +$primary-color: variables.$violet; $warning-color: $yellow; $error-color: $red; $menu-item-color: $white; -$item-hover-bg: $light-grey; +$item-hover-bg: variables.$light-grey; // table colours -$table-header-bg: $lightest-grey; -$table-row-hover-bg: $light-grey; -$table-row-hover-bg: $light-grey; -$table-selected-row-bg: $light-grey; +$table-header-bg: variables.$lightest-grey; +$table-row-hover-bg: variables.$light-grey; +$table-row-hover-bg: variables.$light-grey; +$table-selected-row-bg: variables.$light-grey; $font-family: "Open Sans", sans-serif; $font-size-base: 1rem; //16px $font-size-lg: $font-size-base + 0.125rem; // +2px -$font-size-sm: 0.875rem; //14px +$font-size-sm: 0.875rem; //14px \ No newline at end of file diff --git a/services/core-web/src/styles/settings/themeOverride.scss b/services/core-web/src/styles/settings/themeOverride.scss index d0849600a8..ddce16fa98 100644 --- a/services/core-web/src/styles/settings/themeOverride.scss +++ b/services/core-web/src/styles/settings/themeOverride.scss @@ -1,9 +1,13 @@ +@use "sass:color"; + +@use "./theme.scss"; +@use "./variables.scss"; // stylying overrides for Ant components // TABS .ant-tabs-nav { .ant-tabs-tab { - font-family: $default-font; + font-family: variables.$default-font; } } @@ -48,7 +52,7 @@ color: #3D6DE7 !important; font-weight: bold !important; background-color: white !important; - border-left: 7px solid $violet; + border-left: 7px solid variables.$violet; border-right: none !important; &.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn { @@ -59,7 +63,7 @@ & .ant-tabs-tab:hover, .ant-tabs-tab-btn:hover { - background-color: $violet !important; + background-color: variables.$violet !important; color: white !important; &.ant-tabs-tab-active.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn { @@ -95,24 +99,24 @@ .ant-divider-horizontal { margin: 5px; height: 1px; - background-color: $h-divider-color; + background-color: variables.$h-divider-color; } &.ant-divider-vertical { margin: 0 15px; height: 30px; width: 2px; - background-color: $v-divider-color; + background-color: variables.$v-divider-color; } &.ant-divider-plain { height: 100%; - background-color: $light-grey; + background-color: variables.$light-grey; } } .custom-large-divider { - border: 2px solid $h-divider-color; + border: 2px solid variables.$h-divider-color; } .margin-10 { @@ -143,8 +147,8 @@ } &:hover { - color: $pagination-item-hover; - border: 1px solid $pagination-item-border-hover; + color: variables.$pagination-item-hover; + border: 1px solid variables.$pagination-item-border-hover; } } @@ -203,12 +207,12 @@ .ant-btn.block-button { margin-left: 0; - margin-bottom: $default-margin-lg; + margin-bottom: variables.$default-margin-lg; } // POPUP CONFIRM .ant-popover-inner-content { - background-color: $pure-white; + background-color: variables.$pure-white; } .ant-popover-message-title { @@ -268,22 +272,21 @@ .ant-card-head { min-height: 90px; - background: $card-body-background-color; + background: variables.$card-body-background-color; } // ROW .ant-row-flex { - padding: $default-padding-md; + padding: variables.$default-padding-md; } // PAGINATION .ant-pagination { - margin: $default-margin-lg; + margin: variables.$default-margin-lg; } // TAGS .ant-tag { - @extend p; padding: 0 7px !important; margin-right: 8px !important; line-height: 1.5 !important; @@ -291,11 +294,11 @@ // RESULTS .ant-result-info .ant-result-icon>.anticon { - color: $primary-color; + color: theme.$primary-color; } .ant-result-success .ant-result-icon>.anticon { - color: $ok-green; + color: variables.$ok-green; } // ALERTS @@ -359,13 +362,13 @@ &.ant-alert-info-custom-core-color-icon { .ant-alert-icon { background-color: #FFFFFF !important; - color: $primary-color !important; + color: theme.$primary-color !important; } } } .ant-alert-close-icon .anticon-close:hover { - color: darken($pure-white, 20%); + color: color.adjust(variables.$pure-white, $lightness: -20%); } .ant-alert+.ant-alert { @@ -373,8 +376,8 @@ } .ant-alert-grey { - background-color: $lightest-grey; - border: 1px solid $medium-grey; + background-color: variables.$lightest-grey; + border: 1px solid variables.$medium-grey; span>svg { fill: #6b6363; @@ -403,11 +406,11 @@ // COLLAPSE .ant-collapse { border: none; - background-color: $pure-white; + background-color: variables.$pure-white; } .ant-collapse-borderless>.ant-collapse-item>.ant-collapse-content { - background-color: $white; + background-color: theme.$white; } .page-scroll-wrapper .ant-collapse-content>.ant-collapse-content-box { @@ -458,7 +461,7 @@ text-align: left; &:hover { - background-color: $light-grey; + background-color: variables.$light-grey; } a { @@ -493,8 +496,8 @@ // HORIZONTAL MENU .ant-menu-horizontal { - color: $darkest-grey; - background-color: $light-grey; + color: variables.$darkest-grey; + background-color: variables.$light-grey; } // disabling a rule that creates a horizontal bar across the bottom of the body/html @@ -511,11 +514,11 @@ // -- SEE NavBar.css for .sub-menu - that interacts with this override .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { - background-color: $violet; + background-color: variables.$violet; a, a:hover { - color: $pure-white; + color: variables.$pure-white; } } @@ -562,28 +565,28 @@ .ant-anchor-wrapper { margin-bottom: 20px; - border: 1px solid $light-grey; + border: 1px solid variables.$light-grey; border-radius: 5px; padding: 8px 0; } .ant-anchor-link-active { - border-left: 4px solid $violet; - background-color: $transparent-violet; + border-left: 4px solid variables.$violet; + background-color: variables.$transparent-violet; } .ant-anchor-link-active>.ant-anchor-link-title { - font-weight: $bold; + font-weight: variables.$bold; text-decoration: none; } .ant-anchor-link-title { text-decoration: none; - margin-left: $default-margin-md; + margin-left: variables.$default-margin-md; } .ant-anchor-link { - border-bottom: 1px solid $light-grey; + border-bottom: 1px solid variables.$light-grey; padding: 7px; } @@ -697,11 +700,11 @@ select { // tooltip - specific to the admin tooltip .tooltip__admin { .ant-tooltip-inner { - background-color: $violet; + background-color: variables.$violet; } .ant-tooltip-arrow-content { - background-color: $violet !important; + background-color: variables.$violet !important; } } @@ -757,7 +760,7 @@ select { } .ant-typography-expand { - color: $violet !important; + color: variables.$violet !important; } .ant-descriptions-item-label { @@ -765,9 +768,9 @@ select { } .ant-table-row-expand-icon { - background-color: $primary-color; - color: $white; - border: 2px solid $primary-color; + background-color: theme.$primary-color; + color: theme.$white; + border: 2px solid theme.$primary-color; border-radius: 9px; height: 18px; width: 18px; @@ -775,8 +778,8 @@ select { &:focus, &:hover { - color: $white; - border: 2px solid $primary-color; + color: theme.$white; + border: 2px solid theme.$primary-color; } &:before { diff --git a/services/core-web/src/styles/settings/variables.scss b/services/core-web/src/styles/settings/variables.scss index 5270a24db0..7091cba98f 100755 --- a/services/core-web/src/styles/settings/variables.scss +++ b/services/core-web/src/styles/settings/variables.scss @@ -1,3 +1,4 @@ +@use "sass:color"; /* * Brand Colour Palette */ @@ -47,18 +48,18 @@ $map-lavender: #b7a6fc; // Buttons $primary-btn-color: $violet; -$primary-btn-color-hover: darken($primary-btn-color, 20%); +$primary-btn-color-hover: color.adjust($primary-btn-color, $lightness: -20%); $primary-btn-border-color-hover: $primary-btn-color-hover; $secondary-btn-color: $darkest-grey; -$secondary-btn-color-hover: darken($secondary-btn-color, 20%); +$secondary-btn-color-hover: color.adjust($secondary-btn-color, $lightness: -20%); $secondary-btn-border-color-hover: $secondary-btn-color-hover; $tertiary-btn-color: $medium-grey; -$tertiary-btn-color-hover: darken($tertiary-btn-color, 20%); +$tertiary-btn-color-hover: color.adjust($tertiary-btn-color, $lightness: -20%); $danger-btn-color: $btn-red; -$danger-btn-color-hover: darken($danger-btn-color, 20%); +$danger-btn-color-hover: color.adjust($danger-btn-color, $lightness: -20%); // Nav $nav-color: $darkest-grey; @@ -70,7 +71,7 @@ $header-height: $nav-height; // Ant Component Overrides $h-divider-color: $darkest-grey; $v-divider-color: $darkest-grey; -$pagination-item-hover: darken($violet, 20%); +$pagination-item-hover: color.adjust($violet, $lightness: -20%); $pagination-item-border-hover: $pagination-item-hover; $card-body-background-color: $lightest-grey; $card-body-border-color: #cccccc; @@ -117,7 +118,7 @@ $h6-color: $medium-grey; $p-color: $darkest-grey; $p-light-color: $non-textual-grey; $a-color: $hover-blue; -$a-color-hover: darken($a-color, 20%); +$a-color-hover: color.adjust($a-color, $lightness: -20%); $ant-header-color: $darkest-grey; $ant-nested-header-color: $medium-grey; $ant-label-color: $medium-grey; diff --git a/services/core-web/src/styles/tools/syncfusion.scss b/services/core-web/src/styles/tools/syncfusion.scss index eea9566318..a6a0692bce 100644 --- a/services/core-web/src/styles/tools/syncfusion.scss +++ b/services/core-web/src/styles/tools/syncfusion.scss @@ -1,7 +1,8 @@ -// Theme override variables taken from https://ej2.syncfusion.com/react/documentation/appearance/theme/#googles-material -$accent: $primary-color; //#e3165b; +@use "../settings/theme.scss"; +@use "../settings/variables.scss"; // Theme override variables taken from https://ej2.syncfusion.com/react/documentation/appearance/theme/#googles-material +$accent: theme.$primary-color; //#e3165b; $accent-font: #ffffff; -$primary: $primary-color; //#3f51b5; +$primary: theme.$primary-color; //#3f51b5; $primary-50: #e8eaf6; $primary-100: #c5cae9; $primary-200: #9fa8da; @@ -27,12 +28,12 @@ $grey-dark: #303030; $grey-light-font: #000000; $grey-dark-font: #ffffff; $base-font: #000000; -$error-font: $error-color; //#f44336; +$error-font: theme.$error-color; //#f44336; // Syncfusion requires an undocumented $theme variable to be set in order to import the correct theme. // This is a workaround to allow us to use the Material theme while still being able to use a different // $theme variable elsewhere in the application. -@use 'syncfusion_imports' with ($theme: 'Material'); +@use 'syncfusion_imports'; .e-empty-inner-content { diff --git a/services/core-web/src/styles/tools/syncfusion_imports.scss b/services/core-web/src/styles/tools/syncfusion_imports.scss index 3ce9860a86..2fa1fc9d1c 100644 --- a/services/core-web/src/styles/tools/syncfusion_imports.scss +++ b/services/core-web/src/styles/tools/syncfusion_imports.scss @@ -1,17 +1,17 @@ -@import "~@syncfusion/ej2-base/styles/material.scss"; -@import "~@syncfusion/ej2-buttons/styles/material.scss"; -@import "~@syncfusion/ej2-dropdowns/styles/material.scss"; -@import "~@syncfusion/ej2-icons/styles/material.scss"; -@import "~@syncfusion/ej2-inputs/styles/material.scss"; -@import "~@syncfusion/ej2-navigations/styles/material.scss"; -@import "~@syncfusion/ej2-popups/styles/material.scss"; -@import "~@syncfusion/ej2-splitbuttons/styles/material.scss"; -@import "~@syncfusion/ej2-lists/styles/material.scss"; -@import "~@syncfusion/ej2-layouts/styles/material.scss"; -@import "~@syncfusion/ej2-grids/styles/material.scss"; -@import "~@syncfusion/ej2-react-pdfviewer/styles/material.scss"; -@import "~@syncfusion/ej2-react-filemanager/styles/material.scss"; +@import "~@syncfusion/ej2-base/styles/material.css"; +@import "~@syncfusion/ej2-buttons/styles/material.css"; +@import "~@syncfusion/ej2-dropdowns/styles/material.css"; +@import "~@syncfusion/ej2-icons/styles/material.css"; +@import "~@syncfusion/ej2-inputs/styles/material.css"; +@import "~@syncfusion/ej2-navigations/styles/material.css"; +@import "~@syncfusion/ej2-popups/styles/material.css"; +@import "~@syncfusion/ej2-splitbuttons/styles/material.css"; +@import "~@syncfusion/ej2-lists/styles/material.css"; +@import "~@syncfusion/ej2-layouts/styles/material.css"; +@import "~@syncfusion/ej2-grids/styles/material.css"; +@import "~@syncfusion/ej2-react-pdfviewer/styles/material.css"; +@import "~@syncfusion/ej2-react-filemanager/styles/material.css"; // NOTE: We may need these dependencies in the future if we implement the document/spreadsheet viewer -// @import "../../../node_modules/@syncfusion/ej2-react-documenteditor/styles/material.scss"; -// @import "../../../node_modules/@syncfusion/ej2-react-spreadsheet/styles/material.scss"; -@import "~@syncfusion/ej2-notifications/styles/material.scss"; \ No newline at end of file +// @import "../../../node_modules/@syncfusion/ej2-react-documenteditor/styles/material.css"; +// @import "../../../node_modules/@syncfusion/ej2-react-spreadsheet/styles/material.css"; +@import "~@syncfusion/ej2-notifications/styles/material.css"; \ No newline at end of file diff --git a/services/core-web/src/tests/components/Forms/__snapshots__/MineRecordForm.spec.js.snap b/services/core-web/src/tests/components/Forms/__snapshots__/MineRecordForm.spec.js.snap index 373899de25..6d1d52bebf 100644 --- a/services/core-web/src/tests/components/Forms/__snapshots__/MineRecordForm.spec.js.snap +++ b/services/core-web/src/tests/components/Forms/__snapshots__/MineRecordForm.spec.js.snap @@ -68,7 +68,7 @@ exports[`MineRecordForm renders properly 1`] = ` hasFeedback={false} label="Is this a historic mine status?" > - No - + @@ -196,7 +196,7 @@ exports[`MineRecordForm renders properly 1`] = ` hasFeedback={false} label="Does this mine site belong to a government agency?" > - No - + diff --git a/services/core-web/src/tests/components/Forms/parties/__snapshots__/AddFullPartyForm.spec.js.snap b/services/core-web/src/tests/components/Forms/parties/__snapshots__/AddFullPartyForm.spec.js.snap index 0dd8c598be..7118a5d084 100644 --- a/services/core-web/src/tests/components/Forms/parties/__snapshots__/AddFullPartyForm.spec.js.snap +++ b/services/core-web/src/tests/components/Forms/parties/__snapshots__/AddFullPartyForm.spec.js.snap @@ -19,7 +19,7 @@ exports[`AddFullPartyForm renders properly 1`] = `
- Organization - +
- @@ -25,7 +25,7 @@ exports[`AddVarianceForm renders properly 1`] = ` > Approved Variance - + - Attach existing file(s) - + -