Display custom Apps' logos

src/apps/components/AppAvatar/AppAvatar.tsx

@@ -2,39 +2,33 @@ import { AppLogo } from "@dashboard/apps/types";
 import { Box, GenericAppIcon } from "@saleor/macaw-ui/next";
 import React from "react";
 
-const avatarSize = 8;
-
 export const AppAvatar: React.FC<{
   logo?: AppLogo | undefined;
-}> = ({ logo }) => {
-  if (logo?.source) {
-    return (
-      <Box
-        __backgroundColor={logo?.color}
-        padding={1}
-        width={avatarSize}
-        height={avatarSize}
-        borderRadius={2}
-        display="flex"
-        placeItems="center"
-      >
-        <Box as="img" src={logo.source} />
-      </Box>
-    );
-  } else {
-    return (
-      <Box
-        __backgroundColor={logo?.color}
-        backgroundColor="surfaceNeutralSubdued"
-        padding={1}
-        width={avatarSize}
-        height={avatarSize}
-        display="flex"
-        placeItems="center"
-        borderRadius={2}
-      >
-        <GenericAppIcon size="large" color="iconNeutralSubdued" />
-      </Box>
-    );
-  }
-};
+  size?: 8 | 12;
+}> = ({ logo, size = 8 }) =>
+  logo ? (
+    <Box
+      width={size}
+      height={size}
+      display="flex"
+      placeItems="center"
+      borderRadius={2}
+    >
+      <Box as="img" src={logo.source} width={"100%"} />
+    </Box>
+  ) : (
+    <Box
+      padding={1}
+      backgroundColor="surfaceNeutralSubdued"
+      width={size}
+      height={size}
+      display="flex"
+      placeItems="center"
+      borderRadius={2}
+      borderWidth={1}
+      borderColor={"neutralPlain"}
+      borderStyle={"solid"}
+    >
+      <GenericAppIcon size="large" color="iconNeutralSubdued" />
+    </Box>
+  );

src/apps/components/AppDetailsPage/Header.tsx

@@ -1,9 +1,8 @@
+import { AppPageNav } from "@dashboard/apps/components/AppPage/AppPageNav";
 import { AppUrls } from "@dashboard/apps/urls";
-import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { AppQuery } from "@dashboard/graphql";
 import React from "react";
 
-import DeactivatedText from "../DeactivatedText";
 import HeaderOptions from "./HeaderOptions";
 
 interface HeaderProps {
@@ -36,14 +35,17 @@ const Header: React.FC<HeaderProps> = ({
 
   return (
     <>
-      <TopNav
-        href={getBackButtonUrl()}
-        title={
-          <>
-            {data?.name} {!data?.isActive && <DeactivatedText />}
-          </>
-        }
+      <AppPageNav
+        name={data.name}
+        supportUrl={data.supportUrl}
+        homepageUrl={data.homepageUrl}
+        author={data.author}
+        appLogoUrl={data.brand?.logo.default}
+        appId={data.id}
+        goBackUrl={getBackButtonUrl()}
+        showMangeAppButton={false}
       />
+
       <HeaderOptions
         data={data}
         onAppActivateOpen={onAppActivateOpen}

src/apps/components/AppDetailsPage/HeaderOptions.tsx

@@ -1,4 +1,3 @@
-import ExternalLink from "@dashboard/components/ExternalLink";
 import Skeleton from "@dashboard/components/Skeleton";
 import { AppQuery } from "@dashboard/graphql";
 import { buttonMessages } from "@dashboard/intl";
@@ -10,8 +9,6 @@ import { FormattedMessage } from "react-intl";
 
 import activateIcon from "../../../../assets/images/activate-icon.svg";
 import deleteIcon from "../../../../assets/images/delete.svg";
-import supportIcon from "../../../../assets/images/support-icon.svg";
-import messages from "./messages";
 import { useStyles } from "./styles";
 
 interface HeaderOptionsProps {
@@ -41,14 +38,6 @@ const HeaderOptions: React.FC<HeaderOptionsProps> = ({
   return (
     <Box marginX={7}>
       <div className={classes.appHeaderLinks}>
-        <ExternalLink
-          className={classes.headerLinkContainer}
-          href={data.supportUrl || ""}
-          target="_blank"
-        >
-          <SVG src={supportIcon} />
-          <FormattedMessage {...messages.supportLink} />
-        </ExternalLink>
         <ButtonBase
           className={classes.headerLinkContainer}
           disableRipple

src/apps/components/AppInstallPage/AppInstallPage.tsx

@@ -1,5 +1,7 @@
-import saleorDarkLogoSmall from "@assets/images/logo-dark-small.svg";
 import plusIcon from "@assets/images/plus-icon.svg";
+import saleorLogoDarkMode from "@assets/images/sidebar-deafult-logo-darkMode.png";
+import saleorLogoLightMode from "@assets/images/sidebar-default-logo.png";
+import { AppAvatar } from "@dashboard/apps/components/AppAvatar/AppAvatar";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import CardTitle from "@dashboard/components/CardTitle";
 import Hr from "@dashboard/components/Hr";
@@ -8,14 +10,14 @@ import Skeleton from "@dashboard/components/Skeleton";
 import { AppFetchMutation, AppInstallMutation } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import { buttonMessages } from "@dashboard/intl";
+import { useTheme } from "@dashboard/theme";
 import {
   Card,
   CardContent,
   CircularProgress,
   Typography,
 } from "@material-ui/core";
-import { Box, Button, GenericAppIcon } from "@saleor/macaw-ui/next";
-import clsx from "clsx";
+import { Box, Button } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -39,6 +41,18 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
 }) => {
   const intl = useIntl();
   const classes = useStyles();
+  const { theme } = useTheme();
+
+  const getSaleorLogoUrl = () => {
+    switch (theme) {
+      case "defaultLight":
+        return saleorLogoLightMode;
+      case "defaultDark":
+        return saleorLogoDarkMode;
+      default:
+        throw new Error("Invalid theme mode, should not happen.");
+    }
+  };
 
   const name = data?.name || "";
 
@@ -62,18 +76,27 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
                 <CircularProgress />
               ) : (
                 <div className={classes.installAppContainer}>
-                  <div
-                    className={clsx(
-                      classes.installIcon,
-                      classes.installSaleorIcon,
-                    )}
+                  <Box
+                    width={12}
+                    height={12}
+                    display="flex"
+                    placeItems="center"
+                    borderRadius={2}
+                    overflow="hidden"
                   >
-                    <img src={saleorDarkLogoSmall} alt="" />
-                  </div>
+                    <img src={getSaleorLogoUrl()} alt="Saleor" />
+                  </Box>
                   <img src={plusIcon} alt="" />
-                  <div className={classes.installIcon}>
-                    <GenericAppIcon />
-                  </div>
+                  <AppAvatar
+                    size={12}
+                    logo={
+                      data?.brand?.logo.default
+                        ? {
+                            source: data?.brand?.logo.default,
+                          }
+                        : undefined
+                    }
+                  />
                 </div>
               )}
             </CardContent>

src/apps/components/AppInstallPage/styles.ts

@@ -29,17 +29,6 @@ export const useStyles = makeStyles(
       justifyContent: "center",
       position: "relative",
     },
-    installIcon: {
-      alignItems: "center",
-      backgroundColor: theme.palette.divider,
-      border: `1px solid ${theme.palette.divider}`,
-      borderRadius: "50%",
-      display: "flex",
-      height: theme.spacing(9),
-      justifyContent: "center",
-      overflow: "hidden",
-      width: theme.spacing(9),
-    },
     installPermissionTitle: {
       fontWeight: 500,
     },
@@ -51,13 +40,6 @@ export const useStyles = makeStyles(
       color: theme.palette.text.hint,
       marginTop: theme.spacing(1),
     },
-    installSaleorIcon: {
-      backgroundColor:
-        theme.palette.type === "dark"
-          ? theme.palette.saleor.gray.default
-          : theme.palette.saleor.main[1],
-      border: "none",
-    },
     installSpacer: {
       margin: theme.spacing(2, 0),
     },

src/apps/components/AppListPage/utils.test.ts

@@ -187,6 +187,7 @@ describe("App List verified installed apps util", () => {
             name: "Manage customers.",
           },
         ],
+        brand: null,
       },
       {
         __typename: "App",
@@ -209,6 +210,7 @@ describe("App List verified installed apps util", () => {
             name: "Manage customers.",
           },
         ],
+        brand: null,
       },
     ];
     const installableMarketplaceApps: GetV2SaleorAppsResponse.ReleasedSaleorApp[] =
@@ -244,10 +246,6 @@ describe("App List verified installed apps util", () => {
       {
         app: installedApps[0],
         isExternal: false,
-        logo: {
-          source: "https://www.example.com/logo",
-          color: "#000000",
-        },
       },
       {
         app: installedApps[1],
@@ -279,6 +277,7 @@ describe("App List verified installable marketplace apps util", () => {
             name: "Manage customers.",
           },
         ],
+        brand: null,
       },
       {
         __typename: "App",
@@ -301,6 +300,7 @@ describe("App List verified installable marketplace apps util", () => {
             name: "Manage customers.",
           },
         ],
+        brand: null,
       },
     ];
     const installableMarketplaceApps: GetV2SaleorAppsResponse.ReleasedSaleorApp[] =

src/apps/components/AppListPage/utils.ts

@@ -48,7 +48,6 @@ export const getVerifiedInstalledApps = (
     return {
       app,
       isExternal: !marketplaceApp,
-      logo: marketplaceApp?.logo,
     };
   });
 
@@ -65,7 +64,6 @@ export const getVerifiedAppsInstallations = (
     return {
       appInstallation,
       isExternal: !marketplaceApp,
-      logo: marketplaceApp?.logo,
     };
   });