aljaz/sendstr-web
1
0
Fork 0
mirror of https://github.com/aljazceru/sendstr-web.git synced 2025-12-17 06:24:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

apply dark/light mode color scheme.

Browse Source
This commit is contained in:
Arne Pedersen
2022-12-27 20:53:55 +01:00
parent 1b9d1cc8e6
commit 80562a657b
5 changed files with 63 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/button/index.tsx
View File

@@ -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>

6
src/components/header/index.tsx
View File

@@ -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

48
src/pages/index.tsx
View File

@@ -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>

35
src/styles/global.css
View File

@@ -2,6 +2,35 @@
@tailwind components;
@tailwind utilities;
body {
color: #FFFFFF
}
: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
}
}

6
tailwind.config.js
View File

@@ -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)",
},
},
},