Skip to content

Commit 994e647

Browse files
Jecomo-Alyssa-LynJecomo-Alyssa-Lyn
authored
Merge pull request #507 from CodebilityDev/add-members-modal-improvements
2 parents 4b31058 + f8c6209 commit 994e647

2 files changed

Lines changed: 19 additions & 18 deletions

File tree

‎apps/codebility/app/home/my-team/AddMembersModal.tsx‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
DialogHeader,
1010
DialogTitle,
1111
} from "@/components/ui/dialog";
12-
import { Codev } from "@/types/home/codev";
12+
import { Codev, InternalStatus } from "@/types/home/codev";
1313
import { Search, Check, Users } from "lucide-react";
1414
import toast from "react-hot-toast";
1515
import { useModal } from "@/hooks/use-modal-users";
@@ -87,7 +87,7 @@ const TeamMemberAvatar = ({
8787
/>
8888
</div>
8989
<div className="text-center w-full">
90-
<div className="text-xs text-white font-medium truncate w-full leading-tight">
90+
<div className="text-xs text-white font-medium truncate w-full leading-tight mt-2">
9191
{name}
9292
</div>
9393
{position && (
@@ -108,11 +108,11 @@ const TeamLeaderDisplay = ({
108108
onProfileClick?: (member: Codev) => void;
109109
}) => (
110110
<div>
111-
<h4 className="text-base sm:text-lg font-semibold text-white mb-1">Team Leader</h4>
111+
<h4 className="text-base sm:text-lg font-semibold text-white mb-3">Team Leader</h4>
112112
{teamLead ? (
113-
<div className="flex items-center gap-2 sm:gap-3">
113+
<div className="flex items-center gap-2 sm:gap-3 mb-6 mt-2">
114114
<div
115-
className={`relative flex-shrink-0 rounded-full overflow-hidden ring-2 ring-customBlue-400 ${
115+
className={`relative flex-shrink-0 rounded-full overflow-hidden ring-2 ring-customBlue-400 mb-2 ${
116116
onProfileClick ? 'cursor-pointer hover:ring-customBlue-300 transition-all duration-200' : ''
117117
}`}
118118
style={{ width: 40, height: 40 }}
@@ -166,7 +166,7 @@ const TeamLeaderDisplay = ({
166166
/>
167167
</div>
168168
<div>
169-
<div className="text-white font-semibold text-sm sm:text-base">
169+
<div className="text-white font-semibold text-sm sm:text-base mt-[-7px]">
170170
{teamLead.first_name} {teamLead.last_name}
171171
</div>
172172
<div className="text-gray-300 text-xs sm:text-sm">
@@ -202,14 +202,14 @@ const TeamMembersGrid = ({
202202
return (
203203
<div className="h-full flex flex-col">
204204
<h4 className="text-base sm:text-lg font-semibold text-white mb-1">Team Members</h4>
205-
<div className="mb-1 sm:mb-2">
205+
<div className="mb-1 sm:mb-2 md:mt-2">
206206
<span className="text-white text-xs sm:text-sm">{members.length} members</span>
207207
</div>
208-
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-1 sm:gap-2 w-full">
208+
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-1 sm:gap-2 w-full mt-6">
209209
{members.map((member) => {
210210
const isNew = !currentMemberIds.includes(member.id);
211211
return (
212-
<div key={member.id} className="w-full flex flex-col items-center relative">
212+
<div key={member.id} className="w-full flex flex-col items-center relative mb-5">
213213
{isNew && (
214214
<div className="absolute -top-1 -right-1 bg-green-500 text-white text-xs px-1 rounded-full z-10">
215215
New
@@ -245,10 +245,10 @@ const ProjectPreview = ({
245245
currentMemberIds: string[];
246246
onProfileClick?: (member: Codev) => void;
247247
}) => (
248-
<div className="h-full flex flex-col p-1 sm:p-2 space-y-1">
248+
<div className="h-full flex flex-col p-1 sm:p-2 gap-y-6">
249249
<div className="flex-shrink-0">
250250
<h3 className="text-base sm:text-lg font-semibold text-white mb-1">Project Name</h3>
251-
<div className="flex items-center gap-2 sm:gap-3">
251+
<div className="flex items-center gap-2 sm:gap-3 mt-2">
252252
<div className="w-8 h-8 sm:w-12 sm:h-12 rounded-lg overflow-hidden flex items-center justify-center bg-customBlue-600">
253253
<img
254254
src="https://codebility-cdn.pages.dev/assets/images/logo.png"
@@ -278,7 +278,7 @@ const ProjectPreview = ({
278278
/>
279279
</div>
280280

281-
<div className="flex-1 min-h-0">
281+
<div className="flex-1 min-h-0 mr-8">
282282
<TeamMembersGrid
283283
members={selectedMembers}
284284
currentMemberIds={currentMemberIds}
@@ -545,16 +545,17 @@ const AddMembersModal = ({
545545

546546
return (
547547
<Dialog open={isOpen} onOpenChange={onClose}>
548-
<DialogContent className="max-w-full w-[85vw] sm:w-[80vw] lg:w-[80vw] h-[80vh] p-0 flex flex-col bg-white/20 backdrop-blur-md dark:bg-white/10 border border-white/30 dark:border-white/20">
549-
<DialogHeader className="flex-shrink-0 px-3 sm:px-6 pt-1 pb-1 border-b border-white/30 dark:border-white/20 bg-white/10 backdrop-blur-sm dark:bg-white/5">
548+
<DialogContent className="max-w-full w-[85vw] sm:w-[80vw] lg:w-[80vw] h-[80vh] flex flex-col dark:bg-slate-950
549+
border-2 border-slate-300 dark:border-blue-900/60 p-4 sm:p-0 ">
550+
<DialogHeader className="flex-shrink-0 px-3 sm:px-6 pt-1 pb-1 ">
550551
<DialogTitle className="text-lg sm:text-xl lg:text-2xl font-bold text-white">
551552
Add Members
552553
</DialogTitle>
553554
</DialogHeader>
554555

555556
<div className="flex flex-col lg:flex-row flex-1 min-h-0 overflow-hidden">
556557
{/* Left Panel - 60% on Desktop */}
557-
<div className="w-full lg:w-3/5 border-b lg:border-b-0 lg:border-r border-white/30 dark:border-white/20">
558+
<div className="w-full lg:w-3/5 border-b lg:border-b-0 lg:border-r border-white/30 dark:border-white/20 pr-0 md:pr-6">
558559
<ProjectPreview
559560
projectName={project.name}
560561
teamLead={teamLeadData}
@@ -679,7 +680,7 @@ const AddMembersModal = ({
679680
</div>
680681
</div>
681682

682-
<div className="flex-shrink-0 flex flex-col sm:flex-row gap-3 p-3 sm:p-6 border-t border-gray-700 bg-gray-800">
683+
<div className="flex-shrink-0 flex flex-col sm:flex-row gap-3 p-3 sm:p-6 ">
683684
<Button
684685
variant="outline"
685686
onClick={onClose}

‎apps/codebility/app/home/my-team/MyTeamPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -424,11 +424,11 @@ const MyTeamPage = ({ projectData }: MyTeamPageProps) => {
424424
return (
425425
<div
426426
key={project.id}
427-
className="rounded-xl bg-white/20 backdrop-blur-md dark:bg-white/10 border border-white/30 dark:border-white/20 p-3 sm:p-4 md:p-5 lg:p-6 shadow-lg transition-all duration-300 hover:shadow-xl hover:bg-white/30 dark:hover:bg-white/15 hover:border-white/40 dark:hover:border-white/30 h-full">
427+
className="rounded-xl bg-white/20 backdrop-blur-md dark:bg-white/10 border border-white/30 dark:border-white/20 p-4 sm:p-4 md:p-5 lg:p-6 shadow-lg transition-all duration-300 hover:shadow-xl hover:bg-white/30 dark:hover:bg-white/15 hover:border-white/40 dark:hover:border-white/30 h-full border-red-700">
428428
<div className="space-y-4 sm:space-y-5 md:space-y-6">
429429

430430
{/* Project Header */}
431-
<div>
431+
<div className=" p-6 sm:p-0">
432432
<div className="flex items-center justify-between mb-2">
433433
<h2 className="text-lg sm:text-xl md:text-2xl font-bold text-gray-900 dark:text-white transition-colors duration-200">
434434
{project.name}

0 commit comments

Comments
 (0)