From 1c0e73ec9ba7534472d1be2155bb3eccf20d109b Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Fri, 17 Jan 2025 17:45:20 +0530
Subject: [PATCH 1/2] refactor(frontend): rabbit-review

---
 frontend/src/components/Community/hero.tsx    |  1 +
 .../Cooperative/MemberSection/LearnMore.tsx   |  1 +
 frontend/src/components/Cooperative/hero.tsx  |  1 +
 frontend/src/components/Dropdown/index.tsx    |  2 +-
 frontend/src/components/Earn/Hero.tsx         |  1 +
 .../CuratorTabContent/KlerosScoutSection.tsx  |  1 +
 frontend/src/components/ForBuilders/Hero.tsx  |  1 +
 frontend/src/components/PNKToken/Hero.tsx     |  1 +
 frontend/src/components/Pagination.tsx        |  2 ++
 .../components/ResearchDevelopment/Hero.tsx   |  1 +
 .../Testimonials/index.tsx                    |  2 +-
 .../ResearchTabContent/KlerosBook.tsx         |  8 ++++++-
 .../PublicationsSection/PublicationCard.tsx   | 12 +++++++----
 .../PublicationsSection/TeamPublications.tsx  |  2 +-
 .../ThirdPartyPublications.tsx                |  2 +-
 .../ResearchSection/ResearchCard.tsx          |  2 +-
 frontend/src/components/home/Hero.tsx         |  1 +
 frontend/src/hooks/useScreenSize.tsx          |  2 +-
 frontend/src/styles/globals.css               | 21 +++++++++++++++++++
 19 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Community/hero.tsx b/frontend/src/components/Community/hero.tsx
index 6b336c5..52994d2 100644
--- a/frontend/src/components/Community/hero.tsx
+++ b/frontend/src/components/Community/hero.tsx
@@ -38,6 +38,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         src={background.url}
         alt="Hero Image Background"
         fill
+        priority
         className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>
diff --git a/frontend/src/components/Cooperative/MemberSection/LearnMore.tsx b/frontend/src/components/Cooperative/MemberSection/LearnMore.tsx
index 828da6f..293b8ef 100644
--- a/frontend/src/components/Cooperative/MemberSection/LearnMore.tsx
+++ b/frontend/src/components/Cooperative/MemberSection/LearnMore.tsx
@@ -32,6 +32,7 @@ const LearnMore: React.FC<CooperativeLearnMoreSection> = ({
         src={background.url}
         alt="Learn more Image Background"
         fill
+        priority
         className="rounded-2xl object-cover"
       />
     </div>
diff --git a/frontend/src/components/Cooperative/hero.tsx b/frontend/src/components/Cooperative/hero.tsx
index 84c785e..3648e9a 100644
--- a/frontend/src/components/Cooperative/hero.tsx
+++ b/frontend/src/components/Cooperative/hero.tsx
@@ -44,6 +44,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         src={background.url}
         alt="Hero Image Background"
         fill
+        priority
         className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>
diff --git a/frontend/src/components/Dropdown/index.tsx b/frontend/src/components/Dropdown/index.tsx
index e9470f3..7d5cc69 100644
--- a/frontend/src/components/Dropdown/index.tsx
+++ b/frontend/src/components/Dropdown/index.tsx
@@ -58,7 +58,7 @@ const Dropdown: React.FC<IDropwdownProps> = ({ items, value, onChange }) => {
       <div
         className={clsx(
           "absolute z-10 mt-2 rounded-2xl border border-stroke bg-background-1",
-          "flex max-h-[300px] w-[200px] flex-col gap-4 p-[10px] md:w-[348px]",
+          "flex max-h-[300px] w-[200px] flex-col gap-4 overflow-scroll p-[10px] md:w-[348px]",
           isOpen ? "visible" : "hidden",
         )}
       >
diff --git a/frontend/src/components/Earn/Hero.tsx b/frontend/src/components/Earn/Hero.tsx
index 22efb32..6e0ba53 100644
--- a/frontend/src/components/Earn/Hero.tsx
+++ b/frontend/src/components/Earn/Hero.tsx
@@ -43,6 +43,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         src={background.url}
         alt="Hero Image Background"
         fill
+        priority
         className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>
diff --git a/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx b/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx
index 1c1d62c..e620378 100644
--- a/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx
+++ b/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx
@@ -25,6 +25,7 @@ const KlerosScoutSection: React.FC<IKlerosScoutSection> = ({
         <Image
           width={128}
           height={128}
+          priority
           src={productIcon.url}
           alt="Product Icon"
         />
diff --git a/frontend/src/components/ForBuilders/Hero.tsx b/frontend/src/components/ForBuilders/Hero.tsx
index 07159a3..8221710 100644
--- a/frontend/src/components/ForBuilders/Hero.tsx
+++ b/frontend/src/components/ForBuilders/Hero.tsx
@@ -53,6 +53,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         alt="Hero Image Background"
         width="1440"
         height="835"
+        priority
         className="absolute left-0 top-0 z-[-1] h-full object-cover object-left"
       />
     </div>
diff --git a/frontend/src/components/PNKToken/Hero.tsx b/frontend/src/components/PNKToken/Hero.tsx
index 56bec7c..7308cb3 100644
--- a/frontend/src/components/PNKToken/Hero.tsx
+++ b/frontend/src/components/PNKToken/Hero.tsx
@@ -38,6 +38,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         src={background.url}
         alt="Hero Image Background"
         fill
+        priority
         className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>
diff --git a/frontend/src/components/Pagination.tsx b/frontend/src/components/Pagination.tsx
index 9da6a1d..20a8299 100644
--- a/frontend/src/components/Pagination.tsx
+++ b/frontend/src/components/Pagination.tsx
@@ -18,6 +18,8 @@ const Pagination: React.FC<IPagination> = ({
       {Array.from(Array(numPages), (_, index) => (
         <button
           key={index}
+          aria-label={`Go to page ${index + 1}`}
+          aria-current={currentPage === index + 1 ? "page" : undefined}
           className={clsx(
             "h-4 w-4 rounded-full transition-all",
             currentPage === index + 1
diff --git a/frontend/src/components/ResearchDevelopment/Hero.tsx b/frontend/src/components/ResearchDevelopment/Hero.tsx
index 30f15c7..ce2f7b2 100644
--- a/frontend/src/components/ResearchDevelopment/Hero.tsx
+++ b/frontend/src/components/ResearchDevelopment/Hero.tsx
@@ -51,6 +51,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         src={background.url}
         alt="Hero Image Background"
         fill
+        priority
         className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Testimonials/index.tsx b/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Testimonials/index.tsx
index b4d78d1..bb733f7 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Testimonials/index.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Testimonials/index.tsx
@@ -24,7 +24,7 @@ const Testimonials: React.FC<{ testimonials: Testimonial[] }> = ({
         itemsPerPage * (page - 1),
         Math.min(testimonials.length, itemsPerPage * page),
       ),
-    [itemsPerPage, page],
+    [testimonials, itemsPerPage, page],
   );
 
   return (
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx
index b07eaa6..9f8f585 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx
@@ -20,7 +20,13 @@ const KlerosBook: React.FC<IKlerosBook> = ({
       )}
     >
       <div className="max-w-457 relative h-[536px] w-full flex-shrink-0 lg:h-[717px] lg:w-[457px]">
-        <Image src={bookCover.url} alt="Book Cover" fill className="!w-fit" />
+        <Image
+          src={bookCover.url}
+          alt="Book Cover"
+          fill
+          priority
+          className="!w-fit"
+        />
       </div>
       <div className="space-y-16">
         <div className="space-y-6">
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/PublicationCard.tsx b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/PublicationCard.tsx
index 90e7562..083a0ff 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/PublicationCard.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/PublicationCard.tsx
@@ -12,14 +12,12 @@ interface IPublicationCard {
 const PublicationCard: React.FC<IPublicationCard> = ({ publication }) => {
   return (
     <div className="flex flex-col items-start rounded-2xl border border-stroke p-6">
-      {(publication as TeamPublication)?.authors ? (
+      {isTeamPublication(publication) ? (
         <>
           <h2 className="mb-6 text-xl font-medium text-primary-text">
             {publication.topic}
           </h2>
-          <p className="mb-8 text-secondary-text">
-            {(publication as TeamPublication).authors}
-          </p>
+          <p className="mb-8 text-secondary-text">{publication.authors}</p>
         </>
       ) : (
         <p className="mb-8 text-secondary-text">{publication.topic}</p>
@@ -36,3 +34,9 @@ const PublicationCard: React.FC<IPublicationCard> = ({ publication }) => {
   );
 };
 export default PublicationCard;
+
+function isTeamPublication(
+  publication: TeamPublication | ThirdPartyPublication,
+): publication is TeamPublication {
+  return "authors" in publication;
+}
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/TeamPublications.tsx b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/TeamPublications.tsx
index 218b4c0..6c74a14 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/TeamPublications.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/TeamPublications.tsx
@@ -24,7 +24,7 @@ const TeamPublications: React.FC<{ teamPublications: TeamPublication[] }> = ({
         itemsPerPage * (page - 1),
         Math.min(teamPublications.length, itemsPerPage * page),
       ),
-    [itemsPerPage, page],
+    [teamPublications, itemsPerPage, page],
   );
 
   return (
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/ThirdPartyPublications.tsx b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/ThirdPartyPublications.tsx
index 3105959..866c656 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/ThirdPartyPublications.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/ThirdPartyPublications.tsx
@@ -24,7 +24,7 @@ const ThirdPartyPublications: React.FC<{
         itemsPerPage * (page - 1),
         Math.min(thirdPartyPublications.length, itemsPerPage * page),
       ),
-    [itemsPerPage, page],
+    [thirdPartyPublications, itemsPerPage, page],
   );
 
   return (
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/ResearchSection/ResearchCard.tsx b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/ResearchSection/ResearchCard.tsx
index 7c17ea0..149413f 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/ResearchSection/ResearchCard.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/ResearchSection/ResearchCard.tsx
@@ -14,7 +14,7 @@ const ResearchCard: React.FC<Research> = ({ field, icon }) => {
       )}
     >
       <Image src={icon.url} alt="document" width={64} height={64} />
-      <label className="text-lg text-primary-text">{field}</label>
+      <p className="text-lg text-primary-text">{field}</p>
     </div>
   );
 };
diff --git a/frontend/src/components/home/Hero.tsx b/frontend/src/components/home/Hero.tsx
index f5a017f..e1d2a19 100644
--- a/frontend/src/components/home/Hero.tsx
+++ b/frontend/src/components/home/Hero.tsx
@@ -63,6 +63,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         alt="Hero Image Background"
         width="1440"
         height="835"
+        priority
         className="absolute left-0 top-0 z-[-1] h-full object-cover object-left"
       />
     </div>
diff --git a/frontend/src/hooks/useScreenSize.tsx b/frontend/src/hooks/useScreenSize.tsx
index 6a344c5..8ad42db 100644
--- a/frontend/src/hooks/useScreenSize.tsx
+++ b/frontend/src/hooks/useScreenSize.tsx
@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 type ScreenSize = "sm" | "md" | "lg";
 
 export const useScreenSize = () => {
-  const [screenSize, setScreenSize] = useState<ScreenSize>();
+  const [screenSize, setScreenSize] = useState<ScreenSize>("lg");
 
   useEffect(() => {
     const handleResize = () => {
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index 7884358..3b75772 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -18,6 +18,27 @@ body {
   color: var(--foreground);
   background: var(--background);
   font-family: Urbanist, Helvetica, sans-serif;
+
+  /* scollbar */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: #42498f;
+    border-radius: 16px;
+    transition:
+      opacity 0.15s,
+      background-color 0.15s,
+      border-color 0.15s,
+      width 0.15s;
+  }
+
+  scrollbar-width: thin;
+  scrollbar-color: #42498f transparent;
 }
 
 @layer utilities {

From 49867938facc021fd081076102e035762cf0b6c7 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Mon, 20 Jan 2025 13:28:16 +0530
Subject: [PATCH 2/2] refactor(frontend): set-overflow-to-scroll

---
 frontend/src/components/Dropdown/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Dropdown/index.tsx b/frontend/src/components/Dropdown/index.tsx
index 7d5cc69..46d2160 100644
--- a/frontend/src/components/Dropdown/index.tsx
+++ b/frontend/src/components/Dropdown/index.tsx
@@ -58,7 +58,7 @@ const Dropdown: React.FC<IDropwdownProps> = ({ items, value, onChange }) => {
       <div
         className={clsx(
           "absolute z-10 mt-2 rounded-2xl border border-stroke bg-background-1",
-          "flex max-h-[300px] w-[200px] flex-col gap-4 overflow-scroll p-[10px] md:w-[348px]",
+          "flex max-h-[300px] w-[200px] flex-col gap-4 overflow-auto p-[10px] md:w-[348px]",
           isOpen ? "visible" : "hidden",
         )}
       >