diff --git a/.env b/.env index 3b3249794..42bf5f2a3 100644 --- a/.env +++ b/.env @@ -44,3 +44,5 @@ GC_BUCKET_NAME=openbeta-staging # A comma-separated-list of test area IDs # to exclude from the feed NEXT_PUBLIC_TEST_AREA_IDS=18c5dd5c-8186-50b6-8a60-ae2948c548d1 + +DISCORD_INVITE=https://discord.gg/npjkrqATkD \ No newline at end of file diff --git a/src/app/components/DesktopHeader.tsx b/src/app/components/DesktopHeader.tsx index cb48314be..c3695d0c9 100644 --- a/src/app/components/DesktopHeader.tsx +++ b/src/app/components/DesktopHeader.tsx @@ -12,7 +12,7 @@ export const DesktopHeader: React.FC = () => { const navListDefault: NavMenuItemProps[] = [ { - to: 'https://discord.gg/ptpnWWNkJx', + to: process.env.DISCORD_INVITE ?? '', label: 'Discord' }, { @@ -57,7 +57,7 @@ export const DesktopHeader: React.FC = () => { case 'loading': nav = ( <> -
+
) break @@ -66,11 +66,11 @@ export const DesktopHeader: React.FC = () => { } return ( -
+
-
{nav}
+
{nav}
) } diff --git a/src/app/components/PageFooter.tsx b/src/app/components/PageFooter.tsx new file mode 100644 index 000000000..fd843d848 --- /dev/null +++ b/src/app/components/PageFooter.tsx @@ -0,0 +1,42 @@ +import { Logo, LogoSize } from 'app/header' +/** + * Page footer + */ +export const PageFooter: React.FC = () => { + return ( + + ) +} diff --git a/src/app/components/ProfileNavButton.tsx b/src/app/components/ProfileNavButton.tsx index 950a0bc2d..68698331b 100644 --- a/src/app/components/ProfileNavButton.tsx +++ b/src/app/components/ProfileNavButton.tsx @@ -30,7 +30,7 @@ export default function ProfileNavButton ({ isMobile = true }: ProfileNavButtonP
- diff --git a/src/app/footer.tsx b/src/app/footer.tsx deleted file mode 100644 index 13deeab9b..000000000 --- a/src/app/footer.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function Footer (): any { - return (
footer
) -} diff --git a/src/app/global.css b/src/app/global.css index c656e411d..403c66ef0 100644 --- a/src/app/global.css +++ b/src/app/global.css @@ -11,7 +11,7 @@ body, html { height: 100%; font-size: 16px; - @apply font-sans text-base text-base-content; + @apply font-sans text-base text-base-content bg-base-100; } h1 { diff --git a/src/app/header.tsx b/src/app/header.tsx index bf086ddaf..981e4bf39 100644 --- a/src/app/header.tsx +++ b/src/app/header.tsx @@ -1,21 +1,34 @@ import Link from 'next/link' +import clx from 'classnames' + import OpenBetaLogo from '@/assets/brand/openbeta-logo' import { DesktopHeader } from './components/DesktopHeader' import { MobileHeader } from './components/MobileHeader' +/** + * Root page header + */ export default async function Header (): Promise { return (
- +
) } -export const Logo: React.FC = () => { +export enum LogoSize { + sm = 'w-8 h-8', + md = 'w-12 h-12', + lg = 'w-16 h-16' +} +/** + * Reusable logo component + */ +export const Logo: React.FC<{ size?: LogoSize, className?: string }> = ({ size = LogoSize.sm, className }) => { return ( - + ) } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 24566aa93..e26713fab 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,7 +1,7 @@ import '../../public/fonts/fonts.css' import './global.css' import Header from './header' -import Footer from './footer' +import { PageFooter } from './components/PageFooter' import { NextAuthProvider } from './components/NextAuthProvider' export const metadata = { @@ -23,7 +23,7 @@ export default function RootLayout ({ {children}
-
diff --git a/tailwind.config.js b/tailwind.config.js index 7f25b0244..dbb94de82 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -55,7 +55,7 @@ module.exports = { 'base-content': '#111827', // gray-900 'base-300': '#4B5563', // gray-600 'base-200': '#9ca3af', // gray-400 - 'base-100': '#ffffff', // white + 'base-100': '#FAFAF9', // stone-50 '--rounded-box': '0.5rem', '--rounded-btn': '0.5rem', // border radius rounded-btn utility class, used in buttons and similar element