Improve styles and layout of the emails app (#287)

* Use whole width of the screen

* Make template editor responsive

* Use whole screen in configuration view

.changeset/eight-eagles-sin.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-emails-and-messages": patch
+---
+
+Improve styles and layout of the emails app configuration views. Make event template editing view responsive.

apps/emails-and-messages/src/modules/mjml/configuration/ui/mjml-configuration-form.tsx

@@ -21,7 +21,6 @@ const useStyles = makeStyles((theme) => ({
   sectionHeader: {
     marginTop: 20,
   },
-  form: {},
 }));
 
 type Props = {
@@ -35,12 +34,11 @@ export const MjmlConfigurationForm = (props: Props) => {
   const router = useRouter();
   const { appBridge } = useAppBridge();
 
-  const { handleSubmit, control, setValue, getValues, reset, setError } =
-    useForm<MjmlConfiguration>({
+  const { handleSubmit, control, reset, setError } = useForm<MjmlConfiguration>({
     defaultValues: props.initialData,
   });
 
-  const { mutate: createOrUpdateConfiguration, error: createOrUpdateError } =
+  const { mutate: createOrUpdateConfiguration } =
     trpcClient.mjmlConfiguration.updateOrCreateConfiguration.useMutation({
       onSuccess(data, variables) {
         router.replace(mjmlUrls.configuration(data.id));
@@ -97,7 +95,6 @@ export const MjmlConfigurationForm = (props: Props) => {
           ...data,
         });
       })}
-      className={styles.form}
     >
       {isNewConfiguration ? (
         <Typography variant="h2" paragraph>
@@ -268,8 +265,6 @@ export const MjmlConfigurationForm = (props: Props) => {
       <Button type="submit" fullWidth variant="primary">
         Save configuration
       </Button>
-
-      {createOrUpdateError && <span>{createOrUpdateError.message}</span>}
     </form>
   );
 };

apps/emails-and-messages/src/modules/mjml/configuration/ui/mjml-configuration-tab.tsx

@@ -25,6 +25,7 @@ const useStyles = makeStyles((theme) => {
       display: "flex",
       flexDirection: "column",
       gap: 20,
+      maxWidth: 600,
     },
   };
 });

apps/emails-and-messages/src/modules/mjml/configuration/ui/mjml-event-configuration-form.tsx

@@ -1,5 +1,5 @@
 import { Controller, useForm } from "react-hook-form";
-import { CircularProgress, TextField, TextFieldProps, Typography } from "@material-ui/core";
+import { CircularProgress, Grid, TextField, TextFieldProps, Typography } from "@material-ui/core";
 import {
   BackSmallIcon,
   Button,
@@ -26,13 +26,15 @@ import { examplePayloads } from "../../../event-handlers/default-payloads";
 const PREVIEW_DEBOUNCE_DELAY = 500;
 
 const useStyles = makeStyles((theme) => ({
+  viewContainer: {
+    padding: theme.spacing(2),
+  },
   header: {
     display: "flex",
     justifyContent: "flex-start",
     alignItems: "center",
-    gap: theme.spacing(1),
-    padding: theme.spacing(3),
-    maxWidth: 1180,
+    gap: theme.spacing(2),
+    marginBottom: theme.spacing(2),
     margin: "0 auto",
   },
   previewHeader: {
@@ -40,7 +42,8 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: "space-between",
     alignItems: "center",
     gap: theme.spacing(1),
-    marginBottom: theme.spacing(3),
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
   },
 
   field: {
@@ -53,15 +56,7 @@ const useStyles = makeStyles((theme) => ({
     marginBottom: theme.spacing(3),
   },
   form: {
-    padding: theme.spacing(3),
-  },
-  formAndPreviewSection: {
-    display: "grid",
-    gridTemplateColumns: "2fr 1fr",
-    alignItems: "start",
-    gap: 32,
-    maxWidth: 1180,
-    margin: "0 auto",
+    maxWidth: 800,
   },
 }));
 
@@ -115,7 +110,7 @@ export const EventConfigurationForm = ({
       },
     });
 
-  const { mutate: updateEventConfiguration, isLoading: isFetchingUpdateEvent } =
+  const { mutate: updateEventConfiguration } =
     trpcClient.mjmlConfiguration.updateEventConfiguration.useMutation({
       onSuccess: (data) => {
         appBridge?.dispatch(
@@ -164,7 +159,7 @@ export const EventConfigurationForm = ({
   }, [debouncedPayload, debouncedSubject, debouncedTemplate, fetchTemplatePreview]);
 
   return (
-    <div>
+    <div className={styles.viewContainer}>
       <div className={styles.header}>
         <IconButton
           variant="secondary"
@@ -178,7 +173,8 @@ export const EventConfigurationForm = ({
           {messageEventTypesLabels[eventType]} event configuration
         </Typography>
       </div>
-      <div className={styles.formAndPreviewSection}>
+      <Grid container spacing={2}>
+        <Grid item xs={12} lg={7}>
           <form
             onSubmit={handleSubmit((data, event) => {
               updateEventConfiguration({ ...data, configurationId });
@@ -253,6 +249,8 @@ export const EventConfigurationForm = ({
               Save configuration
             </Button>
           </form>
+        </Grid>
+        <Grid item xs={12} lg={5}>
           <div>
             <div className={styles.previewHeader}>
               <Typography variant="h2">Preview</Typography>
@@ -271,7 +269,8 @@ export const EventConfigurationForm = ({
               language="json"
             />
           </div>
-      </div>
+        </Grid>
+      </Grid>
     </div>
   );
 };

apps/emails-and-messages/src/modules/ui/app-columns-layout.tsx

@@ -1,17 +1,15 @@
 import { makeStyles } from "@saleor/macaw-ui";
 import { PropsWithChildren } from "react";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
   root: {
     display: "grid",
     gridTemplateColumns: "280px auto",
     alignItems: "start",
-    gap: 32,
-    maxWidth: 1180,
-    margin: "0 auto",
+    gap: theme.spacing(3),
     padding: "20px 0",
   },
-});
+}));
 
 type AppColumnsLayoutProps = PropsWithChildren<{}>;
 

apps/emails-and-messages/src/modules/ui/code-editor.tsx

@@ -29,8 +29,7 @@ export const CodeEditor = ({ initialTemplate, onChange, value, language }: Props
   return (
     <>
       <Editor
-        height="40vh"
-        width="100%"
+        height="600px"
         value={value}
         theme={themeType === "dark" ? "vs-dark" : "vs-light"}
         defaultLanguage={language}

apps/emails-and-messages/src/modules/ui/configuration-page-base-layout.tsx

@@ -2,9 +2,12 @@ import React, { PropsWithChildren } from "react";
 import { makeStyles, PageTab, PageTabs } from "@saleor/macaw-ui";
 import { useRouter } from "next/router";
 
-const useStyles = makeStyles({
-  appContainer: { marginTop: 20 },
-});
+const useStyles = makeStyles((theme) => ({
+  appContainer: {
+    marginTop: theme.spacing(3),
+    marginLeft: theme.spacing(3),
+  },
+}));
 
 type Props = PropsWithChildren<{}>;
 
@@ -37,11 +40,7 @@ export const ConfigurationPageBaseLayout = ({ children }: Props) => {
   };
   return (
     <div className={styles.appContainer}>
-      <PageTabs
-        value={activePath}
-        onChange={navigateToTab}
-        style={{ maxWidth: 1180, margin: "0 auto" }}
-      >
+      <PageTabs value={activePath} onChange={navigateToTab}>
         {tabs.map((tab) => (
           <PageTab key={tab.key} value={tab.key} label={tab.label} disabled={tab.disabled} />
         ))}