fix(dashboard): Align body and actions with in-app subject preview

novuhq · Nov 21, 2024 · b73adbc · b73adbc
1 parent 3c924ed
commit b73adbc
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 35 deletions.
diff --git a/apps/dashboard/src/components/primitives/form/avatar-picker.tsx b/apps/dashboard/src/components/primitives/form/avatar-picker.tsx
@@ -54,7 +54,7 @@ export const AvatarPicker = forwardRef<HTMLInputElement, AvatarPickerProps>(({ n
         <PopoverTrigger asChild>
           <Button variant="outline" size="icon" className="text-foreground-600 relative size-full overflow-hidden">
             {value ? (
-              <Avatar className="p-px">
+              <Avatar className="bg-transparent p-px">
                 <AvatarImage src={value as string} />
               </Avatar>
             ) : (
@@ -91,7 +91,12 @@ export const AvatarPicker = forwardRef<HTMLInputElement, AvatarPickerProps>(({ n
             <TextSeparator text="or" />
             <div className="grid grid-cols-6 gap-4">
               {predefinedAvatars.map((url, index) => (
-                <Button key={index} variant="ghost" className="p-0" onClick={() => handlePredefinedAvatarClick(url)}>
+                <Button
+                  key={index}
+                  variant="ghost"
+                  className="rounded-full p-0"
+                  onClick={() => handlePredefinedAvatarClick(url)}
+                >
                   <Avatar>
                     <AvatarImage src={url} />
                   </Avatar>

diff --git a/apps/dashboard/src/components/workflow-editor/in-app-preview.tsx b/apps/dashboard/src/components/workflow-editor/in-app-preview.tsx
@@ -59,44 +59,45 @@ export const InAppPreview = (props: InAppPreviewProps) => {
       )}
       {data && data.result?.type === ChannelTypeEnum.IN_APP && (
         <div className="bg-neutral-alpha-50 z-20 mt-2 rounded-lg px-2 py-2">
-          <div className="mb-2 flex items-center gap-2">
+          <div className="mb-2 flex gap-2">
             {data.result.preview.avatar && (
               <img src={data.result.preview.avatar} alt="avatar" className="bg-background h-5 min-w-5 rounded-full" />
             )}
-            {data.result.preview.subject ? (
-              <Subject text={data.result.preview.subject} className={truncate ? 'truncate' : ''} />
-            ) : (
-              <Body text={data.result.preview.body} className={truncate ? 'truncate' : ''} />
-            )}
-          </div>
-
-          {data.result.preview.subject && (
-            <Body text={data.result.preview.body} className={truncate ? 'truncate' : ''} />
-          )}
+            <div className="space-y-2">
+              {data.result.preview.subject ? (
+                <Subject text={data.result.preview.subject} className={truncate ? 'truncate' : ''} />
+              ) : (
+                <Body text={data.result.preview.body} className={truncate ? 'truncate' : ''} />
+              )}
 
-          {(data.result.preview.primaryAction || data.result.preview.secondaryAction) && (
-            <div className="mt-3 flex items-center justify-start gap-1 overflow-hidden">
-              {data.result.preview.primaryAction && (
-                <Button
-                  className="overflow-hidden text-xs font-medium shadow-none"
-                  type="button"
-                  variant="primary"
-                  size="xs"
-                >
-                  <span className="overflow-hidden text-ellipsis">
-                    {(data.result.preview as InAppRenderOutput).primaryAction?.label}
-                  </span>
-                </Button>
+              {data.result.preview.subject && (
+                <Body text={data.result.preview.body} className={truncate ? 'truncate' : ''} />
               )}
-              {data.result.preview.secondaryAction && (
-                <Button variant="outline" className="overflow-hidden text-xs font-medium" type="button" size="xs">
-                  <span className="overflow-hidden text-ellipsis">
-                    {(data.result.preview as InAppRenderOutput).secondaryAction?.label}
-                  </span>
-                </Button>
+              {(data.result.preview.primaryAction || data.result.preview.secondaryAction) && (
+                <div className="mt-3 flex items-center justify-start gap-1 overflow-hidden">
+                  {data.result.preview.primaryAction && (
+                    <Button
+                      className="overflow-hidden text-xs font-medium shadow-none"
+                      type="button"
+                      variant="primary"
+                      size="xs"
+                    >
+                      <span className="overflow-hidden text-ellipsis">
+                        {(data.result.preview as InAppRenderOutput).primaryAction?.label}
+                      </span>
+                    </Button>
+                  )}
+                  {data.result.preview.secondaryAction && (
+                    <Button variant="outline" className="overflow-hidden text-xs font-medium" type="button" size="xs">
+                      <span className="overflow-hidden text-ellipsis">
+                        {(data.result.preview as InAppRenderOutput).secondaryAction?.label}
+                      </span>
+                    </Button>
+                  )}
+                </div>
               )}
             </div>
-          )}
+          </div>
         </div>
       )}
     </div>

diff --git a/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-action.tsx b/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-action.tsx
@@ -172,13 +172,12 @@ const ConfigureActionPopover = (props: ComponentProps<typeof PopoverTrigger> & {
                   <FormLabel>Button text</FormLabel>
                 </div>
                 <FormControl>
-                  <InputField>
+                  <InputField size="fit">
                     <Editor
                       fontFamily="inherit"
                       placeholder="Button text"
                       value={field.value}
                       onChange={field.onChange}
-                      height="30px"
                       extensions={[autocompletion({ override: [completions(variables)] }), EditorView.lineWrapping]}
                     />
                   </InputField>