Facelift (#2)

* Add header and background image * Add footer and change the primary color * Refactor UI
andreas-bauer · Jul 14, 2024 · c5d1a9b · c5d1a9b
1 parent c113203
commit c5d1a9b
Show file tree

Hide file tree

Showing 13 changed files with 148 additions and 21 deletions.
diff --git a/public/next.svg b/public/next.svg
diff --git a/public/vercel.svg b/public/vercel.svg
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,9 @@ import React from 'react'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
+import { Header } from '@/components/Header'
+import { BackgroundImage } from '@/components/BackgroundImage'
+import { Footer } from '@/components/Footer'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -16,8 +19,13 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang='en'>
-      <body className={inter.className}>{children}</body>
+    <html lang='en' className='h-full bg-white antialiased'>
+      <body className={inter.className + 'h-full bg-white'}>
+        <Header />
+        <BackgroundImage position='right' className='-bottom-32 -top-40' />
+        {children}
+        <Footer />
+      </body>
     </html>
   )
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,10 +2,12 @@
 import { useEffect, useRef, useState } from 'react'
 import { CheckIcon, ClipboardIcon, PlayIcon } from '@heroicons/react/24/outline'
 import { Radio, RadioGroup } from '@headlessui/react'
+import { PrimaryButton } from '@/components/PrimaryButton'
 import { Authors, allCreditRoles, Credit, isCredit } from '@/lib/credit/credit'
 import { CreditGenerator } from '@/lib/credit/generator'
 import { toSimpleLatex } from '@/lib/credit/generator-latex'
 import { toPlainText } from '@/lib/credit/generator-plaintext'
+import { SecondaryButton } from '@/components/SecondaryButton'
 
 const DEFAULT_STYLE = 'Plain Text'
 const MAX_NUM_AUTHORS = 6
@@ -77,10 +79,10 @@ export default function Home() {
   }
 
   return (
-    <main className='flex min-h-screen flex-col items-center justify-between p-12'>
-      <div className='w-fullconst flex flex-row gap-4'>
+    <main className='flex min-h-screen flex-col items-center justify-between p-4'>
+      <div className='w-fullconst z-10 flex flex-row gap-4'>
         {/* Left side */}
-        <div className='w-1/2 divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow'>
+        <div className='w-1/2 divide-y divide-gray-200 overflow-hidden rounded-md bg-white/70 shadow'>
           <div className='flex-wggrap flex items-center justify-between px-4 py-5'>
             {/* Card header */}
             <label className='text-xl text-gray-dark'>Author information</label>
@@ -181,22 +183,19 @@ export default function Home() {
         </div>
 
         {/* Right side */}
-        <div className='w-1/2 divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow'>
+        <div className='w-1/2 divide-y divide-gray-200 overflow-hidden rounded-md bg-white/70 shadow'>
           <div className='flex flex-wrap items-center justify-between px-4 py-4'>
             {/* Card header */}
-            <button
-              type='submit'
-              form='author-form'
-              className='relative inline-flex items-center gap-x-1.5 rounded-md bg-primary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-hover'
-            >
+            <PrimaryButton tabIndex={20} type='submit' form='author-form'>
               <PlayIcon className='-ml-0.5 h-5 w-5' />
               Generate Text
-            </button>
+            </PrimaryButton>
 
             <div>
               <select
                 id='generator-style'
                 name='generator style'
+                tabIndex={21}
                 onChange={(e) => setSelectedStyle(e.target.value)}
                 className='block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6'
               >
@@ -206,10 +205,11 @@ export default function Home() {
               </select>
             </div>
 
-            <button
+            <SecondaryButton
               type='submit'
+              className='w-24'
+              tabIndex={22}
               onClick={onCopyHandler}
-              className='inline-flex w-24 justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-dark shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100'
             >
               <CheckIcon
                 className={`-ml-0.5 h-5 w-5 ${showSuccessCopy ? '' : 'hidden'}`}
@@ -218,7 +218,7 @@ export default function Home() {
                 className={`-ml-0.5 h-5 w-5 ${showSuccessCopy ? 'hidden' : ''}`}
               />
               {showSuccessCopy ? 'Copied!' : 'Copy'}
-            </button>
+            </SecondaryButton>
           </div>
           <div className='px-4 py-5'>
             {/* Content goes here */}

diff --git a/src/components/BackgroundImage.tsx b/src/components/BackgroundImage.tsx
@@ -0,0 +1,39 @@
+import Image from 'next/image'
+import clsx from 'clsx'
+
+import backgroundImage from '@/images/background.jpg'
+
+export function BackgroundImage({
+  className,
+  position = 'left',
+}: {
+  className?: string
+  position?: 'left' | 'right'
+}) {
+  return (
+    <div
+      className={clsx(
+        'absolute inset-0 overflow-hidden bg-indigo-50',
+        className
+      )}
+    >
+      <Image
+        className={clsx(
+          'absolute top-0',
+          position === 'left' &&
+            'left-0 translate-x-[-55%] translate-y-[-10%] -scale-x-100 sm:left-1/2 sm:translate-x-[-98%] sm:translate-y-[-6%] lg:translate-x-[-106%] xl:translate-x-[-122%]',
+          position === 'right' &&
+            'left-full -translate-x-1/2 sm:left-1/2 sm:translate-x-[-20%] sm:translate-y-[-15%] md:translate-x-0 lg:translate-x-[5%] lg:translate-y-[4%] xl:translate-x-[27%] xl:translate-y-[-8%]'
+        )}
+        src={backgroundImage}
+        alt=''
+        width={918}
+        height={1495}
+        priority
+        unoptimized
+      />
+      <div className='absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-white' />
+      <div className='absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-white' />
+    </div>
+  )
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -0,0 +1,12 @@
+export function Footer() {
+  return (
+    <footer className='flex-none bg-white py-2'>
+      <div className='flex items-center justify-end'>
+        <p className='z-40 mr-4 text-base text-gray-light'>
+          Copyright &copy; {new Date().getFullYear()} Andreas Bauer. All rights
+          reserved.
+        </p>
+      </div>
+    </footer>
+  )
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -0,0 +1,30 @@
+import Image from 'next/image'
+import { ArrowRightIcon } from '@heroicons/react/24/outline'
+import logo from '@/images/robot-logo128.png'
+
+export function Header() {
+  return (
+    <header className='relative z-50 flex-none pt-4'>
+      <div className='mx-auto flex max-w-7xl items-center justify-center px-8'>
+        <div className='hidden grow basis-0 sm:flex'>
+          <Image src={logo} alt='logo' width={64} height={64} unoptimized />
+        </div>
+
+        <div className='mx-auto flex items-center border-b border-blue-600/10'>
+          <p className='font-mono text-2xl text-blue-600'>CREDIT Maker</p>
+        </div>
+
+        <div className='hidden grow basis-0 justify-end sm:flex'>
+          <a
+            href='https://github.com/andreas-bauer/credit-maker'
+            target='_blank'
+            className='inline-flex items-center gap-x-1.5 font-medium text-blue-600 hover:underline dark:text-blue-500'
+          >
+            GitHub
+            <ArrowRightIcon className='-ml-0.5 h-5 w-5' />
+          </a>
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/src/components/PrimaryButton.tsx b/src/components/PrimaryButton.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import Link from 'next/link'
+import clsx from 'clsx'
+
+type ButtonProps =
+  | React.ComponentPropsWithoutRef<typeof Link>
+  | (React.ComponentPropsWithoutRef<'button'> & { href?: undefined })
+
+export function PrimaryButton({ className, ...props }: ButtonProps) {
+  className = clsx(
+    'inline-flex justify-center items-center rounded-md bg-primary gap-x-1.5 py-2 px-3 text-sm font-semibold text-white hover:bg-primary-hover focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:text-white/70',
+    className
+  )
+
+  return typeof props.href === 'undefined' ? (
+    <button className={className} {...props} />
+  ) : (
+    <Link className={className} {...props} />
+  )
+}
diff --git a/src/components/SecondaryButton.tsx b/src/components/SecondaryButton.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import Link from 'next/link'
+import clsx from 'clsx'
+
+type ButtonProps =
+  | React.ComponentPropsWithoutRef<typeof Link>
+  | (React.ComponentPropsWithoutRef<'button'> & { href?: undefined })
+
+export function SecondaryButton({ className, ...props }: ButtonProps) {
+  className = clsx(
+    'inline-flex justify-center items-center rounded-md bg-white gap-x-1.5 py-2 px-3 text-sm font-semibold text-gray-dark hover:bg-gray-100 focus:outline-none ring-1  ring-inset ring-gray-300 shadow-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:text-white/70',
+    className
+  )
+
+  return typeof props.href === 'undefined' ? (
+    <button className={className} {...props} />
+  ) : (
+    <Link className={className} {...props} />
+  )
+}
diff --git a/src/images/background.jpg b/src/images/background.jpg
diff --git a/src/images/robot-logo128.png b/src/images/robot-logo128.png
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -11,10 +11,10 @@ const config: Config = {
     extend: {
       colors: {
         primary: {
-          ...colors.indigo,
-          DEFAULT: colors.indigo[600],
-          hover: colors.indigo[500],
-          passive: colors.indigo[400],
+          ...colors.blue,
+          DEFAULT: colors.blue[600],
+          hover: colors.blue[500],
+          passive: colors.blue[400],
         },
         'gray-light': colors.gray[500],
         'gray-dark': colors.gray[900],