Merge pull request #77 from Proof-Of-Humanity/feat/dark-mode

feat: dark mode
Proof-Of-Humanity · Sep 23, 2024 · 50ab963 · 50ab963
2 parents cabf87e + 3fcebc3
commit 50ab963
Show file tree

Hide file tree

Showing 31 changed files with 499 additions and 138 deletions.
diff --git a/public/logo/light-icon.svg b/public/logo/light-icon.svg
diff --git a/public/logo/new-tab.svg b/public/logo/new-tab.svg
diff --git a/public/logo/paperclip.svg b/public/logo/paperclip.svg
diff --git a/src/app/Footer.tsx b/src/app/Footer.tsx
@@ -7,7 +7,7 @@ const Footer: React.FC = () => (
       className="flex items-center gap-2 text-sm"
       href="https://kleros.io/"
     >
-      SECURED BY{" "}
+      BUILT BY{" "}
       <Image alt="kleros" src="/logo/kleros.svg" width={96} height={24} />
     </ExternalLink>
 

diff --git 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<boolean>(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 (
     <div className="flex flex-row mt-[16px] md:mt-0">
       <ExternalLink href="https://snapshot.org/#/poh.eth/">
@@ -49,7 +73,17 @@ const Options: React.FC = () => {
           </ExternalLink>
         </div>
       </Popover>
+
+      <Image
+        alt="toggle theme"
+        onClick={toggleTheme}
+        className="cursor-pointer ml-2"
+        src={isDarkMode ? " /logo/light-icon.svg" : "/logo/night-icon.svg"}
+        height={16}
+        width={16}
+      />
     </div>
   );
 };
+
 export default Options;
diff --git a/src/app/[pohid]/CrossChain.tsx b/src/app/[pohid]/CrossChain.tsx
@@ -255,9 +255,9 @@ export default withClientConnected<CrossChainProps>(function CrossChain({
   return (
     <div className="w-full p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between border-t">
       <div className="flex flex-col">
-        <span className="text-slate-500">Home chain</span>
+        <span className="text-secondaryText">Home chain</span>
         <span className="flex items-center font-semibold">
-          <ChainLogo chainId={homeChain.id} className="w-4 h-4 ml-1" />
+          <ChainLogo chainId={homeChain.id} className="w-4 h-4 mr-2 fill-primaryText" />
           {homeChain.name}
         </span>
       </div>
@@ -271,7 +271,7 @@ export default withClientConnected<CrossChainProps>(function CrossChain({
             trigger={<button className="text-sky-500" onClick={doTransfer}>Transfer</button>}
           >
             <div className="p-4">
-              <span className="txt m-2">
+              <span className="txt m-2 text-primaryText">
                 Transfer your humanity to another chain. If you use a contract
                 wallet make sure it has the same address on both chains.
               </span>

diff --git a/src/app/[pohid]/Revoke.tsx b/src/app/[pohid]/Revoke.tsx
@@ -103,18 +103,18 @@ export default withClientConnected<RevokeProps>(function Revoke({
     >
       <div className="p-4 flex flex-col items-center">
         <ALink className="flex" href={ipfs(arbitrationInfo.policy)}>
-          <DocumentIcon className="fill-theme w-6 h-6" />
-          <strong className="mr-1 text-theme font-semibold">Policy</strong>
+          <DocumentIcon className="fill-orange w-6 h-6" />
+          <strong className="mr-1 text-orange font-semibold">Policy</strong>
         </ALink>
 
-        <span className="txt mt-8">
+        <span className="txt mt-8 text-primaryText">
           In order to request removal you need to deposit
         </span>
-        <span className="font-semibold text-xl">
+        <span className="font-semibold text-xl text-primaryText">
           {formatEth(cost)} {homeChain.nativeCurrency.symbol}
         </span>
 
-        <span className="m-4">
+        <span className="m-4 text-primaryText">
           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<RevokeProps>(function Revoke({
         <Label>File</Label>
         <div className="bordered w-full rounded-sm">
           <Uploader
-            className="w-full flex justify-center bg-white p-2 outline-dotted outline-white rounded-sm"
+            className="w-full flex justify-center bg-whiteBackgroundWithOpacity p-2 outline-dotted outline-white rounded-sm text-primaryText"
             type="all"
             onDrop={(acceptedFiles) => setFile(acceptedFiles[0])}
           >

diff --git a/src/app/[pohid]/[chain]/[request]/ActionBar.tsx b/src/app/[pohid]/[chain]/[request]/ActionBar.tsx
@@ -277,7 +277,7 @@ export default withClientConnected<ActionBarProps>(function ActionBar({
   const statusColor = colorForStatus(status, revocation, expired);
 
   return (
-    <div className="paper py-[24px] px-[24px] flex flex-col md:flex-row justify-between items-center gap-[12px] lg:gap-[20px] border-b">
+    <div className="paper py-[24px] px-[24px] flex flex-col md:flex-row justify-between items-center gap-[12px] lg:gap-[20px] border-stroke bg-whiteBackground text-primaryText">
       <div className="flex items-center">
         <span className="mr-4">Status</span>
         <span
@@ -428,7 +428,7 @@ export default withClientConnected<ActionBarProps>(function ActionBar({
 
             <ExternalLink
               href={`https://resolve.kleros.io/cases/${currentChallenge.disputeId}`}
-              className="btn-main px-[24px]"
+              className="btn-main gradient px-[24px] h-[48px] rounded"
             >
               View case #{currentChallenge.disputeId}
             </ExternalLink>

diff --git 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={<button className="btn-main">Challenge</button>}
     >
-      <div className="p-4 flex flex-col items-center">
+      <div className="p-4 flex flex-wrap flex-col items-center">
         <ALink className="flex" href={ipfs(arbitrationInfo.policy)}>
           <DocumentIcon className="fill-theme w-6 h-6" />
           <strong className="mr-1 text-theme font-semibold">

diff --git a/src/app/[pohid]/[chain]/[request]/Evidence.tsx b/src/app/[pohid]/[chain]/[request]/Evidence.tsx
@@ -60,7 +60,7 @@ function Item({ index, uri, creationTime, sender }: ItemInterface) {
       </div>
       <div className="px-4 py-2 flex items-center">
         <Identicon diameter={32} address={sender} />
-        <div className="pl-2 flex flex-col">
+        <div className="pl-2 flex flex-col text-primaryText">
           <span>
             submitted by{" "}
             <ExternalLink
@@ -162,20 +162,20 @@ export default withClientConnected<EvidenceProps>(function Evidence({
             </button>
           }
         >
-          <div className="p-4 flex flex-col">
+          <div className="p-4 flex flex-col flex-wrap bg-whiteBackground">
             {policy && (
-              <div className="centered flex-col">
+              <div className="centered flex-col text-primaryText">
                 <ExternalLink
-                  className="flex"
+                  className="flex flex-wrap gap-y-[8px] lg:gap-y-[0]"
                   href={ipfs(arbitrationInfo.registrationMeta)}
                 >
-                  <DocumentIcon className="fill-theme w-6 h-6" />
-                  <strong className="mr-1 text-theme font-semibold">
+                  <DocumentIcon className="fill-orange w-6 h-6" />
+                  <strong className="mr-1 text-orange font-semibold">
                     Registration Policy
                   </strong>
                   (at the time of submission)
                 </ExternalLink>
-                <span className="text-sm text-slate-400">
+                <span className="text-sm text-secondaryText">
                   Updated: <TimeAgo time={arbitrationInfo.updateTime} />
                 </span>
               </div>
@@ -195,7 +195,7 @@ export default withClientConnected<EvidenceProps>(function Evidence({
             <Label>File</Label>
             <div className="bordered w-full rounded-sm">
               <Uploader
-                className="w-full flex justify-center bg-white p-2 outline-dotted outline-white rounded-sm"
+                className="w-full flex justify-center bg-whiteBackgroundWithOpacity p-2 outline-dotted outline-white rounded-sm text-primaryText"
                 type="all"
                 onDrop={(acceptedFiles) => setFile(acceptedFiles[0])}
               >

diff --git a/src/app/[pohid]/[chain]/[request]/Info.tsx b/src/app/[pohid]/[chain]/[request]/Info.tsx
@@ -26,11 +26,11 @@ export default function Info({ nbRequests }: InfoProps) {
         height={128}
         width={128}
       />
-      <p>
+      <p className="text-primaryText">
         The Proof of Humanity ID is a soulbound ID. It corresponds to each
         unique human registered on Proof of Humanity.
       </p>
-      <p>
+      <p className="text-primaryText">
         This POH ID had <strong>{nbRequests} requests</strong> in total
       </p>
     </Modal>

diff --git a/src/app/[pohid]/[chain]/[request]/page.tsx b/src/app/[pohid]/[chain]/[request]/page.tsx
@@ -237,20 +237,20 @@ export default async function Request({ params }: PageProps) {
         offChainVouches={offChainVouches}
       />
 
-      <div className="mb-6 border shadow bg-white rounded">
+      <div className="mb-6 border border-stroke shadow bg-whiteBackground rounded">
         {request.revocation && revocationFile && (
-          <div className="p-4 bg-shade-100">
+          <div className="p-4 bg-primaryBackground">
             <div className="relative">
-              <div className="flex justify-between">
+              <div className="flex justify-between text-primaryText">
                 Revocation requested - {revocationFile.name}
                 {revocationFile.fileURI && (
                   <Attachment uri={revocationFile.fileURI} />
                 )}
               </div>
-              <p className="text-slate-600">{revocationFile.description}</p>
+              <p className="text-primaryText">{revocationFile.description}</p>
             </div>
             <div className="flex font-normal flex-wrap text-sm">
-              <span className="mr-2">Requested by</span>
+              <span className="mr-2 text-secondaryText">Requested by</span>
               <Identicon diameter={16} address={request.requester} />
               <ExternalLink
                 className="ml-1 text-blue-500 flex flex-wrap underline underline-offset-2 break-words break-all"
@@ -263,7 +263,7 @@ export default async function Request({ params }: PageProps) {
         )}
 
         <div className="flex flex-col md:flex-row">
-          <div className="pt-8 px-8 w-2/5 hidden md:flex flex-col items-stretch justify-between background border-r">
+          <div className="pt-8 px-8 w-2/5 hidden md:flex flex-col items-stretch justify-between background border-r border-stroke">
             <div className="flex flex-col items-center">
               {registrationFile && (
                 <Previewed
@@ -280,17 +280,17 @@ export default async function Request({ params }: PageProps) {
                 />
               )}
 
-              <span className="mt-4 mb-12 text-2xl">
+              <span className="mt-4 mb-12 text-2xl text-primaryText">
                 {/* {request.claimer.name} */}
                 {registrationFile? registrationFile.name: ''}
               </span>
 
-              <span className="text-sm font-light">
+              <span className="text-sm font-light text-secondaryText">
                 {registrationFile ? registrationFile.bio : ''}
               </span>
             </div>
 
-            <Label className="mb-8">
+            <Label className="mb-8 text-orange">
               Last update: <TimeAgo time={request.lastStatusChange} />
             </Label>
           </div>
@@ -300,18 +300,18 @@ export default async function Request({ params }: PageProps) {
               <div className="flex items-center">
                 <Identicon diameter={24} address={request.claimer.id} />
                 <ExternalLink
-                  className="ml-2 font-semibold underline underline-offset-2"
+                  className="ml-2 font-semibold underline underline-offset-2 text-primaryText"
                   href={explorerLink(request.claimer.id, chain)}
                 >
                   {request.claimer.id.slice(0, 20)}
                   <wbr />
                   {request.claimer.id.slice(20)}
                 </ExternalLink>
               </div>
-              <span className="flex items-center">
+              <span className="flex items-center text-primaryText">
                 <ChainLogo
                   chainId={chain.id}
-                  className="w-4 h-4 m-1 fill-black"
+                  className="w-4 h-4 m-1 fill-primaryText"
                 />
                 {chain.name}
               </span>
@@ -325,7 +325,7 @@ export default async function Request({ params }: PageProps) {
                 height={24}
                 width={24}
                 />
-               <Link href={`/${prettifyId(pohId)}`}>
+               <Link className="text-orange" href={`/${prettifyId(pohId)}`}>
                 {prettifyId(pohId).slice(0, 20)}
                 <wbr />
                 {prettifyId(pohId).slice(20)}
@@ -355,11 +355,11 @@ export default async function Request({ params }: PageProps) {
                 />
               )}
 
-              <span className="mt-4 mb-[16px] text-2xl">
+              <span className="mt-4 mb-[16px] text-2xl text-primaryText">
                 {request.claimer.name}
               </span>
 
-              <span className="mb-[32px] text-sm font-light">
+              <span className="mb-[32px] text-sm font-light text-secondaryText">
                 {registrationFile ? registrationFile.bio : ''}
               </span>
             </div>
@@ -377,9 +377,9 @@ export default async function Request({ params }: PageProps) {
                 <div className="w-full flex flex-col md:flex-row md:items-end font-normal grid justify-items-end">
                 <Link 
                   href={`/attachment?url=${ipfs(policyLink)}`}
-                  className="ml-2 underline underline-offset-2"
+                  className="ml-2 underline text-primaryText"
                 >
-                  <div className="group flex py-[8px] relative">
+                  <div className="group flex py-[8px] relative text-primaryText">
                     Policy in force at submission
                     <div className="\
                       group-hover:visible invisible \
@@ -390,7 +390,7 @@ export default async function Request({ params }: PageProps) {
                       text-justify text-[14px] p-[8px] \
                       left-1/2 -translate-x-1/2 m-4 mx-auto \
                       not-italic font-normal leading-[normal] outline-black outline-color: #E5E5E5 \
-                      w-[260px] md:w-[400px] z-10"
+                      w-[260px] md:w-[400px] z-10 bg-whiteBackground text-secondaryText"
                     >
                       <span>
                         {/* (Policy in force since {new Date(policyUpdate * 1000).toDateString()}) */}
@@ -408,7 +408,7 @@ export default async function Request({ params }: PageProps) {
                 </div>
               )}
               {vourchesForData.find((v) => v) && (
-                <div className="mt-8 flex flex-col">
+                <div className="mt-8 flex flex-col text-secondaryText">
                   Vouched for
                   <div className="flex flex-wrap gap-2">
                     {vourchesForData.map(async (vouch, idx) => { 
@@ -434,7 +434,7 @@ export default async function Request({ params }: PageProps) {
             </div>
             <div className="w-full flex-wrap md:flex-row md:items-center justify-between gap-2">
               {vouchersData.find((v) => v) && (
-                <div className="mt-8 flex flex-col">
+                <div className="mt-8 flex flex-col text-secondaryText">
                   Vouched by
                   <div className="flex flex-wrap gap-2">
                     {vouchersData.map(async (vouch, idx) => {
@@ -458,7 +458,7 @@ export default async function Request({ params }: PageProps) {
                 </div>
               )}
             </div>
-            <Label className="md:hidden mb-8">
+            <Label className="md:hidden mb-8 text-orange">
               Last update: <TimeAgo time={request.lastStatusChange} />
             </Label>
           </div>