From abc8d15868a4d369086b3e2ac01d5d8cb4685ef0 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 3 Aug 2026 16:27:07 -0700
Subject: [PATCH] [eric] updater: one-for-one with Claude's relaunch card, the
 octopus is our leaf

---
 .../app/components/Layout/UpdateReadyPill.tsx | 29 ++++++-------------
 1 file changed, 9 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app/components/Layout/UpdateReadyPill.tsx b/frontend/src/app/components/Layout/UpdateReadyPill.tsx
index 8466b3d3..68b6fc85 100644
--- a/frontend/src/app/components/Layout/UpdateReadyPill.tsx
+++ b/frontend/src/app/components/Layout/UpdateReadyPill.tsx
@@ -3,9 +3,9 @@ import Box from '@mui/material/Box';
 import Grow from '@mui/material/Grow';
 import Typography from '@mui/material/Typography';
 import CircularProgress from '@mui/material/CircularProgress';
-import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import CloseIcon from '@mui/icons-material/Close';
+import OnboardingLogo from '@/app/components/OnboardingV3/OnboardingLogo';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { setInstalling } from '@/shared/state/updateSlice';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
@@ -77,28 +77,17 @@ const UpdateReadyPill: React.FC = () => {
           transform: hovered && !installing ? 'translateY(-1px)' : 'none',
         }}
       >
-        <Box
-          sx={{
-            width: 30,
-            height: 30,
-            borderRadius: '9px',
-            bgcolor: `${c.accent.primary}1A`,
-            color: c.accent.primary,
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexShrink: 0,
-          }}
-        >
-          <RestartAltIcon sx={{ fontSize: 18 }} />
-        </Box>
+        {/* The octopus is our leaf: the brand mark wears its own coral, everything else follows the theme. */}
+        <OnboardingLogo size={26} style={{ flexShrink: 0 }} />
         <Box sx={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
           <Typography sx={{ fontSize: '0.8125rem', fontWeight: 600, lineHeight: 1.25, color: c.text.primary, whiteSpace: 'nowrap' }}>
-            {installing ? 'Restarting…' : 'Restart to update'}
-          </Typography>
-          <Typography sx={{ fontSize: '0.6875rem', lineHeight: 1.3, color: c.text.tertiary, whiteSpace: 'nowrap' }}>
-            {availableVersion ? `v${availableVersion} ready` : 'New version ready'}
+            {installing ? 'Relaunching…' : 'Relaunch to update'}
           </Typography>
+          {availableVersion && (
+            <Typography sx={{ fontSize: '0.6875rem', lineHeight: 1.3, color: c.text.tertiary, whiteSpace: 'nowrap' }}>
+              v{availableVersion}
+            </Typography>
+          )}
         </Box>
         {installing
           ? <CircularProgress size={14} sx={{ color: c.text.tertiary, ml: 0.5, flexShrink: 0 }} />