Skip to content

Commit

Permalink
light theme #2
Browse files Browse the repository at this point in the history
  • Loading branch information
@nankishre
nankishre committed Apr 9, 2024
1 parent 879984b commit ac10f6d
Show file tree
Hide file tree
Showing 14 changed files with 237 additions and 72 deletions.
32 changes: 24 additions & 8 deletions src/components/Popup/Forgot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,34 +9,48 @@ import { resetWallet } from "../../utils/storage";
// theme done!
export default function Forgot({
goBack,
theme
theme,
}: {
goBack: React.Dispatch<React.SetStateAction<boolean>>;
theme: "dark" | "light"
theme: "dark" | "light";
}) {
return (
<>
<section className={`forgot-nav ${(theme == "light") && "!bg-white !text-black !border-slate-400"} select-none`}>
<section
className={`forgot-nav ${
theme == "light" && "!bg-white !text-black !border-slate-400"
} select-none`}
>
<div
className="forgot-close-btn !text-red-500 !ml-3 hover:!bg-slate-200 !rounded-full"
onClick={() => goBack(false)}
>
<BiX size={24} />
</div>
<div className="forgot-w">
<p className={`${theme == "light" && "!text-black"}`}>Forgot Password</p>
<p className={`${theme == "light" && "!text-black"}`}>
Forgot Password
</p>
</div>
<div />
</section>

<div className={`${theme=="light" && "!bg-white"} forgot-c-w !p-3`}>
<div className={`${theme == "light" && "!bg-white"} forgot-c-w !p-3`}>
<div />
<section className="forgot-c-s">
<BiLockAlt
size={128}
className={`!mb-3 p-6 bg-black/50 ${theme=="light" && "!text-black/70 !bg-slate-200/50"} rounded-full`}
className={`!mb-3 p-6 bg-black/50 ${
theme == "light" && "!text-black/70 !bg-slate-200/50"
} rounded-full`}
/>
<p className={`forgot-p-c-s-p ${theme == "light" && "!text-black"} !mb-2`}>Forgot Password</p>
<p
className={`forgot-p-c-s-p ${
theme == "light" && "!text-black"
} !mb-2`}
>
Forgot Password
</p>
<p className={`f-p-c ${theme == "light" && "!text-slate-600"}`}>
You can reset your password by entering your wallet's 24 word
recovery phrase. Cesium cannot recover your password for you.
Expand All @@ -45,7 +59,9 @@ export default function Forgot({

<div className="w-full">
<button
className={`f-p-c-b ${(theme == 'light') && "!text-black/90"} hover:!bg-red-400`}
className={`f-p-c-b ${
theme == "light" && "!text-black/90"
} hover:!bg-red-400`}
onClick={() => {
resetWallet();
return window.location.reload();
Expand Down
23 changes: 18 additions & 5 deletions src/components/Popup/Initialize/Start.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,19 @@ import { Dispatch } from "react";

export default function Start({
setW,
theme
theme,
}: {
setW: Dispatch<React.SetStateAction<number>>;
theme: "dark" | "light";
}) {
return (
<div className="min-h-[554px]">
<Navbar theme={theme} />
<div className={`${theme == "light" && "!bg-white !text-black"} flex flex-col justify-between align-center p-[20px] h-full`}>
<div
className={`${
theme == "light" && "!bg-white !text-black"
} flex flex-col justify-between align-center p-[20px] h-full`}
>
<div className="init-wrapper">
<div className="start-content">
<div className="select-none items-center flex flex-col justify-center align-center w-full">
Expand Down Expand Up @@ -42,7 +46,11 @@ export default function Start({
</span>
</div>
</div>
<p className={`${theme =="light" && "!text-slate-700"} start-content-text`}>
<p
className={`${
theme == "light" && "!text-slate-700"
} start-content-text`}
>
To get started, create a new wallet or import one from a seed
phrase.
</p>
Expand All @@ -51,15 +59,20 @@ export default function Start({

<div className="buttons-wrapper">
<div
className={`${theme=="light" && "!text-slate-200"} button-create`}
className={`${
theme == "light" && "!text-slate-200"
} button-create`}
role="button"
onClick={() => setW(1)}
>
Create a new wallet
</div>

<div
className={`${(theme=="light") && "!bg-slate-400 !text-slate-900 hover:!bg-slate-300"} button-restore`}
className={`${
theme == "light" &&
"!bg-slate-400 !text-slate-900 hover:!bg-slate-300"
} button-restore`}
role="button"
onClick={() => setW(4)}
>
Expand Down
28 changes: 23 additions & 5 deletions src/components/Popup/Initialize/create/Done.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@ import cryptoWorker from "../../../../worker/crypto?worker&url";
export default function Created({
setW,
prevStep,
theme,
}: {
setW: Dispatch<React.SetStateAction<number>>;
prevStep?: number;
theme: "light" | "dark";
}) {
const [loading, setLoading] = useState<boolean>(true);
const [password, setPassword] = useState<string>("");
Expand Down Expand Up @@ -65,7 +67,11 @@ export default function Created({

return (
<>
<div className="step-p-nav">
<div
className={`step-p-nav ${
theme == "light" && "!bg-white !text-black !border-slate-400"
}`}
>
<div
className="cursor-pointer text-slate-400 hover:text-slate-200"
role="button"
Expand All @@ -80,20 +86,32 @@ export default function Created({
</div>
</div>
{loading ? (
<div className="flex justify-center items-center h-full">
<RingLoader color={"#FFFFFF"} loading={loading} size={150} />
<div
className={`${
theme == "light" && "!bg-white !text-black"
} flex justify-center items-center h-full`}
>
<RingLoader color={"#0096FF"} loading={loading} size={150} />
</div>
) : (
<>
<div className="relative flex items-center align-center justify-center !min-h-[554px] h-full w-full">
<div
className={`relative flex items-center align-center justify-center !min-h-[554px] h-full w-full ${
theme == "light" && "!bg-white !text-black"
}`}
>
<div className="flex flex-col p-2 items-center align-center justify-center select-none">
<img
src="img/logo.svg"
className="h-32 w-auto"
draggable={false}
/>
<p className="mt-4 text-2xl">You're all done!</p>
<p className="mt-2 text-md text-slate-300">
<p
className={`mt-2 text-md text-slate-300 ${
theme == "light" && "!text-slate-600"
}`}
>
You can now fully enjoy your wallet.
</p>

Expand Down
53 changes: 41 additions & 12 deletions src/components/Popup/Initialize/create/Mnemonic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { setSessionValue } from "../../../../utils/storage";

export default function Mnemonic({
setW,
theme
theme,
}: {
setW: Dispatch<React.SetStateAction<number>>;
theme: "light" | "dark";
Expand All @@ -25,7 +25,11 @@ export default function Mnemonic({
}, []);
return (
<>
<div className={`step-p-nav ${theme=="light" && "!bg-white !text-black !border-slate-400"}`}>
<div
className={`step-p-nav ${
theme == "light" && "!bg-white !text-black !border-slate-400"
}`}
>
<div
className="cursor-pointer text-slate-400 hover:text-slate-200"
role="button"
Expand All @@ -40,7 +44,11 @@ export default function Mnemonic({
</div>
</div>

<div className="step-m-wrapper">
<div
className={`step-m-wrapper ${
theme == "light" && "!bg-white !text-black"
}`}
>
<form
className="step-m-form"
onSubmit={(e) => {
Expand All @@ -53,7 +61,9 @@ export default function Mnemonic({
>
<div className="step-m-c select-none">
<div className="step-m-h">
<p className="step-m-hp">Secret Recovery Phrase</p>
<p className={`step-m-hp ${theme == "light" && "!text-black"}`}>
Secret Recovery Phrase
</p>
<p className="step-m-hs">
This phrase is the ONLY way to recover your wallet. Do NOT share
it with anyone!
Expand All @@ -66,37 +76,56 @@ export default function Mnemonic({
{mnemonic.split(" ").map((word, index) => (
<div
key={index}
className="border p-2 text-xs bg-black/60 p-1 rounded-sm"
className={`border p-2 text-xs bg-black/60 p-1 rounded-sm ${
theme == "light" && "!bg-slate-400/60"
}`}
>
<span className="text-slate-400 select-none">
<span
className={`${
theme == "light" && "!text-slate-900"
} text-slate-400 select-none`}
>
{index + 1}.{" "}
</span>
<span>{word}</span>
<span className={`${theme == "light" && "!text-slate-900"}`}>
{word}
</span>
</div>
))}
</div>

<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:hidden display-transition">
<BsEyeSlashFill size={64} />
<BsEyeSlashFill
size={64}
className={`${theme == "light" && "!text-slate-400"}`}
/>
</div>
</div>

<div className="step-m-confirm">
<div className="step-m-checkbox mr-2 ">
<div
className={`step-m-checkbox mr-2 ${
theme == "light" && "!border-slate-600"
}`}
>
<input
type="checkbox"
className="custom-ch"
className={`custom-ch ${theme == "light" && "!bg-slate-300"}`}
onChange={(e) => setChecked(e.currentTarget.checked)}
/>
</div>
<p className="step-m-p">I saved my Secret Recovery Phrase</p>
<p className={`step-m-p ${theme == "light" && "!text-slate-800"}`}>
I saved my Secret Recovery Phrase
</p>
</div>

<button
className={`step-m-continue select-none !z-20 ${
checked
? "!cursor-pointer !bg-sky-600"
: "!opacity-60 !cursor-not-allowed"
: `!opacity-60 !cursor-not-allowed ${
theme == "light" && "!text-slate-800"
}`
}`}
>
Continue
Expand Down
Loading

0 comments on commit ac10f6d

Please sign in to comment.