From cef0b611ba8d420b584fb4fa076ca8f302253c10 Mon Sep 17 00:00:00 2001
From: Adam Moussa <166072409+amoussa1229@users.noreply.github.com>
Date: Fri, 22 May 2026 18:50:39 -0400
Subject: [PATCH] topbar: update avatar color, add DEV environment indicator
 pill

---
 web/src/components/Topbar.tsx | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/web/src/components/Topbar.tsx b/web/src/components/Topbar.tsx
index b9b6bd6..28062c7 100644
--- a/web/src/components/Topbar.tsx
+++ b/web/src/components/Topbar.tsx
@@ -13,6 +13,8 @@ export default function Topbar() {
     ? user.displayName.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
     : '';
 
+  const isDevMode = !import.meta.env.VITE_COGNITO_DOMAIN;
+
   return (
     <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1, height: 64 }}>
       <Toolbar sx={{ height: 64, minHeight: 64 }}>
@@ -27,11 +29,33 @@ export default function Topbar() {
         </IconButton>
         <Typography variant="h6" noWrap sx={{ flexGrow: 1, fontWeight: 600 }}>
           Proposal System
+          {isDevMode && (
+            <Box
+              component="span"
+              sx={{
+                background: '#FEF3C7',
+                color: '#92400E',
+                border: '1px solid #FCD34D',
+                height: 22,
+                borderRadius: '999px',
+                fontSize: '11px',
+                fontWeight: 700,
+                pl: '8px',
+                pr: '8px',
+                display: 'inline-flex',
+                alignItems: 'center',
+                ml: '12px',
+                verticalAlign: 'middle',
+              }}
+            >
+              DEV
+            </Box>
+          )}
         </Typography>
         {user && (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-              <Avatar sx={{ width: 32, height: 32, bgcolor: '#1B789B', fontSize: 12, fontWeight: 600 }}>
+              <Avatar sx={{ width: 32, height: 32, bgcolor: '#0E7490', fontSize: 12, fontWeight: 600 }}>
                 {initials}
               </Avatar>
               <Box sx={{ display: 'flex', flexDirection: 'column', lineHeight: 1.2 }}>