From f1689474b3c87497d0b6ceb6c4a4783d87164fd1 Mon Sep 17 00:00:00 2001
From: Scott Cazan <scottcazan@gmail.com>
Date: Thu, 5 Mar 2026 14:32:00 +0100
Subject: [PATCH 1/6] Set text-size on proposal editor

---
 .../stepContent/template/TemplateEditorSidebar.tsx |  7 ++++---
 packages/ui/src/components/Header.tsx              | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/template/TemplateEditorSidebar.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/template/TemplateEditorSidebar.tsx
index a6a1e7d4f..c368b7f3b 100644
--- 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,9 @@ function SidebarContent({
       </div>
 
       <div className="mt-2 md:mt-4">
-        <h3 className="mb-2 text-sm font-medium text-neutral-gray4">
+        <Header4 className="mb-2">
           {t('Fields')}
-        </h3>
+        </Header4>
         <ul className="space-y-1">
           {fields.map((field) => {
             const Icon =
@@ -109,7 +110,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/packages/ui/src/components/Header.tsx b/packages/ui/src/components/Header.tsx
index af16d95de..d566c534e 100644
--- a/packages/ui/src/components/Header.tsx
+++ b/packages/ui/src/components/Header.tsx
@@ -42,6 +42,20 @@ 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,

From 7c07eb90462541ff34d8c0a57c848f524694434a Mon Sep 17 00:00:00 2001
From: Scott Cazan <scottcazan@gmail.com>
Date: Thu, 5 Mar 2026 14:42:41 +0100
Subject: [PATCH 2/6] Update proposal editor

---
 .../components/RichTextEditor/RichTextEditorToolbar.tsx    | 2 +-
 apps/app/src/components/decisions/ProposalEditorLayout.tsx | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/app/src/components/RichTextEditor/RichTextEditorToolbar.tsx b/apps/app/src/components/RichTextEditor/RichTextEditorToolbar.tsx
index 95275d003..1c17765ff 100644
--- a/apps/app/src/components/RichTextEditor/RichTextEditorToolbar.tsx
+++ b/apps/app/src/components/RichTextEditor/RichTextEditorToolbar.tsx
@@ -110,7 +110,7 @@ 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={`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/ProposalEditorLayout.tsx b/apps/app/src/components/decisions/ProposalEditorLayout.tsx
index e24edd62d..611189d7d 100644
--- 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">

From a7cd35d0a6f335a178564ed8215177c5204eb4bb Mon Sep 17 00:00:00 2001
From: Scott Cazan <scottcazan@gmail.com>
Date: Thu, 5 Mar 2026 14:57:28 +0100
Subject: [PATCH 3/6] Format, convert to cn()

---
 .../components/RichTextEditor/RichTextEditorToolbar.tsx   | 8 +++++++-
 .../stepContent/template/TemplateEditorSidebar.tsx        | 4 +---
 .../decisions/ProposalCard/ProposalCardActions.tsx        | 8 +++++++-
 .../decisions/ProposalCard/ProposalCardComponents.tsx     | 2 +-
 packages/ui/src/components/Header.tsx                     | 4 +++-
 5 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/apps/app/src/components/RichTextEditor/RichTextEditorToolbar.tsx b/apps/app/src/components/RichTextEditor/RichTextEditorToolbar.tsx
index 1c17765ff..df7894cd4 100644
--- 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 text-neutral-charcoal ${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
index c368b7f3b..38ffee3bd 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/template/TemplateEditorSidebar.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/template/TemplateEditorSidebar.tsx
@@ -97,9 +97,7 @@ function SidebarContent({
       </div>
 
       <div className="mt-2 md:mt-4">
-        <Header4 className="mb-2">
-          {t('Fields')}
-        </Header4>
+        <Header4 className="mb-2">{t('Fields')}</Header4>
         <ul className="space-y-1">
           {fields.map((field) => {
             const Icon =
diff --git a/apps/app/src/components/decisions/ProposalCard/ProposalCardActions.tsx b/apps/app/src/components/decisions/ProposalCard/ProposalCardActions.tsx
index 67cbcdda7..133128145 100644
--- 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
index 8c99c8534..0b494d1d7 100644
--- 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-4 p-4',
         className,
       )}
       {...props}
diff --git a/packages/ui/src/components/Header.tsx b/packages/ui/src/components/Header.tsx
index d566c534e..88d72b311 100644
--- a/packages/ui/src/components/Header.tsx
+++ b/packages/ui/src/components/Header.tsx
@@ -50,7 +50,9 @@ export const Header4 = ({
   className?: string;
 }) => {
   return (
-    <h4 className={cn('font-serif text-title-sm14 text-neutral-black', className)}>
+    <h4
+      className={cn('font-serif text-title-sm14 text-neutral-black', className)}
+    >
       {children}
     </h4>
   );

From 9845269e35eff9bf1a142207b6755a84d2657355 Mon Sep 17 00:00:00 2001
From: Scott Cazan <scottcazan@gmail.com>
Date: Thu, 5 Mar 2026 15:08:02 +0100
Subject: [PATCH 4/6] Attachment styles

---
 packages/ui/src/components/FileDropZone.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/FileDropZone.tsx b/packages/ui/src/components/FileDropZone.tsx
index 0753808a6..5ce9df830 100644
--- 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',
@@ -125,7 +125,7 @@ export function FileDropZone(props: FileDropZoneProps) {
       >
         <Button className={styles.button()} isDisabled={isDisabled}>
           <div className={styles.iconWrapper()}>
-            <LuFilePlus2 className={styles.icon()} />
+            <LuFilePlus2 className={styles.icon()} strokeWidth={1} />
           </div>
           <div className={styles.labelWrapper()}>
             <Text slot="label" className={styles.label()}>

From 57ae878b5d53d3ed436f50fd9b33177ee6b3b75c Mon Sep 17 00:00:00 2001
From: Scott Cazan <scottcazan@gmail.com>
Date: Thu, 5 Mar 2026 18:11:18 +0100
Subject: [PATCH 5/6] Global stroke-width for all icons

---
 apps/app/src/components/IconProvider.tsx    | 2 +-
 packages/ui/src/components/FileDropZone.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/components/IconProvider.tsx b/apps/app/src/components/IconProvider.tsx
index f0622fbf7..be438eccc 100644
--- 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/packages/ui/src/components/FileDropZone.tsx b/packages/ui/src/components/FileDropZone.tsx
index 5ce9df830..db039bb17 100644
--- a/packages/ui/src/components/FileDropZone.tsx
+++ b/packages/ui/src/components/FileDropZone.tsx
@@ -125,7 +125,7 @@ export function FileDropZone(props: FileDropZoneProps) {
       >
         <Button className={styles.button()} isDisabled={isDisabled}>
           <div className={styles.iconWrapper()}>
-            <LuFilePlus2 className={styles.icon()} strokeWidth={1} />
+            <LuFilePlus2 className={styles.icon()} />
           </div>
           <div className={styles.labelWrapper()}>
             <Text slot="label" className={styles.label()}>

From 7fd92915139a7b981dc4d25f6e863bd94e465c6a Mon Sep 17 00:00:00 2001
From: Scott Cazan <scottcazan@gmail.com>
Date: Thu, 5 Mar 2026 18:31:05 +0100
Subject: [PATCH 6/6] format and remove gap

---
 .../decisions/ProposalCard/ProposalCardComponents.tsx      | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/apps/app/src/components/decisions/ProposalCard/ProposalCardComponents.tsx b/apps/app/src/components/decisions/ProposalCard/ProposalCardComponents.tsx
index 0b494d1d7..d9d36d26a 100644
--- 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-4',
+        '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>