Styling drawers and template tabs

usewaypoint · Feb 26, 2024 · c91b1bb · c91b1bb
1 parent 4ed6cd0
commit c91b1bb
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 36 deletions.
diff --git a/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/index.tsx b/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) {

diff --git a/...mple/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/BaseSidebarPanel.tsx b/...mple/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>

diff --git a/packages/editor-sample/src/App/InspectorDrawer/ToggleInspectorPanelButton.tsx b/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>
+  );
 }
diff --git a/packages/editor-sample/src/App/InspectorDrawer/index.tsx b/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();

diff --git a/packages/editor-sample/src/App/SamplesDrawer/ToggleSamplesPanelButton.tsx b/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>
+  );
 }
diff --git a/packages/editor-sample/src/App/SamplesDrawer/index.tsx b/packages/editor-sample/src/App/SamplesDrawer/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { Box, Button, Drawer } from '@mui/material';
+import { Button, Drawer, Stack } from '@mui/material';
 
 import { useEditorState } from '../../documents/editor/EditorContext';
 
-export const SAMPLES_DRAWER_WIDTH = 400;
+export const SAMPLES_DRAWER_WIDTH = 240;
 
 export default function SamplesDrawer() {
   const [{ samplesDrawerOpen }] = useEditorState();
@@ -22,15 +22,48 @@ 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
+        gap={2}
+        py={1}
+        px={2}
+        width={SAMPLES_DRAWER_WIDTH}
+        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>
     </Drawer>
   );
 }
diff --git a/packages/editor-sample/src/App/TemplatePanel/index.tsx b/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>
     </>

diff --git a/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/EditorBlockWrapper.tsx b/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 = () => {

diff --git a/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/TuneMenu.tsx b/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 = {

diff --git a/packages/editor-sample/src/documents/editor/EditorContext.tsx b/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, () => {}]);
 

diff --git a/packages/editor-sample/src/getConfiguration/sample/one-time-passcode.ts b/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,