feat: minor visual updates

src/app/layout.tsx

@@ -20,7 +20,7 @@ const ibmPlexSans = localFont({
 });
 
 export const metadata: Metadata = {
-  title: 'BeeAI Artifact',
+  title: 'BeeAI App',
   icons: { icon: '//www.ibm.com/favicon.ico' },
 };
 

src/modules/artifacts/Footer.tsx

@@ -1,5 +1,5 @@
 import { Container } from '@/components/ui/Container';
-import BeeIcon from './BeeIcon.svg';
+import BeeAI from './BeeAI.svg';
 
 interface Props {
   showReportButton?: boolean;
@@ -10,19 +10,23 @@ export function Footer({ showReportButton }: Props) {
     <footer className="sticky bottom-0 left-0 border-t border-t-subtle bg-background py-4">
       <Container>
         <div className="grid gap-x-4 gap-y-1 text-12 text-secondary md:flex md:items-center md:justify-between">
-          <p>
-            <span>Made with</span>{' '}
-            <span className="inline-flex items-center gap-x-0.5 align-top text-dark">
-              <BeeIcon className="h-3 w-3" />
-              <strong>BeeAI</strong>
+          <p className="flex items-baseline gap-x-1.5">
+            <span>Made with</span>
+            <span className="inline-flex shrink-0 text-dark">
+              <BeeAI />
             </span>
           </p>
 
           {showReportButton && (
             <p className="md:text-right">
               Apps are user-generated and may contain unverified or potentially
               unsafe content.{' '}
-              <a href="mailto:bee1@ibm.com" className="underline hover:no-underline">Report</a>
+              <a
+                href="mailto:bee1@ibm.com"
+                className="underline hover:no-underline"
+              >
+                Report
+              </a>
             </p>
           )}
         </div>

src/modules/artifacts/Header.tsx

@@ -1,10 +1,9 @@
 import { ArtifactShared } from '@/app/api/artifacts/types';
 import { Button } from '@/components/ui/Button';
 import { Container } from '@/components/ui/Container';
-import { Tooltip } from '@/components/ui/Tooltip';
-import { DirectionFork, Information } from '@carbon/icons-react';
-import { ArtifactIcon } from './ArtifactIcon';
 import { BEE_SITE_URL } from '@/utils/constants';
+import { DirectionFork } from '@carbon/icons-react';
+import { ArtifactIcon } from './ArtifactIcon';
 
 interface Props {
   artifact: ArtifactShared;
@@ -24,12 +23,6 @@ export function Header({ artifact, token }: Props) {
             <h1 className="text-base font-semibold text-coolGray-100 dark:text-white">
               {artifact.name}
             </h1>
-
-            {artifact.description && (
-              <Tooltip content={artifact.description}>
-                <Information />
-              </Tooltip>
-            )}
           </div>
 
           <div className="justify-self-center whitespace-nowrap md:col-start-3 md:justify-self-end">

src/styles/globals.css

@@ -8,6 +8,8 @@
     --text-light: theme('colors.white');
     --text-secondary: theme('colors.gray.70');
 
+    --text-link: theme('colors.blue.60');
+
     --bg-background: theme('colors.white');
     --bg-layer: theme('colors.coolGray.10');
     --bg-layer-inverse: theme('colors.coolGray.90');
@@ -21,6 +23,8 @@
       --text-light: theme('colors.black');
       --text-secondary: theme('colors.gray.30');
 
+      --text-link: theme('colors.white');
+
       --bg-background: theme('colors.coolGray.90');
       --bg-layer: theme('colors.coolGray.80');
       --bg-layer-inverse: theme('colors.white');
@@ -42,7 +46,7 @@
     @apply text-h2;
   }
   a {
-    @apply focus-base text-blue-60;
+    @apply focus-base text-link;
   }
   button {
     @apply focus-base;

tailwind.config.ts

@@ -81,6 +81,7 @@ export default {
         dark: 'var(--text-dark)',
         light: 'var(--text-light)',
         secondary: 'var(--text-secondary)',
+        link: 'var(--text-link)',
       },
       backgroundColor: {
         background: 'var(--bg-background)',