Skip to content

FIXED ALL UI ISSUES AS RELATED TO WEAVER #42

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.

Sign up for GitHub

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

Merged
Otaiki1 merged 5 commits into from
Mar 25, 2025
Merged

FIXED ALL UI ISSUES AS RELATED TO WEAVER #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6451047
fix dependency issues
Otaiki1 Mar 25, 2025
b31cdbb
attempt fix hydration issue
Otaiki1 Mar 25, 2025
8d47387
fix buggy light mode toggle button
Otaiki1 Mar 25, 2025
a9faf98
fix responsive issues and style issues
Otaiki1 Mar 25, 2025
f14fca1
fix theme issues
Otaiki1 Mar 25, 2025
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
32 changes: 20 additions & 12 deletions app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,25 @@
import NftContainer from "@/components/NftContainer";
import StatsBox from "@/components/StatsBox";
import Header from "@/components/Header";
import { useTheme } from "@/components/ThemeContext";

export default function Dashboard() {
return (
<>
<div className="font-satoshi w-full min-h-screen flex flex-col items-center justify-start bg-background border-[#636363] py-20">
<div className="max-w-[652px] w-full flex flex-col items-center justify-start gap-10">
<Header />
<StatsBox />
<NftContainer />
</div>
</div>
</>
);
}
const { theme } = useTheme();
return (
<>
<div
className={`font-satoshi w-full min-h-screen flex flex-col items-center justify-start border-[#636363] md:py-20 py-10 px-2 ${
theme === "dark"
? "bg-black text-white"
: "bg-white text-black"
}`}
>
<div className="max-w-[652px] md:w-full flex flex-col items-center justify-start gap-10">
<Header />
<StatsBox />
<NftContainer />
</div>
</div>
</>
);
}
32 changes: 16 additions & 16 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,28 @@ import { ThemeProvider } from "@/components/ThemeContext";
import ThemeToggle from "@/components/ThemeToggle";

const satoshi = localFont({
src: "./fonts/Satoshi-Variable.woff2",
variable: "--font-satoshi",
weight: "300 900",
src: "./fonts/Satoshi-Variable.woff2",
variable: "--font-satoshi",
weight: "300 900",
});

export const metadata: Metadata = {
title: "Weaver",
title: "Weaver",
};

export default function RootLayout({
children,
children,
}: Readonly<{
children: React.ReactNode;
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`${satoshi.variable} antialiased`}>
<ThemeProvider>
<ThemeToggle />
{children}
</ThemeProvider>
</body>
</html>
);
return (
<html lang="en" suppressHydrationWarning>
<body className={`${satoshi.variable} antialiased bg-background`}>
<ThemeProvider>
<ThemeToggle />
{children}
</ThemeProvider>
</body>
</html>
);
}
12 changes: 10 additions & 2 deletions app/onboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import OnboardScreen6 from "@/components/onboarding-screens/Screen6";
import RegisterUser from "@/components/register-user/RegisterUser";
import OnboardScreen7 from "@/components/onboarding-screens/Screen7";
import MintAndProcessPage from "@/components/MintAndProcessPage";
import { useTheme } from "@/components/ThemeContext";

export default function Onboard() {
const [isAutoplay, setIsAutoplay] = useState(true); // Control autoplay
Expand Down Expand Up @@ -50,9 +51,10 @@ export default function Onboard() {
// Check if it's the last slide
setIsLastSlide(currentIndex === lastSlideIndex);
};
const { theme } = useTheme();

return (
<div className="min-h-screen flex justify-center items-center">
<div className="min-h-screen flex justify-center items-center ">
<Swiper
modules={[Autoplay]}
autoplay={
Expand All @@ -71,7 +73,13 @@ export default function Onboard() {
>
{onBoardSlides.map((slide, index) => (
<SwiperSlide key={index}>
<div className="h-screen w-full flex justify-center items-center">
<div
className={`h-screen w-full md:flex justify-center items-center ${
theme === "dark"
? "bg-black text-white"
: "bg-white text-black"
}`}
>
{slide}
</div>
</SwiperSlide>
Expand Down
144 changes: 79 additions & 65 deletions components/ConnectWalletModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,82 +1,96 @@
"use client";

import { IoMdClose } from "@/utils/icons";
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import { createPortal } from "react-dom";

interface ConnectWalletModalProps {
onCloseModal: React.Dispatch<React.SetStateAction<boolean>>;
onCloseModal: React.Dispatch<React.SetStateAction<boolean>>;
}

export default function ConnectWalletModal({
onCloseModal,
onCloseModal,
}: ConnectWalletModalProps) {
const [collapsed, setCollapsed] = useState(true);
const [collapsed, setCollapsed] = useState(true);
const [sliceNumber, setSliceNumber] = useState(4); // Default to desktop view

const fullText = [
"I am not a person or company who is a resident of, or is located, incorporated or has a registered agent in, the United States or a restricted location.",
"I will not in the future access this site or trade on Coiton while located in the United States or a restricted location.",
"I am not using, and will not in the future use, a VPN to mask my physical location from a restricted location.",
"I am lawfully permitted to access this site and trade on Coiton under the laws of jurisdiction in which I reside and am located.",
"I understand DeFi is a new phenomenon, and understand and undertake any technological and market risks associated with it.",
];
useEffect(() => {
const handleResize = () => {
setSliceNumber(window.innerWidth < 768 ? 3 : 4);
};

const sliceNumber = window.innerWidth < 768 ? 3 : 4;
// Set initial value
handleResize();

const collapsedText = fullText.slice(0, sliceNumber);
// Add event listener for window resize
window.addEventListener("resize", handleResize);

return createPortal(
<div
className="bg-white fixed inset-0 flex justify-center items-center z-[100] font-satoshi dark:bg-[#0D0D0D] dark:text-white"
onClick={() => onCloseModal(false)}
>
<div
className="border border-[#414141] rounded-[20px] px-5 py-5 space-y-3 w-[80vw] max-w-[493px] 2xl:w-2/5 "
onClick={(e) => e.stopPropagation()}
>
<div className="flex justify-between items-center">
<h2 className="font-medium text-xl">
Wallet Verification
</h2>
<IoMdClose
size={30}
className="cursor-pointer "
// Cleanup
return () => window.removeEventListener("resize", handleResize);
}, []);

const fullText = [
"I am not a person or company who is a resident of, or is located, incorporated or has a registered agent in, the United States or a restricted location.",
"I will not in the future access this site or trade on Coiton while located in the United States or a restricted location.",
"I am not using, and will not in the future use, a VPN to mask my physical location from a restricted location.",
"I am lawfully permitted to access this site and trade on Coiton under the laws of jurisdiction in which I reside and am located.",
"I understand DeFi is a new phenomenon, and understand and undertake any technological and market risks associated with it.",
];

const collapsedText = fullText.slice(0, sliceNumber);

return createPortal(
<div
className="bg-white fixed inset-0 flex justify-center items-center z-[100] font-satoshi dark:bg-[#0D0D0D] dark:text-white"
onClick={() => onCloseModal(false)}
/>
</div>
<div className="space-y-4">
<p className="font-thin opacity-[90%]">
By verifying your wallet, you agree to our{" "}
<span className="underline">Terms of Service</span> and
<span className="underline"> Privacy Policy.</span>
</p>
<div className="space-y-2">
<div>
{(collapsed ? collapsedText : fullText).map(
(paragraph, index) => (
<p
key={index}
className="font-thin text-sm mt-2"
>
{paragraph}
</p>
)
)}
<span>{collapsed && "..."}</span>
</div>
<span
className="cursor-pointer text-[#EDFFD0]"
onClick={() => setCollapsed(!collapsed)}
>
<div
className="border border-[#414141] rounded-[20px] px-5 py-5 space-y-3 w-[80vw] max-w-[493px] 2xl:w-2/5 "
onClick={(e) => e.stopPropagation()}
>
{collapsed ? "See more" : "See less"}
</span>
</div>
<button className="w-full bg-[#EDFFD0] py-3 text-center text-base text-[#000000] font-[500] rounded-[8px] transform transition duration-300 hover:scale-[1.02]">
Accept & Verify Wallet
</button>
</div>
</div>
</div>,
document.body
);
<div className="flex justify-between items-center">
<h2 className="font-medium text-xl">
Wallet Verification
</h2>
<IoMdClose
size={30}
className="cursor-pointer "
onClick={() => onCloseModal(false)}
/>
</div>
<div className="space-y-4">
<p className="font-thin opacity-[90%]">
By verifying your wallet, you agree to our{" "}
<span className="underline">Terms of Service</span> and
<span className="underline"> Privacy Policy.</span>
</p>
<div className="space-y-2">
<div>
{(collapsed ? collapsedText : fullText).map(
(paragraph, index) => (
<p
key={index}
className="font-thin text-sm mt-2"
>
{paragraph}
</p>
)
)}
<span>{collapsed && "..."}</span>
</div>
<span
className="cursor-pointer text-[#EDFFD0]"
onClick={() => setCollapsed(!collapsed)}
>
{collapsed ? "See more" : "See less"}
</span>
</div>
<button className="w-full bg-[#EDFFD0] py-3 text-center text-base text-[#000000] font-[500] rounded-[8px] transform transition duration-300 hover:scale-[1.02]">
Accept & Verify Wallet
</button>
</div>
</div>
</div>,
document.body
);
}
76 changes: 48 additions & 28 deletions components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,57 @@

import React from "react";
import Image from "next/image";
import { useTheme } from "@/components/ThemeContext";

function Header() {
return (
<div>
<div className="max-w-[652px] w-full flex flex-col items-center justify-start gap-5">
<div className="flex flex-col items-center justify-center gap-7 max-w-[390.17px] max-h-[150px] ">
<Image
src="/weaver.svg"
alt="weaver-logo"
height={100}
width={100}
/>
<div className="flex flex-row items-center justify-between w-full gap-3">
<Image
src="/first-group-image.svg"
alt="group-img-for-screen1"
height={128}
width={280}
className="w-[210px] h-[85px] "
/>
<p className=" text-xl ">
<span className="font-light "> Lightweight </span> <br />
on-chain identity <br />
platform
</p>
</div>
const { theme } = useTheme();
return (
<div>
<div
className={`max-w-[652px] w-full flex flex-col items-center justify-start gap-5 bg-background ${
theme === "dark"
? "bg-black text-white"
: "bg-white text-black"
}`}
>
<div
className={`flex flex-col items-center justify-center gap-7 max-w-[390.17px] max-h-[150px] ${
theme === "dark"
? "bg-black text-white"
: "bg-white text-black"
}`}
>
<Image
src="/weaver.svg"
alt="weaver-logo"
height={100}
width={100}
/>
<div
className={`flex flex-row items-center justify-between w-full gap-3 bg-background ${
theme === "dark"
? "bg-black text-white"
: "bg-white text-black"
}`}
>
<Image
src="/first-group-image.svg"
alt="group-img-for-screen1"
height={128}
width={280}
className="w-[210px] h-[85px] "
/>
<p className="text-xl">
<span className="font-light"> Lightweight </span>{" "}
<br />
on-chain identity <br />
platform
</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
);
}

export default Header;

Loading
Loading