From 5f150c41ca03fb974ae033c30e7cd06e8c6900cc Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Fri, 13 Sep 2024 20:18:35 +0200 Subject: [PATCH 1/4] feat: first efforts for dark mode support --- public/logo/light-icon.svg | 3 + src/app/Header/Options.tsx | 42 ++- .../[pohid]/[chain]/[request]/ActionBar.tsx | 4 +- src/app/[pohid]/[chain]/[request]/page.tsx | 32 +- src/app/globals.css | 275 +++++++++++++++++- src/components/Dropdown/Menu.tsx | 4 +- src/components/Popover.tsx | 2 +- src/components/Request/Card.tsx | 16 +- src/components/Request/Grid.tsx | 13 +- tailwind.config.cjs | 77 +++-- 10 files changed, 396 insertions(+), 72 deletions(-) create mode 100644 public/logo/light-icon.svg diff --git a/public/logo/light-icon.svg b/public/logo/light-icon.svg new file mode 100644 index 0000000..b00e33f --- /dev/null +++ b/public/logo/light-icon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/app/Header/Options.tsx b/src/app/Header/Options.tsx index 502d0cf..cbb4c62 100644 --- a/src/app/Header/Options.tsx +++ b/src/app/Header/Options.tsx @@ -1,10 +1,34 @@ -import ExternalLink from "components/ExternalLink" -import Popover from "components/Popover" -import React from "react"; import Image from "next/image"; - +import React, { useEffect, useState } from "react"; +import ExternalLink from "components/ExternalLink"; +import Popover from "components/Popover"; const Options: React.FC = () => { + const [isDarkMode, setIsDarkMode] = useState(false); + + useEffect(() => { + const savedTheme = localStorage.getItem("theme"); + if (savedTheme === "dark") { + document.documentElement.classList.add("dark"); + setIsDarkMode(true); + } else { + document.documentElement.classList.remove("dark"); + setIsDarkMode(false); + } + }, []); + + const toggleTheme = () => { + if (isDarkMode) { + document.documentElement.classList.remove("dark"); + localStorage.setItem("theme", "light"); + setIsDarkMode(false); + } else { + document.documentElement.classList.add("dark"); + localStorage.setItem("theme", "dark"); + setIsDarkMode(true); + } + }; + return (
@@ -49,7 +73,17 @@ const Options: React.FC = () => {
+ + toggle theme ); }; + export default Options; diff --git a/src/app/[pohid]/[chain]/[request]/ActionBar.tsx b/src/app/[pohid]/[chain]/[request]/ActionBar.tsx index 4bb8df7..57dd0ab 100644 --- a/src/app/[pohid]/[chain]/[request]/ActionBar.tsx +++ b/src/app/[pohid]/[chain]/[request]/ActionBar.tsx @@ -273,7 +273,7 @@ export default withClientConnected(function ActionBar({ const statusColor = colorForStatus(status, revocation, expired); return ( -
+
Status (function ActionBar({ View case #{currentChallenge.disputeId} diff --git a/src/app/[pohid]/[chain]/[request]/page.tsx b/src/app/[pohid]/[chain]/[request]/page.tsx index 896a733..ad66461 100644 --- a/src/app/[pohid]/[chain]/[request]/page.tsx +++ b/src/app/[pohid]/[chain]/[request]/page.tsx @@ -237,7 +237,7 @@ export default async function Request({ params }: PageProps) { offChainVouches={offChainVouches} /> -
+
{request.revocation && revocationFile && (
@@ -263,7 +263,7 @@ export default async function Request({ params }: PageProps) { )}
-
+
{registrationFile && ( )} - + {/* {request.claimer.name} */} {registrationFile? registrationFile.name: ''} - + {registrationFile ? registrationFile.bio : ''}
-
@@ -300,7 +300,7 @@ export default async function Request({ params }: PageProps) {
{request.claimer.id.slice(0, 20)} @@ -308,10 +308,10 @@ export default async function Request({ params }: PageProps) { {request.claimer.id.slice(20)}
- + {chain.name} @@ -325,7 +325,7 @@ export default async function Request({ params }: PageProps) { height={24} width={24} /> - + {prettifyId(pohId).slice(0, 20)} {prettifyId(pohId).slice(20)} @@ -355,11 +355,11 @@ export default async function Request({ params }: PageProps) { /> )} - + {request.claimer.name} - + {registrationFile ? registrationFile.bio : ''}
@@ -379,7 +379,7 @@ export default async function Request({ params }: PageProps) { href={`/attachment?url=${ipfs(policyLink)}`} className="ml-2 underline underline-offset-2" > -
+
Policy in force at submission
{/* (Policy in force since {new Date(policyUpdate * 1000).toDateString()}) */} @@ -408,7 +408,7 @@ export default async function Request({ params }: PageProps) {
)} {vourchesForData.find((v) => v) && ( -
+
Vouched for
{vourchesForData.map(async (vouch, idx) => { @@ -434,7 +434,7 @@ export default async function Request({ params }: PageProps) {
{vouchersData.find((v) => v) && ( -
+
Vouched by
{vouchersData.map(async (vouch, idx) => { @@ -458,7 +458,7 @@ export default async function Request({ params }: PageProps) {
)}
-
diff --git a/src/app/globals.css b/src/app/globals.css index 7d9e7e9..bee83b7 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -3,7 +3,7 @@ html { @apply text-black; } - + button { @apply cursor-pointer select-none; } @@ -26,23 +26,19 @@ } .divider { - @apply h-0.5 w-full gradient rounded; + @apply h-0.5 w-full bg-shade-400 dark:bg-shade-200 rounded; } .checkbox { - @apply w-6 h-6 border border-theme rounded-sm bg-shade-100 - checked:text-theme - focus:ring-2 focus:ring-offset-1 focus:ring-theme/60; + @apply w-6 h-6 border border-theme rounded-sm bg-shade-100 dark:bg-shade-300; } .radio { - @apply w-6 h-6 border border-theme rounded-full bg-shade-100 - checked:text-theme - focus:ring-2 focus:ring-offset-2 focus:ring-theme/60; + @apply w-6 h-6 border border-theme rounded-full bg-shade-100 dark:bg-shade-300; } - .bordered { - @apply p-px gradient rounded; + .bordered { + @apply p-px gradient rounded; } .btn-main { @@ -69,9 +65,9 @@ .content-wide { @apply mb-16 mx-auto w-11/12 - sm:w-5/6 - md:mt-12 - lg:w-4/5; + sm:w-5/6 + md:mt-12 + lg:w-4/5; } .paper { @@ -81,6 +77,259 @@ @tailwind utilities; @layer utilities { + .border-theme { + border-color: theme("colors.light.theme"); + } + + .text-primaryText { + color: theme("colors.light.primaryText"); + } + + .dark .text-primaryText { + color: theme("colors.dark.primaryText"); + } + + .text-secondaryText { + color: theme("colors.light.secondaryText"); + } + + .dark .text-secondaryText { + color: theme("colors.dark.secondaryText"); + } + + .fill-primaryText { + fill: theme("colors.light.primaryText"); + } + + .dark .fill-primaryText { + fill: theme("colors.dark.primaryText"); + } + + .bg-whiteBackground { + background-color: theme("colors.light.whiteBackground"); + } + + .dark .bg-whiteBackground { + background-color: theme("colors.dark.whiteBackground"); + } + + .border-stroke { + border-color: theme("colors.light.stroke"); + } + + .dark .border-stroke { + border-color: theme("colors.dark.stroke"); + } + + .bg-theme { + background-color: theme("colors.light.theme"); + } + + .dark .border-theme { + border-color: theme("colors.dark.theme"); + } + + .dark .bg-theme { + background-color: theme("colors.dark.theme"); + } + + .text-theme { + color: theme("colors.light.theme"); + } + + .dark .text-theme { + color: theme("colors.dark.theme"); + } + + .text-orange { + color: theme("colors.light.orange"); + } + + .dark .text-orange { + color: theme("colors.dark.orange"); + } + + .text-status-vouching { + color: theme("colors.light.status.vouching"); + } + .text-status-registered { + color: theme("colors.light.status.registered"); + } + .text-status-removed { + color: theme("colors.light.status.removed"); + } + .text-status-revocation { + color: theme("colors.light.status.revocation"); + } + .text-status-claim { + color: theme("colors.light.status.claim"); + } + .text-status-challenged { + color: theme("colors.light.status.challenged"); + } + .text-status-withdrawn { + color: theme("colors.light.status.withdrawn"); + } + .text-status-expired { + color: theme("colors.light.status.expired"); + } + .text-status-transferred { + color: theme("colors.light.status.transferred"); + } + .text-status-transferring { + color: theme("colors.light.status.transferring"); + } + + /* Dark Theme Text Status Colors */ + .dark .text-status-vouching { + color: theme("colors.dark.status.vouching"); + } + .dark .text-status-registered { + color: theme("colors.dark.status.registered"); + } + .dark .text-status-removed { + color: theme("colors.dark.status.removed"); + } + .dark .text-status-revocation { + color: theme("colors.dark.status.revocation"); + } + .dark .text-status-claim { + color: theme("colors.dark.status.claim"); + } + .dark .text-status-challenged { + color: theme("colors.dark.status.challenged"); + } + .dark .text-status-withdrawn { + color: theme("colors.dark.status.withdrawn"); + } + .dark .text-status-expired { + color: theme("colors.dark.status.expired"); + } + .dark .text-status-transferred { + color: theme("colors.dark.status.transferred"); + } + .dark .text-status-transferring { + color: theme("colors.dark.status.transferring"); + } + + .bg-status-vouching { + background-color: theme("colors.light.status.vouching"); + } + .bg-status-registered { + background-color: theme("colors.light.status.registered"); + } + .bg-status-removed { + background-color: theme("colors.light.status.removed"); + } + .bg-status-revocation { + background-color: theme("colors.light.status.revocation"); + } + .bg-status-claim { + background-color: theme("colors.light.status.claim"); + } + .bg-status-challenged { + background-color: theme("colors.light.status.challenged"); + } + .bg-status-withdrawn { + background-color: theme("colors.light.status.withdrawn"); + } + .bg-status-expired { + background-color: theme("colors.light.status.expired"); + } + .bg-status-transferred { + background-color: theme("colors.light.status.transferred"); + } + .bg-status-transferring { + background-color: theme("colors.light.status.transferring"); + } + + .dark .bg-status-vouching { + background-color: theme("colors.dark.status.vouching"); + } + .dark .bg-status-registered { + background-color: theme("colors.dark.status.registered"); + } + .dark .bg-status-removed { + background-color: theme("colors.dark.status.removed"); + } + .dark .bg-status-revocation { + background-color: theme("colors.dark.status.revocation"); + } + .dark .bg-status-claim { + background-color: theme("colors.dark.status.claim"); + } + .dark .bg-status-challenged { + background-color: theme("colors.dark.status.challenged"); + } + .dark .bg-status-withdrawn { + background-color: theme("colors.dark.status.withdrawn"); + } + .dark .bg-status-expired { + background-color: theme("colors.dark.status.expired"); + } + .dark .bg-status-transferred { + background-color: theme("colors.dark.status.transferred"); + } + .dark .bg-status-transferring { + background-color: theme("colors.dark.status.transferring"); + } + + .bg-shade-50 { + background-color: theme("colors.light.shade.50"); + } + .bg-shade-100 { + background-color: theme("colors.light.shade.100"); + } + .bg-shade-200 { + background-color: theme("colors.light.shade.200"); + } + .bg-shade-300 { + background-color: theme("colors.light.shade.300"); + } + .bg-shade-400 { + background-color: theme("colors.light.shade.400"); + } + .bg-shade-500 { + background-color: theme("colors.light.shade.500"); + } + .bg-shade-600 { + background-color: theme("colors.light.shade.600"); + } + + .dark .bg-shade-50 { + background-color: theme("colors.dark.shade.50"); + } + .dark .bg-shade-100 { + background-color: theme("colors.dark.shade.100"); + } + .dark .bg-shade-200 { + background-color: theme("colors.dark.shade.200"); + } + .dark .bg-shade-300 { + background-color: theme("colors.dark.shade.300"); + } + .dark .bg-shade-400 { + background-color: theme("colors.dark.shade.400"); + } + .dark .bg-shade-500 { + background-color: theme("colors.dark.shade.500"); + } + .dark .bg-shade-600 { + background-color: theme("colors.dark.shade.600"); + } + + .btn-main { + background-color: #ff9966; + } + + .divider { + @apply h-0.5 w-full bg-shade-400 dark:bg-shade-200 rounded; + } + + .slider-thumb::-webkit-slider-thumb { + @apply appearance-none w-4 h-4 rounded-full bg-theme cursor-pointer; + } + .centered { display: flex; align-items: center; diff --git a/src/components/Dropdown/Menu.tsx b/src/components/Dropdown/Menu.tsx index 63ef77f..1dc47ab 100644 --- a/src/components/Dropdown/Menu.tsx +++ b/src/components/Dropdown/Menu.tsx @@ -8,10 +8,10 @@ interface DropdownProps { const Dropdown: React.FC = ({ title, children }) => ( {title} + } > -
{children}
+
{children}
 ); diff --git a/src/components/Popover.tsx b/src/components/Popover.tsx index fe40b8d..e7478b9 100644 --- a/src/components/Popover.tsx +++ b/src/components/Popover.tsx @@ -28,7 +28,7 @@ const Popover: React.FC = ({ trigger, children }) => { return ( -
+
{children}
diff --git a/src/components/Request/Card.tsx b/src/components/Request/Card.tsx index de5ebfb..bbe0d79 100644 --- a/src/components/Request/Card.tsx +++ b/src/components/Request/Card.tsx @@ -34,9 +34,9 @@ interface CardInterface extends ContentProps { } const LoadingFallback: React.FC = () => ( -
-
-
+
+
+
); @@ -82,15 +82,15 @@ const Content = ({ : ""; return ( -
+
- {name} + {name}
- - {shortenAddress(requester)} + + {shortenAddress(requester)}
); @@ -116,7 +116,7 @@ function Card({ return (
diff --git a/src/components/Request/Grid.tsx b/src/components/Request/Grid.tsx index 5ac1ce8..da29203 100644 --- a/src/components/Request/Grid.tsx +++ b/src/components/Request/Grid.tsx @@ -114,7 +114,7 @@ const isRequestExpired = ( ) { // Is this the winner request return ( - /* (Number(request.humanity.winnerClaim[0].resolutionTime) > 0 && + /* (Number(request.humanity.winnerClaim[0].resolutionTime) > 0 && Number(request.humanity.winnerClaim[0].resolutionTime) + Number(humanityLifespan) < Date.now() / 1000) || (Number(request.creationTime) + Number(humanityLifespan) < Date.now() / 1000) || */ !request.humanity.registration || @@ -220,8 +220,8 @@ function RequestsGrid() { chainStacks$.set(await getRequestsInitData()); loading.stop(); })(); - - /* (async () => { + + /* (async () => { chainStacks$.set(await getRequestsInitData()); loading.stop(); })(); */ @@ -301,7 +301,7 @@ function RequestsGrid() {
setSearchQuery(e.target.value)} /> @@ -348,7 +348,7 @@ function RequestsGrid() { icon={ } key={chain.id} @@ -382,7 +382,7 @@ function RequestsGrid() { {!pending && ( } >
- + Transfer your humanity to another chain. If you use a contract wallet make sure it has the same address on both chains. diff --git a/src/app/[pohid]/Revoke.tsx b/src/app/[pohid]/Revoke.tsx index a605690..9ec827b 100644 --- a/src/app/[pohid]/Revoke.tsx +++ b/src/app/[pohid]/Revoke.tsx @@ -103,18 +103,18 @@ export default withClientConnected(function Revoke({ >
- - Policy + + Policy - + In order to request removal you need to deposit - + {formatEth(cost)} {homeChain.nativeCurrency.symbol} - + Anyone can put a deposit claiming the removal to be incorrect. If no one does, the individual is removed from the list. If one does, a dispute is created. @@ -134,7 +134,7 @@ export default withClientConnected(function Revoke({
setFile(acceptedFiles[0])} > diff --git a/src/app/[pohid]/[chain]/[request]/Challenge.tsx b/src/app/[pohid]/[chain]/[request]/Challenge.tsx index 1ed4569..83cb5eb 100644 --- a/src/app/[pohid]/[chain]/[request]/Challenge.tsx +++ b/src/app/[pohid]/[chain]/[request]/Challenge.tsx @@ -142,7 +142,7 @@ export default function Challenge({ header="Challenge" trigger={} > -
+
diff --git a/src/app/[pohid]/[chain]/[request]/Evidence.tsx b/src/app/[pohid]/[chain]/[request]/Evidence.tsx index 5028f97..732afdb 100644 --- a/src/app/[pohid]/[chain]/[request]/Evidence.tsx +++ b/src/app/[pohid]/[chain]/[request]/Evidence.tsx @@ -59,7 +59,7 @@ function Item({ index, uri, creationTime, sender }: ItemInterface) {
-
+
submitted by{" "} (function Evidence({ } > -
+
{policy && ( -
+
- - + + Registration Policy (at the time of submission) - + Updated:
@@ -185,7 +185,7 @@ export default withClientConnected(function Evidence({
setFile(acceptedFiles[0])} > diff --git a/src/app/[pohid]/[chain]/[request]/page.tsx b/src/app/[pohid]/[chain]/[request]/page.tsx index ad66461..e3e28d2 100644 --- a/src/app/[pohid]/[chain]/[request]/page.tsx +++ b/src/app/[pohid]/[chain]/[request]/page.tsx @@ -239,18 +239,18 @@ export default async function Request({ params }: PageProps) {
{request.revocation && revocationFile && ( -
+
-
+
Revocation requested - {revocationFile.name} {revocationFile.fileURI && ( )}
-

{revocationFile.description}

+

{revocationFile.description}

- Requested by + Requested by
Policy in force at submission diff --git a/src/app/[pohid]/claim/Photo.tsx b/src/app/[pohid]/claim/Photo.tsx index 787370f..33ab38d 100644 --- a/src/app/[pohid]/claim/Photo.tsx +++ b/src/app/[pohid]/claim/Photo.tsx @@ -169,7 +169,7 @@ function Photo({ advance, photo$ }: PhotoProps) {
{ const file = received[0]; @@ -182,13 +182,13 @@ function Photo({ advance, photo$ }: PhotoProps) { }} disabled={!!originalPhoto} > -
+
Upload photo - + OR @@ -299,10 +299,10 @@ function Photo({ advance, photo$ }: PhotoProps) { {(showCamera || !!originalPhoto || !!photo) && ( )} diff --git a/src/app/[pohid]/claim/Review.tsx b/src/app/[pohid]/claim/Review.tsx index e445460..fb7df2d 100644 --- a/src/app/[pohid]/claim/Review.tsx +++ b/src/app/[pohid]/claim/Review.tsx @@ -53,13 +53,13 @@ function Review({
- + Registration Policy - + Updated:
@@ -118,7 +118,7 @@ function Review({
Initial deposit {balance && ( - + Your balance:{" "} {formatEth(balance.value)} {nativeCurrency.symbol} @@ -143,7 +143,7 @@ function Review({ of selfFunded$.set(formatEth(totalCost))} - className="mx-1 text-theme font-semibold underline underline-offset-2 cursor-pointer" + className="mx-1 text-orange font-semibold underline underline-offset-2 cursor-pointer" > {formatEther(totalCost)} {" "} diff --git a/src/app/[pohid]/claim/Video.tsx b/src/app/[pohid]/claim/Video.tsx index cb6d451..ef97e42 100644 --- a/src/app/[pohid]/claim/Video.tsx +++ b/src/app/[pohid]/claim/Video.tsx @@ -93,11 +93,11 @@ function VideoStep({ advance, video$, isRenewal }: PhotoProps) { {address} and say the phrase - " + " {phrase} - " + " @@ -112,7 +112,7 @@ function VideoStep({ advance, video$, isRenewal }: PhotoProps) { {!showCamera && !video && (
{ const file = received[0]; @@ -139,13 +139,13 @@ function VideoStep({ advance, video$, isRenewal }: PhotoProps) { }); }} > -
+
Upload video - + OR @@ -187,10 +187,10 @@ function VideoStep({ advance, video$, isRenewal }: PhotoProps) { {(showCamera || !!video) && ( )} diff --git a/src/app/[pohid]/page.tsx b/src/app/[pohid]/page.tsx index 74f87ac..72f41fb 100644 --- a/src/app/[pohid]/page.tsx +++ b/src/app/[pohid]/page.tsx @@ -199,7 +199,7 @@ async function Profile({ params: { pohid } }: PageProps) {
-
+
poh id
- + {humanity[homeChain.id]!.humanity!.registration!.expirationTime < Date.now() / 1000 ? "Expired " @@ -254,7 +254,7 @@ async function Profile({ params: { pohid } }: PageProps) { pohId={pohId} /> ) : ( - + Renewal available{" "} {winnerClaimData.exists && (
-
+
{winnerClaimData.status !== "transferring"? 'Winning claim' : @@ -342,7 +342,7 @@ async function Profile({ params: { pohid } }: PageProps) { {pendingRequests.length > 0 && (
-
+
{pendingRequests.length} pending request {pendingRequests.length !== 1 && "s"}
@@ -378,7 +378,7 @@ async function Profile({ params: { pohid } }: PageProps) {
{pastRequests.length > 0 && ( <> -
+
{pastRequests.length} past request {pastRequests.length !== 1 && "s"}
diff --git a/src/app/attachment/Header.tsx b/src/app/attachment/Header.tsx index 4134518..c76212c 100644 --- a/src/app/attachment/Header.tsx +++ b/src/app/attachment/Header.tsx @@ -11,11 +11,11 @@ const Header: React.FC = () => { Paperclip Icon -

File

+

File