feat: update header and footer

experiment-station · Dec 13, 2023 · 1d53306 · 1d53306
1 parent 9976587
commit 1d53306
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/components/layout/app-footer.tsx b/components/layout/app-footer.tsx
@@ -1,6 +1,6 @@
-import { GitHubLogoIcon, TwitterLogoIcon } from '@radix-ui/react-icons';
 import { Flex, Link, Text } from '@radix-ui/themes';
 import React from 'react';
+import { FaGithub, FaXTwitter } from 'react-icons/fa6';
 
 import { AppContent } from './app-content';
 
@@ -18,20 +18,20 @@ const FOOTER_SERVICE_LINKS = [
 const FOOTER_SOCIAL_LINKS = [
   {
     href: 'https://github.com/experiment-station/beecast',
-    icon: <GitHubLogoIcon />,
+    icon: <FaGithub />,
     title: 'GitHub',
   },
   {
-    href: 'https://twitter.com/beecast_ai',
-    icon: <TwitterLogoIcon />,
-    title: 'Twitter',
+    href: 'https://x.com/beecast_ai',
+    icon: <FaXTwitter />,
+    title: 'X.com',
   },
 ] as const;
 
 export function AppFooter() {
   return (
     <AppContent>
-      <Flex justify="between" py="4">
+      <Flex align="end" justify="between" py="4">
         <Flex align="start" direction="column">
           <Text size="2" weight="bold">
             Built with ☕️ by your folks at the{' '}
@@ -57,23 +57,19 @@ export function AppFooter() {
         </Flex>
 
         <Flex align="end" direction="column">
-          <Flex align="center" gap="2">
+          <Flex align="center" gap="3">
             {FOOTER_SOCIAL_LINKS.map((link) => (
               <Link
-                color="gray"
+                highContrast
                 href={link.href}
                 key={link.href}
                 target="_blank"
                 title={link.title}
               >
-                {link.icon}
+                <Text size="5">{link.icon}</Text>
               </Link>
             ))}
           </Flex>
-
-          <Text color="gray" size="2">
-            ©2023 Experiment Station
-          </Text>
         </Flex>
       </Flex>
     </AppContent>

diff --git a/components/layout/app-header.tsx b/components/layout/app-header.tsx
@@ -1,4 +1,3 @@
-import { ArrowRightIcon, PersonIcon } from '@radix-ui/react-icons';
 import {
   Avatar,
   Button,
@@ -12,7 +11,14 @@ import {
   Text,
 } from '@radix-ui/themes';
 import Link from 'next/link';
-import { CgDollar, CgLogOut, CgMediaPodcast, CgOptions } from 'react-icons/cg';
+import {
+  CgArrowRight,
+  CgDollar,
+  CgLogOut,
+  CgMediaPodcast,
+  CgOptions,
+  CgProfile,
+} from 'react-icons/cg';
 
 import { UnstyledButton } from '../ui/unstyled-button';
 import { AppContent } from './app-content';
@@ -38,7 +44,7 @@ function AppHeaderActionsAuthenticated(
     <DropdownMenuRoot>
       <DropdownMenuTrigger>
         <Avatar
-          fallback={<PersonIcon />}
+          fallback={<CgProfile />}
           radius="full"
           src={props.user.avatarURL}
         />
@@ -57,7 +63,7 @@ function AppHeaderActionsAuthenticated(
               {props.user.username}
             </Text>
 
-            <Text color="gray">
+            <Text color="gray" size="1">
               {props.user.credits === 0 ? 'No' : props.user.credits} credits
               remaining
             </Text>
@@ -109,7 +115,7 @@ function AppHeaderActionsGuest() {
     <Button asChild highContrast>
       <Link href="/sign-in">
         Get started
-        <ArrowRightIcon />
+        <CgArrowRight />
       </Link>
     </Button>
   );