From 39bc5e27c8faff330cf4306e6582b8b36be51a94 Mon Sep 17 00:00:00 2001
From: Kapil Jangid <kapiljangid040@gmail.com>
Date: Sun, 3 Nov 2024 12:55:15 +0530
Subject: [PATCH] feat(profile): update UI components for better responsiveness
 and styling

---
 src/app/profile/[userId]/page.tsx                    | 12 +++++++-----
 src/components/profile/AboutMe.tsx                   |  4 ++--
 src/components/profile/ProfileEducation.tsx          |  2 +-
 src/components/profile/ProfileExperience.tsx         |  2 +-
 src/components/profile/ProfileHeroSection.tsx        |  4 ++--
 src/components/profile/ProfileHireme.tsx             |  8 ++++----
 src/components/profile/ProfileProjects.tsx           |  2 +-
 src/components/profile/ProfileResume.tsx             |  2 +-
 src/components/profile/ProfileSkills.tsx             |  2 +-
 src/components/profile/ProfileSocials.tsx            | 10 +++++-----
 .../emptycontainers/ProfileEmptyContainers.tsx       |  2 +-
 src/components/profile/sheets/SheetWrapper.tsx       |  7 ++++---
 12 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/app/profile/[userId]/page.tsx b/src/app/profile/[userId]/page.tsx
index 6384616f..4b2fe37a 100644
--- a/src/app/profile/[userId]/page.tsx
+++ b/src/app/profile/[userId]/page.tsx
@@ -50,11 +50,13 @@ const Page = async ({ params: { userId } }: { params: { userId: string } }) => {
             isOwner={isOwner}
             education={userDetails.education}
           />
-          <ProfileHireme
-            email={userDetails.email}
-            contactEmail={userDetails.contactEmail || ''}
-            resume={userDetails.resume || ''}
-          />
+          {!isOwner && (
+            <ProfileHireme
+              email={userDetails.email}
+              contactEmail={userDetails.contactEmail || ''}
+              resume={userDetails.resume || ''}
+            />
+          )}
         </>
       )}
     </>
diff --git a/src/components/profile/AboutMe.tsx b/src/components/profile/AboutMe.tsx
index 4c67013e..701ae578 100644
--- a/src/components/profile/AboutMe.tsx
+++ b/src/components/profile/AboutMe.tsx
@@ -35,7 +35,7 @@ const ProfileAboutMe = ({
         {isOwner && (
           <Button
             variant={'outline'}
-            className="px-3 py-2 rounded-sm text-slate-500 dark:text-slate-400 flex gap-2"
+            className="px-3 py-2 rounded-xs text-slate-500 dark:text-slate-400 flex gap-2"
             onClick={handleOpen}
           >
             <Pencil height={16} width={16} /> Edit
@@ -60,7 +60,7 @@ const ProfileAboutMe = ({
       )}
       {aboutMe && (
         <div className="rounded-2xl p-6 dark:bg-slate-900 bg-slate-100">
-          <p className="text-base leading-normal">{aboutMe}</p>
+          <p className="sm:text-base text-sm leading-normal">{aboutMe}</p>
         </div>
       )}
       {isOwner && (
diff --git a/src/components/profile/ProfileEducation.tsx b/src/components/profile/ProfileEducation.tsx
index c9ddb673..76c26ac6 100644
--- a/src/components/profile/ProfileEducation.tsx
+++ b/src/components/profile/ProfileEducation.tsx
@@ -48,7 +48,7 @@ const ProfileEducation = ({
         {isOwner && (
           <Button
             variant={'outline'}
-            className="px-3 py-2 rounded-sm text-slate-500 dark:text-slate-400 flex gap-2"
+            className="px-3 py-2 rounded-xs text-slate-500 dark:text-slate-400 flex gap-2"
             onClick={handleOpen}
           >
             <Plus height={16} width={16} /> Add Education
diff --git a/src/components/profile/ProfileExperience.tsx b/src/components/profile/ProfileExperience.tsx
index a877d1c2..e7a3daec 100644
--- a/src/components/profile/ProfileExperience.tsx
+++ b/src/components/profile/ProfileExperience.tsx
@@ -50,7 +50,7 @@ const ProfileExperience = ({
         {isOwner && (
           <Button
             variant={'outline'}
-            className="px-3 py-2 rounded-sm text-slate-500 dark:text-slate-400 flex gap-2"
+            className="px-3 py-2 rounded-xs text-slate-500 dark:text-slate-400 flex gap-2"
             onClick={handleOpen}
           >
             <Plus height={16} width={16} /> Add Experience
diff --git a/src/components/profile/ProfileHeroSection.tsx b/src/components/profile/ProfileHeroSection.tsx
index 71e7b6c4..a398041b 100644
--- a/src/components/profile/ProfileHeroSection.tsx
+++ b/src/components/profile/ProfileHeroSection.tsx
@@ -49,7 +49,7 @@ const ProfileHeroSection = ({ userdetails }: { userdetails: UserType }) => {
               <>
                 <Button
                   variant={'outline'}
-                  className="px-3 py-2 rounded-sm"
+                  className="px-3 py-2 rounded-xs"
                   onClick={handleOpen}
                 >
                   <Pencil height={16} width={16} />
@@ -57,7 +57,7 @@ const ProfileHeroSection = ({ userdetails }: { userdetails: UserType }) => {
                 <Button
                   onClick={() => setIsAccountOpen(true)}
                   variant={'outline'}
-                  className="px-3 py-2 rounded-sm"
+                  className="px-3 py-2 rounded-xs"
                 >
                   <Settings height={16} width={16} />
                 </Button>
diff --git a/src/components/profile/ProfileHireme.tsx b/src/components/profile/ProfileHireme.tsx
index 7b889076..c818682f 100644
--- a/src/components/profile/ProfileHireme.tsx
+++ b/src/components/profile/ProfileHireme.tsx
@@ -13,7 +13,7 @@ const ProfileHireme = ({
 }) => {
   return (
     <>
-      <div className="border rounded-2xl bg-gradient-to-b from-white to-slate-100 dark:from-gray-800 dark:to-gray-900  min-h-40 overflow-hidden flex flex-col gap-y-4 px-6 py-4 items-center justify-center">
+      <div className="border rounded-2xl bg-gradient-to-b from-slate-100 to-white dark:from-slate-900 dark:to-slate-950  min-h-40 overflow-hidden flex flex-col gap-y-4 px-6 py-4 items-center justify-center">
         <div className="text-center">
           <h4 className="font-bold text-xl">
             Hire Me, Let’s Make Magic Happen!
@@ -23,10 +23,10 @@ const ProfileHireme = ({
             to your goals!
           </p>
         </div>
-        <div className="flex gap-2 flex-col sm:flex-row items-center">
+        <div className="flex gap-4 flex-col sm:flex-row items-center justify-center w-full">
           <Link
             href={`mailto:${contactEmail ? contactEmail : email}`}
-            className="bg-[#3259E8] px-3 py-2 text-white rounded-sm flex gap-1"
+            className="bg-[#3259E8] px-3 py-2 text-white rounded-xs flex gap-1 max-sm:w-full justify-center"
           >
             <Mail /> <p> Contact Me</p>
           </Link>
@@ -34,7 +34,7 @@ const ProfileHireme = ({
             <Link
               href={resume}
               target="_blank"
-              className="dark:text-slate-400 bg-white border-slate-200 px-3 py-2 dark:bg-[#020817]  rounded-sm flex gap-1 bg-transparent text-slate-500"
+              className="dark:text-slate-400 bg-white border-slate-200 px-3 py-2 dark:bg-[#020817]  rounded-xs border dark:border-slate-800 flex gap-1 bg-transparent text-slate-500 max-sm:w-full justify-center"
             >
               View Resume
               <ArrowRight />
diff --git a/src/components/profile/ProfileProjects.tsx b/src/components/profile/ProfileProjects.tsx
index f913238c..5f6a1e6f 100644
--- a/src/components/profile/ProfileProjects.tsx
+++ b/src/components/profile/ProfileProjects.tsx
@@ -60,7 +60,7 @@ const ProfileProjects = ({
         {isOwner && (
           <Button
             variant={'outline'}
-            className="px-3 py-2 rounded-sm text-slate-500 dark:text-slate-400 flex gap-2"
+            className="px-3 py-2 rounded-xs text-slate-500 dark:text-slate-400 flex gap-2"
             onClick={handleOpen}
           >
             <Plus height={16} width={16} /> Add Project
diff --git a/src/components/profile/ProfileResume.tsx b/src/components/profile/ProfileResume.tsx
index 2ddf9210..d95b0eaa 100644
--- a/src/components/profile/ProfileResume.tsx
+++ b/src/components/profile/ProfileResume.tsx
@@ -37,7 +37,7 @@ const ProfileResume = ({
         {isOwner && (
           <Button
             variant={'outline'}
-            className="px-3 py-2 rounded-sm text-slate-500 dark:text-slate-400 flex gap-2"
+            className="px-3 py-2 rounded-xs text-slate-500 dark:text-slate-400 flex gap-2"
             onClick={handleOpen}
           >
             <Pencil height={16} width={16} /> Edit
diff --git a/src/components/profile/ProfileSkills.tsx b/src/components/profile/ProfileSkills.tsx
index 19624368..e5c5170b 100644
--- a/src/components/profile/ProfileSkills.tsx
+++ b/src/components/profile/ProfileSkills.tsx
@@ -29,7 +29,7 @@ const ProfileSkills = ({
         {isOwner && (
           <Button
             variant={'outline'}
-            className="px-3 py-2 rounded-sm text-slate-500 dark:text-slate-400 flex gap-2"
+            className="px-3 py-2 rounded-xs text-slate-500 dark:text-slate-400 flex gap-2"
             onClick={handleOpen}
           >
             <Pencil height={16} width={16} /> Update
diff --git a/src/components/profile/ProfileSocials.tsx b/src/components/profile/ProfileSocials.tsx
index b4d4d70d..0d0ba972 100644
--- a/src/components/profile/ProfileSocials.tsx
+++ b/src/components/profile/ProfileSocials.tsx
@@ -11,7 +11,7 @@ const ProfileSocials = ({ userdetails }: { userdetails: UserType }) => {
         <Link
           target="_blank"
           href={userdetails.githubLink}
-          className="px-3 dark:text-slate-50 flex gap-1 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
+          className="px-3 dark:text-slate-50 flex gap-3 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
         >
           <Icon
             icon={'github'}
@@ -24,7 +24,7 @@ const ProfileSocials = ({ userdetails }: { userdetails: UserType }) => {
         <Link
           target="_blank"
           href={userdetails.linkedinLink}
-          className="px-3 dark:text-slate-50 flex gap-1 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
+          className="px-3 dark:text-slate-50 flex gap-3 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
         >
           <Icon
             icon={'linkedin'}
@@ -37,7 +37,7 @@ const ProfileSocials = ({ userdetails }: { userdetails: UserType }) => {
         <Link
           target="_blank"
           href={userdetails.twitterLink}
-          className="px-3 dark:text-slate-50 flex gap-1 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
+          className="px-3 dark:text-slate-50 flex gap-3 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
         >
           <Icon
             icon={'twitter'}
@@ -50,7 +50,7 @@ const ProfileSocials = ({ userdetails }: { userdetails: UserType }) => {
         <Link
           target="_blank"
           href={userdetails.discordLink}
-          className="px-3 dark:text-slate-50 flex gap-1 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
+          className="px-3 dark:text-slate-50 flex gap-3 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
         >
           <Icon
             icon={'discord'}
@@ -64,7 +64,7 @@ const ProfileSocials = ({ userdetails }: { userdetails: UserType }) => {
         <Link
           target="_blank"
           href={userdetails.portfolioLink}
-          className="px-3 dark:text-slate-50 flex gap-1 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
+          className="px-3 dark:text-slate-50 flex gap-3 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
         >
           <Globe
             width={24}
diff --git a/src/components/profile/emptycontainers/ProfileEmptyContainers.tsx b/src/components/profile/emptycontainers/ProfileEmptyContainers.tsx
index 025caf44..2680da77 100644
--- a/src/components/profile/emptycontainers/ProfileEmptyContainers.tsx
+++ b/src/components/profile/emptycontainers/ProfileEmptyContainers.tsx
@@ -30,7 +30,7 @@ const ProfileEmptyContainers = ({
         </p>
       </div>
       {isOwner && (
-        <Button onClick={handleClick} className="text-white rounded-sm">
+        <Button onClick={handleClick} className="text-white rounded-xs">
           {buttonText}
         </Button>
       )}
diff --git a/src/components/profile/sheets/SheetWrapper.tsx b/src/components/profile/sheets/SheetWrapper.tsx
index 180fa408..892cb68e 100644
--- a/src/components/profile/sheets/SheetWrapper.tsx
+++ b/src/components/profile/sheets/SheetWrapper.tsx
@@ -24,13 +24,14 @@ const SheetWrapper: React.FC<SheetWrapperProps> = ({
 }) => {
   return (
     <Sheet open={isOpen} onOpenChange={handleClose}>
-      <SheetContent className="flex flex-col pb-0 overflow-y-auto no-scrollbar">
+      <SheetContent className="flex flex-col pb-0 max-h-screen overflow-hidden">
         <SheetHeader>
           <SheetTitle className="text-2xl">{title}</SheetTitle>
           <SheetDescription>{description}</SheetDescription>
         </SheetHeader>
-
-        {children}
+        <div className="flex flex-col pb-0 overflow-y-auto no-scrollbar">
+          {children}
+        </div>
       </SheetContent>
     </Sheet>
   );