From cce2fbc3d58e52ae24be395e3edfaffbac6d1a04 Mon Sep 17 00:00:00 2001 From: Krzysztof Wolski Date: Mon, 12 Jun 2023 13:18:31 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=A7=20Improve=20layout=20and=20white-s?= =?UTF-8?q?pace=20(#546)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --------- Co-authored-by: Adrian Pilarczyk --- .changeset/odd-berries-think.md | 5 +++++ .../src/components/box-footer.tsx | 1 + .../components/section-with-description.tsx | 4 ++-- .../ui/messaging-providers-box.tsx | 12 +++++------ .../ui/provider-selection-box.tsx | 20 ++++++++++++------ ...ion.tsx => sendgrid-dangerous-section.tsx} | 21 +++++++------------ .../src/modules/sendgrid/ui/sendgrid-logo.tsx | 11 ++++++++++ ...section.tsx => smtp-dangerous-section.tsx} | 17 ++++++--------- .../src/modules/smtp/ui/smtp-logo.tsx | 11 ++++++++++ .../pages/configuration/choose-provider.tsx | 4 ++++ .../sendgrid/[configurationId].tsx | 2 +- .../configuration/smtp/[configurationId].tsx | 2 +- .../configuration/configuration.view.tsx | 2 ++ 13 files changed, 71 insertions(+), 41 deletions(-) create mode 100644 .changeset/odd-berries-think.md rename apps/emails-and-messages/src/modules/sendgrid/ui/{sendgrid-dangrous-section.tsx => sendgrid-dangerous-section.tsx} (79%) create mode 100644 apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-logo.tsx rename apps/emails-and-messages/src/modules/smtp/ui/{smtp-dangrous-section.tsx => smtp-dangerous-section.tsx} (83%) create mode 100644 apps/emails-and-messages/src/modules/smtp/ui/smtp-logo.tsx diff --git a/.changeset/odd-berries-think.md b/.changeset/odd-berries-think.md new file mode 100644 index 0000000..7a734dc --- /dev/null +++ b/.changeset/odd-berries-think.md @@ -0,0 +1,5 @@ +--- +"saleor-app-emails-and-messages": patch +--- + +Improved layout spacing across the application. diff --git a/apps/emails-and-messages/src/components/box-footer.tsx b/apps/emails-and-messages/src/components/box-footer.tsx index 043e203..22df536 100644 --- a/apps/emails-and-messages/src/components/box-footer.tsx +++ b/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} diff --git a/apps/emails-and-messages/src/components/section-with-description.tsx b/apps/emails-and-messages/src/components/section-with-description.tsx index 20dd437..43965e6 100644 --- a/apps/emails-and-messages/src/components/section-with-description.tsx +++ b/apps/emails-and-messages/src/components/section-with-description.tsx @@ -7,9 +7,9 @@ interface SectionWithDescriptionProps { } export const SectionWithDescription = (props: SectionWithDescriptionProps) => { return ( - + - + {props.title} {props.description} diff --git a/apps/emails-and-messages/src/modules/app-configuration/ui/messaging-providers-box.tsx b/apps/emails-and-messages/src/modules/app-configuration/ui/messaging-providers-box.tsx index 6c49fa1..0748548 100644 --- a/apps/emails-and-messages/src/modules/app-configuration/ui/messaging-providers-box.tsx +++ b/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 ( - - No providers configured yet + ); @@ -80,9 +78,9 @@ export const MessagingProvidersBox = ({ const getProviderLogo = (configuration: ConfigurationListItem) => { switch (configuration.provider) { case "smtp": - return SMTP logo; + return ; case "sendgrid": - return Sendgrid logo; + return ; } }; diff --git a/apps/emails-and-messages/src/modules/app-configuration/ui/provider-selection-box.tsx b/apps/emails-and-messages/src/modules/app-configuration/ui/provider-selection-box.tsx index 8f533d5..f2fea7c 100644 --- a/apps/emails-and-messages/src/modules/app-configuration/ui/provider-selection-box.tsx +++ b/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 ( - - - {props.providerName} - - + + + + {props.providerLogo} + {props.providerName} + {props.providerDescription} - + diff --git a/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-dangrous-section.tsx b/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-dangerous-section.tsx similarity index 79% rename from apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-dangrous-section.tsx rename to apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-dangerous-section.tsx index d83a170..535fe96 100644 --- a/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-dangrous-section.tsx +++ b/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-dangerous-section.tsx @@ -45,25 +45,20 @@ export const SendgridDangerousSection = ({ configuration }: SendgridDangerousSec })} > - - - Remove provider + + + Remove provider configuration - You can remove provider configuration. This operation will remove all settings related to this configuration. Data will be - permanently removed from the App.{" "} + permanently removed from the App. - This operation cant be undone. - You still can create new configuration. + This operation can't be undone. + You can still create a new configuration. - diff --git a/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-logo.tsx b/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-logo.tsx new file mode 100644 index 0000000..2e14c7c --- /dev/null +++ b/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 Sendgrid logo; +}; diff --git a/apps/emails-and-messages/src/modules/smtp/ui/smtp-dangrous-section.tsx b/apps/emails-and-messages/src/modules/smtp/ui/smtp-dangerous-section.tsx similarity index 83% rename from apps/emails-and-messages/src/modules/smtp/ui/smtp-dangrous-section.tsx rename to apps/emails-and-messages/src/modules/smtp/ui/smtp-dangerous-section.tsx index 0ee4afe..35c10c5 100644 --- a/apps/emails-and-messages/src/modules/smtp/ui/smtp-dangrous-section.tsx +++ b/apps/emails-and-messages/src/modules/smtp/ui/smtp-dangerous-section.tsx @@ -49,25 +49,20 @@ export const SmtpDangerousSection = ({ configuration }: SmtpDangerousSectionProp })} > - + - Remove provider + Remove provider configuration - You can remove provider configuration. This operation will remove all settings related to this configuration. Data will be permanently removed from the App. - This operation cant be undone. - You still can create new configuration. + This operation can't be undone. + You can still create a new configuration. - diff --git a/apps/emails-and-messages/src/modules/smtp/ui/smtp-logo.tsx b/apps/emails-and-messages/src/modules/smtp/ui/smtp-logo.tsx new file mode 100644 index 0000000..bf3bb76 --- /dev/null +++ b/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 SMTP logo; +}; diff --git a/apps/emails-and-messages/src/pages/configuration/choose-provider.tsx b/apps/emails-and-messages/src/pages/configuration/choose-provider.tsx index e13c252..c37481d 100644 --- a/apps/emails-and-messages/src/pages/configuration/choose-provider.tsx +++ b/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 = () => { } providerDescription="Use dynamic templates created in Sendgrid dashboard to send messages. Event data will be forwarded to Sendgrid." onClick={() => push(sendgridUrls.newConfiguration())} /> } providerDescription="Provide your own SMTP credentials and map Saleor event to custom MJML templates." onClick={() => push(smtpUrls.newConfiguration())} /> diff --git a/apps/emails-and-messages/src/pages/configuration/sendgrid/[configurationId].tsx b/apps/emails-and-messages/src/pages/configuration/sendgrid/[configurationId].tsx index 170d2c9..2645408 100644 --- a/apps/emails-and-messages/src/pages/configuration/sendgrid/[configurationId].tsx +++ b/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"; diff --git a/apps/emails-and-messages/src/pages/configuration/smtp/[configurationId].tsx b/apps/emails-and-messages/src/pages/configuration/smtp/[configurationId].tsx index b9a10b4..47cf70e 100644 --- a/apps/emails-and-messages/src/pages/configuration/smtp/[configurationId].tsx +++ b/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"; diff --git a/apps/search/src/views/configuration/configuration.view.tsx b/apps/search/src/views/configuration/configuration.view.tsx index 2d55bdd..a18f908 100644 --- a/apps/search/src/views/configuration/configuration.view.tsx +++ b/apps/search/src/views/configuration/configuration.view.tsx @@ -26,6 +26,7 @@ export const ConfigurationView = () => { /> } sideContent={ @@ -44,6 +45,7 @@ export const ConfigurationView = () => { /> } sideContent={