ristoo/privatedocs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: closest to pixel-perfect

Browse Source
This commit is contained in:
Ruben 2025-03-28 19:05:16 +01:00
parent e56b346c8b
commit 015094e9c5
10 changed files with 105 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/admin/admins/page.tsx
View File

@ -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={
<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>
}
/>
}

8
src/app/admin/home/page.tsx
View File

@ -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);

2
src/app/admin/organizations/[id]/page.tsx
View File

@ -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" />

35
src/app/admin/organizations/page.tsx
View File

@ -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 === "inactive" ? "bg-[#E7EBF3] text-[#9FA8BC]" :
status === "pending" ? "bg-[#EAF7FC] text-[#30B2EA]" :
status === "blocked" ? "bg-[#FDEBE8] text-[#F33F19]" :
status === "active" ? "font-medium w-[80px] h-[24px] bg-[#ECF9E8] text-[#49C91E]" :
status === "inactive" ? "font-medium w-[80px] h-[24px] bg-[#E7EBF3] text-[#9FA8BC]" :
status === "pending" ? "font-medium w-[80px] h-[24px] bg-[#EAF7FC] text-[#30B2EA]" :
status === "blocked" ? "font-medium w-[80px] h-[24px] bg-[#FDEBE8] text-[#F33F19]" :
""
}
`}
@ -246,10 +247,13 @@ export default function Organizations() {
title="Supprimer une organisation"
content={
<div>
<p className="text-center">Voulez-vous vraiment supprimer cette organisation ?</p>
<div className="grid grid-cols-2 gap-3 mt-3">
<p className="text-center">
Voulez-vous vraiment supprimer l'organisation <span className="font-bold">{row.original.name}</span> ?
</p>
<div className="flex justify-between w-full pt-6 r-gap-24">
<button
className="bg-blue-100 text-blue-600 py-2 px-4 rounded-full cursor-pointer"
className="cta modal-cta cancel"
onClick={() => {
setOpenDeleteModal(false);
}}
@ -257,7 +261,7 @@ export default function Organizations() {
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={() => {
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"
sideOffset={5}
className="min-w-[150px] shadow-sm bg-white rounded-md p-1 w-full"
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>
}
/>
}

44
src/app/globals.css
View File

@ -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 */

3
src/assets/icons/chevron-down.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 207 B

5
src/assets/icons/index.ts
View File

@ -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
}

8
src/components/floatingLabelInput.tsx
View File

@ -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}

12
src/components/modal.tsx
View File

@ -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>

6
src/components/table/table.tsx
View File

@ -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()}
>