fix(dashboard): Apply UI fixes to email and in-app editor (#7278)

novuhq · Dec 12, 2024 · b4b3db9 · b4b3db9
1 parent 949edbe
commit b4b3db9
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 16 deletions.
diff --git a/apps/dashboard/src/components/workflow-editor/in-app-preview.tsx b/apps/dashboard/src/components/workflow-editor/in-app-preview.tsx
@@ -29,7 +29,7 @@ export const InAppPreview = (props: InAppPreviewProps) => {
   return (
     <div
       className={cn(
-        'border-foreground-200 to-background/90 pointer-events-none relative mx-auto flex h-full w-full flex-col gap-4 rounded-xl px-2 py-3 shadow-sm',
+        'border-foreground-200 to-background/90 pointer-events-none relative mx-auto flex h-full w-full flex-col gap-4 rounded-xl px-4 py-3 shadow-sm',
         className
       )}
       {...rest}
@@ -42,7 +42,7 @@ export const InAppPreviewHeader = (props: InAppPreviewHeaderProps) => {
   const { className, ...rest } = props;
 
   return (
-    <div className={cn('z-20 flex items-center justify-between px-2 text-neutral-300', className)} {...rest}>
+    <div className={cn('z-20 flex items-center justify-between text-neutral-300', className)} {...rest}>
       <div className="flex items-center gap-2">
         <span className="text-xl font-medium">Inbox</span>
         <InboxArrowDown />
@@ -51,7 +51,7 @@ export const InAppPreviewHeader = (props: InAppPreviewHeaderProps) => {
         <span className="p-0.5">
           <InboxEllipsis />
         </span>
-        <span className="p-0.5">
+        <span>
           <InboxSettings />
         </span>
       </div>

diff --git a/apps/dashboard/src/components/workflow-editor/steps/email/email-editor.tsx b/apps/dashboard/src/components/workflow-editor/steps/email/email-editor.tsx
@@ -1,7 +1,6 @@
 import { Separator } from '@/components/primitives/separator';
 import { getComponentByType } from '@/components/workflow-editor/steps/component-utils';
 import { EmailPreviewHeader } from '@/components/workflow-editor/steps/email/email-preview';
-import { EmailTabsEditSection } from '@/components/workflow-editor/steps/email/email-tabs-section';
 import { type UiSchema } from '@novu/shared';
 
 const subjectKey = 'subject';
@@ -14,13 +13,10 @@ export const EmailEditor = (props: EmailEditorProps) => {
 
   return (
     <>
-      <EmailPreviewHeader className="p-3" />
-      <EmailTabsEditSection>{subject && getComponentByType({ component: subject.component })}</EmailTabsEditSection>
-
+      <EmailPreviewHeader />
+      <div className="px-8 py-2">{getComponentByType({ component: subject.component })}</div>
       <Separator className="bg-neutral-100" />
-      <EmailTabsEditSection>
-        {emailEditor && getComponentByType({ component: emailEditor.component })}
-      </EmailTabsEditSection>
+      <div className="pl-6">{emailEditor && getComponentByType({ component: emailEditor.component })}</div>
     </>
   );
 };
diff --git a/apps/dashboard/src/components/workflow-editor/steps/email/email-tabs-section.tsx b/apps/dashboard/src/components/workflow-editor/steps/email/email-tabs-section.tsx
@@ -4,11 +4,11 @@ import { HTMLAttributes } from 'react';
 type EmailTabsSectionProps = HTMLAttributes<HTMLDivElement>;
 export const EmailTabsEditSection = (props: EmailTabsSectionProps) => {
   const { className, ...rest } = props;
-  return <div className={cn('px-12 py-4', className)} {...rest} />;
+  return <div className={cn('p-4', className)} {...rest} />;
 };
 
 type EmailTabsPreviewSectionProps = HTMLAttributes<HTMLDivElement>;
 export const EmailTabsPreviewSection = (props: EmailTabsPreviewSectionProps) => {
   const { className, ...rest } = props;
-  return <div className={cn('px-3 py-4', className)} {...rest} />;
+  return <div className={cn('p-4', className)} {...rest} />;
 };
diff --git a/apps/dashboard/src/components/workflow-editor/steps/email/email-tabs.tsx b/apps/dashboard/src/components/workflow-editor/steps/email/email-tabs.tsx
@@ -12,6 +12,7 @@ import { EmailEditor } from '@/components/workflow-editor/steps/email/email-edit
 import { EmailEditorPreview } from '@/components/workflow-editor/steps/email/email-editor-preview';
 import { CustomStepControls } from '../controls/custom-step-controls';
 import { EmailTabsEditSection } from '@/components/workflow-editor/steps/email/email-tabs-section';
+import { WorkflowOriginEnum } from '@novu/shared';
 
 const tabsContentClassName = 'h-full w-full overflow-y-auto';
 
@@ -55,10 +56,16 @@ export const EmailTabs = (props: StepEditorProps) => {
       </header>
       <Separator />
       <TabsContent value="editor" className={tabsContentClassName}>
-        <EmailEditor uiSchema={uiSchema} />
-        <EmailTabsEditSection>
-          <CustomStepControls dataSchema={dataSchema} origin={workflow.origin} />
-        </EmailTabsEditSection>
+        {workflow.origin === WorkflowOriginEnum.NOVU_CLOUD && (
+          <EmailTabsEditSection>
+            <EmailEditor uiSchema={uiSchema} />
+          </EmailTabsEditSection>
+        )}
+        {workflow.origin === WorkflowOriginEnum.EXTERNAL && (
+          <EmailTabsEditSection>
+            <CustomStepControls dataSchema={dataSchema} origin={workflow.origin} />
+          </EmailTabsEditSection>
+        )}
       </TabsContent>
       <TabsContent value="preview" className={tabsContentClassName}>
         <EmailEditorPreview workflow={workflow} step={step} formValues={form.getValues()} />