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",
"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",

167
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 { 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<ConfigureAPI>(
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 (
<NuvoImporter
renderUploadButton={({ launch }) => {
return (
<Button
size="large"
startIcon={<CloudUpload />}
variant="primary"
color="primary"
onClick={launch}
>
Upload file
</Button>
);
<div
style={{
filter: saleorTheme.themeType === "dark" ? "invert(1)" : "none",
}}
onResults={handleResults}
licenseKey={licenseKey}
settings={nuvoSettings}
/>
>
<NuvoImporter
renderUploadButton={({ launch }) => {
return (
<Button
size="large"
startIcon={<CloudUpload />}
variant="primary"
color="primary"
onClick={launch}
>
Upload file
</Button>
);
}}
onResults={handleResults}
licenseKey={licenseKey}
settings={nuvoSettings}
/>
</div>
);
};

38
pnpm-lock.yaml
View file

@ -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'}