diff --git a/.changeset/olive-tips-train.md b/.changeset/olive-tips-train.md new file mode 100644 index 0000000..a0c59d2 --- /dev/null +++ b/.changeset/olive-tips-train.md @@ -0,0 +1,5 @@ +--- +"saleor-app-data-importer": patch +--- + +Add naive dark mode by inverting colors diff --git a/apps/data-importer/package.json b/apps/data-importer/package.json index 01ff5a9..64ae4c7 100644 --- a/apps/data-importer/package.json +++ b/apps/data-importer/package.json @@ -30,7 +30,7 @@ "jose": "^4.11.2", "jsdom": "^20.0.3", "next": "13.1.6", - "nuvo-react": "^1.20.4", + "nuvo-react": "^1.22.1", "react": "18.2.0", "react-dom": "18.2.0", "urql": "^3.0.3", diff --git a/apps/data-importer/src/modules/customers/customers-importer-nuvo/customers-importer-view.tsx b/apps/data-importer/src/modules/customers/customers-importer-nuvo/customers-importer-view.tsx index 59f3c24..782167e 100644 --- a/apps/data-importer/src/modules/customers/customers-importer-nuvo/customers-importer-view.tsx +++ b/apps/data-importer/src/modules/customers/customers-importer-nuvo/customers-importer-view.tsx @@ -10,9 +10,8 @@ import dotObject from "dot-object"; import { useAuthorizedToken } from "../../authorization/use-authorized-token"; import { Alert, Button, SaleorTheme, useTheme } from "@saleor/macaw-ui"; import { CustomersImportingResults } from "../customers-results/customers-importing-results"; -import { lighten, LinearProgress } from "@material-ui/core"; +import { LinearProgress } from "@material-ui/core"; import { CloudUpload } from "@material-ui/icons"; -import { Theme } from "@material-ui/core/styles"; let PassSubmitResult: any; let RejectSubmitResult: any; @@ -36,34 +35,36 @@ const NuvoImporter = dynamic( const columns = getCustomersModelColumns(); const getNuvoSettings = (theme: SaleorTheme): SettingsAPI => { + const isDarkMode = theme.palette.type === "dark"; + const dropdownStyles = { option: { - color: theme.palette.text.primary, + color: "#111", ":hover": { - background: `${lighten(theme.palette.background.default, 0.1)}`, + background: "#eee", }, }, header: { - background: theme.palette.background.default, - color: theme.palette.text.primary, + background: "#fff", + color: "#eee", }, root: { - border: `1px solid ${lighten(theme.palette.background.default, 0.1)}`, - background: theme.palette.background.default, - color: theme.palette.text.primary, + border: `1px solid #eee`, + background: "#fff", + color: "#111", }, search: { root: { - background: theme.palette.background.default, - color: theme.palette.text.primary, + background: "#fff", + color: "#111", }, }, button: { root: { - background: theme.palette.background.default, - color: theme.palette.text.primary, + background: "#fff", + color: "#111", maxHeight: "20px", - border: `1px solid ${lighten(theme.palette.background.default, 0.1)}`, + border: `1px solid #eee`, }, }, } as const; @@ -75,9 +76,23 @@ const getNuvoSettings = (theme: SaleorTheme): SettingsAPI => { identifier: "customers", modal: false, style: { + sheetSelect: { icon: { filter: isDarkMode ? "invert(1)" : "none" } }, + joinSheet: {}, + dialog: { closeIcon: { filter: isDarkMode ? "invert(1)" : "none" } }, + messagePopup: { + closeIcon: { + filter: isDarkMode ? "invert(1)" : "none", + }, + warnIcon: { + filter: isDarkMode ? "invert(1)" : "none", + }, + successIcon: { + filter: isDarkMode ? "invert(1)" : "none", + }, + }, footer: { root: { - background: theme.palette.background.default, + background: "#fff", }, }, buttons: { @@ -100,24 +115,27 @@ const getNuvoSettings = (theme: SaleorTheme): SettingsAPI => { }, }, loader: { - loadAnimationColor: theme.palette.type === "light" ? "#000" : "#fff", + loadAnimationColor: "#111", + content: { + color: "#111", + }, }, headerSelect: { root: { - background: theme.palette.background.default, + background: "#fff", border: "none", }, table: { - selectRowColor: lighten(theme.palette.background.default, 0.3), + selectRowColor: "#eee", th: { - color: theme.palette.text.primary, - background: theme.palette.background.default, + color: "#111", + background: "#fff", }, td: { - color: theme.palette.text.primary, - background: theme.palette.background.default, + color: "#111", + background: "#fff", }, - hoverRowColor: lighten(theme.palette.background.default, 0.1), + hoverRowColor: "#eee", }, sheetName: { root: { @@ -126,36 +144,48 @@ const getNuvoSettings = (theme: SaleorTheme): SettingsAPI => { }, }, columnMatch: { + icon: { + filter: isDarkMode ? "invert(1)" : "none", + }, notMatchingValue: { root: { - background: lighten(theme.palette.background.default, 0.1), + background: "#eee", + }, + icon: { + filter: isDarkMode ? "invert(1)" : "none", }, }, buttonJoined: { root: { - background: lighten(theme.palette.background.default, 0.1), + background: "#eee", }, }, root: { - background: theme.palette.background.default, - border: `1px solid ${lighten(theme.palette.background.default, 0.1)}`, + background: "#fff", + border: `1px solid #eee`, }, columnMatchHeader: { dropdown: dropdownStyles, root: { - background: theme.palette.background.default, - border: `1px solid ${lighten(theme.palette.background.default, 0.1)}`, + background: "#fff", + border: `1px solid #eee`, + }, + icon: { + filter: isDarkMode ? "invert(1)" : "none", }, }, columnMatchValue: { + icon: { + filter: isDarkMode ? "invert(1)" : "none", + }, emptyValue: { - background: theme.palette.background.default, - color: theme.palette.text.primary, + background: "#fff", + color: "#111", }, dropdown: dropdownStyles, root: { - border: `1px solid ${lighten(theme.palette.background.default, 0.1)}`, - background: theme.palette.background.default, + border: `1px solid #eee`, + background: "#fff", }, }, }, @@ -165,9 +195,13 @@ const getNuvoSettings = (theme: SaleorTheme): SettingsAPI => { }, root: { // display: "none", + color: "#111", }, }, progressBar: { + icon: { + filter: isDarkMode ? "invert(1)" : "none", + }, root: { display: "none", }, @@ -179,32 +213,43 @@ const getNuvoSettings = (theme: SaleorTheme): SettingsAPI => { }, }, root: { - background: theme.palette.background.default, - border: "1px dashed #ddd", + background: "#fff", + border: "1px dashed #eee", }, }, reviewEntries: { + icon: { + filter: isDarkMode ? "invert(1)" : "none", + }, root: { - backgroundColor: "transparent", + backgroundColor: "#fff", + }, + infoIcon: { + filter: isDarkMode ? "invert(1)" : "none", + }, + moreIcon: { + filter: isDarkMode ? "invert(1)" : "none", }, table: { th: { - backgroundColor: "transparent", + backgroundColor: "#fff", }, td: { normal: { - backgroundColor: "transparent", + backgroundColor: "#fff", }, root: { - backgroundColor: "transparent", + backgroundColor: "#fff", }, }, }, }, globals: { fontFamily: "Inter", - backgroundColor: "transparent", - textColor: "inherit", + backgroundColor: "#fff", + textColor: "#111", + primaryTextColor: "#111", + secondaryTextColor: "#222", }, }, title: "Upload customers to Saleor", @@ -247,23 +292,29 @@ export const CustomersImporterView = () => { } return ( - { - return ( - - ); +
+ > + { + return ( + + ); + }} + onResults={handleResults} + licenseKey={licenseKey} + settings={nuvoSettings} + /> +
); }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1d8eea4..7d7d629 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -54,7 +54,7 @@ importers: jose: ^4.11.2 jsdom: ^20.0.3 next: 13.1.6 - nuvo-react: ^1.20.4 + nuvo-react: ^1.22.1 react: 18.2.0 react-dom: 18.2.0 typescript: 4.9.5 @@ -79,7 +79,7 @@ importers: jose: 4.11.4 jsdom: 20.0.3 next: 13.1.6_biqbaboplfbrettd7655fr4n2y - nuvo-react: 1.21.1_biqbaboplfbrettd7655fr4n2y + nuvo-react: 1.22.1_biqbaboplfbrettd7655fr4n2y react: 18.2.0 react-dom: 18.2.0_react@18.2.0 urql: 3.0.3_onqnqwb3ubg5opvemcqf7c2qhy @@ -4709,6 +4709,10 @@ packages: '@types/node': 18.13.0 dev: true + /@types/lodash/4.14.191: + resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==} + dev: false + /@types/minimatch/3.0.5: resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==} dev: true @@ -10060,6 +10064,10 @@ packages: big-integer: 1.6.51 dev: false + /nanoclone/0.2.1: + resolution: {integrity: sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==} + dev: false + /nanoid/3.3.4: resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} @@ -10352,8 +10360,8 @@ packages: resolution: {integrity: sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA==} dev: false - /nuvo-react/1.21.1_biqbaboplfbrettd7655fr4n2y: - resolution: {integrity: sha512-U0QdyN6v94GMB93ZPCKbKfI1PAbBerU2EiTMhD3gZa95n3WGeylKKtg6A0TQb/iqd+vlyw9yucf4OG/ehpDKEg==} + /nuvo-react/1.22.1_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-osN6dCQupiqBr3W8qDUDnkV2noKWVGEb3fTShLFzOaXMFrSm1ocQfBrgyuSmDDmsldUoT18i+I4nTb67oXPMEQ==} peerDependencies: react: ^16.0.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 @@ -10403,6 +10411,7 @@ packages: simplebar-react: 2.4.3_biqbaboplfbrettd7655fr4n2y url-join: 5.0.0 xlsx: 0.18.5 + yup: 0.32.11 transitivePeerDependencies: - '@babel/core' - debug @@ -10944,6 +10953,10 @@ packages: object-assign: 4.1.1 react-is: 16.13.1 + /property-expr/2.0.5: + resolution: {integrity: sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==} + dev: false + /proxy-from-env/1.1.0: resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==} dev: false @@ -12334,6 +12347,10 @@ packages: resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==} engines: {node: '>=0.6'} + /toposort/2.0.2: + resolution: {integrity: sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==} + dev: false + /tough-cookie/4.1.2: resolution: {integrity: sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==} engines: {node: '>=6'} @@ -13371,6 +13388,19 @@ packages: resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==} engines: {node: '>=12.20'} + /yup/0.32.11: + resolution: {integrity: sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==} + engines: {node: '>=10'} + dependencies: + '@babel/runtime': 7.20.13 + '@types/lodash': 4.14.191 + lodash: 4.17.21 + lodash-es: 4.17.21 + nanoclone: 0.2.1 + property-expr: 2.0.5 + toposort: 2.0.2 + dev: false + /zip-stream/4.1.0: resolution: {integrity: sha512-zshzwQW7gG7hjpBlgeQP9RuyPGNxvJdzR8SUM3QhxCnLjWN2E7j3dOvpeDcQoETfHx0urRS7EtmVToql7YpU4A==} engines: {node: '>= 10'}