add fonts, table image, setting icon

src/components/DesktopCard.tsx

@@ -6,6 +6,7 @@ import PlusIcon from "./icons/PlusIcon";
 import { IServer } from "../types/IServer";
 import useModalStore from "../stores/useModalStore";
 import CreateSessionModal from "./modals/CreateSessionModal";
+import SettingIcon from "./icons/SettingIcon";
 
 interface IDesktopCardProps {
   server: IServer;
@@ -43,52 +44,55 @@ export default function DesktopCard({ server }: IDesktopCardProps) {
   }
 
   return (
-    <div className="p-[1.111vw] rounded-[0.833vw] flex flex-col justify-between gap-[1.111vw] aspect-[272/149] w-[25.208vw] border border-[#00000014]">
-      <div className="flex justify-between items-start">
-        <div className="space-y-[0.278vw]">
-          <p className="leading-none text-[1.111vw]">{server.name}</p>
-          <p className="opacity-50 leading-none text-[0.694vw]">
-            {server.location}
-          </p>
+    <div className='flex flex-col gap-[0.833vw] aspect-[300/211] w-[20.833vw] h-[14.653vw]'>
+      <div className='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]'>
+        <span className='absolute top-[1.111vw] right-[1.111vw] w-[0.972vw] h-[0.972vw] cursor-pointer text-[#7D7D7D]'>
+          <SettingIcon />
+        </span>
+      </div>
+      <div className='flex self-center justify-between items-start'>
+        <div className='space-y-[0.278vw] text-center'>
+          <p className='leading-none text-[1.111vw] title-s'>{server.name}</p>
+          <p className='caption-s text-[#7D7D7D]'>{server.location}</p>
         </div>
-        <Button
+        {/* <Button
           onlyIcon
-          size="small"
-          className="rounded-[0.278vw] bg-[#F5F5F5]"
+          size='small'
+          className='rounded-[0.278vw] bg-[#F5F5F5]'
         >
-          <div className="min-w-[0.833vw] min-h-[0.833vw] text-black">
+          <div className='min-w-[0.833vw] min-h-[0.833vw] text-black'>
             <MoreIcon />
           </div>
-        </Button>
+        </Button> */}
       </div>
-      <div className="flex justify-between items-center">
-        <div className="space-y-[0.556vw]">
-          <div className="px-[0.556vw] py-[0.278vw] flex gap-[0.278vw] items-center bg-[#108C330D] rounded-[0.278vw] w-fit">
+      <div className='flex justify-between items-center'>
+        <div className='space-y-[0.556vw]'>
+          {/* <div className='px-[0.556vw] py-[0.278vw] flex gap-[0.278vw] items-center bg-[#108C330D] rounded-[0.278vw] w-fit'>
             {server.sessions?.[0]?.status === "started" && (
-              <div className="rounded-full w-[0.278vw] h-[0.278vw] bg-[#108C33]" />
+              <div className='rounded-full w-[0.278vw] h-[0.278vw] bg-[#108C33]' />
             )}
-            <p className="font-medium leading-none text-[#108C33] text-[0.556vw]">
+            <p className='font-medium leading-none text-[#108C33] text-[0.556vw]'>
               {server.sessions?.[0]?.status === "started"
                 ? "Сеанс запущен"
                 : "Свободен"}
             </p>
-          </div>
+          </div> */}
           {server.sessions?.[0]?.status === "started" && (
             <>
-              <p className="leading-none">
+              <p className='leading-none'>
                 {server.sessions?.[0]?.client?.fullname}
               </p>
-              <p className="opacity-40 leading-none">
+              <p className='opacity-40 leading-none'>
                 {server.sessions?.[0]?.app?.name}
               </p>
             </>
           )}
         </div>
-        <p className="opacity-40">0 мин</p>
+        {/* <p className='opacity-40'>0 мин</p> */}
       </div>
-      <div className="flex gap-[0.278vw]">
+      <div className='flex gap-[0.278vw]'>
         {server.sessions?.[0]?.status === "started" ? (
-          <div className="flex items-center gap-[0.278vw]">
+          <div className='flex items-center gap-[0.278vw]'>
             {/* <Button
               variant="secondary"
               className="py-[0.694vw] border rounded-lg border-[#2D68F6] w-full"
@@ -98,26 +102,26 @@ export default function DesktopCard({ server }: IDesktopCardProps) {
               </p>
             </Button> */}
             <Button
-              variant="secondary"
-              className="py-[0.694vw] border rounded-lg border-[#DC0404] w-full"
+              variant='secondary'
+              className='py-[0.694vw] border rounded-lg border-[#DC0404] w-full'
               onClick={() => endSession()}
             >
-              <p className="text-center leading-none font-medium text-[#DC0404]">
+              <p className='text-center leading-none font-medium text-[#DC0404]'>
                 Завершить сеанс
               </p>
             </Button>
           </div>
         ) : (
           <Button
-            variant="primary"
-            className="bg-[#798FFF] w-full rounded-[0.556vw]"
+            variant='primary'
+            className='bg-[#798FFF] w-full rounded-[0.556vw]'
             onClick={handleClickCreateSession}
           >
-            <div className="flex gap-1 items-center">
-              <span className="w-[1.389vw] h-[1.389vw]">
+            <div className='flex gap-1 items-center'>
+              <span className='w-[1.389vw] h-[1.389vw]'>
                 <PlusIcon />
               </span>
-              <p className="font-medium leading-[115%]">Начать сеанс</p>
+              <p className='font-medium leading-[115%]'>Создать сеанс</p>
             </div>
           </Button>
         )}