inmake/graff-mate-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: update component props and styles across multiple modals and cards for consistency and improved readability

Browse Source
This commit is contained in:
c00b3r
2025-06-10 16:05:29 +05:00
parent cadc92da65
commit f204767e0a
7 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ClientCard.tsx
+3 -3
View File
@@ -1,14 +1,14 @@
import { IUser } from "../types/IUser";
import { Client } from "../types/IClient";
import ChevronRightIcon from "./icons/ChevronRightIcon";
import NewButton from "./NewButton";
function ClientCard({ client }: { client: IUser }) {
function ClientCard({ client }: { client: Client }) {
return (
<>
<NewButton variant="secondary" className="w-full">
<div className="flex flex-col gap-[0.278vw] w-full text-left h-[2.222vw]">
<p className="caption-s font-medium text-[#BDBDBD]">Клиент</p>
<p className="text-s font-medium">{client.fullname}</p>
<p className="text-s font-medium">{client.name}</p>
</div>
<div className="flex gap-[0.556vw] items-center">
{!client.email && (
src/components/DesktopCard.tsx
+2 -2
View File
@@ -28,7 +28,7 @@ export default function DesktopCard({ server }: IDesktopCardProps) {
<div className="flex flex-col gap-[0.833vw] aspect-[300/211] w-[20.833vw] h-[14.653vw]">
<div
className={clsx(
'relative w-full h-[8.056vw] aspect-[300/116] bg-[#F6F6F6] rounded-3xl bg-[url("/images/Table.png")] bg-no-repeat bg-[top_1.111vw_left_50%] bg-[length:8.125vw]',
'relative w-full h-[8.056vw] aspect-[300/116] bg-[#F6F6F6] rounded-[1.667vw] bg-[url("/images/Table.png")] bg-no-repeat bg-[top_1.111vw_left_50%] bg-[length:8.125vw]',
server.status === "offline" && "opacity-40"
)}
>
@@ -53,7 +53,7 @@ export default function DesktopCard({ server }: IDesktopCardProps) {
</div>
<div className="flex gap-[0.278vw] justify-center -mt-[0.278vw]">
{server.sessions?.[0]?.status === "starting" ? (
<div className="flex items-center gap-[0.278vw] bg-[#F8F7FE] p-[0.833vw] rounded-xl">
<div className="flex items-center gap-[0.278vw] bg-[#F8F7FE] p-[0.833vw] rounded-[0.833vw]">
<span className="size-[1.111vw] animate-spin text-[#7B60F3]">
<SpinIcon />
</span>
src/components/SessionCommentItem.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { format } from "date-fns";
function SessionCommentItem({ comment }: { comment: Comment }) {
return (
<motion.div layout className="flex gap-[0.833vw] items-end">
<div className="relative flex flex-col gap-[0.556vw] p-[0.833vw] bg-white rounded-xl w-full rounded-br-none">
<div className="relative flex flex-col gap-[0.556vw] p-[0.833vw] bg-white rounded-[0.833vw] w-full rounded-br-none">
<p className="button-m font-medium">{comment.owner.fullname}</p>
<div className="flex flex-col max-w-[19.583vw]">
<p className="caption-s break-words whitespace-pre-wrap overflow-hidden">
src/components/modals/CurrentSessionModal.tsx
+3 -3
View File
@@ -40,13 +40,13 @@ function CurrentSessionModal({ session }: { session: Session }) {
if (!session) return null;
return (
<div className="w-[25vw] bg-[#FFFFFF] rounded-4xl px-[1.389vw] pb-[1.389vw]">
<div className="w-[25vw] bg-[#FFFFFF] rounded-[2.222vw] px-[1.389vw] pb-[1.389vw]">
<h2 className="title-s font-medium text-center py-[1.806vw]">
Текущий сеанс
</h2>
<div className="flex flex-col gap-[1.667vw]">
<div className="py-[1.389vw] flex gap-[0.833vw] border border-b-[#F6F6F6] border-t-0 border-r-0 border-l-0">
<div className='size-[4.444vw] bg-[#F6F6F6] rounded-xl bg-[url("/images/super-table.png")] bg-no-repeat bg-[length:2.222vw] bg-center'></div>
<div className='size-[4.444vw] bg-[#F6F6F6] rounded-[0.833vw] bg-[url("/images/super-table.png")] bg-no-repeat bg-[length:2.222vw] bg-center'></div>
<div className="flex flex-col gap-[0.278vw] self-center ">
<div className="flex gap-[0.278vw]">
<p className="title-s font-medium">{session.server.name}</p>
@@ -86,7 +86,7 @@ function CurrentSessionModal({ session }: { session: Session }) {
<NewButton variant="secondary" className="w-full">
<div className="flex flex-col gap-[0.278vw] w-full text-left h-[2.222vw]">
<p className="caption-s font-medium text-[#BDBDBD]">Клиент</p>
<p className="text-s font-medium">{session.client.fullname}</p>
<p className="text-s font-medium">{session.client.name}</p>
</div>
<div className="flex gap-[0.556vw] items-center">
{!session.client.email && (
src/components/modals/EditTableModal.tsx
+2 -2
View File
@@ -29,10 +29,10 @@ function EditTable({ table }: { table: Server }) {
});
return (
<div className="bg-[#F0F0F0] rounded-4xl w-[25vw] flex flex-col justify-center items-center">
<div className="bg-[#F0F0F0] rounded-[2.222vw] w-[25vw] flex flex-col justify-center items-center">
<h3 className="title-s font-medium py-[1.806vw]">Редактирование стола</h3>
<div className="bg-[url(/images/Table.png)] bg-no-repeat bg-contain bg-center w-full h-[6.944vw]"></div>
<div className="bg-[#FFFFFF] w-full rounded-4xl p-[1.389vw] flex flex-col gap-[0.833vw]">
<div className="bg-[#FFFFFF] w-full rounded-[2.222vw] p-[1.389vw] flex flex-col gap-[0.833vw]">
<div className="space-y-[0.556vw]">
<NewInput
placeholder="Название стола*"
src/components/modals/EndSessionModal.tsx
+2 -2
View File
@@ -1,13 +1,13 @@
import { useMutation } from "@tanstack/react-query";
import { useQueryClient } from "@tanstack/react-query";
import useModalStore from "../../stores/useModalStore";
import { ISession } from "../../types/ISession";
import { Session } from "../../types/ISession";
import NewButton from "../NewButton";
import CurrentSessionModal from "./CurrentSessionModal";
import api from "../../utils/api";
import SpinIcon from "../icons/SpinIcon";
function EndSessionModal({ session }: { session: ISession }) {
function EndSessionModal({ session }: { session: Session }) {
const queryClient = useQueryClient();
const { setModal } = useModalStore();
src/components/modals/SessionModal.tsx
+6 -6
View File
@@ -13,14 +13,14 @@ import SessionComments from "../SessionComments";
function SessionModal({ session }: { session: Session }) {
return (
<div className="bg-[#FFFFFF] w-[49.722vw] rounded-4xl">
<div className="bg-[#FFFFFF] w-[49.722vw] rounded-[2.222vw]">
<div className="w-full flex justify-center items-center h-[4.861vw]">
<div className="title-s flex font-medium">
<p>{format(session.createdAt, "dd MMMM yyyy", { locale: ru })}</p>
<p>,&nbsp;{format(session.createdAt, "HH:mm")}</p>
</div>
</div>
<div className="bg-[#F0F0F0] flex h-[calc(100vh-8.861vw)] overflow-hidden rounded-b-4xl">
<div className="bg-[#F0F0F0] flex h-[calc(100vh-8.861vw)] overflow-hidden rounded-b-[2.222vw]">
<div className="flex-1 flex flex-col gap-[0.833vw] px-[1.111vw] overflow-y-auto pr-[0.556vw] pb-[1.111vw] [scrollbar-width:thin]">
<div className="flex flex-col gap-[0.556vw] justify-center items-center pt-[1.111vw]">
<div className="size-[3.333vw] rounded-full bg-white"></div>
@@ -32,7 +32,7 @@ function SessionModal({ session }: { session: Session }) {
</p>
</div>
</div>
<div className="flex flex-col gap-[1.111vw] bg-white rounded-3xl p-[1.111vw]">
<div className="flex flex-col gap-[1.111vw] bg-white rounded-[1.667vw] p-[1.111vw]">
<h3 className="title-s font-medium">Информация о сеансе</h3>
<div className="flex flex-col gap-[0.556vw]">
<p className="flex gap-[0.556vw]">
@@ -68,7 +68,7 @@ function SessionModal({ session }: { session: Session }) {
</div>
<ClientCard client={session.client} />
</div>
<div className="flex flex-col gap-[1.111vw] bg-white rounded-3xl p-[1.111vw]">
<div className="flex flex-col gap-[1.111vw] bg-white rounded-[1.667vw] p-[1.111vw]">
<h3 className="title-s flex font-medium">
Речевая&nbsp;
<span className="text-[#7B60F3] flex">
@@ -94,7 +94,7 @@ function SessionModal({ session }: { session: Session }) {
<span className="caption-s font-medium">8 500 000 ₽</span>
</p>
</div>
<div className="bg-[#F6F6F6] rounded-xl px-[1.111vw] py-[0.833vw] text-xs tracking-[-0.02em] leading-[110%]">
<div className="bg-[#F6F6F6] rounded-[0.833vw] px-[1.111vw] py-[0.833vw] text-xs tracking-[-0.02em] leading-[110%]">
Клиент проявил высокий интерес к объекту, особенно к варианту с
улучшенной отделкой. Основной вопрос для принятия решения —
согласование с семьей и выбор этажа. Необходимо подготовить
@@ -107,7 +107,7 @@ function SessionModal({ session }: { session: Session }) {
</span>
</NewButton>
</div>
<div className="flex flex-col gap-[1.111vw] bg-white rounded-3xl p-[1.111vw]">
<div className="flex flex-col gap-[1.111vw] bg-white rounded-[1.667vw] p-[1.111vw]">
<h3 className="title-s flex items-center font-medium gap-[0.556vw]">
<span>Документы по сеансу</span> <Badge count={4} />
</h3>