feat: DesktopCard and clean up DashboardPage layout

src/components/DesktopCard.tsx

@@ -1,12 +1,13 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import Button from "./Button";
-import MoreIcon from "./icons/MoreIcon";
 import api from "../utils/api";
-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";
+import NewButton from "./NewButton";
+import FlashIcon from "./icons/FlashIcon";
+import CogIcon from "./icons/CogIcon";
+import ChevronLeftIcon from "./icons/ChevronLeftIcon";
+import PlusIcon from "./icons/PlusIcon";
 
 interface IDesktopCardProps {
   server: IServer;
@@ -46,84 +47,55 @@ export default function DesktopCard({ server }: IDesktopCardProps) {
   return (
     <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>
+        <NewButton
+          variant='secondary'
+          size='medium'
+          className='absolute top-[0.347vw] right-[0.347vw] cursor-pointer flex items-center justify-center'
+        >
+          <span className='text-[#7D7D7D] w-[0.972vw] h-[0.972vw]'>
+            <CogIcon />
+          </span>
+        </NewButton>
       </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='leading-none font-[500] text-[1.111vw] title-s'>
+            {server.name}
+          </p>
           <p className='caption-s text-[#7D7D7D]'>{server.location}</p>
         </div>
-        {/* <Button
-          onlyIcon
-          size='small'
-          className='rounded-[0.278vw] bg-[#F5F5F5]'
-        >
-          <div className='min-w-[0.833vw] min-h-[0.833vw] text-black'>
-            <MoreIcon />
-          </div>
-        </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'>
-            {server.sessions?.[0]?.status === "started" && (
-              <div className='rounded-full w-[0.278vw] h-[0.278vw] bg-[#108C33]' />
-            )}
-            <p className='font-medium leading-none text-[#108C33] text-[0.556vw]'>
-              {server.sessions?.[0]?.status === "started"
-                ? "Сеанс запущен"
-                : "Свободен"}
-            </p>
-          </div> */}
-          {server.sessions?.[0]?.status === "started" && (
-            <>
-              <p className='leading-none'>
-                {server.sessions?.[0]?.client?.fullname}
-              </p>
-              <p className='opacity-40 leading-none'>
-                {server.sessions?.[0]?.app?.name}
-              </p>
-            </>
-          )}
-        </div>
-        {/* <p className='opacity-40'>0 мин</p> */}
-      </div>
-      <div className='flex gap-[0.278vw]'>
+      <div className='flex gap-[0.278vw] justify-center -mt-[0.278vw]'>
         {server.sessions?.[0]?.status === "started" ? (
           <div className='flex items-center gap-[0.278vw]'>
-            {/* <Button
-              variant="secondary"
-              className="py-[0.694vw] border rounded-lg border-[#2D68F6] w-full"
-            >
-              <p className="text-center leading-none font-medium text-[#2D68F6]">
-                Подробнее о сеансе
-              </p>
-            </Button> */}
-            <Button
-              variant='secondary'
-              className='py-[0.694vw] border rounded-lg border-[#DC0404] w-full'
+            <NewButton
+              variant='primary'
               onClick={() => endSession()}
+              className='flex gap-[0.556vw] items-center'
             >
-              <p className='text-center leading-none font-medium text-[#DC0404]'>
-                Завершить сеанс
-              </p>
-            </Button>
+              <span className='w-[0.972vw] h-[0.972vw] flex items-center justify-center'>
+                <FlashIcon />
+              </span>
+              <p className='button-s font-medium'>Идёт сеанс</p>
+              <span className='w-[0.972vw] h-[0.972vw] flex items-center justify-center'>
+                <ChevronLeftIcon />
+              </span>
+            </NewButton>
           </div>
         ) : (
-          <Button
-            variant='primary'
-            className='bg-[#798FFF] w-full rounded-[0.556vw]'
+          <NewButton
+            variant='cta'
+            size='medium'
+            className='self-center'
             onClick={handleClickCreateSession}
           >
-            <div className='flex gap-1 items-center'>
-              <span className='w-[1.389vw] h-[1.389vw]'>
+            <div className='flex gap-[0.556vw] items-center justify-center'>
+              <span className='w-[0.972vw] h-[0.972vw] flex items-center justify-center'>
                 <PlusIcon />
               </span>
-              <p className='font-medium leading-[115%]'>Создать сеанс</p>
+              <p className='button-s'>Создать сеанс</p>
             </div>
-          </Button>
+          </NewButton>
         )}
       </div>
     </div>