Styling drawers and template tabs (#22)

* Styling drawers and template tabs
* Sample template content and style adjustments
* Adding info about Waypoint's pro builder

packages/editor-sample/index.html

@@ -6,8 +6,8 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/src/favicon/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/src/favicon/favicon-16x16.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-    <title>Waypoint editor</title>
+    <meta name="description" content="EmailBuilder.js interactive playground. Brought to you by Waypoint." />
+    <title>EmailBuilder.js &mdash; Free and Open Source Template Builder</title>
     <style>
       html {
         margin: 0px;

packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/index.tsx

@@ -29,7 +29,7 @@ export default function ConfigurationPanel() {
   const [{ document, selectedBlockId }, setEditorState] = useEditorState();
 
   if (!selectedBlockId) {
-    return renderMessage('No block selected. Click on a block to inspect.');
+    return renderMessage('Click on a block to inspect.');
   }
   const block = document[selectedBlockId];
   if (!block) {

packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/BaseSidebarPanel.tsx

@@ -8,7 +8,7 @@ type SidebarPanelProps = {
 };
 export default function BaseSidebarPanel({ title, children }: SidebarPanelProps) {
   return (
-    <Box p={3}>
+    <Box p={2}>
       <Typography variant="overline" color="text.secondary" sx={{ display: 'block', mb: 2 }}>
         {title}
       </Typography>

packages/editor-sample/src/App/InspectorDrawer/ToggleInspectorPanelButton.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Button } from '@mui/material';
+import { AppRegistrationOutlined, LastPageOutlined } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
 
 import { useEditorState } from '../../documents/editor/EditorContext';
 
@@ -10,7 +11,15 @@ export default function ToggleInspectorPanelButton() {
     setEditorState({ inspectorDrawerOpen: !inspectorDrawerOpen });
   };
   if (inspectorDrawerOpen) {
-    return <Button onClick={handleClick}>CLOSE</Button>;
+    return (
+      <IconButton onClick={handleClick}>
+        <LastPageOutlined fontSize="small" />
+      </IconButton>
+    );
   }
-  return <Button onClick={handleClick}>OPEN</Button>;
+  return (
+    <IconButton onClick={handleClick}>
+      <AppRegistrationOutlined fontSize="small" />
+    </IconButton>
+  );
 }

packages/editor-sample/src/App/InspectorDrawer/index.tsx

@@ -7,7 +7,7 @@ import { useEditorState } from '../../documents/editor/EditorContext';
 import ConfigurationPanel from './ConfigurationPanel';
 import StylesPanel from './StylesPanel';
 
-export const INSPECTOR_DRAWER_WIDTH = 400;
+export const INSPECTOR_DRAWER_WIDTH = 240;
 
 export default function InspectorDrawer() {
   const [{ selectedSidebarTab, inspectorDrawerOpen }, setEditorState] = useEditorState();

packages/editor-sample/src/App/SamplesDrawer/ToggleSamplesPanelButton.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Button } from '@mui/material';
+import { FirstPageOutlined, MenuOutlined } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
 
 import { useEditorState } from '../../documents/editor/EditorContext';
 
@@ -10,7 +11,15 @@ export default function ToggleSamplesPanelButton() {
     setEditorState({ samplesDrawerOpen: !samplesDrawerOpen });
   };
   if (samplesDrawerOpen) {
-    return <Button onClick={handleClick}>CLOSE</Button>;
+    return (
+      <IconButton onClick={handleClick}>
+        <FirstPageOutlined fontSize="small" />
+      </IconButton>
+    );
   }
-  return <Button onClick={handleClick}>OPEN</Button>;
+  return (
+    <IconButton onClick={handleClick}>
+      <MenuOutlined fontSize="small" />
+    </IconButton>
+  );
 }

packages/editor-sample/src/App/SamplesDrawer/index.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 
-import { Box, Button, Drawer } from '@mui/material';
+import { Box, Button, Drawer, Link, Stack, Typography } from '@mui/material';
 
 import { useEditorState } from '../../documents/editor/EditorContext';
 
-export const SAMPLES_DRAWER_WIDTH = 400;
+import logo from './waypoint.svg';
+
+export const SAMPLES_DRAWER_WIDTH = 240;
 
 export default function SamplesDrawer() {
   const [{ samplesDrawerOpen }] = useEditorState();
@@ -22,15 +24,67 @@ export default function SamplesDrawer() {
         width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0,
       }}
     >
-      <Box width={SAMPLES_DRAWER_WIDTH}>
-        <Button onClick={() => select('one-time-password')}>one-time-password</Button>
-        <Button onClick={() => select('order-ecomerce')}>order-ecomerce</Button>
-        <Button onClick={() => select('post-metrics-report')}>post-metrics-report</Button>
-        <Button onClick={() => select('reservation-reminder')}>reservation-reminder</Button>
-        <Button onClick={() => select('reset-password')}>reset-password</Button>
-        <Button onClick={() => select('respond-to-message')}>respond-to-message</Button>
-        <Button onClick={() => select('subscription-receipt')}>subscription-receipt</Button>
-      </Box>
+      <Stack spacing={3} py={1} px={2} width={SAMPLES_DRAWER_WIDTH} justifyContent="space-between" height="100%">
+        <Stack spacing={2} sx={{ '& .MuiButtonBase-root': { width: '100%', justifyContent: 'flex-start' } }}>
+          <Button
+            size="small"
+            href="https://www.usewaypoint.com/open-source/emailbuilderjs"
+            target="_blank"
+            sx={{ fontSize: 16 }}
+          >
+            EmailBuilder.js
+          </Button>
+          <Stack alignItems="flex-start">
+            <Button size="small" onClick={() => select('empty')}>
+              Empty
+            </Button>
+            <Button size="small" onClick={() => select('one-time-password')}>
+              One-time passcode (OTP)
+            </Button>
+            <Button size="small" onClick={() => select('reset-password')}>
+              Reset password
+            </Button>
+            <Button size="small" onClick={() => select('order-ecomerce')}>
+              E-commerce receipt
+            </Button>
+            <Button size="small" onClick={() => select('subscription-receipt')}>
+              Subscription receipt
+            </Button>
+            <Button size="small" onClick={() => select('reservation-reminder')}>
+              Reservation reminder
+            </Button>
+            <Button size="small" onClick={() => select('post-metrics-report')}>
+              Post metrics
+            </Button>
+            <Button size="small" onClick={() => select('respond-to-message')}>
+              Respond to message
+            </Button>
+          </Stack>
+        </Stack>
+        <Stack spacing={2} px={0.75} py={3}>
+          <Link href="https://usewaypoint.com?utm_source=emailbuilderjs" target="_blank" sx={{ lineHeight: 1 }}>
+            <Box component="img" src={logo} width={32} />
+          </Link>
+          <Box>
+            <Typography variant="overline" gutterBottom>
+              Pro builder
+            </Typography>
+            <Typography variant="body2" color="text.secondary" paragraph>
+              Looking for more? Waypoint is an email API with a hosted &apos;pro&apos; template builder with dynamic
+              variables, loops, conditionals, drag and drop, layouts, and more.
+            </Typography>
+          </Box>
+          <Button
+            variant="contained"
+            color="primary"
+            sx={{ justifyContent: 'center' }}
+            href="https://usewaypoint.com?utm_source=emailbuilderjs"
+            target="_blank"
+          >
+            Learn more
+          </Button>
+        </Stack>
+      </Stack>
     </Drawer>
   );
 }

packages/editor-sample/src/App/TemplatePanel/index.tsx

@@ -39,22 +39,33 @@ export default function TemplatePanel() {
   return (
     <>
       <Stack
-        sx={{ height: 49, borderBottom: 1, borderColor: 'divider', backgroundColor: 'white' }}
+        sx={{
+          height: 49,
+          borderBottom: 1,
+          borderColor: 'divider',
+          backgroundColor: 'white',
+          position: 'sticky',
+          top: 0,
+          zIndex: 'appBar',
+          px: 1,
+        }}
         direction="row"
         justifyContent="space-between"
         alignItems="center"
       >
         <ToggleSamplesPanelButton />
-        <Tabs value={selectedMainTab} onChange={(_, v) => setEditorState({ selectedMainTab: v })}>
-          <Tab value="editor" label="Edit" />
-          <Tab value="preview" label="Preview" />
-          <Tab value="html" label="HTML" />
-          <Tab value="data" label="JSON" />
-        </Tabs>
-        <Box pr={3}>
+        <Stack px={2} direction="row" gap={2} width="100%" justifyContent="space-between" alignItems="center">
+          <Tabs value={selectedMainTab} onChange={(_, v) => setEditorState({ selectedMainTab: v })}>
+            <Tab value="editor" label="Edit" />
+            <Tab value="preview" label="Preview" />
+            <Tab value="html" label="HTML" />
+            <Tab value="data" label="JSON" />
+          </Tabs>
+
           <ShareButton />
-          <ToggleInspectorPanelButton />
-        </Box>
+        </Stack>
+
+        <ToggleInspectorPanelButton />
       </Stack>
       <Box sx={{ height: 'calc(100% - 49px)', overflow: 'auto' }}>{renderMainPanel()}</Box>
     </>

packages/editor-sample/src/documents/blocks/helpers/block-wrappers/EditorBlockWrapper.tsx

@@ -18,9 +18,9 @@ export default function EditorBlockWrapper({ children }: TEditorBlockWrapperProp
 
   let outline: CSSProperties['outline'];
   if (selectedBlockId === blockId) {
-    outline = '2px solid blue';
+    outline = '2px solid rgba(0,121,204, 1)';
   } else if (mouseInside) {
-    outline = '2px dashed blue';
+    outline = '2px solid rgba(0,121,204, 0.3)';
   }
 
   const renderMenu = () => {

packages/editor-sample/src/documents/blocks/helpers/block-wrappers/TuneMenu.tsx

@@ -12,7 +12,6 @@ const STYLE: CSSProperties = {
   top: 0,
   left: -52,
   borderRadius: 64,
-  padding: '8px 4px',
 };
 
 type Props = {

packages/editor-sample/src/documents/editor/EditorContext.tsx

@@ -20,8 +20,8 @@ const DEFAULT_STATE: TValue = {
   selectedSidebarTab: 'styles',
   selectedMainTab: 'editor',
 
-  inspectorDrawerOpen: false,
-  samplesDrawerOpen: false,
+  inspectorDrawerOpen: true,
+  samplesDrawerOpen: true,
 };
 const EditorContext = createContext<TEditorContextState>([DEFAULT_STATE, () => {}]);
 

packages/editor-sample/src/getConfiguration/sample/one-time-passcode.ts

@@ -23,7 +23,7 @@ const ONE_TIME_PASSCODE: TEditorConfiguration = {
       style: {
         backgroundColor: null,
         padding: {
-          top: 48,
+          top: 24,
           bottom: 24,
           left: 24,
           right: 24,
@@ -68,7 +68,7 @@ const ONE_TIME_PASSCODE: TEditorConfiguration = {
       style: {
         color: null,
         backgroundColor: null,
-        fontFamily: null,
+        fontFamily: 'MONOSPACE',
         fontWeight: 'bold',
         textAlign: 'center',
         padding: {

packages/editor-sample/src/getConfiguration/sample/order-ecommerce.ts

@@ -774,8 +774,8 @@ const ORDER_ECOMMERCE: TEditorConfiguration = {
       style: {
         backgroundColor: null,
         padding: {
-          top: 8,
-          bottom: 8,
+          top: 4,
+          bottom: 4,
           left: 0,
           right: 0,
         },
@@ -1465,7 +1465,7 @@ const ORDER_ECOMMERCE: TEditorConfiguration = {
         },
       },
       props: {
-        text: 'Jordan Isip\n123 Main St\nNew York, NY 10002\nUnited States',
+        text: '123 Main St New York, NY 10002',
       },
     },
   },
@@ -1528,7 +1528,7 @@ const ORDER_ECOMMERCE: TEditorConfiguration = {
         },
       },
       props: {
-        text: 'Jordan Isip\n123 Main St\nNew York, NY 10002\nUnited States',
+        text: '123 Main St New York, NY 10002',
       },
     },
   },

packages/editor-sample/src/getConfiguration/sample/post-metrics-report.ts

@@ -228,7 +228,7 @@ const POST_METRICS_REPORT: TEditorConfiguration = {
         textAlign: 'center',
         padding: {
           top: 16,
-          bottom: 40,
+          bottom: 24,
           left: 24,
           right: 24,
         },
@@ -292,7 +292,7 @@ const POST_METRICS_REPORT: TEditorConfiguration = {
     type: 'Container',
     data: {
       style: {
-        backgroundColor: null,
+        backgroundColor: '#FAFAFA',
         borderColor: null,
         borderRadius: 8,
         padding: {
@@ -343,9 +343,9 @@ const POST_METRICS_REPORT: TEditorConfiguration = {
         },
       },
       props: {
-        buttonBackgroundColor: '#EEEEEE',
+        buttonBackgroundColor: '#FAFAFA',
         buttonStyle: 'rounded',
-        buttonTextColor: '#FFFFFF',
+        buttonTextColor: '#474849',
         fullWidth: false,
         size: 'medium',
         text: 'Show more',

packages/editor-sample/src/getConfiguration/sample/reservation-reminder.ts

@@ -547,7 +547,7 @@ const RESERVATION_REMINDER: TEditorConfiguration = {
         },
       },
       props: {
-        text: '2\n\nLet them know upfront if your listing is suitable for children by updating your [House Rules](https://example.usewaypoint.com/account/listings/r029348209842/settings).',
+        text: 'Let them know upfront if your listing is suitable for children by updating your House Rules.',
       },
     },
   },

packages/editor-sample/src/getConfiguration/sample/respond-to-message.ts

@@ -74,7 +74,7 @@ const RESPOND_TO_MESSAGE: TEditorConfiguration = {
         fontWeight: null,
         textAlign: null,
         padding: {
-          top: 16,
+          top: 8,
           bottom: 16,
           left: 24,
           right: 24,