replace new button

src/components/Button.tsx

@@ -1,40 +1,49 @@
-import React from 'react';
-import { clsx as cn } from 'clsx';
+import clsx from "clsx";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
-  variant?: 'link' | 'primary' | 'secondary' | 'tertiary';
+  variant: "critical" | "secondary" | "primary" | "cta" | "menu";
   className?: string;
-  size?: 'small' | 'medium' | 'large';
-  onlyIcon?: boolean;
+  size?: "small" | "medium" | "large";
   ref?: React.RefObject<HTMLButtonElement | null>;
 }
 
 function Button({
   children,
-  variant = 'primary',
-  size = 'medium',
-  onlyIcon,
+  variant = "primary",
+  size = "medium",
   className,
   ref,
+  type,
+  onClick,
   ...props
 }: ButtonProps) {
   return (
     <button
       ref={ref}
       {...props}
-      className={cn(
-        'transition-all rounded-lg flex items-center justify-center',
-        variant !== 'link' && [
-          size === 'small' && (onlyIcon ? 'p-2' : 'px-3 py-2 gap-2'),
-          size === 'medium' && (onlyIcon ? 'p-3.5' : 'px-5 py-3.5 gap-3.5'),
-          size === 'large' && (onlyIcon ? 'p-4' : 'px-6 py-4 gap-4'),
-        ],
-        variant === 'link' && 'text-sm text-black/50 w-fit',
-        variant === 'primary' && 'bg-[#1E1E1E] text-white',
-        variant === 'secondary' && 'bg-white',
-        variant === 'tertiary' &&
-          'bg-transparent text-[#767676] hover:bg-black/5',
+      onClick={(e) => {
+        if (type !== "submit") e.preventDefault();
+        onClick?.(e);
+      }}
+      className={clsx(
+        "transition-all flex 2xl:gap-[0.556vw] gap-2 items-center justify-center font-medium disabled:bg-[#F6F6F6] disabled:text-[#D6D6D6]",
+        variant === "critical" &&
+          "text-[#FF4517] bg-[#FEF3F2] hover:bg-[#FEE4E2]",
+        variant === "secondary" &&
+          "bg-[#F6F6F6] hover:bg-[#F0F0F0] active:text-[#7D7D7D] active:bg-[#F6F6F6]",
+        variant === "primary" &&
+          "bg-[#F8F7FE] text-[#7B60F3] hover:bg-[#E1DEFC] active:bg-[#F8F7FE]",
+        variant === "cta" &&
+          "bg-[#7B60F3] text-white hover:bg-[#9184F6] active:bg-[#B3AAF9]",
+        variant === "menu" &&
+          "text-[#7D7D7D] hover:bg-[#F0F0F0] active:bg-[#F8F7FE] active:text-[#7B60F3] disabled:text-[#D6D6D6] disabled:bg-[#F6F6F6]",
+        size === "large" &&
+          "2xl:p-[1.111vw] p-4 button-m 2xl:rounded-[0.833vw] rounded-xl",
+        size === "medium" &&
+          "2xl:p-[0.833vw] p-3 button-s 2xl:rounded-[0.833vw] rounded-xl",
+        size === "small" &&
+          "2xl:p-[0.556vw] p-2 text-[10px] 2xl:rounded-[0.556vw] rounded-lg",
         className
       )}
     >

src/components/ClientCard.tsx

@@ -1,11 +1,11 @@
 import { Client } from "../types/IClient";
 import ChevronRightIcon from "./icons/ChevronRightIcon";
-import NewButton from "./NewButton";
+import Button from "./Button";
 
 function ClientCard({ client }: { client: Client }) {
   return (
     <>
-      <NewButton variant="secondary" className="w-full">
+      <Button 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.name}</p>
@@ -20,7 +20,7 @@ function ClientCard({ client }: { client: Client }) {
             <ChevronRightIcon />
           </span>
         </div>
-      </NewButton>
+      </Button>
     </>
   );
 }

src/components/CurrentSessionCard.tsx

@@ -1,6 +1,6 @@
 import FlashIcon from "./icons/FlashIcon";
 import { Session } from "../types/ISession";
-import NewButton from "./NewButton";
+import Button from "./Button";
 import ChevronRightIcon from "./icons/ChevronRightIcon";
 import { motion } from "motion/react";
 import CurrentSessionModal from "./modals/CurrentSessionModal";
@@ -71,12 +71,12 @@ function CurrentSessionCard({
           <ChevronRightIcon />
         </span>
       </div>
-      <NewButton
+      <Button
         variant="critical"
         onClick={() => setModal(<EndSessionModal session={session} />)}
       >
         Завершить сеанс
-      </NewButton>
+      </Button>
     </motion.div>
   );
 }

src/components/DesktopCard.tsx

@@ -1,7 +1,7 @@
 import { Server } from "../types/IServer";
 import useModalStore from "../stores/useModalStore";
 import CreateSessionModal from "./modals/CreateSessionModal";
-import NewButton from "./NewButton";
+import Button from "./Button";
 import FlashIcon from "./icons/FlashIcon";
 import CogIcon from "./icons/CogIcon";
 import PlusIcon from "./icons/PlusIcon";
@@ -32,7 +32,7 @@ export default function DesktopCard({ server }: IDesktopCardProps) {
           server.status === "offline" && "opacity-40"
         )}
       >
-        <NewButton
+        <Button
           variant="secondary"
           size="medium"
           className="absolute top-[0.347vw] right-[0.347vw] cursor-pointer flex items-center justify-center"
@@ -41,7 +41,7 @@ export default function DesktopCard({ server }: IDesktopCardProps) {
           <span className="text-[#7D7D7D] w-[0.972vw] h-[0.972vw]">
             <CogIcon />
           </span>
-        </NewButton>
+        </Button>
       </div>
       <div className="flex self-center justify-between items-start">
         <div className="space-y-[0.278vw] text-center">
@@ -63,7 +63,7 @@ export default function DesktopCard({ server }: IDesktopCardProps) {
           </div>
         ) : server.sessions?.[0]?.status === "started" ? (
           <div className="flex items-center gap-[0.278vw]">
-            <NewButton
+            <Button
               variant="primary"
               onClick={() => {
                 if (server.sessions?.length && server.sessions?.[0]) {
@@ -81,17 +81,17 @@ export default function DesktopCard({ server }: IDesktopCardProps) {
               <span className="w-[0.972vw] h-[0.972vw] flex items-center justify-center">
                 <ChevronRightIcon />
               </span>
-            </NewButton>
+            </Button>
           </div>
         ) : server.status === "offline" ? (
-          <NewButton variant="critical" className="hover:bg-[#FEF3F2]">
+          <Button variant="critical" className="hover:bg-[#FEF3F2]">
             <span className="text-[#FF4517] size-[0.972vw]">
               <UnlinkIcon />
             </span>
             <span>Проверьте соединение</span>
-          </NewButton>
+          </Button>
         ) : (
-          <NewButton
+          <Button
             variant="cta"
             size="medium"
             className="self-center"
@@ -103,7 +103,7 @@ export default function DesktopCard({ server }: IDesktopCardProps) {
               </span>
               <p className="button-s">Создать сеанс</p>
             </div>
-          </NewButton>
+          </Button>
         )}
       </div>
     </div>

src/components/DesktopSelect.tsx

@@ -1,88 +0,0 @@
-import { useState } from "react";
-import { Server } from "../types/IServer";
-import Button from "./Button";
-import { useClickAway } from "@uidotdev/usehooks";
-import ArrowDownIcon from "./icons/ArrowDownIcon";
-
-interface Props {
-  servers: Server[] | undefined;
-  value: Server | undefined;
-  onChange: (server: Server) => void;
-}
-
-export default function DesktopSelect({ servers, value, onChange }: Props) {
-  const [isOpen, setIsOpen] = useState(false);
-  const ref = useClickAway<HTMLDivElement>(() => setIsOpen(false));
-
-  return (
-    <div
-      ref={ref}
-      className="relative outline-black/10 outline w-[13.889vw] rounded-[0.556vw]"
-    >
-      <Button
-        onlyIcon
-        variant="tertiary"
-        className="px-[0.833vw] py-[0.417vw] !justify-between w-full"
-        onClick={() => setIsOpen((prev) => !prev)}
-      >
-        <div className="flex gap-[0.278vw] items-center">
-          {value?.name && (
-            <div
-              className="rounded-full w-[0.417vw] aspect-square"
-              style={{
-                backgroundColor:
-                  value?.sessions &&
-                  value.sessions?.length > 0 &&
-                  value.sessions[value.sessions.length - 1].status === "started"
-                    ? "#EF3C26"
-                    : "#108C33",
-              }}
-            />
-          )}
-          <p className="text-[0.972vw] leading-[115%]">
-            {value?.name || "Выберите из списка"}
-          </p>
-        </div>
-        <div
-          className={`w-[1.389vw] transition-transform h-[1.389vw]${
-            isOpen ? " rotate-180" : ""
-          }`}
-        >
-          <ArrowDownIcon />
-        </div>
-      </Button>
-      {isOpen && (
-        <div className="absolute z-1 top-full w-full bg-white rounded-[0.556vw] outline outline-black/10">
-          {servers?.map((server) => (
-            <Button
-              key={server.id}
-              onlyIcon
-              variant="tertiary"
-              className="px-[0.833vw] py-[0.417vw] !justify-start w-full !first:rounded-t-[0.556vw] !last:rounded-b-[0.556vw]"
-              onClick={() => {
-                onChange(server);
-                setIsOpen(false);
-              }}
-            >
-              <div className="flex gap-[0.278vw] items-center">
-                <div
-                  className="rounded-full w-[0.417vw] aspect-square"
-                  style={{
-                    backgroundColor:
-                      server.sessions &&
-                      server.sessions?.length > 0 &&
-                      server.sessions[server.sessions.length - 1].status ===
-                        "started"
-                        ? "#EF3C26"
-                        : "#108C33",
-                  }}
-                />
-                <p className="text-[0.972vw] leading-[115%]">{server.name}</p>
-              </div>
-            </Button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

src/components/Layout.tsx

@@ -5,7 +5,7 @@ import api from "../utils/api";
 import CurrentSessionCard from "./CurrentSessionCard";
 import { Session } from "../types/ISession";
 import { AnimatePresence } from "motion/react";
-import NewButton from "./NewButton";
+import Button from "./Button";
 import PlusIcon from "./icons/PlusIcon";
 import useModalStore from "../stores/useModalStore";
 import CreateSessionModal from "./modals/CreateSessionModal";
@@ -41,7 +41,7 @@ function Layout() {
             />
           ))}
         </AnimatePresence>
-        <NewButton
+        <Button
           variant="cta"
           className="w-[18.889vw]"
           onClick={() => {
@@ -53,7 +53,7 @@ function Layout() {
             <PlusIcon />
           </span>
           Создать сеанс
-        </NewButton>
+        </Button>
       </div>
     </div>
   );

src/components/ModalContainer.tsx

@@ -4,7 +4,7 @@ import useModalStore from "../stores/useModalStore";
 import { AnimatePresence, motion } from "motion/react";
 import CloseIcon from "./icons/CloseIcon";
 import { clsx as cn } from "clsx";
-import NewButton from "./NewButton";
+import Button from "./Button";
 
 function ModalContainer() {
   const { modal, setModal, position } = useModalStore();
@@ -78,7 +78,7 @@ function ModalContainer() {
                   // }}
                 >
                   {modal}
-                  <NewButton
+                  <Button
                     size="small"
                     variant="secondary"
                     className="absolute top-[1.389vw] right-[1.389vw] p-[0.556vw]"
@@ -87,7 +87,7 @@ function ModalContainer() {
                     <span className="w-[0.972vw] h-[0.972vw] text-[#7D7D7D]">
                       <CloseIcon />
                     </span>
-                  </NewButton>
+                  </Button>
                 </div>
               </div>
             </div>

src/components/Navbar.tsx

@@ -1,7 +1,7 @@
 import { Link, useLocation } from "react-router";
 import HomeIcon from "./icons/HomeIcon";
 import DesktopIcon from "./icons/DesktopIcon";
-import NewButton from "./NewButton";
+import Button from "./Button";
 import clsx from "clsx";
 import PeopleIcon from "./icons/PeopleIcon";
 import ClientIcon from "./icons/ClientIcon";
@@ -13,7 +13,7 @@ function Navbar() {
   return (
     <div className="flex 2xl:gap-[0.278vw] items-center">
       <Link to="/">
-        <NewButton
+        <Button
           variant="menu"
           size="large"
           className={clsx(
@@ -27,10 +27,10 @@ function Navbar() {
           <span className="2xl:text-[0.972vw] text-sm font-medium">
             Главная
           </span>
-        </NewButton>
+        </Button>
       </Link>
       <Link to="/sessions">
-        <NewButton
+        <Button
           variant="menu"
           size="large"
           className={clsx(
@@ -42,10 +42,10 @@ function Navbar() {
             <DesktopIcon />
           </span>
           <span className="2xl:text-[0.972vw] text-sm font-medium">Сеансы</span>
-        </NewButton>
+        </Button>
       </Link>
       <Link to="/">
-        <NewButton
+        <Button
           variant="menu"
           size="large"
           className={clsx(
@@ -59,10 +59,10 @@ function Navbar() {
           <span className="2xl:text-[0.972vw] text-sm font-medium">
             Менеджеры
           </span>
-        </NewButton>
+        </Button>
       </Link>
       <Link to="/">
-        <NewButton
+        <Button
           variant="menu"
           size="large"
           className={clsx(
@@ -76,10 +76,10 @@ function Navbar() {
           <span className="2xl:text-[0.972vw] text-sm font-medium">
             Клиенты
           </span>
-        </NewButton>
+        </Button>
       </Link>
       <Link to="/">
-        <NewButton
+        <Button
           variant="menu"
           size="large"
           className={clsx(
@@ -93,7 +93,7 @@ function Navbar() {
           <span className="2xl:text-[0.972vw] text-sm font-medium">
             Проекты
           </span>
-        </NewButton>
+        </Button>
       </Link>
     </div>
   );

src/components/NewButton.tsx

@@ -1,55 +0,0 @@
-import clsx from "clsx";
-
-interface NewButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  children: React.ReactNode;
-  variant: "critical" | "secondary" | "primary" | "cta" | "menu";
-  className?: string;
-  size?: "small" | "medium" | "large";
-  ref?: React.RefObject<HTMLButtonElement | null>;
-}
-
-function NewButton({
-  children,
-  variant = "primary",
-  size = "medium",
-  className,
-  ref,
-  type,
-  onClick,
-  ...props
-}: NewButtonProps) {
-  return (
-    <button
-      ref={ref}
-      {...props}
-      onClick={(e) => {
-        if (type !== "submit") e.preventDefault();
-        onClick?.(e);
-      }}
-      className={clsx(
-        "transition-all flex 2xl:gap-[0.556vw] gap-2 items-center justify-center font-medium disabled:bg-[#F6F6F6] disabled:text-[#D6D6D6]",
-        variant === "critical" &&
-          "text-[#FF4517] bg-[#FEF3F2] hover:bg-[#FEE4E2]",
-        variant === "secondary" &&
-          "bg-[#F6F6F6] hover:bg-[#F0F0F0] active:text-[#7D7D7D] active:bg-[#F6F6F6]",
-        variant === "primary" &&
-          "bg-[#F8F7FE] text-[#7B60F3] hover:bg-[#E1DEFC] active:bg-[#F8F7FE]",
-        variant === "cta" &&
-          "bg-[#7B60F3] text-white hover:bg-[#9184F6] active:bg-[#B3AAF9]",
-        variant === "menu" &&
-          "text-[#7D7D7D] hover:bg-[#F0F0F0] active:bg-[#F8F7FE] active:text-[#7B60F3] disabled:text-[#D6D6D6] disabled:bg-[#F6F6F6]",
-        size === "large" &&
-          "2xl:p-[1.111vw] p-4 button-m 2xl:rounded-[0.833vw] rounded-xl",
-        size === "medium" &&
-          "2xl:p-[0.833vw] p-3 button-s 2xl:rounded-[0.833vw] rounded-xl",
-        size === "small" &&
-          "2xl:p-[0.556vw] p-2 text-[10px] 2xl:rounded-[0.556vw] rounded-lg",
-        className
-      )}
-    >
-      {children}
-    </button>
-  );
-}
-
-export default NewButton;

src/components/NewSelect.tsx

@@ -0,0 +1,5 @@
+function NewSelect() {
+  return <div className="p-[1.111vw] w-[19.583vw]"></div>;
+}
+
+export default NewSelect;

src/components/ProjectSelector.tsx

@@ -3,7 +3,7 @@ import { IApp } from "../types/IApp";
 import ChevronLeftIcon from "./icons/ChevronLeftIcon";
 import CloseIcon from "./icons/CloseIcon";
 import LightningIcon from "./icons/LightningIcon";
-import NewButton from "./NewButton";
+import Button from "./Button";
 import CheckIcon from "./icons/CheckIcon";
 import ChevronDownIcon from "./icons/ChevronDownIcon";
 
@@ -51,13 +51,13 @@ function ProjectSelector({
       {isOpen && (
         <div className="fixed z-1 top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 rounded-[2.222vw] bg-white p-[1.389vw] flex flex-col gap-[2.778vw] w-[25vw]">
           <div className="flex justify-between items-center">
-            <NewButton variant="secondary" size="small">
+            <Button variant="secondary" size="small">
               <div className="text-[#7D7D7D] size-[0.972vw]">
                 <ChevronLeftIcon />
               </div>
-            </NewButton>
+            </Button>
             <p className="title-s font-medium">Смена проекта</p>
-            <NewButton
+            <Button
               variant="secondary"
               size="small"
               onClick={(e) => {
@@ -68,7 +68,7 @@ function ProjectSelector({
               <span className="text-[#7D7D7D] size-[0.972vw]">
                 <CloseIcon />
               </span>
-            </NewButton>
+            </Button>
           </div>
           <div className="flex flex-col gap-[1.667vw]">
             <div className="flex flex-col">
@@ -115,7 +115,7 @@ function ProjectSelector({
               ))}
             </div>
             <div className="flex flex-col gap-y-[0.556vw]">
-              <NewButton
+              <Button
                 variant="cta"
                 size="large"
                 onClick={() => {
@@ -124,8 +124,8 @@ function ProjectSelector({
                 }}
               >
                 Переключиться
-              </NewButton>
-              <NewButton
+              </Button>
+              <Button
                 variant="primary"
                 size="large"
                 onClick={() => {
@@ -133,7 +133,7 @@ function ProjectSelector({
                 }}
               >
                 Отменить
-              </NewButton>
+              </Button>
             </div>
           </div>
         </div>

src/components/Select.tsx

@@ -2,7 +2,7 @@
 import { useEffect, useState } from "react";
 import { useClickAway } from "@uidotdev/usehooks";
 import ArrowDownIcon from "./icons/ArrowDownIcon";
-import NewButton from "./NewButton";
+import Button from "./Button";
 
 interface Props {
   options: string[]; // ["StroyProject"]
@@ -29,9 +29,9 @@ export default function Select({ options, onChange }: Props) {
   return (
     <div
       ref={ref}
-      className="relative outline-black/10 outline w-[13.889vw] rounded-[0.556vw]"
+      className="relative outline-black/10 outline w-[13.889vw] rounded-[0.833vw]"
     >
-      <NewButton
+      <Button
         variant="secondary"
         className="px-[0.833vw] py-[0.417vw] !justify-between w-full"
         onClick={(e) => {
@@ -49,11 +49,11 @@ export default function Select({ options, onChange }: Props) {
         >
           <ArrowDownIcon />
         </div>
-      </NewButton>
+      </Button>
       {isOpen && (
-        <div className="absolute top-full w-full bg-white rounded-[0.556vw] outline outline-black/10 z-1">
+        <div className="absolute top-full w-full rounded-[0.833vw] outline outline-black/10 z-1">
           {options.map((option) => (
-            <NewButton
+            <Button
               key={option}
               variant="secondary"
               className="px-[0.833vw] py-[0.417vw] !justify-start w-full !first:rounded-t-[0.556vw] !last:rounded-b-[0.556vw]"
@@ -62,7 +62,7 @@ export default function Select({ options, onChange }: Props) {
               <div className="flex gap-[0.278vw] items-center">
                 <p className="text-[0.972vw] leading-[115%]">{option}</p>
               </div>
-            </NewButton>
+            </Button>
           ))}
         </div>
       )}

src/components/SessionComments.tsx

@@ -1,6 +1,6 @@
 import { useRef } from "react";
 import SendIcon from "./icons/SendIcon";
-import NewButton from "./NewButton";
+import Button from "./Button";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import api from "../utils/api";
 import { Comment } from "../types/IComments";
@@ -129,11 +129,11 @@ function SessionComments({ sessionId }: { sessionId: string }) {
           onInput={handleTextareaInput}
           onKeyDown={handleKeyDown}
         />
-        <NewButton variant="cta" size="large" type="submit">
+        <Button variant="cta" size="large" type="submit">
           <span className="w-[1.111vw] h-[1.111vw] text-white">
             <SendIcon />
           </span>
-        </NewButton>
+        </Button>
       </form>
     </div>
   );

src/components/modals/CreateSessionModal.tsx

@@ -8,7 +8,7 @@ import useModalStore from "../../stores/useModalStore.ts";
 import TableSelector from "../TableSelector.tsx";
 import NewInput from "../NewInput.tsx";
 import StartSessionIcon from "../icons/StartSessionIcon.tsx";
-import NewButton from "../NewButton.tsx";
+import Button from "../Button.tsx";
 import ProjectSelector from "../ProjectSelector.tsx";
 import { useQueryClient, useMutation, useQuery } from "@tanstack/react-query";
 
@@ -226,7 +226,7 @@ export default function CreateSessionModal({ targetServerId }: Props) {
             </div>
           </div>
         )}
-        <NewButton
+        <Button
           type="submit"
           disabled={
             !ref.current?.checkValidity() ||
@@ -245,7 +245,7 @@ export default function CreateSessionModal({ targetServerId }: Props) {
             </div>
           </div>
           <p>Запустить сеанс</p>
-        </NewButton>
+        </Button>
       </div>
     </form>
   );

src/components/modals/CurrentSessionModal.tsx

@@ -1,6 +1,6 @@
 import { intervalToDuration } from "date-fns";
 import FlashIcon from "../icons/FlashIcon";
-import NewButton from "../NewButton";
+import Button from "../Button";
 import ChevronRightIcon from "../icons/ChevronRightIcon";
 import useModalStore from "../../stores/useModalStore";
 import { Session } from "../../types/ISession";
@@ -83,7 +83,7 @@ function CurrentSessionModal({ session }: { session: Session }) {
         <div className="flex flex-col gap-[0.833vw]">
           <h2 className="title-s font-medium">Параметры сеанса</h2>
           <div>
-            <NewButton variant="secondary" className="w-full">
+            <Button 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.name}</p>
@@ -98,7 +98,7 @@ function CurrentSessionModal({ session }: { session: Session }) {
                   <ChevronRightIcon />
                 </span>
               </div>
-            </NewButton>
+            </Button>
           </div>
         </div>
         <div className="flex flex-col gap-[0.833vw]">
@@ -117,7 +117,7 @@ function CurrentSessionModal({ session }: { session: Session }) {
           </div>
         </div>
         <div className="flex flex-col gap-[0.556vw]">
-          <NewButton
+          <Button
             size="large"
             variant="critical"
             className="w-full"
@@ -126,15 +126,15 @@ function CurrentSessionModal({ session }: { session: Session }) {
             }}
           >
             Завершить сеанс
-          </NewButton>
-          <NewButton
+          </Button>
+          <Button
             size="large"
             variant="primary"
             className="w-full"
             onClick={() => setModal(null)}
           >
             Закрыть
-          </NewButton>
+          </Button>
         </div>
       </div>
     </div>

src/components/modals/EditTableModal.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import NewInput from "../NewInput";
-import NewButton from "../NewButton";
+import Button from "../Button";
 import useModalStore from "../../stores/useModalStore";
 import { Server } from "../../types/IServer";
 import { useQueryClient } from "@tanstack/react-query";
@@ -62,7 +62,7 @@ function EditTable({ table }: { table: Server }) {
           )}
         </div>
         <div className="flex flex-col gap-[0.556vw]">
-          <NewButton
+          <Button
             variant="cta"
             size="large"
             disabled={
@@ -74,15 +74,15 @@ function EditTable({ table }: { table: Server }) {
             onClick={() => updateTable()}
           >
             <p>Сохранить изменения</p>
-          </NewButton>
-          <NewButton
+          </Button>
+          <Button
             variant="primary"
             size="large"
             className="flex justify-center"
             onClick={() => setModal(null)}
           >
             <p>Отменить</p>
-          </NewButton>
+          </Button>
         </div>
       </div>
     </div>

src/components/modals/EndSessionModal.tsx

@@ -2,7 +2,7 @@ import { useMutation } from "@tanstack/react-query";
 import { useQueryClient } from "@tanstack/react-query";
 import useModalStore from "../../stores/useModalStore";
 import { Session } from "../../types/ISession";
-import NewButton from "../NewButton";
+import Button from "../Button";
 import CurrentSessionModal from "./CurrentSessionModal";
 import api from "../../utils/api";
 import SpinIcon from "../icons/SpinIcon";
@@ -55,7 +55,7 @@ function EndSessionModal({ session }: { session: Session }) {
               </p>
             </div>
             <div className="flex flex-col gap-[0.556vw]">
-              <NewButton
+              <Button
                 size="large"
                 variant="critical"
                 className="w-full"
@@ -63,8 +63,8 @@ function EndSessionModal({ session }: { session: Session }) {
                 disabled={isPending}
               >
                 Завершить сеанс
-              </NewButton>
-              <NewButton
+              </Button>
+              <Button
                 size="large"
                 variant="primary"
                 className="w-full"
@@ -73,7 +73,7 @@ function EndSessionModal({ session }: { session: Session }) {
                 }
               >
                 Отменить
-              </NewButton>
+              </Button>
             </div>
           </div>
         </>

src/components/modals/SessionModal.tsx

@@ -3,7 +3,7 @@ import { format } from "date-fns";
 import { ru } from "date-fns/locale";
 import getIntervalDuration from "../../utils/interval-duration";
 import MagicIcon from "../icons/MagicIcon";
-import NewButton from "../NewButton";
+import Button from "../Button";
 import ChevronRightIcon from "../icons/ChevronRightIcon";
 import Badge from "../Badge";
 import ClientCard from "../ClientCard";
@@ -100,29 +100,29 @@ function SessionModal({ session }: { session: Session }) {
               согласование с семьей и выбор этажа. Необходимо подготовить
               предварительный договор к следующей встрече.
             </div>
-            <NewButton variant="primary" size="large">
+            <Button variant="primary" size="large">
               Весь отчет по встрече
               <span className="w-[1.111vw] h-[1.111vw] text-[#7B60F3]">
                 <ChevronRightIcon />
               </span>
-            </NewButton>
+            </Button>
           </div>
           <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>
             <div className="flex w-full gap-[0.556vw]">
-              <NewButton variant="primary" size="large" className="w-full">
+              <Button variant="primary" size="large" className="w-full">
                 <span className="w-[1.111vw] h-[1.111vw] text-[#7B60F3]">
                   <DownloadIcon />
                 </span>
                 Скачать архивом
-              </NewButton>
-              <NewButton variant="primary" size="large">
+              </Button>
+              <Button variant="primary" size="large">
                 <span className="w-[1.111vw] h-[1.111vw] text-[#7B60F3]">
                   <ShareIcon />
                 </span>
-              </NewButton>
+              </Button>
             </div>
           </div>
         </div>

src/pages/DashboardPage.tsx

@@ -6,8 +6,9 @@ import DesktopCard from "../components/DesktopCard";
 import Badge from "../components/Badge";
 import { Session } from "../types/ISession";
 import SessionCard from "../components/SessionCard";
-import NewButton from "../components/NewButton";
+import Button from "../components/Button";
 import ChevronRightIcon from "../components/icons/ChevronRightIcon";
+import { useNavigate } from "react-router";
 
 function DashboardPage() {
   const { data: me } = useQuery({
@@ -42,6 +43,8 @@ function DashboardPage() {
   //   }
   // }
 
+  const navigate = useNavigate();
+
   return (
     <div className="flex flex-col gap-[5vw] min-h-dvh">
       <div className="w-full flex justify-between">
@@ -71,16 +74,17 @@ function DashboardPage() {
                   <SessionCard key={session.id} session={session} />
                 ))}
             </div>
-            <NewButton
+            <Button
               variant="primary"
               size="large"
-              className="flex gap-[0.556vw] items-center justify-center"
+              className="flex gap-[0.556vw] items-center justify-center w-full"
+              onClick={() => navigate("/sessions")}
             >
-              <p>Смотреть всё</p>
+              <p>Смотреть все</p>
               <span className="w-[1.111vw] h-[1.111vw] flex items-center justify-center">
                 <ChevronRightIcon />
               </span>
-            </NewButton>
+            </Button>
           </div>
         </div>
       </div>

src/pages/LoginPage.tsx

@@ -1,5 +1,4 @@
 import toast from "react-hot-toast";
-import Button from "../components/Button";
 import Input from "../components/Input";
 import useAuthStore from "../stores/useAuthStore";
 import api from "../utils/api";
@@ -7,6 +6,7 @@ import { useState } from "react";
 import { HTTPError } from "ky";
 import { IError } from "../types/IError";
 import { useNavigate } from "react-router";
+import Button from "../components/Button";
 
 function LoginPage() {
   const navigate = useNavigate();
@@ -71,17 +71,22 @@ function LoginPage() {
               />
             </div>
             <div className="mt-3">
-              <Button type="button" variant="link">
+              <Button type="button" variant="secondary">
                 Забыли пароль?
               </Button>
             </div>
             <div className="mt-6">
-              <Button type="submit" className="w-full">
+              <Button
+                type="submit"
+                variant="cta"
+                size="large"
+                className="w-full"
+              >
                 Войти
               </Button>
             </div>
             <div className="mt-6">
-              <Button type="button" variant="link" className="mx-auto">
+              <Button type="button" variant="secondary" className="mx-auto">
                 Нет данных для входа?
               </Button>
             </div>