NEOS-1059: update logo theming (#1892)

nucleuscloud · May 2, 2024 · 67a7cea · 67a7cea
1 parent 0c09256
commit 67a7cea
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/frontend/apps/web/app/(mgmt)/[account]/new/connection/openai/OpenAiLogo.tsx b/frontend/apps/web/app/(mgmt)/[account]/new/connection/openai/OpenAiLogo.tsx
@@ -1,7 +1,11 @@
-export const OpenAiLogo = () => {
+interface Props {
+  bg: string;
+}
+
+export const OpenAiLogo = ({ bg }: Props) => {
   return (
     <svg
-      fill="#000000"
+      fill={bg}
       width="28px"
       height="29px"
       viewBox="0 0 24 24"

diff --git a/frontend/apps/web/app/(mgmt)/[account]/new/connection/openai/page.tsx b/frontend/apps/web/app/(mgmt)/[account]/new/connection/openai/page.tsx
@@ -1,16 +1,21 @@
+'use client';
 import OverviewContainer from '@/components/containers/OverviewContainer';
 import PageHeader from '@/components/headers/PageHeader';
-import { OpenAiLogo } from './OpenAiLogo';
+import { useTheme } from 'next-themes';
 import OpenAiForm from './OpenAiForm';
+import { OpenAiLogo } from './OpenAiLogo';
 
-export default async function Supabase() {
+export default function OpenAi() {
+  const { resolvedTheme } = useTheme();
   return (
     <OverviewContainer
       Header={
         <PageHeader
           header="OpenAI"
           subHeadings="Configure an OpenAI SDK to be used for AI-focused data generation jobs."
-          leftIcon={<OpenAiLogo />}
+          leftIcon={
+            <OpenAiLogo bg={resolvedTheme === 'dark' ? 'white' : '#272F30'} />
+          }
         />
       }
       containerClassName="px-12 md:px-24 lg:px-32"

diff --git a/frontend/apps/web/components/connections/ConnectionIcon.tsx b/frontend/apps/web/components/connections/ConnectionIcon.tsx
@@ -1,6 +1,7 @@
 import { NeonLogo } from '@/app/(mgmt)/[account]/new/connection/neon/NeonLogo';
 import { OpenAiLogo } from '@/app/(mgmt)/[account]/new/connection/openai/OpenAiLogo';
 import { SupabaseLogo } from '@/app/(mgmt)/[account]/new/connection/supabase/SupabaseLogo';
+import { useTheme } from 'next-themes';
 import { ReactElement } from 'react';
 import { IconContext } from 'react-icons';
 import { DiMysql, DiPostgresql } from 'react-icons/di';
@@ -18,6 +19,8 @@ export default function ConnectionIcon(props: Props): ReactElement | null {
   const width = iconWidth || '40px';
   const height = iconHeight || '40px';
 
+  const { resolvedTheme } = useTheme();
+
   switch (name.toLowerCase()) {
     case 'postgres': {
       return (
@@ -57,7 +60,7 @@ export default function ConnectionIcon(props: Props): ReactElement | null {
     case 'openai': {
       return (
         <IconContext.Provider value={{ style: { width, height } }}>
-          <OpenAiLogo />
+          <OpenAiLogo bg={resolvedTheme === 'dark' ? 'white' : '#272F30'} />
         </IconContext.Provider>
       );
     }