djkato/saleor-apps-redis_apl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Inverting colors dark mode in Data Importer (#202)

Browse source
This commit is contained in:
Lukasz Ostrowski 2023-02-27 09:28:46 +01:00 committed by GitHub
parent 289b42f40d
commit 63275866a1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 149 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/olive-tips-train.md Normal file
View file

@ -0,0 +1,5 @@
---
"saleor-app-data-importer": patch
---
Add naive dark mode by inverting colors

2
apps/data-importer/package.json
View file

@ -30,7 +30,7 @@
"jose": "^4.11.2", "jose": "^4.11.2",
"jsdom": "^20.0.3", "jsdom": "^20.0.3",
"next": "13.1.6", "next": "13.1.6",
"nuvo-react": "^1.20.4", "nuvo-react": "^1.22.1",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"urql": "^3.0.3", "urql": "^3.0.3",

133
apps/data-importer/src/modules/customers/customers-importer-nuvo/customers-importer-view.tsx
View file

@ -10,9 +10,8 @@ import dotObject from "dot-object";
import { useAuthorizedToken } from "../../authorization/use-authorized-token"; import { useAuthorizedToken } from "../../authorization/use-authorized-token";
import { Alert, Button, SaleorTheme, useTheme } from "@saleor/macaw-ui"; import { Alert, Button, SaleorTheme, useTheme } from "@saleor/macaw-ui";
import { CustomersImportingResults } from "../customers-results/customers-importing-results"; 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 { CloudUpload } from "@material-ui/icons";
import { Theme } from "@material-ui/core/styles";
let PassSubmitResult: any; let PassSubmitResult: any;
let RejectSubmitResult: any; let RejectSubmitResult: any;
@ -36,34 +35,36 @@ const NuvoImporter = dynamic<ConfigureAPI>(
const columns = getCustomersModelColumns(); const columns = getCustomersModelColumns();
const getNuvoSettings = (theme: SaleorTheme): SettingsAPI => { const getNuvoSettings = (theme: SaleorTheme): SettingsAPI => {
const isDarkMode = theme.palette.type === "dark";
const dropdownStyles = { const dropdownStyles = {
option: { option: {
color: theme.palette.text.primary, color: "#111",
":hover": { ":hover": {
background: `${lighten(theme.palette.background.default, 0.1)}`, background: "#eee",
}, },
}, },
header: { header: {
background: theme.palette.background.default, background: "#fff",
color: theme.palette.text.primary, color: "#eee",
}, },
root: { root: {
border: `1px solid ${lighten(theme.palette.background.default, 0.1)}`, border: `1px solid #eee`,
background: theme.palette.background.default, background: "#fff",
color: theme.palette.text.primary, color: "#111",
}, },
search: { search: {
root: { root: {
background: theme.palette.background.default, background: "#fff",
color: theme.palette.text.primary, color: "#111",
}, },
}, },
button: { button: {
root: { root: {
background: theme.palette.background.default, background: "#fff",
color: theme.palette.text.primary, color: "#111",
maxHeight: "20px", maxHeight: "20px",
border: `1px solid ${lighten(theme.palette.background.default, 0.1)}`, border: `1px solid #eee`,
}, },
}, },
} as const; } as const;
@ -75,9 +76,23 @@ const getNuvoSettings = (theme: SaleorTheme): SettingsAPI => {
identifier: "customers", identifier: "customers",
modal: false, modal: false,
style: { 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: { footer: {
root: { root: {
background: theme.palette.background.default, background: "#fff",
}, },
}, },
buttons: { buttons: {
@ -100,24 +115,27 @@ const getNuvoSettings = (theme: SaleorTheme): SettingsAPI => {
}, },
}, },
loader: { loader: {
loadAnimationColor: theme.palette.type === "light" ? "#000" : "#fff", loadAnimationColor: "#111",
content: {
color: "#111",
},
}, },
headerSelect: { headerSelect: {
root: { root: {
background: theme.palette.background.default, background: "#fff",
border: "none", border: "none",
}, },
table: { table: {
selectRowColor: lighten(theme.palette.background.default, 0.3), selectRowColor: "#eee",
th: { th: {
color: theme.palette.text.primary, color: "#111",
background: theme.palette.background.default, background: "#fff",
}, },
td: { td: {
color: theme.palette.text.primary, color: "#111",
background: theme.palette.background.default, background: "#fff",
}, },
hoverRowColor: lighten(theme.palette.background.default, 0.1), hoverRowColor: "#eee",
}, },
sheetName: { sheetName: {
root: { root: {
@ -126,36 +144,48 @@ const getNuvoSettings = (theme: SaleorTheme): SettingsAPI => {
}, },
}, },
columnMatch: { columnMatch: {
icon: {
filter: isDarkMode ? "invert(1)" : "none",
},
notMatchingValue: { notMatchingValue: {
root: { root: {
background: lighten(theme.palette.background.default, 0.1), background: "#eee",
},
icon: {
filter: isDarkMode ? "invert(1)" : "none",
}, },
}, },
buttonJoined: { buttonJoined: {
root: { root: {
background: lighten(theme.palette.background.default, 0.1), background: "#eee",
}, },
}, },
root: { root: {
background: theme.palette.background.default, background: "#fff",
border: `1px solid ${lighten(theme.palette.background.default, 0.1)}`, border: `1px solid #eee`,
}, },
columnMatchHeader: { columnMatchHeader: {
dropdown: dropdownStyles, dropdown: dropdownStyles,
root: { root: {
background: theme.palette.background.default, background: "#fff",
border: `1px solid ${lighten(theme.palette.background.default, 0.1)}`, border: `1px solid #eee`,
},
icon: {
filter: isDarkMode ? "invert(1)" : "none",
}, },
}, },
columnMatchValue: { columnMatchValue: {
icon: {
filter: isDarkMode ? "invert(1)" : "none",
},
emptyValue: { emptyValue: {
background: theme.palette.background.default, background: "#fff",
color: theme.palette.text.primary, color: "#111",
}, },
dropdown: dropdownStyles, dropdown: dropdownStyles,
root: { root: {
border: `1px solid ${lighten(theme.palette.background.default, 0.1)}`, border: `1px solid #eee`,
background: theme.palette.background.default, background: "#fff",
}, },
}, },
}, },
@ -165,9 +195,13 @@ const getNuvoSettings = (theme: SaleorTheme): SettingsAPI => {
}, },
root: { root: {
// display: "none", // display: "none",
color: "#111",
}, },
}, },
progressBar: { progressBar: {
icon: {
filter: isDarkMode ? "invert(1)" : "none",
},
root: { root: {
display: "none", display: "none",
}, },
@ -179,32 +213,43 @@ const getNuvoSettings = (theme: SaleorTheme): SettingsAPI => {
}, },
}, },
root: { root: {
background: theme.palette.background.default, background: "#fff",
border: "1px dashed #ddd", border: "1px dashed #eee",
}, },
}, },
reviewEntries: { reviewEntries: {
icon: {
filter: isDarkMode ? "invert(1)" : "none",
},
root: { root: {
backgroundColor: "transparent", backgroundColor: "#fff",
},
infoIcon: {
filter: isDarkMode ? "invert(1)" : "none",
},
moreIcon: {
filter: isDarkMode ? "invert(1)" : "none",
}, },
table: { table: {
th: { th: {
backgroundColor: "transparent", backgroundColor: "#fff",
}, },
td: { td: {
normal: { normal: {
backgroundColor: "transparent", backgroundColor: "#fff",
}, },
root: { root: {
backgroundColor: "transparent", backgroundColor: "#fff",
}, },
}, },
}, },
}, },
globals: { globals: {
fontFamily: "Inter", fontFamily: "Inter",
backgroundColor: "transparent", backgroundColor: "#fff",
textColor: "inherit", textColor: "#111",
primaryTextColor: "#111",
secondaryTextColor: "#222",
}, },
}, },
title: "Upload customers to Saleor", title: "Upload customers to Saleor",
@ -247,6 +292,11 @@ export const CustomersImporterView = () => {
} }
return ( return (
<div
style={{
filter: saleorTheme.themeType === "dark" ? "invert(1)" : "none",
}}
>
<NuvoImporter <NuvoImporter
renderUploadButton={({ launch }) => { renderUploadButton={({ launch }) => {
return ( return (
@ -265,5 +315,6 @@ export const CustomersImporterView = () => {
licenseKey={licenseKey} licenseKey={licenseKey}
settings={nuvoSettings} settings={nuvoSettings}
/> />
</div>
); );
}; };

38
pnpm-lock.yaml
View file

@ -54,7 +54,7 @@ importers:
jose: ^4.11.2 jose: ^4.11.2
jsdom: ^20.0.3 jsdom: ^20.0.3
next: 13.1.6 next: 13.1.6
nuvo-react: ^1.20.4 nuvo-react: ^1.22.1
react: 18.2.0 react: 18.2.0
react-dom: 18.2.0 react-dom: 18.2.0
typescript: 4.9.5 typescript: 4.9.5
@ -79,7 +79,7 @@ importers:
jose: 4.11.4 jose: 4.11.4
jsdom: 20.0.3 jsdom: 20.0.3
next: 13.1.6_biqbaboplfbrettd7655fr4n2y next: 13.1.6_biqbaboplfbrettd7655fr4n2y
nuvo-react: 1.21.1_biqbaboplfbrettd7655fr4n2y nuvo-react: 1.22.1_biqbaboplfbrettd7655fr4n2y
react: 18.2.0 react: 18.2.0
react-dom: 18.2.0_react@18.2.0 react-dom: 18.2.0_react@18.2.0
urql: 3.0.3_onqnqwb3ubg5opvemcqf7c2qhy urql: 3.0.3_onqnqwb3ubg5opvemcqf7c2qhy
@ -4709,6 +4709,10 @@ packages:
'@types/node': 18.13.0 '@types/node': 18.13.0
dev: true dev: true
/@types/lodash/4.14.191:
resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==}
dev: false
/@types/minimatch/3.0.5: /@types/minimatch/3.0.5:
resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==} resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==}
dev: true dev: true
@ -10060,6 +10064,10 @@ packages:
big-integer: 1.6.51 big-integer: 1.6.51
dev: false dev: false
/nanoclone/0.2.1:
resolution: {integrity: sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==}
dev: false
/nanoid/3.3.4: /nanoid/3.3.4:
resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==} resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@ -10352,8 +10360,8 @@ packages:
resolution: {integrity: sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA==} resolution: {integrity: sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA==}
dev: false dev: false
/nuvo-react/1.21.1_biqbaboplfbrettd7655fr4n2y: /nuvo-react/1.22.1_biqbaboplfbrettd7655fr4n2y:
resolution: {integrity: sha512-U0QdyN6v94GMB93ZPCKbKfI1PAbBerU2EiTMhD3gZa95n3WGeylKKtg6A0TQb/iqd+vlyw9yucf4OG/ehpDKEg==} resolution: {integrity: sha512-osN6dCQupiqBr3W8qDUDnkV2noKWVGEb3fTShLFzOaXMFrSm1ocQfBrgyuSmDDmsldUoT18i+I4nTb67oXPMEQ==}
peerDependencies: peerDependencies:
react: ^16.0.0 || ^17.0.0 || ^18.0.0 react: ^16.0.0 || ^17.0.0 || ^18.0.0
react-dom: ^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 simplebar-react: 2.4.3_biqbaboplfbrettd7655fr4n2y
url-join: 5.0.0 url-join: 5.0.0
xlsx: 0.18.5 xlsx: 0.18.5
yup: 0.32.11
transitivePeerDependencies: transitivePeerDependencies:
- '@babel/core' - '@babel/core'
- debug - debug
@ -10944,6 +10953,10 @@ packages:
object-assign: 4.1.1 object-assign: 4.1.1
react-is: 16.13.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: /proxy-from-env/1.1.0:
resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==} resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
dev: false dev: false
@ -12334,6 +12347,10 @@ packages:
resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==} resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
engines: {node: '>=0.6'} engines: {node: '>=0.6'}
/toposort/2.0.2:
resolution: {integrity: sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==}
dev: false
/tough-cookie/4.1.2: /tough-cookie/4.1.2:
resolution: {integrity: sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==} resolution: {integrity: sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==}
engines: {node: '>=6'} engines: {node: '>=6'}
@ -13371,6 +13388,19 @@ packages:
resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==} resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
engines: {node: '>=12.20'} 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: /zip-stream/4.1.0:
resolution: {integrity: sha512-zshzwQW7gG7hjpBlgeQP9RuyPGNxvJdzR8SUM3QhxCnLjWN2E7j3dOvpeDcQoETfHx0urRS7EtmVToql7YpU4A==} resolution: {integrity: sha512-zshzwQW7gG7hjpBlgeQP9RuyPGNxvJdzR8SUM3QhxCnLjWN2E7j3dOvpeDcQoETfHx0urRS7EtmVToql7YpU4A==}
engines: {node: '>= 10'} engines: {node: '>= 10'}