Back Button Restyling (#3442)

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>
+        <h1 className="text-4xl font-light mt-1 mb-1 pt-8">Schedule Details</h1>
-        <p className="text-sm text-text-subtle mt-1">Viewing Schedule ID: {scheduleId}</p>
+        <p className="text-sm text-text-muted mb-1">Viewing Schedule ID: {scheduleId}</p>
       </div>
 
       <ScrollArea className="flex-grow">

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 => {
@@ -88,13 +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-13 pb-2">
+      <div className="flex items-center pt-0 mb-1">
-        <Button onClick={onBack} size="xs" variant="outline">
+        <BackButton onClick={onBack} />
-          <ChevronLeft />
-          Back
-        </Button>
       </div>
-      <h1 className="text-4xl font-light mb-4">{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>
@@ -372,12 +369,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}

ui/desktop/src/components/ui/BackButton.tsx

@@ -1,8 +1,9 @@
 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';
+import { cn } from '../../utils';
 
 interface BackButtonProps extends VariantProps<typeof buttonVariants> {
   onClick?: () => void;
@@ -14,8 +15,8 @@ interface BackButtonProps extends VariantProps<typeof buttonVariants> {
 const BackButton: React.FC<BackButtonProps> = ({
   onClick,
   className = '',
-  variant = 'outline',
+  variant = 'secondary',
-  size = 'xs',
+  size = 'default',
   shape = 'pill',
   showText = true,
   ...props
@@ -36,10 +37,13 @@ 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}
     >
-      <ChevronLeft />
+      <ArrowLeft />
       {showText && 'Back'}
     </Button>
   );