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) => { export const Button = ({ children, disabled, onClick, className }: ButtonProps) => {
return ( return (
<div className={className}> <div className={className}>
<button <button className="btn-main" onClick={onClick} disabled={disabled}>
className="bg-custom-black rounded-md px-6 py-3 w-full h-full shadow"
onClick={onClick}
disabled={disabled}
>
{children} {children}
</button> </button>
</div> </div>

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

@@ -53,10 +53,10 @@ export function Header() {
} }
return ( return (
<header className="bg-custom-green-light mb-5 mx-auto border-0 rounded-xl p-4 shadow-md"> <header className="mb-5 p-4">
<div className="container flex justify-between items-center"> <div className="container mx-auto flex justify-between items-center">
<a href="/" className="py-1.5 mr-4 text-lg cursor-pointer"> <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> </a>
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
{/* <Link {/* <Link

20
src/pages/index.tsx
View File

@@ -17,10 +17,11 @@ export default function Home({ keys }: HomeProps) {
const LandingView = () => ( const LandingView = () => (
<div className="max-w-[64rem] m-auto"> <div className="max-w-[64rem] m-auto">
<Card>
<div className="p-10"> <div className="p-10">
<h1 className="text-2xl text-bold pb-5">Open source e2e encrypted shared clipboard</h1> <h1 className="font-bold text-5xl md:text-7xl text-bold pb-10">
<p className="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{" "} 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"> <a className="underline" href="https://github.com/nostr-protocol/nostr" target="_blank">
Nostr Nostr
@@ -29,16 +30,15 @@ export default function Home({ keys }: HomeProps) {
default relay deletes messages after 1 hour. To get started open this page on another default relay deletes messages after 1 hour. To get started open this page on another
device and choose one of the options below. device and choose one of the options below.
</p> </p>
<div className="flex w-full"> <div className="flex w-full justify-between gap-8">
<Button className="w-1/2 px-4" onClick={() => setClientType("send")}> <Button className="w-1/2 shadow-lg" onClick={() => setClientType("send")}>
Send Send
</Button> </Button>
<Button className="w-1/2 px-4" onClick={() => setClientType("receive")}> <Button className="w-1/2 shadow-lg" onClick={() => setClientType("receive")}>
Receive Receive
</Button> </Button>
</div> </div>
</div> </div>
</Card>
</div> </div>
) )
@@ -57,7 +57,7 @@ export default function Home({ keys }: HomeProps) {
<> <>
<Head> <Head>
<title>Sendstr</title> <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="viewport" content="initial-scale=1.0, width=device-width" />
<meta <meta
name="description" name="description"
@@ -85,12 +85,12 @@ export default function Home({ keys }: HomeProps) {
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png"></link> <link rel="apple-touch-icon" href="/apple-touch-icon.png"></link>
</Head> </Head>
<div className="bg-custom-green-dark min-h-screen"> <div className="min-h-screen">
<div className="p-5"> <div className="p-5">
<div className="max-w-[80rem] mx-auto"> <div className="max-w-[80rem] mx-auto">
<Header /> <Header />
</div> </div>
<main> <main className="max-w-2xl mx-auto px-4">
<Page /> <Page />
</main> </main>
</div> </div>

33
src/styles/global.css
View File

@@ -2,6 +2,35 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
body { :root {
color: #FFFFFF --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: { theme: {
extend: { extend: {
colors: { colors: {
"custom-green-light": "#6b9370", primary: "var(--primary)",
"custom-green-dark": "#4D6A51", secondary: "var(--secondary)",
"custom-black": "#3C3744", warning: "var(--warning)",
}, },
}, },
}, },