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