style: closest to pixel-perfect

src/app/admin/admins/page.tsx

@@ -193,7 +193,7 @@ export default function Admins() {
                     width={24}
                     height={24}
                     src={icons.editIcon}
-                    className="cursor-pointer responsive-icon"
+                    className="cursor-pointer responsive-icon mr-1"
                   />
                 </div>
               }
@@ -227,13 +227,15 @@ export default function Admins() {
                   submit={updateMutation.mutate}
                   schema={adminSchema}
                   child={
-                    <button
+                      <div className="flex justify-center">
+                      <button
                       type="submit"
                       disabled={updateMutation.isPending}
-                      className={`${updateMutation.isPending ? "btn-auth-loading" : "btn-auth"} mt-4 cursor-pointer`}
+                      className={`${updateMutation.isPending ? "btn-auth-loading" : "btn-auth"} cta modal-cta mt-4 cursor-pointer`}
                     >
                       {updateMutation.isPending ? "En cours..." : "Modifier"}
                     </button>
+                    </div>
                   }
                 />
               }
@@ -321,8 +323,9 @@ export default function Admins() {
 
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger asChild>
-                  <p className="cursor-pointer rounded-full bg-gray-300 text-gray-500 p-2">
+                  <p className="cta cancel flex gap-2">
                     Sélectionner une action
+                    <Image src={icons.arrowDown} alt="arrow down" />
                   </p>
                 </DropdownMenu.Trigger>
 
@@ -355,7 +358,7 @@ export default function Admins() {
                 trigger={
                   <div
                     onClick={() => setOpenModal(true)}
-                    className="cursor-pointer p-3 bg-blue-600 text-white rounded-full"
+                    className="cta"
                   >
                     Ajouter un admin
                   </div>
@@ -385,13 +388,15 @@ export default function Admins() {
                     submit={createMutation.mutate}
                     schema={adminSchema}
                     child={
+                      <div className="flex justify-center">
                       <button
                         type="submit"
                         disabled={createMutation.isPending}
-                        className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} mt-4 cursor-pointer`}
+                        className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} cta modal-cta mt-4 cursor-pointer`}
                       >
                         {createMutation.isPending ? "Création de l'admin..." : "Créer le compte"}
                       </button>
+                      </div>
                     }
                   />
                 }

src/app/admin/home/page.tsx

@@ -161,12 +161,12 @@ export default function HomePage () {
             content={
               <div>
                 <p className="text-center">
-                  Voulez-vous vraiment supprimer cette organisation ?
+                  Voulez-vous vraiment supprimer l'organisation <span className="font-bold">{row.original.name}</span> ?
                 </p>
 
-                <div className="grid grid-cols-2 gap-3 mt-3">
+                <div className="flex justify-between w-full pt-6 r-gap-24">
                   <button
-                    className="bg-blue-100 text-blue-600 py-2 px-4 text-lg rounded-full text-center hover:bg-blue-200"
+                    className="cta modal-cta cancel"
                     onClick={() => {
                       setSelectedId(null);
                     }}
@@ -174,7 +174,7 @@ export default function HomePage () {
                     Annuler
                   </button>
                   <button
-                    className="bg-red-500 text-white py-2 px-4 text-lg rounded-full text-center hover:bg-red-600"
+                    className="cta modal-cta danger"
                     onClick={() => {
                       mutate(id);
                       setSelectedId(null);

src/app/admin/organizations/[id]/page.tsx

@@ -118,7 +118,7 @@ export default function Profile() {
           </div>
           <hr />
           <div className="r-flex p-[32px] r-gap-24">
-            <div className="admin-infos r-flex flex-wrap justifyc-center lg:justifyc-start ">
+            <div className="admin-infos r-flex flex-wrap justifyy-center lg:justifyy-start ">
               <div className="r-flex-between items-center w-max">
                 <div className="icon-rounded">
                   <Image src={icons.userGroupBlue} alt="Documents" />

src/app/admin/organizations/page.tsx

@@ -16,6 +16,7 @@ import { companySchema } from "#/schema";
 import { Admin, Company } from "#/types";
 import Link from "next/link";
 
+
 export default function Organizations() {
   const { data: session, status } = useSession();
   const [openModal, setOpenModal] = useState(false);
@@ -192,10 +193,10 @@ export default function Organizations() {
           <p
             className={`rounded-full px-2 py-1 font-medium text-sm w-20 h-6 text-center
               ${ 
-                status === "active" ? "bg-[#ECF9E8] text-[#49C91E]" :
+                status === "active" ? "font-medium w-[80px] h-[24px] bg-[#ECF9E8] text-[#49C91E]" :
-                status === "inactive" ? "bg-[#E7EBF3] text-[#9FA8BC]" : 
+                status === "inactive" ? "font-medium w-[80px] h-[24px] bg-[#E7EBF3] text-[#9FA8BC]" : 
-                status === "pending" ? "bg-[#EAF7FC] text-[#30B2EA]" : 
+                status === "pending" ? "font-medium w-[80px] h-[24px] bg-[#EAF7FC] text-[#30B2EA]" : 
-                status === "blocked" ? "bg-[#FDEBE8] text-[#F33F19]" : 
+                status === "blocked" ? "font-medium w-[80px] h-[24px] bg-[#FDEBE8] text-[#F33F19]" : 
                 ""
               }
             `}
@@ -246,19 +247,22 @@ export default function Organizations() {
                   title="Supprimer une organisation"
                   content={
                     <div>
-                      <p className="text-center">Voulez-vous vraiment supprimer cette organisation ?</p>
+                      <p className="text-center">
-                      <div className="grid grid-cols-2 gap-3 mt-3">
+                  Voulez-vous vraiment supprimer l'organisation <span className="font-bold">{row.original.name}</span> ?
-                        <button
+                </p>
-                          className="bg-blue-100 text-blue-600 py-2 px-4 rounded-full cursor-pointer"
+
-                          onClick={() => {
+                <div className="flex justify-between w-full pt-6 r-gap-24">
+                  <button
+                    className="cta modal-cta cancel"
+                    onClick={() => {
                             setOpenDeleteModal(false);
                           }}
                         >
                           Annuler
                         </button>
                         <button
-                          className="bg-red-500 text-white py-2 px-4 rounded-full hover:bg-red-600 cursor-pointer"
+                    className="cta modal-cta danger"
-                          onClick={() => {
+                    onClick={() => {
                             deleteMutation.mutate(company.id);
                           }}
                         >
@@ -302,15 +306,16 @@ export default function Organizations() {
 
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger asChild>
-                  <p className="cursor-pointer rounded-full bg-gray-300 text-gray-500 p-2">
+                  <p className="cta cancel flex gap-2">
                     Sélectionner une action
+                    <Image src={icons.arrowDown} alt="arrow down" />
                   </p>
                 </DropdownMenu.Trigger>
 
                 <DropdownMenu.Portal>
                   <DropdownMenu.Content
-                    className="min-w-[150px] shadow-sm bg-white rounded-md p-1"
+                    className="min-w-[150px] shadow-sm bg-white rounded-md p-1 w-full"
-                    sideOffset={5}
+                    sideOffset={0} side="bottom" align="end"
                   >
                     <DropdownMenu.Item
                       onClick={() => bulkDeleteMutation.mutate(selectedIds)}
@@ -336,7 +341,7 @@ export default function Organizations() {
                 trigger={
                   <div
                     onClick={() => setOpenModal(true)}
-                    className="cursor-pointer p-3 bg-blue-600 text-white rounded-full"
+                    className="cta"
                   >
                     Ajouter une organisation
                   </div>
@@ -380,13 +385,15 @@ export default function Organizations() {
                     submit={createMutation.mutate} // Le type est maintenant compatible
                     schema={companySchema}
                     child={
+                      <div className="flex justify-center">
                       <button
                         type="submit"
                         disabled={createMutation.isPending}
-                        className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} mt-4 cursor-pointer`}
+                        className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} cta modal-cta mt-4 cursor-pointer`}
                       >
-                        {createMutation.isPending ? "En cours..." : "Créer l'organisation"}
+                        {createMutation.isPending ? "En cours..." : "Ajouter une organisation"}
                       </button>
+                      </div>
                     }
                   />
                 }

src/app/globals.css

@@ -102,6 +102,8 @@ body {
 
 .cta{
   padding: 10px 24px;
+  width: max-content;
+  height: max-content;
   color: white;
   background-color: var(--primary);
   font-size: 14px;
@@ -109,6 +111,12 @@ body {
   border: 1px solid var(--primary);
   border-radius: 100px;
   cursor: pointer;
+  text-wrap: nowrap;
+}
+
+.cta.modal-cta{
+  width: 240px;
+  height: 40px;
 }
 
 .cta.cancel{
@@ -138,6 +146,42 @@ hr{
   color: var(--gray);
 }
 
+input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--secondary) !important; 
+  border-radius: 6px !important; 
+  background-color: transparent; 
+  cursor: pointer; 
+  position: relative;
+}
+
+
+input[type="checkbox"]:checked {
+  background-color: var(--primary);
+  border-color: var(--primary);
+}
+
+
+input[type="checkbox"]:checked::before {
+  content: "✔"; 
+  font-size: 18px;
+  color: white;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.modal-input{
+  width: 490px;
+  margin-left: auto;
+  margin-right: auto;
+}
 
 
 /* Scroll Bar  */

src/assets/icons/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L5 5L9 1" stroke="#9FA8BC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icons/index.ts

@@ -42,6 +42,7 @@ import moonIcon from "./moon.svg"
 import trash from "./trash.svg"
 import mailIcon from "./sms.svg"
 import personalCard from "./personalcard.svg"
+import arrowDown from "#/assets/icons/chevron-down.svg"
 
 
 export const icons = {
@@ -88,7 +89,9 @@ export const icons = {
   moonIcon,
   trash,
   mailIcon,
-  personalCard
+  personalCard,
+  arrowDown
+
 }
 
 

src/components/floatingLabelInput.tsx

@@ -32,7 +32,7 @@ export default function FloatingLabelInput({
         return (
           <div className="relative w-full">
             <select 
-              className="input-form focus:ring-2 focus:ring-blue-500 outline-none"
+              className="input-form modal-input focus:ring-2 focus:ring-blue-500 outline-none"
               name={name}
               defaultValue={defaultValue}
             >
@@ -91,12 +91,12 @@ export default function FloatingLabelInput({
               <input
                 type="text"
                 placeholder={placeholder}
-                className="focus:ring-2 focus:ring-blue-500 outline-none px-10 py-3 w-full text-black border border-[#d1d5dc] rounded-full"
+                className="focus:ring-2 focus:ring-blue-500 outline-none px-10 py-2 w-full text-black border border-[#d1d5dc] rounded-full"
                 name={name}
                 defaultValue={defaultValue}
                 onChange={handleChange}
               />
-              {button && <div className="btn-floating-right">{button}</div>}
+              {button && <div className="btn-floating-right mr-1 ">{button}</div>}
             </div>
           );
         
@@ -106,7 +106,7 @@ export default function FloatingLabelInput({
             <input
               type={type}
               placeholder={placeholder}
-              className="input-form focus:ring-2 focus:ring-blue-500 outline-none"
+              className="input-form modal-input focus:ring-2 focus:ring-blue-500 outline-none"
               name={name}
               defaultValue={defaultValue}
               onChange={handleChange}

src/components/modal.tsx

@@ -1,5 +1,7 @@
 import * as Dialog from "@radix-ui/react-dialog";
 import { ReactNode } from "react";
+import { icons } from "#/assets/icons"
+import Image from "next/image";
 
 export function Modal({
   trigger,
@@ -21,21 +23,21 @@ export function Modal({
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 bg-black/25 z-40" />
-        <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md bg-white rounded-lg shadow-xl z-50 p-6"
+        <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-max flex flex-col gap-10 bg-white rounded-lg shadow-xl z-50 px-16 py-12"
           // onPointerDownOutside={(e) => e.preventDefault()}
         >
-          <Dialog.Title className="text-xl font-bold text-center my-4">
+          <Dialog.Title className="text-xl font-bold text-center text-[30px] ">
             {title}
           </Dialog.Title>
           
-          <div className=" justify-center">
+          <div className="flex gap-5 justify-center">
             {content}
           </div>
 
-            <div className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 cursor-pointer" 
+            <div className="absolute top-5 right-5 text-gray-500 hover:text-gray-700 cursor-pointer" 
               onClick={() => {onOpenChange?.(false)}}
             >
-              X
+              <Image src={icons.crossIcon} alt="fermer"/>
             </div>
         </Dialog.Content>
       </Dialog.Portal>

src/components/table/table.tsx

@@ -177,7 +177,7 @@ export default function Table<TData, TValue>({
 
             <div className="flex items-center justify-end space-x-2 py-4">
             <button
-                className="bg-gray-100 shadow-xs hover:bg-gray-300 px-3 py-1 rounded w-9 h-9"
+                className="hover:bg-gray-300 cursor-pointer px-3 py-1 rounded w-9 h-9"
                 onClick={() => table.previousPage()}
                 disabled={!table.getCanPreviousPage()}
             >
@@ -192,7 +192,7 @@ export default function Table<TData, TValue>({
                             "px-3 py-1 rounded w-9 h-9",
                             pageNumber === currentPage 
                                 ? "bg-[#E9F0FF] text-blue-400"
-                                : "bg-gray-100 hover:bg-gray-300"
+                                : "hover:bg-gray-300 cursor-pointer"
                         )}
                         onClick={() => table.setPageIndex(pageNumber - 1)}
                     >
@@ -202,7 +202,7 @@ export default function Table<TData, TValue>({
             </div>
 
             <button
-                className="w-9 h-9 bg-gray-100 shadow-xs hover:bg-gray-300 hover:text-black px-3 py-1 rounded"
+                className="w-9 h-9 hover:bg-gray-300 cursor-pointer hover:text-black px-3 py-1 rounded"
                 onClick={() => table.nextPage()}
                 disabled={!table.getCanNextPage()}
             >