📧 Improve layout and white-space (#546)

* Bump macaw version

* Make channels section expandable based on override setting

* Add margins to dangerous section, improve copy

* Add padding between section header and its description

* Limit width of provider selection boxes

* Use proper variant of the button

* More whitespace between description and box in the sections

* Remove text

* Revert "Make channels section expandable based on override setting"

This reverts commit e107c5e990b4110156043ed494fb0054bd936654.

* Add changelog

* Improve grammar

Co-authored-by: Adrian Pilarczyk <admin@peelar.dev>

---------

Co-authored-by: Adrian Pilarczyk <admin@peelar.dev>

.changeset/odd-berries-think.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-emails-and-messages": patch
+---
+
+Improved layout spacing across the application.

apps/emails-and-messages/src/components/box-footer.tsx

@@ -9,6 +9,7 @@ export const BoxFooter = (props: BoxProps) => {
       borderColor="neutralDefault"
       padding={defaultPadding}
       display="flex"
+      gap={defaultPadding}
       flexDirection="row"
       justifyContent="flex-end"
       {...props}

apps/emails-and-messages/src/components/section-with-description.tsx

@@ -7,9 +7,9 @@ interface SectionWithDescriptionProps {
 }
 export const SectionWithDescription = (props: SectionWithDescriptionProps) => {
   return (
-    <Box display="grid" gridTemplateColumns={{ desktop: 3, mobile: 1 }} gap={3}>
+    <Box display="grid" gridTemplateColumns={{ desktop: 3, mobile: 1 }} gap={12}>
       <Box>
-        <Text variant="heading" as="h2">
+        <Text variant="heading" as="h2" paddingBottom={2}>
           {props.title}
         </Text>
         {props.description}

apps/emails-and-messages/src/modules/app-configuration/ui/messaging-providers-box.tsx

@@ -4,13 +4,12 @@ import { BoxWithBorder } from "../../../components/box-with-border";
 import { BoxFooter } from "../../../components/box-footer";
 import { defaultPadding } from "../../../components/ui-defaults";
 import { useRouter } from "next/router";
-import Image from "next/image";
-import sendgrid from "../../../public/sendgrid.png";
-import smtp from "../../../public/smtp.svg";
 import { smtpUrls } from "../../smtp/urls";
 import { sendgridUrls } from "../../sendgrid/urls";
 import { appUrls } from "../urls";
 import React from "react";
+import { SendgridLogo } from "../../sendgrid/ui/sendgrid-logo";
+import { SmtpLogo } from "../../smtp/ui/smtp-logo";
 
 const NoExistingConfigurations = () => {
   const { push } = useRouter();
@@ -20,8 +19,7 @@ const NoExistingConfigurations = () => {
   };
 
   return (
-    <BoxWithBorder padding={7} display="grid" alignItems="center" justifyContent="center">
+    <BoxWithBorder padding={10} display="grid" alignItems="center" justifyContent="center">
-      <Text>No providers configured yet</Text>
       <Button onClick={redirectToProvidersSelection}>Add first provider</Button>
     </BoxWithBorder>
   );
@@ -80,9 +78,9 @@ export const MessagingProvidersBox = ({
   const getProviderLogo = (configuration: ConfigurationListItem) => {
     switch (configuration.provider) {
       case "smtp":
-        return <Image alt="SMTP logo" src={smtp} height={20} width={20} />;
+        return <SmtpLogo height={20} width={20} />;
       case "sendgrid":
-        return <Image alt="Sendgrid logo" src={sendgrid} height={20} width={20} />;
+        return <SendgridLogo height={20} width={20} />;
     }
   };
 

apps/emails-and-messages/src/modules/app-configuration/ui/provider-selection-box.tsx

@@ -5,20 +5,28 @@ import { BoxFooter } from "../../../components/box-footer";
 
 interface ProviderSelectionBoxProps {
   providerName: string;
+  providerLogo?: React.ReactNode;
   providerDescription: string;
   onClick: () => void;
 }
 
 export const ProviderSelectionBox = (props: ProviderSelectionBoxProps) => {
   return (
-    <BoxWithBorder display="grid" alignItems="center" justifyContent="center">
+    <BoxWithBorder __maxWidth={350} display="flex" flexDirection="column">
-      <Box padding={defaultPadding} display="grid" alignItems="center" justifyContent="center">
+      <Box padding={defaultPadding} flexGrow="1">
-        <Text variant="heading">{props.providerName}</Text>
+        <Box
-      </Box>
+          display="flex"
-      <Box padding={defaultPadding} display="grid" alignItems="center" justifyContent="center">
+          gap={2}
+          alignItems="center"
+          justifyContent="center"
+          paddingBottom={defaultPadding}
+        >
+          {props.providerLogo}
+          <Text variant="heading">{props.providerName}</Text>
+        </Box>
         <Text>{props.providerDescription}</Text>
       </Box>
-      <BoxFooter justifyContent="center" alignItems="center">
+      <BoxFooter>
         <Button onClick={props.onClick}>Choose</Button>
       </BoxFooter>
     </BoxWithBorder>

apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-dangerous-section.tsx

@@ -45,25 +45,20 @@ export const SendgridDangerousSection = ({ configuration }: SendgridDangerousSec
         })}
       >
         <BoxWithBorder backgroundColor="surfaceCriticalSubdued" borderColor="criticalSubdued">
-          <Box padding={defaultPadding}>
+          <Box padding={defaultPadding} display="flex" flexDirection="column" gap={2}>
-            <Text variant="heading" as="h2">
+            <Text variant="heading" as="h1">
-              Remove provider
+              Remove provider configuration
             </Text>
-            <Text as="p">You can remove provider configuration.</Text>
             <Text as="p">
               This operation will remove all settings related to this configuration. Data will be
-              permanently removed from the App.{" "}
+              permanently removed from the App.
             </Text>
-            <Text as="p">This operation cant be undone.</Text>
+            <Text as="p">This operation can&#39;t be undone.</Text>
-            <Text as="p">You still can create new configuration.</Text>
+            <Text as="p">You can still create a new configuration.</Text>
           </Box>
           <BoxFooter borderColor="criticalSubdued">
-            <Button
+            <Button variant="error" type="submit">
-              color="textNeutralSubdued"
+              Remove configuration
-              backgroundColor="interactiveCriticalDefault"
-              type="submit"
-            >
-              Remove provider
             </Button>
           </BoxFooter>
         </BoxWithBorder>

apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-logo.tsx

@@ -0,0 +1,11 @@
+import Image from "next/image";
+import sendgrid from "../../../public/sendgrid.png";
+
+interface SendgridLogoProps {
+  height: number;
+  width: number;
+}
+
+export const SendgridLogo = ({ height, width }: SendgridLogoProps) => {
+  return <Image alt="Sendgrid logo" src={sendgrid} height={height} width={width} />;
+};

apps/emails-and-messages/src/modules/smtp/ui/smtp-dangerous-section.tsx

@@ -49,25 +49,20 @@ export const SmtpDangerousSection = ({ configuration }: SmtpDangerousSectionProp
         })}
       >
         <BoxWithBorder backgroundColor="surfaceCriticalSubdued" borderColor="criticalSubdued">
-          <Box padding={defaultPadding}>
+          <Box padding={defaultPadding} display="flex" flexDirection="column" gap={2}>
             <Text variant="heading" as="h1">
-              Remove provider
+              Remove provider configuration
             </Text>
-            <Text as="p">You can remove provider configuration.</Text>
             <Text as="p">
               This operation will remove all settings related to this configuration. Data will be
               permanently removed from the App.
             </Text>
-            <Text as="p">This operation cant be undone.</Text>
+            <Text as="p">This operation can&#39;t be undone.</Text>
-            <Text as="p">You still can create new configuration.</Text>
+            <Text as="p">You can still create a new configuration.</Text>
           </Box>
           <BoxFooter borderColor="criticalSubdued">
-            <Button
+            <Button variant="error" type="submit">
-              color="textNeutralSubdued"
+              Remove configuration
-              backgroundColor="interactiveCriticalDefault"
-              type="submit"
-            >
-              Remove provider
             </Button>
           </BoxFooter>
         </BoxWithBorder>

apps/emails-and-messages/src/modules/smtp/ui/smtp-logo.tsx

@@ -0,0 +1,11 @@
+import Image from "next/image";
+import smtp from "../../../public/smtp.svg";
+
+interface SmtpLogoProps {
+  height: number;
+  width: number;
+}
+
+export const SmtpLogo = ({ height, width }: SmtpLogoProps) => {
+  return <Image alt="SMTP logo" src={smtp} height={height} width={width} />;
+};

apps/emails-and-messages/src/pages/configuration/choose-provider.tsx

@@ -7,6 +7,8 @@ import { sendgridUrls } from "../../modules/sendgrid/urls";
 import { smtpUrls } from "../../modules/smtp/urls";
 import { appUrls } from "../../modules/app-configuration/urls";
 import { BasicLayout } from "../../components/basic-layout";
+import { SendgridLogo } from "../../modules/sendgrid/ui/sendgrid-logo";
+import { SmtpLogo } from "../../modules/smtp/ui/smtp-logo";
 
 const ChooseProviderPage: NextPage = () => {
   const { push } = useRouter();
@@ -27,12 +29,14 @@ const ChooseProviderPage: NextPage = () => {
         <Box display="grid" gridTemplateColumns={2} gap={3}>
           <ProviderSelectionBox
             providerName="Sendgrid"
+            providerLogo={<SendgridLogo height={20} width={20} />}
             providerDescription="Use dynamic templates created in Sendgrid dashboard to send messages. Event data will be forwarded to Sendgrid."
             onClick={() => push(sendgridUrls.newConfiguration())}
           />
 
           <ProviderSelectionBox
             providerName="SMTP"
+            providerLogo={<SmtpLogo height={20} width={20} />}
             providerDescription="Provide your own SMTP credentials and map Saleor event to custom MJML templates."
             onClick={() => push(smtpUrls.newConfiguration())}
           />

apps/emails-and-messages/src/pages/configuration/sendgrid/[configurationId].tsx

@@ -3,7 +3,7 @@ import { NextPage } from "next";
 import { trpcClient } from "../../../modules/trpc/trpc-client";
 import { useRouter } from "next/router";
 import { SendgridBasicInformationSection } from "../../../modules/sendgrid/ui/sendgrid-basic-information-section";
-import { SendgridDangerousSection } from "../../../modules/sendgrid/ui/sendgrid-dangrous-section";
+import { SendgridDangerousSection } from "../../../modules/sendgrid/ui/sendgrid-dangerous-section";
 import { ApiConnectionSection } from "../../../modules/sendgrid/ui/api-connection-section";
 import { SendgridSenderSection } from "../../../modules/sendgrid/ui/sendgrid-sender-section";
 import { SendgridEventsSection } from "../../../modules/sendgrid/ui/sendgrid-events-section";

apps/emails-and-messages/src/pages/configuration/smtp/[configurationId].tsx

@@ -7,7 +7,7 @@ import { BasicLayout } from "../../../components/basic-layout";
 import { SmtpBasicInformationSection } from "../../../modules/smtp/ui/smtp-basic-information-section";
 import { SmtpSection } from "../../../modules/smtp/ui/smtp-section";
 import { SmtpSenderSection } from "../../../modules/smtp/ui/smtp-sender-section";
-import { SmtpDangerousSection } from "../../../modules/smtp/ui/smtp-dangrous-section";
+import { SmtpDangerousSection } from "../../../modules/smtp/ui/smtp-dangerous-section";
 import { SmtpChannelsSection } from "../../../modules/smtp/ui/smtp-channels-section";
 import { SmtpEventsSection } from "../../../modules/smtp/ui/smtp-events-section";
 import { appUrls } from "../../../modules/app-configuration/urls";

apps/search/src/views/configuration/configuration.view.tsx

@@ -26,6 +26,7 @@ export const ConfigurationView = () => {
       />
 
       <AppSection
+        marginTop={14}
         heading="Algolia settings"
         mainContent={<AlgoliaConfigurationForm />}
         sideContent={
@@ -44,6 +45,7 @@ export const ConfigurationView = () => {
       />
       <AppSection
         includePadding
+        marginTop={14}
         heading="Index products"
         mainContent={<ImportProductsToAlgolia />}
         sideContent={