From be488087813986a80b180b151a16b8a31a2cd5b0 Mon Sep 17 00:00:00 2001 From: Bewton <mbuto152@gmail.com> Date: Tue, 16 Apr 2024 23:00:37 +0300 Subject: [PATCH 1/2] Updated Styling --- frontend/src/app/[locale]/dreps/page.tsx | 40 ++++++++------ frontend/src/assets/styles/globals.css | 12 +++- frontend/src/components/atoms/Header.tsx | 12 ++-- .../components/molecules/BecomeADrepCard.tsx | 2 +- .../components/molecules/DRepIntroImgs.tsx | 8 +-- .../src/components/organisms/DRepInfo.tsx | 8 +-- .../src/components/organisms/DRepIntro.tsx | 27 +++++---- .../organisms/GovernanceActionsCard.tsx | 4 +- .../src/components/organisms/PickADRep.tsx | 55 ++++++++++--------- frontend/src/context/context.js | 6 +- frontend/src/context/drepContext.tsx | 13 ++--- 11 files changed, 100 insertions(+), 87 deletions(-) diff --git a/frontend/src/app/[locale]/dreps/page.tsx b/frontend/src/app/[locale]/dreps/page.tsx index 277063c4..7b7f102b 100644 --- a/frontend/src/app/[locale]/dreps/page.tsx +++ b/frontend/src/app/[locale]/dreps/page.tsx @@ -1,20 +1,24 @@ -'use client' -import DRepInfo from '@/components/organisms/DRepInfo' -import DRepIntro from '@/components/organisms/DRepIntro' -import GovernanceActionsCard from '@/components/organisms/GovernanceActionsCard' -import PickADRep from '@/components/organisms/PickADRep' -import React, {useState} from 'react' +"use client"; +import DRepInfo from "@/components/organisms/DRepInfo"; +import DRepIntro from "@/components/organisms/DRepIntro"; +import GovernanceActionsCard from "@/components/organisms/GovernanceActionsCard"; +import PickADRep from "@/components/organisms/PickADRep"; +import { useDRepContext } from "@/context/drepContext"; +import React, { useEffect, useState } from "react"; -const page = () => { - - return ( - <div className={'container'}> - <DRepIntro/> - <DRepInfo/> - <PickADRep/> - <GovernanceActionsCard/> - </div> - ) -} +const page = ({ params: { locale } }) => { + const { setCurrentLocale } = useDRepContext(); + useEffect(() => { + setCurrentLocale(locale); + }, []); + return ( + <div> + <DRepIntro /> + <DRepInfo /> + <PickADRep /> + <GovernanceActionsCard /> + </div> + ); +}; -export default page \ No newline at end of file +export default page; diff --git a/frontend/src/assets/styles/globals.css b/frontend/src/assets/styles/globals.css index ce672841..865f2426 100644 --- a/frontend/src/assets/styles/globals.css +++ b/frontend/src/assets/styles/globals.css @@ -5,12 +5,13 @@ html { @apply font-poppins; } + body { - @apply bg-gradient-to-b from-[#E9EFFF] to-[#FFFFFF] ; + @apply bg-gradient-to-b from-[#E9EFFF] to-[#FFFFFF]; } -body .container { - @apply px-5 mx-auto 2xl:px-10 3xl:max-w-screen-3xl ; +.containerSpacing { + @apply px-5 mx-auto 2xl:px-10 3xl:max-w-screen-3xl; } @@ -22,6 +23,7 @@ body .container { .table_container tbody td th { @apply pr-4; } + /* Hover effect for the role part */ .table_container tbody tr>td:first-child { @apply hover:text-[#5f5e5e]; @@ -31,6 +33,10 @@ body .container { @apply pb-5; } +.drep_white_gradient { + @apply bg-gradient-to-b from-[#E9EFFF] to-[#FFFFFF]; +} + .drep_intro_radial_bg { background: radial-gradient(circle closest-side, #f10b314d 0%, #ffffff00 100%) } diff --git a/frontend/src/components/atoms/Header.tsx b/frontend/src/components/atoms/Header.tsx index c87aa63b..60723edd 100644 --- a/frontend/src/components/atoms/Header.tsx +++ b/frontend/src/components/atoms/Header.tsx @@ -1,14 +1,16 @@ "use client"; -import React from "react"; +import React, { useEffect } from "react"; import { useCardano } from "@/context/walletContext"; import WalletConnectButton from "@/components/molecules/WalletConnectButton"; import { WalletInfoCard } from "@/components/molecules"; import Link from "next/link"; +import { usePathname } from "next/navigation"; import { useDRepContext } from "@/context/drepContext"; const Header = () => { const { isEnabled } = useCardano(); - const { activeTab, setActiveTab } = useDRepContext(); + const {currentLocale}=useDRepContext() + const pathname=usePathname() return ( <div className="flex flex-row items-center justify-between bg-top-nav-bg-color"> <div className="ml-20 p-3"> @@ -17,15 +19,13 @@ const Header = () => { <div className="flex m-5 items-center text-sm font-bold text-nowrap gap-6 md:mr-20 lg:mr-25"> <Link href="/dreps" - onClick={()=>setActiveTab('/dreps')} - className={activeTab === "/dreps" ? "text-active" : ""} + className={pathname === `/${currentLocale}/dreps` ? "text-active" : ""} > What are DReps </Link> <Link href="/dreps/list" - onClick={()=>setActiveTab('/dreps/list')} - className={activeTab === "/dreps/list" ? "text-active" : ""} + className={pathname === `/${currentLocale}/dreps/list` ? "text-active" : ""} > DRep List </Link> diff --git a/frontend/src/components/molecules/BecomeADrepCard.tsx b/frontend/src/components/molecules/BecomeADrepCard.tsx index db0dc193..88776ea7 100644 --- a/frontend/src/components/molecules/BecomeADrepCard.tsx +++ b/frontend/src/components/molecules/BecomeADrepCard.tsx @@ -26,7 +26,7 @@ const BecomeADrepCard = () => { </ul> <div>{!isEnabled && <WalletConnectButton />}</div> </div> - <div className="col-span-1 flex items-center justify-end mr-5"> + <div className="col-span-1 flex items-center justify-end mr-8 md:mr-6 sm:mr-3"> <img src="/img/becomeDrepImg.png" alt="Handholdingcardanocoin" diff --git a/frontend/src/components/molecules/DRepIntroImgs.tsx b/frontend/src/components/molecules/DRepIntroImgs.tsx index 12d177f3..6fb53be8 100644 --- a/frontend/src/components/molecules/DRepIntroImgs.tsx +++ b/frontend/src/components/molecules/DRepIntroImgs.tsx @@ -4,19 +4,19 @@ const DRepIntroImgs = () => { return ( <div className="drep_intro_radial_bg relative w-fullScale h-[100%]"> {/* rainbow one */} - <div className="absolute z-[10] top-24 left-0"> + <div className="absolute z-20 top-24 left-0"> <img src="/img/faces/img1.png" alt="Img1" width={"278px"} /> </div> {/* the dull one */} - <div className="absolute z-[11] top-12 left-52"> + <div className="absolute z-30 top-12 left-52"> <img src="/img/faces/img2.png" alt="Img2" width={"170px"} /> </div> {/* feathered one */} - <div className="absolute z-[9] bottom-0 right-5"> + <div className="absolute z-10 bottom-0 right-5"> <img src="/img/faces/img3.png" alt="Img3" width={"478px"} /> </div> {/* inverse one */} - <div className="absolute z-[11] top-20 right-10 "> + <div className="absolute z-30 top-20 right-10 "> <img width={"133px"} src="/img/faces/img4.png" alt="Img4" /> </div> </div> diff --git a/frontend/src/components/organisms/DRepInfo.tsx b/frontend/src/components/organisms/DRepInfo.tsx index 6248925f..36c08a2c 100644 --- a/frontend/src/components/organisms/DRepInfo.tsx +++ b/frontend/src/components/organisms/DRepInfo.tsx @@ -5,12 +5,12 @@ import BecomeADrepCard from "../molecules/BecomeADrepCard"; const DRepInfo = () => { return ( <div - className="w-fullScale rounded-t-3xl overflow-hidden + className=" w-fullScale rounded-t-3xl overflow-hidden bg-[url(/img/drepsBg.png)] bg-opacity-20 bg-cover bg-center mt-5 shadow-lg" > {/* Inner div for img background */} - <div className="drep_bg w-fullScale h-[100%] flex flex-col gap-10" > - <div className="ml-10 mt-10 font-bold text-pale-white text-7xl"> + <div className="containerSpacing drep_bg w-fullScale h-[100%] flex flex-col gap-10"> + <div className="pl-14 pt-14 font-bold text-pale-white text-7xl"> <p>Delegated Representatives</p> <p>(DReps)</p> </div> @@ -18,7 +18,7 @@ const DRepInfo = () => { <div className="flex items-center justify-center"> <hr className="text-pale-white w-[900px] border" /> </div> - <BecomeADrepCard/> + <BecomeADrepCard /> </div> </div> ); diff --git a/frontend/src/components/organisms/DRepIntro.tsx b/frontend/src/components/organisms/DRepIntro.tsx index 7d1a7a37..cf5bdd61 100644 --- a/frontend/src/components/organisms/DRepIntro.tsx +++ b/frontend/src/components/organisms/DRepIntro.tsx @@ -1,19 +1,18 @@ -import React from 'react' -import DRepIntroText from '../molecules/DRepIntroText' -import DRepIntroImgs from '../molecules/DRepIntroImgs' +import React from "react"; +import DRepIntroText from "../molecules/DRepIntroText"; +import DRepIntroImgs from "../molecules/DRepIntroImgs"; const DRepIntro = () => { return ( - <div className='grid grid-cols-2 gap-4 mb-3'> - <div className='col-span-1'> - <DRepIntroText/> + <div className="container containerSpacing grid grid-cols-2 gap-4 mb-3"> + <div className="col-span-1"> + <DRepIntroText /> + </div> + <div className="col-span-1"> + <DRepIntroImgs /> + </div> </div> - <div className='col-span-1'> - <DRepIntroImgs/> - </div> - </div> - - ) -} + ); +}; -export default DRepIntro \ No newline at end of file +export default DRepIntro; diff --git a/frontend/src/components/organisms/GovernanceActionsCard.tsx b/frontend/src/components/organisms/GovernanceActionsCard.tsx index 66df6884..e32f9efe 100644 --- a/frontend/src/components/organisms/GovernanceActionsCard.tsx +++ b/frontend/src/components/organisms/GovernanceActionsCard.tsx @@ -4,8 +4,8 @@ import GovernanceActionsTable from "../molecules/GovernanceActionsTable"; const GovernanceActionsCard = () => { return ( - <div className="grid grid-cols-2 gap-4 p-10 bg-gradient-to-b from-[#E9EFFF] to-[#FFFFFF]"> - <div className="col-span-1 flex flex-col items-start justify-center gap-3 p-20"> + <div className="containerSpacing grid grid-cols-2 gap-4 py-8 drep_white_gradient"> + <div className="col-span-1 flex flex-col items-start justify-center gap-3 px-14 py-20"> <div className="font-bold text-6xl"> <p>Governance</p> <p>actions</p> diff --git a/frontend/src/components/organisms/PickADRep.tsx b/frontend/src/components/organisms/PickADRep.tsx index 29ec49d2..f50f34f2 100644 --- a/frontend/src/components/organisms/PickADRep.tsx +++ b/frontend/src/components/organisms/PickADRep.tsx @@ -1,32 +1,37 @@ -'use client' -import React from 'react' -import ViewDRepTableBtn from '../molecules/ViewDRepTableButton' -import { useRouter } from 'next/navigation' -import { useDRepContext } from '@/context/drepContext' +"use client"; +import React from "react"; +import ViewDRepTableBtn from "../molecules/ViewDRepTableButton"; +import { useRouter } from "next/navigation"; const PickADRep = () => { - const {setActiveTab}=useDRepContext() - const router=useRouter() - const navtoDRepList=()=>{ - setActiveTab('/dreps/list') - router.push('/dreps/list') - } - + const router = useRouter(); + const navtoDRepList = () => { + router.push("/dreps/list"); + }; + return ( - <div className='grid grid-cols-2 gap-4 p-10 shadow-lg z-10'> - <div className='col-span-1 flex flex-col items-start justify-center gap-3 p-20'> - <div className='font-bold text-6xl'> - <p>How can I</p> - <p>pick a DRep</p> + <div className="grid grid-cols-2 gap-4 py-10 shadow-lg z-10"> + <div className="col-span-1 flex flex-col items-start justify-center gap-3 px-20 py-20"> + <div className="font-bold text-6xl"> + <p>How can I</p> + <p>pick a DRep</p> </div> - - <p>In order to participate in governance, a stake credential must be delegated to a DRep. Ada holders will generally delegate their voting rights to a registered DRep that will vote on their behalf.</p> - <ViewDRepTableBtn handleClick={navtoDRepList}/> + + <p> + In order to participate in governance, a stake credential must be + delegated to a DRep. Ada holders will generally delegate their voting + rights to a registered DRep that will vote on their behalf. + </p> + <ViewDRepTableBtn handleClick={navtoDRepList} /> </div> - <div className='col-span-1 flex flex-col items-center justify-center'> - <img src="/img/handscuppingcoin.png" alt="Pick a DRep img" width={"500px"} /> + <div className="col-span-1 flex flex-col items-center justify-center"> + <img + src="/img/handscuppingcoin.png" + alt="Pick a DRep img" + width={"500px"} + /> </div> </div> - ) -} + ); +}; -export default PickADRep \ No newline at end of file +export default PickADRep; diff --git a/frontend/src/context/context.js b/frontend/src/context/context.js index 419aebf3..5cc1697f 100644 --- a/frontend/src/context/context.js +++ b/frontend/src/context/context.js @@ -22,9 +22,9 @@ export function AppContextProvider({ children }) { // Any child components will be able to access these values via the useAppContext hook. return ( <AppContext.Provider value={{ testValue, testFunction }}> - <DRepProvider> - <CardanoProvider>{children}</CardanoProvider> - </DRepProvider> + <CardanoProvider> + <DRepProvider>{children}</DRepProvider> + </CardanoProvider> </AppContext.Provider> ); } diff --git a/frontend/src/context/drepContext.tsx b/frontend/src/context/drepContext.tsx index 9e2b340e..69ba0a67 100644 --- a/frontend/src/context/drepContext.tsx +++ b/frontend/src/context/drepContext.tsx @@ -1,11 +1,10 @@ import { createContext, useContext, useMemo, useState, useEffect } from "react"; -import { useRouter } from "next/router"; interface DRepContext { isWalletListModalOpen: boolean; - activeTab: string; + currentLocale: string; setIsWalletListModalOpen: React.Dispatch<React.SetStateAction<boolean>>; - setActiveTab: React.Dispatch<React.SetStateAction<string>>; + setCurrentLocale: React.Dispatch<React.SetStateAction<string>>; toggleModal: () => void; } @@ -18,7 +17,7 @@ DRepContext.displayName = "DRepContext"; function DRepProvider(props: Props) { const [isWalletListModalOpen, setIsWalletListModalOpen] = useState(false); - const [activeTab, setActiveTab] = useState<string | null>('/dreps'); + const [currentLocale, setCurrentLocale] = useState<string | null>(null); const toggleModal = () => { setIsWalletListModalOpen((prev) => !prev); }; @@ -26,12 +25,12 @@ function DRepProvider(props: Props) { const value = useMemo( () => ({ isWalletListModalOpen, - activeTab, + currentLocale, setIsWalletListModalOpen, - setActiveTab, + setCurrentLocale, toggleModal, }), - [isWalletListModalOpen, activeTab] + [isWalletListModalOpen, currentLocale] ); return <DRepContext.Provider value={value} {...props} />; -- GitLab From eacd0097dc54f1eec60e89e60bf5f4e0a83a3676 Mon Sep 17 00:00:00 2001 From: Bewton <mbuto152@gmail.com> Date: Wed, 17 Apr 2024 01:48:01 +0300 Subject: [PATCH 2/2] Bug fix --- frontend/src/components/organisms/DRepInfo.tsx | 2 +- frontend/tailwind.config.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/organisms/DRepInfo.tsx b/frontend/src/components/organisms/DRepInfo.tsx index 36c08a2c..a6417f5e 100644 --- a/frontend/src/components/organisms/DRepInfo.tsx +++ b/frontend/src/components/organisms/DRepInfo.tsx @@ -9,7 +9,7 @@ const DRepInfo = () => { bg-[url(/img/drepsBg.png)] bg-opacity-20 bg-cover bg-center mt-5 shadow-lg" > {/* Inner div for img background */} - <div className="containerSpacing drep_bg w-fullScale h-[100%] flex flex-col gap-10"> + <div className="containerSpacing drep_bg w-fullScale h-fullScale flex flex-col gap-10"> <div className="pl-14 pt-14 font-bold text-pale-white text-7xl"> <p>Delegated Representatives</p> <p>(DReps)</p> diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 2bb6d4bb..561c41ea 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -32,6 +32,7 @@ module.exports = { }, height: { socialButtons: "40px", + fullScale:"100%" }, }, plugins: [], -- GitLab