Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes/profile UI fixes #569

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fixes/profile UI fixes #569

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f833424
chore(package): remove local dependency on 100xdevs-job-board
CuriousCoder00 Nov 1, 2024
d698bbc
feat(tailwind): add extra small radius option for styling
CuriousCoder00 Nov 3, 2024
39bc5e2
feat(profile): update UI components for better responsiveness and sty…
CuriousCoder00 Nov 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,6 @@
"@types/react-dom": "^18",
"@typescript-eslint/eslint-plugin": "^8.1.0",
"@typescript-eslint/parser": "^8.1.0",
"100xdevs-job-board": "file:",
"eslint": "^8",
"eslint-config-next": "14.2.5",
"husky": "^9.1.4",
Expand Down
12 changes: 7 additions & 5 deletions src/app/profile/[userId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 || ''}
/>
)}
</>
)}
</>
Expand Down
4 changes: 2 additions & 2 deletions src/components/profile/AboutMe.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 && (
Expand Down
2 changes: 1 addition & 1 deletion src/components/profile/ProfileEducation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/components/profile/ProfileExperience.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/components/profile/ProfileHeroSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions src/components/profile/ProfileHireme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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!
Expand All @@ -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 />
Expand Down
2 changes: 1 addition & 1 deletion src/components/profile/ProfileProjects.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/components/profile/ProfileResume.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/components/profile/ProfileSkills.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
10 changes: 5 additions & 5 deletions src/components/profile/ProfileSocials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'}
Expand All @@ -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'}
Expand All @@ -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'}
Expand All @@ -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'}
Expand All @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/components/profile/emptycontainers/ProfileEmptyContainers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
Expand Down
7 changes: 4 additions & 3 deletions src/components/profile/sheets/SheetWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ const config = {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)',
xs: 'calc(var(--radius) - 8px)',
},
keyframes: {
marquee: {
Expand Down
Loading