improve timezone discovery

frontend/src/components/Header.tsx

@@ -1,4 +1,5 @@
 import { Calendar } from 'lucide-react';
+import { getAvatarColor } from '@/lib/utils';
 
 export const Header = () => {
   return (
@@ -14,7 +15,10 @@ export const Header = () => {
           </div>
         </div>
         <div className="flex items-center gap-2">
-          <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-sm font-medium text-primary">
+          <div
+            className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium text-white"
+            style={{ backgroundColor: getAvatarColor("AR") }}
+          >
             AR
           </div>
         </div>