add register and reset dialogs

3 files changed, 49 insertions, 29 deletions

diff --git a/src/components/header/AuthDialog.tsx b/src/components/header/AuthDialog.tsx
index c1f359e..c125c66 100644
--- a/src/components/header/AuthDialog.tsx
+++ b/src/components/header/AuthDialog.tsx
@@ -3,23 +3,18 @@ import { DialogContent } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import GoogleIcon from '../../../public/icons/google.svg';
+import { InputField } from '../ui/inputfield';
 export function AuthDialog() {
     return (
         <div className="absolute">
             <DialogContent className="w-[350px] p-0 bg-transparent border-transparent">
                 <Tabs defaultValue="Login">
                     <div className="flex flex-col gap-[5px] ">
-                        <TabsList className="w-[350px] h-[36px] font-medium justify-between bg-background border border-violet rounded-[15px]">
-                            <TabsTrigger
-                                value="Login"
-                                className="w-[59px] text-[16px] leading-[22px]"
-                            >
+                        <TabsList className="w-[350px] h-[36px] justify-between bg-background border border-violet rounded-[15px]">
+                            <TabsTrigger value="Login" className="w-[59px]">
                                 <span className="w-[39px]">Вход</span>
                             </TabsTrigger>
-                            <TabsTrigger
-                                value="Register"
-                                className="w-[116px]  text-[16px]"
-                            >
+                            <TabsTrigger value="Register" className="w-[116px]">
                                 <span className="w-[96px]">Регистрация</span>
                             </TabsTrigger>
                             <TabsTrigger
@@ -33,38 +28,61 @@ export function AuthDialog() {
                         </TabsList>
                         <TabsContent
                             value="Login"
-                            className="w-[350px] min-h-[250px] p-4 gap-4 flex flex-col items-center justify-center rounded-[15px] border-[2px] bg-background"
+                            className="w-[350px] min-h-[250px] p-5 gap-5 flex flex-col items-center justify-center rounded-[15px] border-[2px] bg-background"
                         >
                             <div className="gap-5 flex flex-col h-[148px] w-[310px]">
                                 <Button className="w-full bg-white hover:bg-white hover:text-black">
                                     <GoogleIcon />
-                                    <span className="text-black">
+                                    <span className="text-black text-sm">
                                         Войти через Google
                                     </span>
                                 </Button>
                                 <div className="gap-[10px] flex-col flex h-[88px]">
-                                    <div className="rounded-[20px] border-violet border-[2px] h-[39px] justify-between py-[10px] px-[20px] items-center flex">
-                                        <Input
-                                            className="w-full flex text-white placeholder:text-light-violet h-[19px]"
-                                            placeholder="Никнейм или почта"
-                                        />
-                                    </div>
-                                    <div className="rounded-[20px] border-violet border-[2px] h-[39px] justify-between py-[10px] px-[20px] items-center flex">
-                                        <Input
-                                            className="w-full flex text-white placeholder:text-light-violet h-[19px]"
-                                            placeholder="пароль"
-                                        />
-                                    </div>
+                                    <InputField placeholder="Никнейм или почта" />
+                                    <InputField placeholder="Пароль" />
                                 </div>
                             </div>
                             <Button className="w-full gap-[10px]">Войти</Button>
                         </TabsContent>
-                        <TabsContent value="Register">
-                            <div className="h-[99px]"></div>
+                        <TabsContent
+                            value="Register"
+                            className="w-[350px] max-h-[348px] p-5 gap-5 flex flex-col items-center justify-center rounded-[15px] border-[2px] bg-background"
+                        >
+                            <div className="gap-5 flex flex-col w-[310px]">
+                                <Button className="w-full bg-white hover:bg-white hover:text-black">
+                                    <GoogleIcon />
+                                    <span className="text-black">
+                                        Войти через Google
+                                    </span>
+                                </Button>
+                                <div className="gap-2.5 flex flex-col">
+                                    <InputField placeholder="Никнейм" />
+                                    <InputField placeholder="E-mail" />
+                                    <InputField placeholder="Пароль" />
+                                    <InputField placeholder="Повторите пароль" />
+                                </div>
+                            </div>
+                            <Button className="w-full">Войти</Button>
                         </TabsContent>
-
-                        <TabsContent value="Reset"></TabsContent>
                     </div>
+                    <TabsContent
+                        value="Reset"
+                        className="w-[350px] max-h-[231px] p-5 gap-5 flex-col items-center justify-center rounded-[15px] border-[2px] bg-background"
+                    >
+                        <div className="flex gap-5 flex-col">
+                            <div className="flex flex-col w-[310px] gap-5">
+                                <span className="">ВОССТАНОВЛЕНИЕ ПАРОЛЯ</span>
+                                <div className=" gap-2.5 flex flex-col">
+                                    <span className="text-sm">
+                                        Введите никнейм или почту, с помощью
+                                        которых входите в аккаунт.
+                                    </span>
+                                    <InputField placeholder="Никнейм или почта"></InputField>
+                                </div>
+                            </div>
+                            <Button className="w-full">Восстановить</Button>
+                        </div>
+                    </TabsContent>
                 </Tabs>
             </DialogContent>
         </div>
diff --git a/src/components/header/NavBar.tsx b/src/components/header/NavBar.tsx
index 217be3a..419f7d8 100644
--- a/src/components/header/NavBar.tsx
+++ b/src/components/header/NavBar.tsx
@@ -45,7 +45,7 @@ export function NavBar() {
                 </div>
             </div>
 
-            <div className="flex gap-3.75 items-center shrink-0">
+            <div className="flex gap-5 items-center shrink-0">
                 <Link href={'#'} className="hover:[&_path]:fill-light-violet">
                     <DiscordIcon />
                 </Link>
diff --git a/src/components/header/ProfileOrLogin.tsx b/src/components/header/ProfileOrLogin.tsx
index 874e0fc..416418b 100644
--- a/src/components/header/ProfileOrLogin.tsx
+++ b/src/components/header/ProfileOrLogin.tsx
@@ -13,7 +13,9 @@ export function ProfileOrLogin() {
         return (
             <Dialog>
                 <DialogTrigger asChild>
-                    <Button className="py-2.5 px-3.75">ВОЙТИ</Button>
+                    <Button className="py-2.5 px-3.75 gap-10 w-21.75 h-10.5">
+                        ВОЙТИ
+                    </Button>
                 </DialogTrigger>
                 <AuthDialog />
             </Dialog>