From f76373c87fe57fd1976b3bfa5d0ce0688ea2326d Mon Sep 17 00:00:00 2001
From: Caroline McKenzie <cmckenzie@squareup.com>
Date: Tue, 15 Jul 2025 15:42:54 -0400
Subject: [PATCH 1/3] restyle button with diff icon and padding

---
 .../components/sessions/SessionHistoryView.tsx    | 15 ++++++++-------
 ui/desktop/src/components/ui/BackButton.tsx       |  8 ++++----
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/ui/desktop/src/components/sessions/SessionHistoryView.tsx b/ui/desktop/src/components/sessions/SessionHistoryView.tsx
index 23d764743d76..1fd7f00784e8 100644
--- a/ui/desktop/src/components/sessions/SessionHistoryView.tsx
+++ b/ui/desktop/src/components/sessions/SessionHistoryView.tsx
@@ -10,7 +10,6 @@ import {
   Target,
   LoaderCircle,
   AlertCircle,
-  ChevronLeft,
   ExternalLink,
 } from 'lucide-react';
 import { type SessionDetails } from '../../sessions';
@@ -32,6 +31,7 @@ import ProgressiveMessageList from '../ProgressiveMessageList';
 import { SearchView } from '../conversation/SearchView';
 import { ChatContextManagerProvider } from '../context_management/ChatContextManager';
 import { Message } from '../../types/message';
+import BackButton from '../ui/BackButton';
 
 // Helper function to determine if a message is a user message (same as useChatEngine)
 const isUserMessage = (message: Message): boolean => {
@@ -89,10 +89,11 @@ const SessionHeader: React.FC<{
   return (
     <div className="flex flex-col pb-8 border-b">
       <div className="flex items-center pt-13 pb-2">
-        <Button onClick={onBack} size="xs" variant="outline">
-          <ChevronLeft />
-          Back
-        </Button>
+        <BackButton
+          onClick={onBack}
+          size="default"
+          className="rounded-full px-6 py-2 flex items-center gap-2 text-white hover:cursor-pointer"
+        />
       </div>
       <h1 className="text-4xl font-light mb-4">{title}</h1>
       <div className="flex items-center">{children}</div>
@@ -372,12 +373,12 @@ const SessionHistoryView: React.FC<SessionHistoryViewProps> = ({
           </DialogHeader>
 
           <div className="py-4">
-            <div className="relative rounded-lg border border-borderSubtle px-3 py-2 flex items-center bg-gray-100 dark:bg-gray-600">
+            <div className="relative rounded-full border border-borderSubtle px-3 py-2 flex items-center bg-gray-100 dark:bg-gray-600">
               <code className="text-sm text-textStandard dark:text-textStandardInverse overflow-x-hidden break-all pr-8 w-full">
                 {shareLink}
               </code>
               <Button
-                shape="round"
+                shape="pill"
                 variant="ghost"
                 className="absolute right-2 top-1/2 -translate-y-1/2"
                 onClick={handleCopyLink}
diff --git a/ui/desktop/src/components/ui/BackButton.tsx b/ui/desktop/src/components/ui/BackButton.tsx
index fab0711956c8..12df7c4d305b 100644
--- a/ui/desktop/src/components/ui/BackButton.tsx
+++ b/ui/desktop/src/components/ui/BackButton.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ChevronLeft } from 'lucide-react';
+import { ArrowLeft } from 'lucide-react';
 import { Button } from './button';
 import type { VariantProps } from 'class-variance-authority';
 import { buttonVariants } from './button';
@@ -14,8 +14,8 @@ interface BackButtonProps extends VariantProps<typeof buttonVariants> {
 const BackButton: React.FC<BackButtonProps> = ({
   onClick,
   className = '',
-  variant = 'outline',
-  size = 'xs',
+  variant = 'secondary',
+  size = 'default',
   shape = 'pill',
   showText = true,
   ...props
@@ -39,7 +39,7 @@ const BackButton: React.FC<BackButtonProps> = ({
       className={className}
       {...props}
     >
-      <ChevronLeft />
+      <ArrowLeft />
       {showText && 'Back'}
     </Button>
   );

From 73da7f84ca30c34964d5e5e7034e2ea19d188e40 Mon Sep 17 00:00:00 2001
From: Caroline McKenzie <cmckenzie@squareup.com>
Date: Tue, 15 Jul 2025 15:57:08 -0400
Subject: [PATCH 2/3] spacing fixed on chat history page to accomodate

---
 ui/desktop/src/components/sessions/SessionHistoryView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/desktop/src/components/sessions/SessionHistoryView.tsx b/ui/desktop/src/components/sessions/SessionHistoryView.tsx
index 1fd7f00784e8..7442b831f581 100644
--- a/ui/desktop/src/components/sessions/SessionHistoryView.tsx
+++ b/ui/desktop/src/components/sessions/SessionHistoryView.tsx
@@ -88,14 +88,14 @@ const SessionHeader: React.FC<{
 }> = ({ onBack, children, title, actionButtons }) => {
   return (
     <div className="flex flex-col pb-8 border-b">
-      <div className="flex items-center pt-13 pb-2">
+      <div className="flex items-center pt-0 pb-2">
         <BackButton
           onClick={onBack}
           size="default"
           className="rounded-full px-6 py-2 flex items-center gap-2 text-white hover:cursor-pointer"
         />
       </div>
-      <h1 className="text-4xl font-light mb-4">{title}</h1>
+      <h1 className="text-4xl font-light mb-4 pt-5">{title}</h1>
       <div className="flex items-center">{children}</div>
       {actionButtons && <div className="flex items-center space-x-3 mt-4">{actionButtons}</div>}
     </div>

From 740fb0fda5f542058b76a96ec978fd23e18b83ba Mon Sep 17 00:00:00 2001
From: Caroline McKenzie <cmckenzie@squareup.com>
Date: Tue, 15 Jul 2025 16:26:34 -0400
Subject: [PATCH 3/3] unify the styling across the schedule and session history
 pages.

---
 .../src/components/schedule/ScheduleDetailView.tsx     |  4 ++--
 .../src/components/sessions/SessionHistoryView.tsx     | 10 +++-------
 ui/desktop/src/components/ui/BackButton.tsx            |  6 +++++-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/ui/desktop/src/components/schedule/ScheduleDetailView.tsx b/ui/desktop/src/components/schedule/ScheduleDetailView.tsx
index 854ffe7bbd96..171f0ed61899 100644
--- a/ui/desktop/src/components/schedule/ScheduleDetailView.tsx
+++ b/ui/desktop/src/components/schedule/ScheduleDetailView.tsx
@@ -497,8 +497,8 @@ const ScheduleDetailView: React.FC<ScheduleDetailViewProps> = ({ scheduleId, onN
     <div className="h-screen w-full flex flex-col bg-background-default text-text-default">
       <div className="px-8 pt-6 pb-4 border-b border-border-subtle flex-shrink-0">
         <BackButton onClick={onNavigateBack} />
-        <h1 className="text-3xl font-medium text-text-prominent mt-1">Schedule Details</h1>
-        <p className="text-sm text-text-subtle mt-1">Viewing Schedule ID: {scheduleId}</p>
+        <h1 className="text-4xl font-light mt-1 mb-1 pt-8">Schedule Details</h1>
+        <p className="text-sm text-text-muted mb-1">Viewing Schedule ID: {scheduleId}</p>
       </div>
 
       <ScrollArea className="flex-grow">
diff --git a/ui/desktop/src/components/sessions/SessionHistoryView.tsx b/ui/desktop/src/components/sessions/SessionHistoryView.tsx
index 7442b831f581..ff5a6b8b21de 100644
--- a/ui/desktop/src/components/sessions/SessionHistoryView.tsx
+++ b/ui/desktop/src/components/sessions/SessionHistoryView.tsx
@@ -88,14 +88,10 @@ const SessionHeader: React.FC<{
 }> = ({ onBack, children, title, actionButtons }) => {
   return (
     <div className="flex flex-col pb-8 border-b">
-      <div className="flex items-center pt-0 pb-2">
-        <BackButton
-          onClick={onBack}
-          size="default"
-          className="rounded-full px-6 py-2 flex items-center gap-2 text-white hover:cursor-pointer"
-        />
+      <div className="flex items-center pt-0 mb-1">
+        <BackButton onClick={onBack} />
       </div>
-      <h1 className="text-4xl font-light mb-4 pt-5">{title}</h1>
+      <h1 className="text-4xl font-light mb-4 pt-6">{title}</h1>
       <div className="flex items-center">{children}</div>
       {actionButtons && <div className="flex items-center space-x-3 mt-4">{actionButtons}</div>}
     </div>
diff --git a/ui/desktop/src/components/ui/BackButton.tsx b/ui/desktop/src/components/ui/BackButton.tsx
index 12df7c4d305b..f927ff67ae53 100644
--- a/ui/desktop/src/components/ui/BackButton.tsx
+++ b/ui/desktop/src/components/ui/BackButton.tsx
@@ -3,6 +3,7 @@ import { ArrowLeft } from 'lucide-react';
 import { Button } from './button';
 import type { VariantProps } from 'class-variance-authority';
 import { buttonVariants } from './button';
+import { cn } from '../../utils';
 
 interface BackButtonProps extends VariantProps<typeof buttonVariants> {
   onClick?: () => void;
@@ -36,7 +37,10 @@ const BackButton: React.FC<BackButtonProps> = ({
       variant={variant}
       size={size}
       shape={shape}
-      className={className}
+      className={cn(
+        'rounded-full px-6 py-2 flex items-center gap-2 text-text-default hover:cursor-pointer',
+        className
+      )}
       {...props}
     >
       <ArrowLeft />