djkato/saleor-apps-redis_apl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

📧 Improve layout and white-space (#546)

Browse source 
* 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>
This commit is contained in:
Krzysztof Wolski 2023-06-12 13:18:31 +02:00 committed by GitHub
parent 928c727c35
commit cce2fbc3d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 71 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/odd-berries-think.md Normal file
View file

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

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

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

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

@ -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}

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

@ -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">
<Text>No providers configured yet</Text>
<BoxWithBorder padding={10} display="grid" alignItems="center" justifyContent="center">
<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} />;
}
};

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

@ -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">
<Box padding={defaultPadding} display="grid" alignItems="center" justifyContent="center">
<BoxWithBorder __maxWidth={350} display="flex" flexDirection="column">
<Box padding={defaultPadding} flexGrow="1">
<Box
display="flex"
gap={2}
alignItems="center"
justifyContent="center"
paddingBottom={defaultPadding}
>
{props.providerLogo}
<Text variant="heading">{props.providerName}</Text>
</Box>
<Box padding={defaultPadding} display="grid" alignItems="center" justifyContent="center">
<Text>{props.providerDescription}</Text>
</Box>
<BoxFooter justifyContent="center" alignItems="center">
<BoxFooter>
<Button onClick={props.onClick}>Choose</Button>
</BoxFooter>
</BoxWithBorder>

21
apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-dangrous-section.tsx → apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-dangerous-section.tsx
View file

@ -45,25 +45,20 @@ export const SendgridDangerousSection = ({ configuration }: SendgridDangerousSec
})}
>
<BoxWithBorder backgroundColor="surfaceCriticalSubdued" borderColor="criticalSubdued">
<Box padding={defaultPadding}>
<Text variant="heading" as="h2">
Remove provider
<Box padding={defaultPadding} display="flex" flexDirection="column" gap={2}>
<Text variant="heading" as="h1">
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">You still can create new configuration.</Text>
<Text as="p">This operation can&#39;t be undone.</Text>
<Text as="p">You can still create a new configuration.</Text>
</Box>
<BoxFooter borderColor="criticalSubdued">
<Button
color="textNeutralSubdued"
backgroundColor="interactiveCriticalDefault"
type="submit"
>
Remove provider
<Button variant="error" type="submit">
Remove configuration
</Button>
</BoxFooter>
</BoxWithBorder>

11
apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-logo.tsx Normal file
View file

@ -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} />;
};

17
apps/emails-and-messages/src/modules/smtp/ui/smtp-dangrous-section.tsx → apps/emails-and-messages/src/modules/smtp/ui/smtp-dangerous-section.tsx
View file

@ -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">You still can create new configuration.</Text>
<Text as="p">This operation can&#39;t be undone.</Text>
<Text as="p">You can still create a new configuration.</Text>
</Box>
<BoxFooter borderColor="criticalSubdued">
<Button
color="textNeutralSubdued"
backgroundColor="interactiveCriticalDefault"
type="submit"
>
Remove provider
<Button variant="error" type="submit">
Remove configuration
</Button>
</BoxFooter>
</BoxWithBorder>

11
apps/emails-and-messages/src/modules/smtp/ui/smtp-logo.tsx Normal file
View file

@ -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} />;
};

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

@ -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())}
/>

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

@ -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";

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

@ -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";

2
apps/search/src/views/configuration/configuration.view.tsx
View file

@ -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={