Decision Process Design Tweaks (#714)

scazan · web-flow · commit 8760bb752d98 · 2026-03-05T23:41:44.000+01:00
Updates to Proposal Editor and Process Builder ### updated proposal editor color and font sizes <img width="1125" height="406" alt="Screenshot 2026-03-05 at 14 43 40" src="https://github.com/user-attachments/assets/4e21fc6f-3f07-43f4-97bb-d0e2ba08ee44" /> ### Proposal card button sizes <img width="374" height="272" alt="Screenshot 2026-03-05 at 14 50 00" src="https://github.com/user-attachments/assets/008e2ab6-bb53-425d-8b29-6fed13a7aa0d" /> ### Process Builder font sizes <img width="136" height="229" alt="Screenshot 2026-03-05 at 14 50 55" src="https://github.com/user-attachments/assets/178fbb4a-feb3-463f-94a9-f46153285abb" /> ### Attachments in Proposals <img width="878" height="315" alt="Screenshot 2026-03-05 at 15 24 41" src="https://github.com/user-attachments/assets/0588cdcf-6230-4304-8a21-1bd412094424" /> Issues: https://app.asana.com/1/1108348036672214/project/1213315744811204/task/1213319501728095?focus=true https://app.asana.com/1/1108348036672214/project/1213315744811204/task/1213319501728141?focus=true https://app.asana.com/1/1108348036672214/project/1213315744811204/task/1213319501728099?focus=true https://app.asana.com/1/1108348036672214/project/1213315744811204/task/1213319501728149?focus=true
diff --git a/apps/app/src/components/IconProvider.tsx b/apps/app/src/components/IconProvider.tsx
@@ -4,7 +4,7 @@ import { IconContext } from 'react-icons';
 
 export const IconProvider = ({ children }: { children: React.ReactNode }) => {
   return (
-    <IconContext.Provider value={{ className: 'stroke-[1.5]' }}>
+    <IconContext.Provider value={{ className: 'stroke-1' }}>
       {children}
     </IconContext.Provider>
   );
diff --git a/apps/app/src/components/RichTextEditor/RichTextEditorToolbar.tsx b/apps/app/src/components/RichTextEditor/RichTextEditorToolbar.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useFileUpload } from '@/hooks/useFileUpload';
+import { cn } from '@op/ui/utils';
 import type { Editor } from '@tiptap/react';
 import {
   AlignCenter,
@@ -110,7 +111,12 @@ export function RichTextEditorToolbar({
     `shrink-0 rounded p-2 hover:bg-gray-100 ${active ? 'bg-gray-200' : ''}`;
 
   return (
-    <div className={`justify-between border-b px-6 py-2 ${className}`}>
+    <div
+      className={cn(
+        'justify-between border-b px-6 py-2 text-neutral-charcoal',
+        className,
+      )}
+    >
       <div className="mx-auto scrollbar-hide flex max-w-fit min-w-0 items-center gap-1 overflow-x-auto">
         {/* Undo/Redo */}
         <button
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/template/TemplateEditorSidebar.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/template/TemplateEditorSidebar.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { Button } from '@op/ui/Button';
+import { Header4 } from '@op/ui/Header';
 import { Sidebar, useSidebar } from '@op/ui/Sidebar';
 import type { IconType } from 'react-icons';
 import { LuAlignJustify } from 'react-icons/lu';
@@ -96,9 +97,7 @@ function SidebarContent({
       </div>
 
       <div className="mt-2 md:mt-4">
-        <h3 className="mb-2 text-sm font-medium text-neutral-gray4">
-          {t('Fields')}
-        </h3>
+        <Header4 className="mb-2">{t('Fields')}</Header4>
         <ul className="space-y-1">
           {fields.map((field) => {
             const Icon =
@@ -109,7 +108,7 @@ function SidebarContent({
             }
             return (
               <li key={field.id}>
-                <div className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm text-neutral-charcoal">
+                <div className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-base text-neutral-charcoal">
                   <Icon className="size-4 shrink-0 text-neutral-gray4" />
                   <span className="truncate">{field.label}</span>
                 </div>
diff --git a/apps/app/src/components/decisions/ProposalCard/ProposalCardActions.tsx b/apps/app/src/components/decisions/ProposalCard/ProposalCardActions.tsx
@@ -118,7 +118,12 @@ export function ProposalCardOwnerActions({
   return (
     <>
       <div className="flex w-full items-center gap-4">
-        <ButtonLink href={editHref} color="secondary" className="w-full">
+        <ButtonLink
+          href={editHref}
+          color="secondary"
+          size="small"
+          className="w-full"
+        >
           <Pencil className="size-4" />
           {t('Edit')}
         </ButtonLink>
@@ -129,6 +134,7 @@ export function ProposalCardOwnerActions({
           <Button
             onPress={() => setIsDeleteModalOpen(true)}
             color="secondary"
+            size="small"
             className="w-full"
             isDisabled={deleteProposalMutation.isPending}
           >
diff --git a/apps/app/src/components/decisions/ProposalCard/ProposalCardComponents.tsx b/apps/app/src/components/decisions/ProposalCard/ProposalCardComponents.tsx
@@ -53,7 +53,7 @@ export function ProposalCard({
     <Surface
       variant={isDraft ? 'filled' : 'empty'}
       className={cn(
-        'relative flex w-full min-w-80 flex-col justify-between gap-4 p-6',
+        'relative flex w-full min-w-80 flex-col justify-between gap-3 p-4',
         className,
       )}
       {...props}
@@ -383,10 +383,7 @@ export function ProposalCardPreview({
 
   return (
     <p
-      className={cn(
-        'mb-4 line-clamp-3 text-base text-neutral-charcoal',
-        className,
-      )}
+      className={cn('line-clamp-3 text-base text-neutral-charcoal', className)}
     >
       {displayText}
     </p>
diff --git a/apps/app/src/components/decisions/ProposalEditorLayout.tsx b/apps/app/src/components/decisions/ProposalEditorLayout.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { Button } from '@op/ui/Button';
+import { Header4 } from '@op/ui/Header';
 import { LoadingSpinner } from '@op/ui/LoadingSpinner';
 import { useRouter } from 'next/navigation';
 import { ReactNode, useState } from 'react';
@@ -61,10 +62,10 @@ export function ProposalEditorLayout({
           <span className="hidden sm:block">{t('Back')}</span>
         </button>
 
-        <div className="flex justify-center text-lg font-medium text-neutral-black">
-          <span className="hidden sm:block">
+        <div className="flex justify-center">
+          <Header4 className="hidden sm:block">
             {title ? title : t('Untitled Proposal')}
-          </span>
+          </Header4>
         </div>
 
         <div className="flex items-center justify-end gap-4">
diff --git a/packages/ui/src/components/FileDropZone.tsx b/packages/ui/src/components/FileDropZone.tsx
@@ -45,8 +45,8 @@ const dropZoneStyles = tv({
     root: 'group/dropzone flex w-full',
     button: [
       'flex flex-1 cursor-pointer flex-col items-center justify-center gap-6',
-      'rounded-2xl border border-dashed border-neutral-gray2 bg-neutral-offWhite',
-      'px-12 py-8',
+      'rounded-lg border border-dashed border-neutral-gray2 bg-neutral-offWhite',
+      'px-12 py-6',
       'outline-hidden transition-colors duration-200',
       'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500',
       'group-data-[drop-target]/dropzone:border-teal-500 group-data-[drop-target]/dropzone:bg-teal-50/30',
diff --git a/packages/ui/src/components/Header.tsx b/packages/ui/src/components/Header.tsx
@@ -42,6 +42,22 @@ export const Header3 = ({
   );
 };
 
+export const Header4 = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <h4
+      className={cn('font-serif text-title-sm14 text-neutral-black', className)}
+    >
+      {children}
+    </h4>
+  );
+};
+
 export const GradientHeader = ({
   children,
   className,
