Improve styles

.changeset/stale-rockets-change.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-data-importer": patch
+---
+
+Add valid icon and color

apps/data-importer/public/logo.svg

@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.3333 4.5C26.53 4.5 27.5 5.47005 27.5 6.66667V10.6667C27.5 11.1269 27.1269 11.5 26.6667 11.5C26.2064 11.5 25.8333 11.1269 25.8333 10.6667V6.66667C25.8333 6.39052 25.6095 6.16667 25.3333 6.16667H6.66667C6.39053 6.16667 6.16667 6.39052 6.16667 6.66667V21.3333C6.16667 21.6095 6.39053 21.8333 6.66667 21.8333H8.66667C9.1269 21.8333 9.5 22.2064 9.5 22.6667C9.5 23.1269 9.1269 23.5 8.66667 23.5H6.66667C5.47005 23.5 4.5 22.53 4.5 21.3333V6.66667C4.5 5.47005 5.47005 4.5 6.66667 4.5H25.3333Z" fill="white"/>
+<path d="M9.33333 10.6667C10.0697 10.6667 10.6667 10.0697 10.6667 9.33333C10.6667 8.59695 10.0697 8 9.33333 8C8.59695 8 8 8.59695 8 9.33333C8 10.0697 8.59695 10.6667 9.33333 10.6667Z" fill="white"/>
+<path d="M14.6667 9.33333C14.6667 10.0697 14.0697 10.6667 13.3333 10.6667C12.597 10.6667 12 10.0697 12 9.33333C12 8.59695 12.597 8 13.3333 8C14.0697 8 14.6667 8.59695 14.6667 9.33333Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3333 13.8333C12.1367 13.8333 11.1667 14.8034 11.1667 16V25.3333C11.1667 26.53 12.1367 27.5 13.3333 27.5H26.6667C27.8633 27.5 28.8333 26.53 28.8333 25.3333V16C28.8333 14.8034 27.8633 13.8333 26.6667 13.8333H13.3333ZM12.8333 25.3333V19.5H16.5V25.8333H13.3333C13.0572 25.8333 12.8333 25.6095 12.8333 25.3333ZM12.8333 16V17.8333H16.5V15.5H13.3333C13.0572 15.5 12.8333 15.7239 12.8333 16ZM26.6667 25.8333H18.1667V19.5H27.1667V25.3333C27.1667 25.6095 26.9428 25.8333 26.6667 25.8333ZM18.1667 17.8333H27.1667V16C27.1667 15.7239 26.9428 15.5 26.6667 15.5H18.1667V17.8333Z" fill="white"/>
+</svg>

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

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 (
-    <div>
+    <div style={{ marginTop: 20 }}>
       <Typography paragraph variant="h3">
-        Customers rows from imported file
+        Customers rows from the imported file
       </Typography>
 
       <Typography paragraph>

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<Theme> = {
    */
 };
 
+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<Theme>; ssr: boolean }>
+  PropsWithChildren<{ overrides?: Partial<Theme>; ssr: boolean; palettes: PalettesOverride }>
 >;
 
 function NextApp({ Component, pageProps }: AppProps) {
@@ -44,7 +70,7 @@ function NextApp({ Component, pageProps }: AppProps) {
   return (
     <NoSSRWrapper>
       <AppBridgeProvider appBridgeInstance={appBridgeInstance}>
-        <ThemeProvider overrides={themeOverrides} ssr>
+        <ThemeProvider overrides={themeOverrides} ssr palettes={palettes}>
           <ThemeSynchronizer />
           <RoutePropagator />
           <Component {...pageProps} />

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 = () => {
     <div className={styles.wrapper}>
       <TitleBar
         bottomMargin
-        icon={<AppIcon theme="rgb(58, 86, 199)" text="DI" />}
+        icon={<AppIcon theme="#3BD579" icon={<img src="/logo.svg" />} />}
         name="Data Importer"
         author="By Saleor Commerce"
         rightColumnContent={

apps/data-importer/src/public/vercel.svg

@@ -1,4 +0,0 @@
-<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
-</svg>

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<HTMLDivElement> & {
   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 (
-    <div className={clsx(styles.appIconContainer, className)} {...props}>
+    <div
+      className={clsx(styles.appIconContainer, className)}
+      style={{
+        background: theme,
+      }}
+      {...props}
+    >
       {text && <Typography variant="h2">{text}</Typography>}
       {icon && icon}
     </div>