Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add dark mode in production #82

Merged
merged 17 commits into from
Sep 30, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions public/logo/light-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion public/logo/new-tab.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions public/logo/paperclip.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 7 additions & 2 deletions schemas/request.gql
Original file line number Diff line number Diff line change
@@ -68,7 +68,9 @@ query Request($id: ID!) {
id
}
nbRounds
rounds(orderBy: creationTime) {
rounds(orderBy: index) {
creationTime
index
requesterFund {
amount
}
@@ -80,6 +82,9 @@ query Request($id: ID!) {
arbitratorHistory {
updateTime
registrationMeta
id
arbitrator
extraData
}
}
}
}
2 changes: 1 addition & 1 deletion src/app/Footer.tsx
Original file line number Diff line number Diff line change
@@ -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>

42 changes: 38 additions & 4 deletions src/app/Header/Options.tsx
Original file line number Diff line number Diff line change
@@ -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;
6 changes: 3 additions & 3 deletions src/app/[pohid]/CrossChain.tsx
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 6 additions & 6 deletions src/app/[pohid]/Revoke.tsx
Original file line number Diff line number Diff line change
@@ -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])}
>
22 changes: 20 additions & 2 deletions src/app/[pohid]/[chain]/[request]/ActionBar.tsx
Original file line number Diff line number Diff line change
@@ -24,6 +24,7 @@ import RemoveVouch from "./RemoveVouch";
import Vouch from "./Vouch";
import { getMyData } from "data/user";
import useSWR from "swr";
import Appeal from "./Appeal";


enableReactUse();
@@ -52,6 +53,7 @@ interface ActionBarProps extends JSX.IntrinsicAttributes {
onChainVouches: Address[];
offChainVouches: { voucher: Address; expiration: number; signature: Hash }[];
expired: boolean;
arbitrationHistory: { __typename?: "ArbitratorHistory" | undefined; updateTime: any; registrationMeta: string; id: string; arbitrator: any; extraData: any; }
}

export default withClientConnected<ActionBarProps>(function ActionBar({
@@ -69,6 +71,7 @@ export default withClientConnected<ActionBarProps>(function ActionBar({
offChainVouches,
// advanceRequestsOnChainVouches,
expired,
arbitrationHistory,
}) {
const chain = useChainParam()!;
const { address } = useAccount();
@@ -277,7 +280,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
@@ -425,13 +428,28 @@ export default withClientConnected<ActionBarProps>(function ActionBar({
)}
.
</span>

<div className="flex gap-4">
<Appeal
pohId={pohId}
requestIndex={index}
disputeId={currentChallenge.disputeId}
arbitrator={arbitrationHistory.arbitrator}
extraData={arbitrationHistory.extraData}
contributor={address!}
claimer={requester}
challenger={currentChallenge.challenger?.id}
currentChallenge={currentChallenge}
chainId={chain.id}
/>

<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>
</div>
</>
)}

Loading
Loading