diff --git a/.changeset/stale-rockets-change.md b/.changeset/stale-rockets-change.md new file mode 100644 index 0000000..96ab828 --- /dev/null +++ b/.changeset/stale-rockets-change.md @@ -0,0 +1,5 @@ +--- +"saleor-app-data-importer": patch +--- + +Add valid icon and color diff --git a/apps/data-importer/public/logo.svg b/apps/data-importer/public/logo.svg new file mode 100644 index 0000000..9971107 --- /dev/null +++ b/apps/data-importer/public/logo.svg @@ -0,0 +1,6 @@ + + + + + + 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 4603acd..59f3c24 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 @@ -183,6 +183,24 @@ const getNuvoSettings = (theme: SaleorTheme): SettingsAPI => { border: "1px dashed #ddd", }, }, + reviewEntries: { + root: { + backgroundColor: "transparent", + }, + table: { + th: { + backgroundColor: "transparent", + }, + td: { + normal: { + backgroundColor: "transparent", + }, + root: { + backgroundColor: "transparent", + }, + }, + }, + }, globals: { fontFamily: "Inter", backgroundColor: "transparent", diff --git a/apps/data-importer/src/modules/customers/customers-results/customers-importing-results.tsx b/apps/data-importer/src/modules/customers/customers-results/customers-importing-results.tsx index cae3fd7..cf90e2d 100644 --- a/apps/data-importer/src/modules/customers/customers-results/customers-importing-results.tsx +++ b/apps/data-importer/src/modules/customers/customers-results/customers-importing-results.tsx @@ -12,9 +12,9 @@ export const CustomersImportingResults = ({ const [importingStarted, setImportingStarted] = useState(false); return ( -
+
- Customers rows from imported file + Customers rows from the imported file diff --git a/apps/data-importer/src/pages/_app.tsx b/apps/data-importer/src/pages/_app.tsx index e1eb794..59c82ea 100644 --- a/apps/data-importer/src/pages/_app.tsx +++ b/apps/data-importer/src/pages/_app.tsx @@ -3,11 +3,14 @@ import "../styles/globals.css"; import { Theme } from "@material-ui/core/styles"; import { AppBridge, AppBridgeProvider } from "@saleor/app-sdk/app-bridge"; import { RoutePropagator } from "@saleor/app-sdk/app-bridge/next"; -import { ThemeProvider as MacawUIThemeProvider } from "@saleor/macaw-ui"; +import { + dark, + light, + SaleorThemeColors, + ThemeProvider as MacawUIThemeProvider, +} from "@saleor/macaw-ui"; import React, { PropsWithChildren, useEffect } from "react"; import { AppProps } from "next/app"; - -import GraphQLProvider from "../providers/GraphQLProvider"; import { ThemeSynchronizer } from "../lib/theme-synchronizer"; import { NoSSRWrapper } from "../no-ssr-wrapper"; @@ -17,6 +20,29 @@ const themeOverrides: Partial = { */ }; +type PalettesOverride = Record<"light" | "dark", SaleorThemeColors>; + +/** + * Temporary override of colors, to match new dashboard palette. + * Long term this will be replaced with Macaw UI 2.x with up to date design tokens + */ +const palettes: PalettesOverride = { + light: { + ...light, + background: { + default: "#fff", + paper: "#fff", + }, + }, + dark: { + ...dark, + background: { + default: "hsla(211, 42%, 14%, 1)", + paper: "hsla(211, 42%, 14%, 1)", + }, + }, +}; + /** * Ensure instance is a singleton. * TODO: This is React 18 issue, consider hiding this workaround inside app-sdk @@ -27,7 +53,7 @@ const appBridgeInstance = typeof window !== "undefined" ? new AppBridge() : unde * That's a hack required by Macaw-UI incompatibility with React@18 */ const ThemeProvider = MacawUIThemeProvider as React.FC< - PropsWithChildren<{ overrides?: Partial; ssr: boolean }> + PropsWithChildren<{ overrides?: Partial; ssr: boolean; palettes: PalettesOverride }> >; function NextApp({ Component, pageProps }: AppProps) { @@ -44,7 +70,7 @@ function NextApp({ Component, pageProps }: AppProps) { return ( - + diff --git a/apps/data-importer/src/pages/importer.tsx b/apps/data-importer/src/pages/importer.tsx index 404d930..48412a7 100644 --- a/apps/data-importer/src/pages/importer.tsx +++ b/apps/data-importer/src/pages/importer.tsx @@ -11,8 +11,7 @@ type Tab = "customers"; const useStyles = makeStyles((theme: SaleorTheme) => ({ wrapper: { - border: `1px solid ${theme.palette.divider}`, - minHeight: `calc(100vh - 100px)`, + minHeight: `100vh`, }, })); @@ -35,7 +34,7 @@ const ImporterPage: NextPage = () => {
} + icon={} />} name="Data Importer" author="By Saleor Commerce" rightColumnContent={ diff --git a/apps/data-importer/src/public/favicon.ico b/apps/data-importer/src/public/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/apps/data-importer/src/public/favicon.ico and /dev/null differ diff --git a/apps/data-importer/src/public/vercel.svg b/apps/data-importer/src/public/vercel.svg deleted file mode 100644 index fbf0e25..0000000 --- a/apps/data-importer/src/public/vercel.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/packages/shared/src/app-icon/app-icon.tsx b/packages/shared/src/app-icon/app-icon.tsx index af14de3..0677681 100644 --- a/packages/shared/src/app-icon/app-icon.tsx +++ b/packages/shared/src/app-icon/app-icon.tsx @@ -6,7 +6,6 @@ import clsx from "clsx"; const useStyles = makeStyles(({ props }) => { return { appIconContainer: { - background: "rgb(58, 86, 199)", display: "flex", flexDirection: "column", justifyContent: "center", @@ -25,11 +24,17 @@ type Props = HTMLProps & { icon?: ReactNode; }; -export function AppIcon({ className, children, text, icon, ...props }: Props) { +export function AppIcon({ className, children, text, icon, theme, ...props }: Props) { const styles = useStyles(); return ( -
+
{text && {text}} {icon && icon}