feat(profile): update UI components for better responsiveness and sty…

…ling
code100x · Nov 3, 2024 · 39bc5e2 · 39bc5e2
1 parent d698bbc
commit 39bc5e2
Show file tree

Hide file tree

Showing 12 changed files with 30 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -49,15 +49,15 @@ 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} />
                 </Button>
                 <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
@@ -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,18 +23,18 @@ 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>
           {resume && (
             <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   );