Design polish etc.

- dark Mode (media)
- responsive for larger screens
- logo and navigation on every page
- next/link in main navigation

components/Card.js

@@ -1,21 +1,20 @@
 export default Card
 
-function Card({heading, content, step}) {
+function Card({ heading, content, step }) {
   return (
-    <div className="rounded-3xl shadow-lg p-2 m-4">
+    <div className="rounded-md p-6 bg-white dark:bg-gray-800 space-y-4">
-      { step ? 
+      {step &&
-        <div className="flex flex-row items-center p-2">
+        <div className="flex flex-row items-center">
           <div className="rounded-full p-4 bg-green-600 h-5 w-5 flex items-center justify-center">
             <p className="text-white text-lg font-bold">
               {step}
             </p>
           </div>
-          <div className="pl-3 font-bold text-xl">
+          <div className="ml-3 font-bold text-xl">
             {heading}
           </div>
-        </div> :
+        </div>}
-      <p></p>}
+      <div className="text-lg">
-      <div className="p-4 text-lg">
         {content}
       </div>
     </div>

components/Form.js

@@ -127,28 +127,24 @@ function Form() {
 
   return (
     <div>
-      <form id="form"  action="https://api.covidpass.marvinsextro.de/covid.pkpass" method="POST" onSubmit={(e) => addToWallet(e)}>
+      <form className="space-y-5" id="form" action="https://api.covidpass.marvinsextro.de/covid.pkpass" method="POST" onSubmit={(e) => addToWallet(e)}>
         <Card step={1} heading="Select Certificate" content={
           <div className="space-y-5">
             <p>
               Please select the (scanned) certificate PDF page, which you received from your doctor, pharmacy, vaccination centre or online.
             </p>
             <input
+              className="w-full"
               type="file"
               id="pdf"
               accept="application/pdf"
               required
-              style={{
-                "whiteSpace": "nowrap",
-                "overflow": "hidden",
-                "width": "300px",
-              }}
             />
           </div>
-        }/>
+        } />
         <Card step={2} heading="Pick a Color" content={
-          <div className="space-y-5">
+          <div className="relative inline-block w-full">
-            <select name="color" id="color">
+            <select name="color" id="color" className="bg-gray-200 dark:bg-gray-900 focus:outline-none w-full h-10 pl-3 pr-6 text-base rounded-md appearance-none cursor-pointer">
               <option value="white">white</option>
               <option value="black">black</option>
               <option value="grey">grey</option>
@@ -158,8 +154,11 @@ function Form() {
               <option value="purple">purple</option>
               <option value="teal">teal</option>
             </select>
+            <div className="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
+              <svg className="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" fillRule="evenodd"></path></svg>
+            </div>
           </div>
-        }/>
+        } />
         <Card step={3} heading="Add to Wallet" content={
           <div className="space-y-5">
             <p>
@@ -167,16 +166,16 @@ function Form() {
               In order for you to make an informed decision, please read the <a href="/privacy">Privacy Policy</a>.
             </p>
             <label htmlFor="privacy" className="flex flex-row space-x-4 items-center">
-              <input type="checkbox" id="privacy" value="privacy" required />
+              <input type="checkbox" id="privacy" value="privacy" required className="h-4 w-4" />
               <p>
                 I accept the <a href="/privacy" className="underline">Privacy Policy</a>
               </p>
             </label>
             <div className="flex flex-row items-center justify-start">
-              <button id="download" type="download" className="shadow-inner focus:outline-none bg-green-600 py-2 px-3 text-white font-semibold rounded-md disabled:bg-gray-400">
+              <button id="download" type="download" className="focus:outline-none bg-green-600 py-2 px-3 text-white font-semibold rounded-md disabled:bg-gray-400">
                 Add to Wallet
               </button>
-              <div id="spin" style={{"display": "none"}}>
+              <div id="spin" style={{ "display": "none" }}>
                 <svg className="animate-spin h-5 w-5 ml-2" viewBox="0 0 24 24">
                   <circle className="opacity-0" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                   <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
@@ -184,11 +183,10 @@ function Form() {
               </div>
             </div>
           </div>
-        }/>
+        } />
       </form>
       <Alert />
-      <canvas id="canvas" style={{display: "none"}} />
+      <canvas id="canvas" style={{ display: "none" }} />
     </div>
   )
 }
-  

components/Logo.js

@@ -1,14 +1,17 @@
 import Icon from '../public/favicon.svg'
+import Link from 'next/link'
 
 export default Logo
 
 function Logo() {
   return (
-    <div className="flex flex-row items-center p-3 justify-center space-x-1" >
+    <Link href="/">
-      <Icon />
+      <a className="flex flex-row items-center p-3 justify-center space-x-1" >
-      <h1 className="text-3xl font-bold">
+        <Icon className="fill-current" />
-        CovidPass
+        <h1 className="text-3xl font-bold">
-      </h1>
+          CovidPass
-    </div>
+        </h1>
+      </a>
+    </Link>
   )
 }

components/Page.js

@@ -1,15 +1,32 @@
 import Head from 'next/head'
+import Logo from './Logo'
+import Link from 'next/link'
 
 export default Page
 
-function Page({content}) {
+function Page({ content }) {
   return (
-    <div className="lg:w-1/3 lg:mx-auto flex flex-col min-h-screen justify-center md:px-12 py-12">
+    <div className="md:w-2/3 xl:w-2/5 md:mx-auto flex flex-col min-h-screen justify-center px-5 py-12">
       <Head>
         <title>CovidPass</title>
         <link rel="icon" href="/favicon.png" />
       </Head>
-      {content}
+      <div>
+        <main className="flex flex-col space-y-5">
+          <Logo />
+
+          {content}
+
+          <footer>
+            <nav className="nav flex space-x-4 m-6 flex-row-reverse space-x-reverse text-md font-bold">
+              <Link href="/privacy"><a className="hover:underline" >Privacy Policy</a></Link>
+              <Link href="/imprint"><a className="hover:underline" >Imprint</a></Link>
+              <a href="https://www.paypal.com/paypalme/msextro" className="hover:underline" >Donate</a>
+              <a href="https://github.com/marvinsxtr/covidpass" className="hover:underline" >GitHub</a>
+            </nav>
+          </footer>
+        </main>
+      </div>
     </div>
   )
 }

pages/_document.js

@@ -0,0 +1,18 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class CustomDocument extends Document {
+
+    render() {
+        return (
+            <Html lang="en">
+                <Head />
+                <body className="bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white">
+                    <Main />
+                    <NextScript />
+                </body>
+            </Html>
+        )
+    }
+}
+
+export default CustomDocument

pages/imprint.js

@@ -4,7 +4,7 @@ import Card from '../components/Card'
 export default function Imprint() {
   return(
     <Page content={
-      <Card step=" " heading="Impressum" content={
+      <Card step="§" heading="Imprint" content={
         <div className="space-y-2">
           <p className="font-bold">Information according to § 5 TMG</p>
           <p>

pages/index.js

@@ -32,27 +32,14 @@ export default function Home() {
         }}
       />
       <Page content={
-        <div>
+        <div className="space-y-5">
-          <main className="flex flex-col">
+          <Card content={
-            <Logo />
+            <p>
+              Add your EU Digital Covid Vaccination Certificates to your favorite wallet app. On iOS, please use the Safari Browser.
+            </p>
+          } />
 
-            <Card content={
+          <Form className="flex-grow" />
-              <p>
-                Add your EU Digital Covid Vaccination Certificates to your favorite wallet app. On iOS, please use the Safari Browser.
-              </p>
-            } />
-
-            <Form className="flex-grow" />
-            
-            <footer>
-              <nav className="nav flex space-x-4 m-6 flex-row-reverse space-x-reverse text-md font-bold">
-                <a href="/privacy" className="hover:underline" >Privacy Policy</a>
-                <a href="/imprint" className="hover:underline" >Imprint</a>
-                <a href="https://www.paypal.com/paypalme/msextro" className="hover:underline" >Donate</a>
-                <a href="https://github.com/marvinsxtr/covidpass" className="hover:underline" >GitHub</a>
-              </nav>
-            </footer>
-          </main>
         </div>
       } />
     </>

pages/privacy.js

@@ -4,7 +4,7 @@ import Card from '../components/Card'
 export default function Privacy() {
   return(
     <Page content={
-      <Card step=" " heading="Privacy Policy" content={
+      <Card step="i" heading="Privacy Policy" content={
         <div className="space-y-2">
           <p>
             Our privacy policy is based on the terms used by the European legislator for the adoption of the General Data Protection Regulation (GDPR).

tailwind.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   mode: 'jit',
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
-  darkMode: false,
+  darkMode: 'media',
   theme: {
     extend: {},
   },