From dc789e79a7c75c3722edd2f0c3f65b7980db01d7 Mon Sep 17 00:00:00 2001 From: Rajgupta36 Date: Wed, 10 Sep 2025 00:23:11 +0530 Subject: [PATCH 1/9] fix ui bugs --- frontend/src/app/about/page.tsx | 2 +- frontend/src/app/global-error.tsx | 2 +- frontend/src/app/globals.css | 2 +- .../mentorship/programs/[programKey]/page.tsx | 6 +- .../mentorship/programs/[programKey]/page.tsx | 5 +- frontend/src/app/page.tsx | 6 +- frontend/src/app/snapshots/[id]/page.tsx | 2 +- frontend/src/app/snapshots/page.tsx | 2 +- frontend/src/components/ActionButton.tsx | 2 +- frontend/src/components/Card.tsx | 4 +- frontend/src/components/CardDetailsPage.tsx | 2 +- frontend/src/components/Footer.tsx | 6 +- .../components/GeneralCompliantComponent.tsx | 2 +- frontend/src/components/Header.tsx | 8 +-- frontend/src/components/InfoBlock.tsx | 2 +- frontend/src/components/ItemCardList.tsx | 2 +- frontend/src/components/LoginPageContent.tsx | 2 +- frontend/src/components/LogoCarousel.tsx | 8 +-- frontend/src/components/MetricsCard.tsx | 2 +- .../src/components/MetricsScoreCircle.tsx | 8 +-- frontend/src/components/Modal.tsx | 4 +- frontend/src/components/ModeToggle.tsx | 2 +- frontend/src/components/ModuleCard.tsx | 2 +- frontend/src/components/ModuleForm.tsx | 20 +++---- frontend/src/components/MultiSearch.tsx | 6 +- frontend/src/components/NavButton.tsx | 2 +- frontend/src/components/NavDropDown.tsx | 2 +- frontend/src/components/ProgramCard.tsx | 60 ++++++++++++++++--- frontend/src/components/ProgramForm.tsx | 18 +++--- frontend/src/components/Release.tsx | 2 +- frontend/src/components/RepositoriesCard.tsx | 2 +- frontend/src/components/ScrollToTop.tsx | 2 +- frontend/src/components/Search.tsx | 6 +- frontend/src/components/SearchPageLayout.tsx | 2 +- frontend/src/components/SingleModuleCard.tsx | 13 +--- frontend/src/components/SnapshotCard.tsx | 2 +- frontend/src/components/SortBy.tsx | 2 +- .../src/components/TopContributorsList.tsx | 2 +- frontend/src/components/TruncatedText.tsx | 2 +- frontend/src/components/UserCard.tsx | 10 ++-- frontend/src/components/UserMenu.tsx | 4 +- .../components/skeletons/ApiKeySkelton.tsx | 4 +- frontend/src/components/skeletons/Card.tsx | 4 +- 43 files changed, 140 insertions(+), 108 deletions(-) diff --git a/frontend/src/app/about/page.tsx b/frontend/src/app/about/page.tsx index 690a7c3819..db80862e09 100644 --- a/frontend/src/app/about/page.tsx +++ b/frontend/src/app/about/page.tsx @@ -106,7 +106,7 @@ const About = () => { return (
-

About

+

About

}> {aboutText.map((text) => (
diff --git a/frontend/src/app/global-error.tsx b/frontend/src/app/global-error.tsx index e984ccf804..518e0f9538 100644 --- a/frontend/src/app/global-error.tsx +++ b/frontend/src/app/global-error.tsx @@ -40,7 +40,7 @@ export const ErrorDisplay: React.FC = ({ statusCode, title, m

{message}

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 7b3b311eb0..f7cf9df912 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -333,7 +333,7 @@ } .dropdown-menu { - @apply absolute top-full left-0 mt-2 w-48 rounded-lg bg-white p-3 shadow-lg dark:bg-gray-800; + @apply absolute left-0 top-full mt-2 w-48 rounded-lg bg-white p-3 shadow-lg dark:bg-gray-800; @apply invisible opacity-0 transition-all duration-200 ease-in-out; @apply flex flex-col gap-2; /* Stack items vertically */ diff --git a/frontend/src/app/mentorship/programs/[programKey]/page.tsx b/frontend/src/app/mentorship/programs/[programKey]/page.tsx index ccd7bbd687..3b064dc52c 100644 --- a/frontend/src/app/mentorship/programs/[programKey]/page.tsx +++ b/frontend/src/app/mentorship/programs/[programKey]/page.tsx @@ -1,12 +1,12 @@ 'use client' import { useQuery } from '@apollo/client' -import upperFirst from 'lodash/upperFirst' import { useParams, useSearchParams, useRouter } from 'next/navigation' import { useEffect, useState } from 'react' import { ErrorDisplay } from 'app/global-error' import { GET_PROGRAM_AND_MODULES } from 'server/queries/programsQueries' import type { Module, Program } from 'types/mentorship' +import { titleCaseWord } from 'utils/capitalize' import { formatDate } from 'utils/dateFormatter' import DetailsCard from 'components/CardDetailsPage' import LoadingSpinner from 'components/LoadingSpinner' @@ -70,13 +70,13 @@ const ProgramDetailsPage = () => { } const programDetails = [ - { label: 'Status', value: upperFirst(program.status) }, + { label: 'Status', value: titleCaseWord(program.status) }, { label: 'Start Date', value: formatDate(program.startedAt) }, { label: 'End Date', value: formatDate(program.endedAt) }, { label: 'Mentees Limit', value: String(program.menteesLimit) }, { label: 'Experience Levels', - value: program.experienceLevels?.join(', ') || 'N/A', + value: program.experienceLevels?.map((level) => titleCaseWord(level)).join(', ') || 'N/A', }, ] diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx index a28ef94602..96497bf9e9 100644 --- a/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx +++ b/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx @@ -12,6 +12,7 @@ import { GET_PROGRAM_AND_MODULES } from 'server/queries/programsQueries' import type { ExtendedSession } from 'types/auth' import type { Module, Program } from 'types/mentorship' import { ProgramStatusEnum } from 'types/mentorship' +import { titleCaseWord } from 'utils/capitalize' import { formatDate } from 'utils/dateFormatter' import DetailsCard from 'components/CardDetailsPage' import LoadingSpinner from 'components/LoadingSpinner' @@ -128,13 +129,13 @@ const ProgramDetailsPage = () => { } const programDetails = [ - { label: 'Status', value: upperFirst(program.status) }, + { label: 'Status', value: titleCaseWord(program.status) }, { label: 'Start Date', value: formatDate(program.startedAt) }, { label: 'End Date', value: formatDate(program.endedAt) }, { label: 'Mentees Limit', value: String(program.menteesLimit) }, { label: 'Experience Levels', - value: program.experienceLevels?.join(', ') || 'N/A', + value: program.experienceLevels?.map((level) => titleCaseWord(level)).join(', ') || 'N/A', }, ] diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index d194b77a0b..6a0228fbcf 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -141,7 +141,7 @@ export default function Home() {

Welcome to OWASP Nest

-

+

Your gateway to OWASP. Discover, engage, and help shape the future!

@@ -255,7 +255,7 @@ export default function Home() { {data.recentProjects?.map((project) => (
-

+

@@ -369,7 +369,7 @@ export default function Home() { ))}
-
+

Ready to Make a Difference?

diff --git a/frontend/src/app/snapshots/[id]/page.tsx b/frontend/src/app/snapshots/[id]/page.tsx index 5dbcf8668d..6a26fd5ae8 100644 --- a/frontend/src/app/snapshots/[id]/page.tsx +++ b/frontend/src/app/snapshots/[id]/page.tsx @@ -111,7 +111,7 @@ const SnapshotDetailsPage: React.FC = () => { return (

-
+

diff --git a/frontend/src/app/snapshots/page.tsx b/frontend/src/app/snapshots/page.tsx index cf0312c0a8..d9d4bfc548 100644 --- a/frontend/src/app/snapshots/page.tsx +++ b/frontend/src/app/snapshots/page.tsx @@ -63,7 +63,7 @@ const SnapshotsPage: React.FC = () => { return (
-
+
{!snapshots?.length ? (
No Snapshots found
diff --git a/frontend/src/components/ActionButton.tsx b/frontend/src/components/ActionButton.tsx index 3acdb09e54..c31d74d1c1 100644 --- a/frontend/src/components/ActionButton.tsx +++ b/frontend/src/components/ActionButton.tsx @@ -12,7 +12,7 @@ interface ActionButtonProps { const ActionButton: React.FC = ({ url, onClick, tooltipLabel, children }) => { const baseStyles = - 'flex items-center gap-2 px-2 py-2 rounded-md border border-[#1D7BD7] transition-all whitespace-nowrap justify-center bg-transparent text-blue-600 hover:bg-[#1D7BD7] hover:text-white dark:hover:text-white' + 'flex items-center gap-2 px-2 py-2 rounded-md border border-[#1D7BD7] transition-all whitespace-nowrap justify-center bg-transparent text-[#1D7BD7] hover:bg-[#1D7BD7] hover:text-white dark:hover:text-white' return url ? ( diff --git a/frontend/src/components/Card.tsx b/frontend/src/components/Card.tsx index 960881d8e6..a042af4604 100644 --- a/frontend/src/components/Card.tsx +++ b/frontend/src/components/Card.tsx @@ -29,7 +29,7 @@ const Card = ({ timeline, }: CardProps) => { return ( -
+
{/* Card Header with Badge and Title */}
@@ -54,7 +54,7 @@ const Card = ({ {/* Project title and link */}

{ router.push(`${window.location.pathname}/edit`) }} diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx index cc0feb2821..a4e6504c5b 100644 --- a/frontend/src/components/Footer.tsx +++ b/frontend/src/components/Footer.tsx @@ -20,8 +20,8 @@ export default function Footer() { }, []) return ( -