logos

frontend/common/src/components/DefaultAgentScreen.tsx

@@ -9,6 +9,8 @@ import { SessionDrawer } from './SessionDrawer';
 import { SessionList } from './SessionList';
 import { TimelineFeed } from './TimelineFeed';
 import { getSampleAgentSessions, getSampleAgentSteps } from '../utils/sample-data';
+import logoBlack from '../assets/logo-black-transparent.png';
+import logoWhite from '../assets/logo-white-transparent.gif';
 
 /**
  * DefaultAgentScreen component
@@ -90,9 +92,12 @@ export const DefaultAgentScreen: React.FC = () => {
   const headerContent = (
     <div className="w-full flex items-center justify-between h-full px-4">
       <div className="flex-initial">
-        <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 inline-block text-transparent bg-clip-text">
+        {/* Use the appropriate logo based on theme */}
-          RA.Aid
+        <img 
-        </h1>
+          src={isDarkTheme ? logoWhite : logoBlack} 
+          alt="RA.Aid Logo" 
+          className="h-8"
+        />
       </div>
       
       <div className="flex-initial ml-auto">

frontend/common/src/types/image.d.ts

@@ -0,0 +1,24 @@
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.gif' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpeg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}