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.

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

Refactor for mobile view #17

Merged
merged 9 commits into from
Jan 27, 2025
+46 −41
Merged

Refactor for mobile view #17

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a4f96bb
chore: onboarding screen responsive
benedictfred Jan 24, 2025
f5f8ac2
chore: onboarding screen responsive
benedictfred Jan 24, 2025
a5876eb
chore: onboarding screen responsive
benedictfred Jan 24, 2025
bbad714
fix: task screen
chiscookeke11 Jan 24, 2025
44933ce
FIX: task page responsiveness
chiscookeke11 Jan 24, 2025
77ef235
Refactor screens for moblie view
chiscookeke11 Jan 24, 2025
fb21c9d
fix: merge conflicts
benedictfred Jan 26, 2025
78cadf9
fix: merge conflicts
benedictfred Jan 26, 2025
7ba7a30
Merge branch 'main' into main
benedictfred Jan 26, 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
10 changes: 5 additions & 5 deletions app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Image from "next/image";

export default function Dashboard() {
return (
<div className="font-satoshi w-full min-h-screen flex flex-col items-center justify-start bg-[#0D0D0D] text-white py-20">
<div className="font-satoshi w-full min-h-screen flex flex-col items-center justify-start bg-[#0D0D0D] text-white px-5 py-20">
<div className="max-w-[652px] w-full flex flex-col items-center justify-start gap-10 ">
<div className="flex flex-col items-center justify-center gap-7 max-w-[390.17px] max-h-[150px] ">
<Image
Expand All @@ -20,11 +20,11 @@ export default function Dashboard() {
<Image
src="/first-group-image.svg"
alt="group-img-for-screen1"
height={128}
width={280}
className="w-[210px] h-[85px] "
height={100}
width={100}
className="lg:w-[210px] lg:h-[85px] w-[190px] sm:h-[85px] "
/>
<p className=" text-xl ">
<p className=" text-sm lg:text-xl ">
<span className="font-light "> Lightweight </span> <br />
on-chain identity <br />
platform
Expand Down
1 change: 0 additions & 1 deletion app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ body {
background: var(--background);
font-weight: 400;
}

.taskProgressBar::-webkit-progress-bar {
background-color: #f0f0f0;
border-radius: 4px;
Expand Down
6 changes: 4 additions & 2 deletions app/onboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,14 @@ export default function Onboard() {
}}
spaceBetween={50}
slidesPerView={1}
loop={false}
loop={false}
className=" h-screen"
>
{onBoardSlides.map((slide, index) => (
<SwiperSlide key={index}>
<div className=" h-screen w-full flex justify-center items-center">{slide}</div>
<div className=" h-screen w-full flex justify-center items-center">
{slide}
</div>
</SwiperSlide>
))}
</Swiper>
Expand Down
10 changes: 5 additions & 5 deletions app/task/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {

export default function Tasks() {
return (
<div className="font-satoshi w-full min-h-screen flex flex-col items-center justify-start bg-[#0D0D0D] text-white py-20">
<div className="font-satoshi w-full min-h-screen flex flex-col items-center justify-start bg-[#0D0D0D] text-white px-5 py-20">
<div className="max-w-[652px] w-full flex flex-col items-center justify-start gap-10 ">
<div className="flex flex-col items-center justify-center gap-7 max-w-[390.17px] max-h-[150px] ">
<Image
Expand All @@ -24,11 +24,11 @@ export default function Tasks() {
<Image
src="/first-group-image.svg"
alt="group-img-for-screen1"
height={128}
width={280}
className="w-[210px] h-[85px] "
height={100}
width={100}
className="lg:w-[210px] lg:h-[85px] w-[190px] sm:h-[85px] "
/>
<p className=" text-xl ">
<p className=" text-sm lg:text-xl ">
<span className="font-light "> Lightweight </span> <br />
on-chain identity <br />
platform
Expand Down
4 changes: 3 additions & 1 deletion components/ConnectWalletModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@ export default function ConnectWalletModal({
"I understand DeFi is a new phenomenon, and understand and undertake any technological and market risks associated with it.",
];

const collapsedText = fullText.slice(0, 4);
const sliceNumber = window.innerWidth < 768 ? 3 : 4;

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

return createPortal(
<div
Expand Down
8 changes: 4 additions & 4 deletions components/NftContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default function NftContainer() {
<ul className="flex flex-row items-center gap-6 py-1 pb-2 border-b-2 border-[#1D1D1D] my-2">
<li
onClick={() => toggleCurrentNft("TanglerData")}
className={`px-3 cursor-pointer relative after:content-[' '] after:w-0 after:h-[2px] after:absolute after:bottom-[-10] after:left-0 after:bg-[#E0FFB0] hover:after:w-full after:transition-all after:duration-300 hover:text-white transition-all duration-300 ${
className={`text-xs lg:text-base lg:px-3 px2 cursor-pointer relative after:content-[' '] after:w-0 after:h-[2px] after:absolute after:bottom-[-10] after:left-0 after:bg-[#E0FFB0] hover:after:w-full after:transition-all after:duration-300 hover:text-white transition-all duration-300 ${
currentNFt === "TanglerData"
? "text-white after:w-full"
: "text-[#818181]"
Expand All @@ -25,7 +25,7 @@ export default function NftContainer() {
</li>
<li
onClick={() => toggleCurrentNft("OrbiterData")}
className={`px-3 cursor-pointer relative after:content-[' '] after:w-0 after:h-[2px] after:absolute after:bottom-[-10] after:left-0 after:bg-[#E0FFB0] hover:after:w-full after:transition-all after:duration-300 hover:text-white transition-all duration-300 ${
className={`text-xs lg:text-base lg:px-3 px2 cursor-pointer relative after:content-[' '] after:w-0 after:h-[2px] after:absolute after:bottom-[-10] after:left-0 after:bg-[#E0FFB0] hover:after:w-full after:transition-all after:duration-300 hover:text-white transition-all duration-300 ${
currentNFt === "OrbiterData"
? "text-white after:w-full"
: "text-[#818181]"
Expand All @@ -35,15 +35,15 @@ export default function NftContainer() {
</li>
<li
onClick={() => toggleCurrentNft("FunnelerData")}
className={`px-3 text-[#818181] cursor-pointer relative after:content-[' '] after:w-0 after:h-[2px] after:absolute after:bottom-[-10] after:left-0 after:bg-[#E0FFB0] hover:after:w-full after:transition-all after:duration-300 hover:text-white transition-all duration-300${
className={`text-xs lg:text-base lg:px-3 px2 text-[#818181] cursor-pointer relative after:content-[' '] after:w-0 after:h-[2px] after:absolute after:bottom-[-10] after:left-0 after:bg-[#E0FFB0] hover:after:w-full after:transition-all after:duration-300 hover:text-white transition-all duration-300${
currentNFt === "FunnelerData"
? "text-white after:w-full"
: "text-[#818181]"
}`}
>
Funneler
</li>
<li className="px-3 text-[#818181] cursor-pointer relative after:content-[' '] after:w-0 after:h-[2px] after:absolute after:bottom-[-10] after:left-0 after:bg-[#E0FFB0] hover:after:w-full after:transition-all after:duration-300 hover:text-white transition-all duration-300">
<li className="text-xs lg:text-base lg:px-3 px2 text-[#818181] cursor-pointer relative after:content-[' '] after:w-0 after:h-[2px] after:absolute after:bottom-[-10] after:left-0 after:bg-[#E0FFB0] hover:after:w-full after:transition-all after:duration-300 hover:text-white transition-all duration-300">
Ekubo-Weaver Badge
</li>
</ul>
Expand Down
20 changes: 10 additions & 10 deletions components/StatsBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,32 +11,32 @@ export default function StatsBox() {
<div className="flex flex-col items-center justify-center w-4/5 gap-2">
<span className="flex flex-row justify-center items-end gap-7 ">
{" "}
<h1 className="text-7xl font-medium">259</h1>
<h1 className=" text-6xl lg:text-7xl font-medium">259</h1>
<Image
src="/tangler-badge.svg"
alt="badge"
width={100}
height={100}
className="w-[60.9px] h-[67.62px] object-contain "
className=" w-14 h-16 lg:w-[60.9px] lg:h-[67.62px] object-contain "
/>
</span>

<div className="border-t border-[#636363] w-full flex justify-between items-center py-2 px-4 text-xs text-[#BDBDBD] font-medium ">
<div className="border-t border-[#636363] w-full flex justify-between items-center py-2 px-4 text-[9px] lg:text-xs text-[#BDBDBD] font-medium ">
<p>
<span className="text-secondary mr-1 font-light ">Balance:</span>{" "}
$200.10 USDT
</p>

<p>
<span className="text-secondary font-light mr-3 ">Rank: </span>{" "}
<span className="text-secondary font-light mr-1 lg:mr-3 ">Rank: </span>{" "}
<span className="text-secondary font-light "> {rank}/</span>
{totalRank}
</p>
</div>
</div>

<div className="metre w-full h-[120px] bg-[#1D1D1D] mt-8 flex flex-col ">
<div className="metre-bar w-full relative bg-white h-[13.09px] overflow-hidden ">
<div className="metre w-full h-[90px] lg:h-[120px] bg-[#1D1D1D] mt-8 flex flex-col border border-[#636363] lg:border-none ">
<div className="metre-bar w-full relative bg-white h-[11px] lg:h-[13.09px] overflow-hidden ">
<span
className="absolute top-0 left-0 bg-[#C4FF63] h-full"
style={{
Expand All @@ -45,21 +45,21 @@ export default function StatsBox() {
></span>
</div>

<div className="NFT w-full h-full flex flex-row justify-between ">
<div className="text flex flex-col justify-center px-5 text-xs border-l border-[#636363] ml-10 ">
<div className="NFT w-full h-full flex flex-row justify-between ">
<div className="text flex flex-col justify-center px-5 text-[10px] lg:text-xs lg:border-l border-[#636363] lg:ml-10 ">
<h2 className="font-medium ">To mint Tarauntula</h2>
<h3 className="text-[#787272] ">
Complete challange to mint Tarauntula
</h3>
</div>

<div className="h-full bg-white flex items-center justify-center w-[101.93px] ">
<div className="h-full bg-white flex items-center justify-center w-[57px] lg:w-[101.93px] ">
<Image
src="/TanglerNFT.svg"
alt="tangler"
width={100}
height={100}
className="w-[54.21] h-[57.93] object-contain "
className="lg:w-[54.21] lg:h-[57.93] w-11 h-13 object-contain "
/>
</div>
</div>
Expand Down
12 changes: 6 additions & 6 deletions components/TaskBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,30 +42,30 @@ export default function TaskBox({
className="flex justify-between items-center w-full pl-3 cursor-pointer"
onClick={() => setIsExpanded(!isExpanded)}
>
<h2>Connect {taskName}</h2>
<h2 className="text-base" >Connect {taskName}</h2>
<FaChevronDown
className={` transform transition-all duration-300 ${
isExpanded ? "rotate-[180deg]" : "rotate-[0] "
} `}
/>
</div>
<p className="font-thin text-secondary pl-3 w-full">
<p className="font-thin text-secondary pl-3 w-full text-sm lg:text-base" >
{displayedText}
</p>

{isExpanded && (
<div className="w-full mt-3 space-y-2 border-t border-gray-700 pt-2">
<div className="flex justify-between items-center pl-3">
<p className="space-x-2">
<p className="space-x-2 text-sm lg:text-base">
<span className="font-thin text-secondary">Category:</span>
<span>Socials</span>
</p>
<p className="space-x-2">
<p className="space-x-2 text-sm lg:text-base">
<span className="font-thin text-secondary">Points:</span>
<span>40</span>
</p>
</div>
<p className="space-x-2 pl-3">
<p className="space-x-2 pl-3 text-sm lg:text-base">
<span className="font-thin text-secondary">Status:</span>
<span>{isComplete? " Done" : "pending"} </span>
</p>
Expand All @@ -75,7 +75,7 @@ export default function TaskBox({
</div>
{isExpanded && (
<button
className={`py-5 w-full bg-[#EDFFD0] text-[#000000] text-base font-medium rounded-lg transform transition duration-300 hover:scale-[1.02] mt-5`}
className={`text-sm lg:text-base py-3 lg:py-5 w-full bg-[#EDFFD0] text-[#000000] font-medium rounded-lg transform transition duration-300 hover:scale-[1.02] mt-5`}
>
Connect {taskName}
</button>
Expand Down
17 changes: 9 additions & 8 deletions components/TaskStats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,31 +13,32 @@ export default function TaskStats() {


return (
<div className="bg-[#121212] border-2 border-[#1D1D1D] w-full space-y-5 h-auto my-4 rounded-t-[10px] rounded-b-none px-10 py-5">
<div className="bg-[#121212] border-2 border-[#1D1D1D] w-full space-y-5 h-auto my-4 rounded-t-[10px] rounded-b-none px-7 lg:px-10 py-5">
<div>
<div className="flex justify-between font-light">
<div className="flex justify-between font-light text-xs lg:text-base ">
<p>Total Points</p>
<p>{point}/{totalPoint}</p>
</div>
<progress value={point} max={100} className="taskProgressBar w-full" />
<progress value={point} max={100} className="taskProgressBar w-full h-2 lg:h-3" />
<p className="text-sm font-medium text-secondary">
Build and verify digital reputation without having to sacrifice user
privacy.
</p>
</div>
<div className="flex justify-between items-center pl-10 pt-10 ">
<h1 className="text-5xl font-medium">$20.45</h1>
<h1 className=" text-3xl lg:text-5xl font-medium">$20.45</h1>
<div className="flex flex-col items-center">
<div className="flex items-center">
<Image
src="/argent-logo.svg"
alt="argent-logo"
height={28}
width={28}
height={100}
width={100}
className="w-[33px] object-contain lg:w-[50px] "
/>
<p className="font-bold text-xl">argent</p>
<p className="font-bold text-xs lg:text-xl">argent</p>
</div>
<p className="border border-gray-600 font-thin py-0.5 px-7 rounded-lg mt-7">
<p className="border text-sm lg:text-base border-gray-600 font-thin py-0.5 px-5 lg:px-7 rounded-lg mt-3 lg:mt-7">
Balance
</p>
</div>
Expand Down
22 changes: 11 additions & 11 deletions components/nftdata/TanglerData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,16 +67,16 @@ export default function TanglerData() {
className=" title w-full flex flex-row items-center justify-between cursor-pointer "
>
<div className="flex flex-row items-center gap-5">
<div className="w-[57px] h-[57px] flex justify-center items-center rounded-full bg-white relative ">
<div className=" w-[55px] h-[55px] lg:w-[57px] lg:h-[57px] flex justify-center items-center rounded-full bg-white relative ">
<Image
src="/TanglerNFT.svg"
alt="NFT"
width={100}
height={100}
className="w-[45px] h-[45px]"
className="lg:w-[45px] lg:h-[45px] w-9 h-10 object-contain"
/>
</div>
<h1>Tangler</h1>
<h1 className="text-base " >Tangler</h1>
</div>

<FaChevronDown
Expand All @@ -92,26 +92,26 @@ export default function TanglerData() {
className="details w-full bg-[#181818] border border-[#343434] rounded-t rounded-lg "
>
<div className="w-full h-[240px] flex ">
<div className=" border-r border-[#808080] w-32 h-full flex items-start justify-center py-2 ">
<div className=" border-r border-[#808080] lg:w-32 w-20 h-full flex items-start justify-center py-2 ">
<Image
src={item.image}
alt={item.name}
width={100}
height={100}
className="w-[57] h-[47] object-contain "
className="lg:w-[57] lg:h-[47] w-[35px] h-[35px] object-contain "
/>
</div>
<div className=" h-full w-full flex flex-col ">
<div className="h-1/2 w-full bg-[#212121] border-b-[0.5px] border-[#636363] px-4 py-5 ">
<h2 className="text-[#F0F0F0] font-bold text-base ">
{item.name}{" "}
</h2>
<p className="text-[#808080] text-xs font-normal max-w-[380px] ">
<p className="text-[#808080] lg:text-xs text-[10px] font-normal max-w-[380px] ">
{item.description}{" "}
</p>
</div>
<div className=" h-1/2 w-full py-4 px-5 flex flex-col justify-between ">
<div className="flex w-full items-center justify-between text-sm font-bold">
<div className="flex w-full items-center justify-between text-xs lg:text-sm font-bold">
<p>
<span className="text-[#DDDDDD] font-light ">
Category:
Expand All @@ -128,10 +128,10 @@ export default function TanglerData() {
</div>

<div>
<p className="flex items-center gap-5 ">
<p className="flex items-center gap-5 text-xs lg:text-sm ">
<span className="text-[#DDDDDD] font-light ">Status: </span>
<span
className={`bg-[#F2FFEA] border text-sm font-normal px-5 py-1 rounded-xl flex items-center w-fit justify-center ${
className={`bg-[#F2FFEA] border font-normal px-5 py-1 rounded-xl flex items-center w-fit justify-center ${
item.status
? "border-[#B0FD81] text-[#40A900]"
: "border-[red] text-[red] "
Expand All @@ -147,15 +147,15 @@ export default function TanglerData() {
</div>

<div className="w-full bg-[#212121] border-[0.5px] border-[#636363] text-center h-14 flex items-center justify-center ">
<p className="text-[#808080] font-normal text-sm ">
<p className="text-[#808080] font-normal text-xs lg:text-sm ">
Click to check transaction history
</p>
</div>

<div className="w-full flex items-center justify-center px-4 py-6 ">
<button
disabled={item.status}
className={`py-5 w-[97%] bg-[#EDFFD0] text-[#000000] text-base font-medium rounded-lg transform transition duration-300 hover:scale-[1.02] ${
className={` py-3 lg:py-5 w-[97%] bg-[#EDFFD0] text-[#000000] lg:text-base text-[15px] font-medium rounded-lg transform transition duration-300 hover:scale-[1.02] ${
item.status ? "cursor-pointer" : "cursor-not-allowed"
} `}
>
Expand Down
Loading