Make the logo the proper foreground color for light / dark mode (#534)

onlook-dev · Oct 15, 2024 · f1646ff · f1646ff
1 parent 2653718
commit f1646ff
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 12 deletions.
diff --git a/app/src/assets/word-logo.svg b/app/src/assets/word-logo.svg
diff --git a/app/src/components/Announcement/index.tsx b/app/src/components/Announcement/index.tsx
@@ -1,5 +1,4 @@
 import mountains from '@/assets/mountains.png';
-import wordLogo from '@/assets/word-logo.svg';
 import { DialogTitle } from '@radix-ui/react-dialog';
 import {
  BoxIcon,
@@ -14,6 +13,7 @@ import { Dialog, DialogContent } from '../ui/dialog';
 import { Input } from '../ui/input';
 import { Toggle } from '../ui/toggle';
 import { toast } from '../ui/use-toast';
+import { WordLogo } from '../ui/logo';
 import { Links, MainChannels } from '/common/constants';
 import { UserSettings } from '/common/models/settings';
 import supabase from '/data/clients';
@@ -77,7 +77,7 @@ function Announcement() {
  alt="Onlook logo"
  />
  <div className="absolute top-10 w-full items-center flex flex-col space-y-2">
- <img className="w-1/4" src={wordLogo} alt="Onlook logo" />
+ <WordLogo className="invert"/>
  <DialogTitle className="text-xs">
  Version {window.env.APP_VERSION}
  </DialogTitle>

diff --git a/app/src/components/ui/logo.tsx b/app/src/components/ui/logo.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import wordLogo from '@/assets/word-logo.svg';
+import { ImgHTMLAttributes } from 'react';
+import { cn } from '@/lib/utils';
+
+const WordLogo = React.forwardRef<HTMLImageElement, ImgHTMLAttributes<HTMLImageElement>>(
+ ({ className, ...props }, ref) => (
+ <img
+ ref={ref}
+ src={wordLogo}
+ alt="Onlook logo"
+ className={cn(
+ 'w-1/4 dark:invert', 
+ className,
+ )}
+ {...props}
+ />
+ ),
+);
+WordLogo.displayName = 'WordLogo';
+
+export { WordLogo };
diff --git a/app/src/routes/projects/TopBar/index.tsx b/app/src/routes/projects/TopBar/index.tsx
@@ -1,4 +1,3 @@
-import wordLogo from '@/assets/word-logo.svg';
 import { useAuthManager } from '@/components/Context';
 import { Button } from '@/components/ui/button';
 import {
@@ -8,6 +7,7 @@ import {
  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { cn } from '@/lib/utils';
+import { WordLogo } from '@/components/ui/logo';
 import { CreateMethod } from '@/routes/projects/helpers';
 import { DownloadIcon, FilePlusIcon, PlusIcon, ExitIcon, GearIcon } from '@radix-ui/react-icons';
 import { observer } from 'mobx-react-lite';
@@ -46,7 +46,7 @@ export const TopBar = observer(
  return (
  <div className="flex flex-row h-12 px-12 items-center">
  <div className="flex-1 flex items-center justify-start mt-3">
- <img className="w-24" src={wordLogo} alt="Onlook logo" />
+ <WordLogo className="w-24" />
  </div>
  <div className="flex-1 flex justify-end space-x-2 mt-4 items-center">
  <DropdownMenu>

diff --git a/app/src/routes/signin/index.tsx b/app/src/routes/signin/index.tsx
@@ -1,6 +1,6 @@
 import dunes from '@/assets/dunes-login.png';
 import googleLogo from '@/assets/google-logo.svg';
-import wordLogo from '@/assets/word-logo.svg';
+import { WordLogo } from '@/components/ui/logo';
 import { useAuthManager } from '@/components/Context';
 import { Button } from '@/components/ui/button';
 import { GitHubLogoIcon } from '@radix-ui/react-icons';
@@ -40,7 +40,7 @@ const SignIn = observer(() => {
  <div className="flex h-[calc(100vh-2.5rem)]">
  <div className="flex flex-col justify-between w-full h-full max-w-xl p-16 space-y-8 overflow-auto">
  <div className="flex items-center space-x-2">
- <img className="w-1/4" src={wordLogo} alt="Onlook logo" />
+ <WordLogo />
  </div>
  <div className="space-y-8">
  <div className="space-y-2 uppercase rounded-full p-1 px-2 w-auto inline-block text-micro border-[0.5px] text-blue-400 border-blue-400">