From 80562a657b9a4014148e3c1298e7f658ea0cc1d8 Mon Sep 17 00:00:00 2001
From: Arne Pedersen <arne.lamo@gmail.com>
Date: Tue, 27 Dec 2022 20:53:55 +0100
Subject: [PATCH] apply dark/light mode color scheme.

---
 src/components/button/index.tsx |  6 +----
 src/components/header/index.tsx |  6 ++---
 src/pages/index.tsx             | 48 ++++++++++++++++-----------------
 src/styles/global.css           | 35 +++++++++++++++++++++---
 tailwind.config.js              |  6 ++---
 5 files changed, 63 insertions(+), 38 deletions(-)

diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
index 5f0f503..d6a0ecb 100644
--- a/src/components/button/index.tsx
+++ b/src/components/button/index.tsx
@@ -8,11 +8,7 @@ type ButtonProps = {
 export const Button = ({ children, disabled, onClick, className }: ButtonProps) => {
   return (
     <div className={className}>
-      <button
-        className="bg-custom-black rounded-md px-6 py-3 w-full h-full shadow"
-        onClick={onClick}
-        disabled={disabled}
-      >
+      <button className="btn-main" onClick={onClick} disabled={disabled}>
         {children}
       </button>
     </div>
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
index 5655b69..155345c 100644
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -53,10 +53,10 @@ export function Header() {
   }
 
   return (
-    <header className="bg-custom-green-light mb-5 mx-auto border-0 rounded-xl p-4 shadow-md">
-      <div className="container flex justify-between items-center">
+    <header className="mb-5 p-4">
+      <div className="container mx-auto flex justify-between items-center">
         <a href="/" className="py-1.5 mr-4 text-lg cursor-pointer">
-          <h1 className="text-xl">Sendstr</h1>
+          <h1 className="text-xl text-primary font-semibold">Sendstr</h1>
         </a>
         <div className="flex items-center space-x-3">
           {/* <Link
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index f475db2..3a01118 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -17,28 +17,28 @@ export default function Home({ keys }: HomeProps) {
 
   const LandingView = () => (
     <div className="max-w-[64rem] m-auto">
-      <Card>
-        <div className="p-10">
-          <h1 className="text-2xl text-bold pb-5">Open source e2e encrypted shared clipboard</h1>
-          <p className="pb-10">
-            Sendstr is an open source end-to-end encrypted shared clipboard app built on top of{" "}
-            <a className="underline" href="https://github.com/nostr-protocol/nostr" target="_blank">
-              Nostr
-            </a>
-            . No login needed, new throwaway encryption keys are generated on page load, and the
-            default relay deletes messages after 1 hour. To get started open this page on another
-            device and choose one of the options below.
-          </p>
-          <div className="flex w-full">
-            <Button className="w-1/2 px-4" onClick={() => setClientType("send")}>
-              Send
-            </Button>
-            <Button className="w-1/2 px-4" onClick={() => setClientType("receive")}>
-              Receive
-            </Button>
-          </div>
+      <div className="p-10">
+        <h1 className="font-bold text-5xl md:text-7xl text-bold pb-10">
+          e2e encrypted shared clipboard
+        </h1>
+        <p className="pb-10 leading-relaxed">
+          Sendstr is an open source end-to-end encrypted shared clipboard app built on top of{" "}
+          <a className="underline" href="https://github.com/nostr-protocol/nostr" target="_blank">
+            Nostr
+          </a>
+          . No login needed, new throwaway encryption keys are generated on page load, and the
+          default relay deletes messages after 1 hour. To get started open this page on another
+          device and choose one of the options below.
+        </p>
+        <div className="flex w-full justify-between gap-8">
+          <Button className="w-1/2 shadow-lg" onClick={() => setClientType("send")}>
+            Send
+          </Button>
+          <Button className="w-1/2 shadow-lg" onClick={() => setClientType("receive")}>
+            Receive
+          </Button>
         </div>
-      </Card>
+      </div>
     </div>
   )
 
@@ -57,7 +57,7 @@ export default function Home({ keys }: HomeProps) {
     <>
       <Head>
         <title>Sendstr</title>
-        <meta name="title" content="Sendstr"/>
+        <meta name="title" content="Sendstr" />
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
         <meta
           name="description"
@@ -85,12 +85,12 @@ export default function Home({ keys }: HomeProps) {
         <link rel="manifest" href="/manifest.json" />
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"></link>
       </Head>
-      <div className="bg-custom-green-dark min-h-screen">
+      <div className="min-h-screen">
         <div className="p-5">
           <div className="max-w-[80rem] mx-auto">
             <Header />
           </div>
-          <main>
+          <main className="max-w-2xl mx-auto px-4">
             <Page />
           </main>
         </div>
diff --git a/src/styles/global.css b/src/styles/global.css
index dc1c5a1..419062a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,6 +2,35 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-    color: #FFFFFF
-}
\ No newline at end of file
+:root {
+    --orange: #fb8500;
+    --orange-light: #ffb703;
+    --green: #004f2d;
+    --green-light: #7dc95e;
+    --red: #ff4e33;
+    --red-light:#ff8370;
+}
+
+.light {
+    --primary: var(--orange);
+    --secondary: var(--green);
+    --warning: var(--red);
+}
+
+.dark {
+    --primary: var(--orange-light);
+    --secondary: var(--green-light);
+    --warning: var(--red-light);
+}
+
+@layer base {
+    body {
+        @apply dark:bg-black dark:text-gray-100 bg-white text-gray-900
+    }
+}
+
+@layer components {
+    .btn-main {
+      @apply bg-primary rounded-md px-6 py-3 w-full h-full shadow text-gray-100 dark:text-gray-900 font-semibold
+    }
+  }
diff --git a/tailwind.config.js b/tailwind.config.js
index d31caa7..255e7e7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,9 +9,9 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        "custom-green-light": "#6b9370",
-        "custom-green-dark": "#4D6A51",
-        "custom-black": "#3C3744",
+        primary: "var(--primary)",
+        secondary: "var(--secondary)",
+        warning: "var(--warning)",
       },
     },
   },