OV-4: * improvement styles in sign-up form

frontend/src/bundles/auth/components/sign-up-form/sign-up-form.tsx

@@ -4,21 +4,18 @@ import {
     Box,
     Button,
     FormProvider,
-    Heading,
     Input,
     Link,
-    PasswordInput,
-    Text,
     VStack,
 } from '~/bundles/common/components/components.js';
-import { FormError } from '~/bundles/common/components/form-error/form-error.js';
 import { AppRoute, DataStatus } from '~/bundles/common/enums/enums.js';
-import { useAppForm, useAppSelector } from '~/bundles/common/hooks/hooks.js';
+import { useAppForm, useAppSelector, useMemo } from '~/bundles/common/hooks/hooks.js';
 import {
     type UserSignUpRequestDto,
     userSignUpValidationSchema,
 } from '~/bundles/users/users.js';
 
+import { FormError, FormHeader, PasswordInput } from '../common/components.js';
 import { DEFAULT_SIGN_UP_PAYLOAD } from './constants/constants.js';
 
 type Properties = {
@@ -33,18 +30,29 @@ const SignUpForm: React.FC<Properties> = ({ onSubmit }) => {
         initialValues: DEFAULT_SIGN_UP_PAYLOAD,
         validationSchema: userSignUpValidationSchema,
         onSubmit,
-        mode: 'onChange',
     });
 
-    const { handleSubmit, isValid } = form;
+    const { handleSubmit, errors, values } = form;
+
+    const isEmpty = useMemo(
+        () => Object.values(values).some((value) => value.trim().length === 0),
+        [values],
+    );
 
     return (
         <FormProvider value={form}>
-            <Box bg="brand.200" w={64} p={6} rounded="md">
-                <Heading as="h1">Create an account</Heading>
-                <Text fontSize='sm'>Already registerd?
-                    <Link to={AppRoute.SIGN_IN}>Log In</Link>
-                </Text>
+            <Box w="55%" color="white">
+                <FormHeader
+                    headerText="Create an account"
+                    subheader={
+                        <>
+                            Already registerd?{' '}
+                            <Link to={AppRoute.SIGN_IN} variant="secondary">
+                                Log In
+                            </Link>
+                        </>
+                    }
+                />
                 <form onSubmit={handleSubmit}>
                     <VStack spacing={4} align="flex-start">
                         <Input
@@ -61,19 +69,25 @@ const SignUpForm: React.FC<Properties> = ({ onSubmit }) => {
                         />
                         <PasswordInput
                             label="Password"
-                            placeHolder="••••••••"
                             name="password"
+                            hasError={Boolean(errors.password)}
                         />
                         <PasswordInput
                             label="Repeat password"
-                            placeHolder="••••••••"
                             name="confirmPassword"
+                            hasError={Boolean(errors.confirmPassword)}
                         />
                         <FormError
-                            hasError={dataStatus === DataStatus.REJECTED}
-                            errorMessage={ UserValidationMessage.USER_IS_NOT_AVAILABLE }
+                            isVisible={ dataStatus === DataStatus.REJECTED }
+                            message={ UserValidationMessage.USER_IS_NOT_AVAILABLE }
+                        />
+                        <Button
+                            type="submit"
+                            label="Sign up"
+                            size="lg"
+                            sx={{ mt: '16px' }}
+                            isDisabled={isEmpty}
                         />
-                        <Button type="submit" label="Sign up" isDisabled={!isValid}/>
                     </VStack>
                 </form>
             </Box>

frontend/src/bundles/common/components/button/button.tsx

@@ -1,13 +1,30 @@
-import { Button as LibraryButton } from '@chakra-ui/react';
+import {
+    type SystemStyleObject,
+    Button as LibraryButton,
+} from '@chakra-ui/react';
 
 type Properties = {
     label: string;
     type?: 'button' | 'submit';
+    size?: 'md' | 'lg';
     isDisabled?: boolean;
+    sx?: SystemStyleObject;
 };
 
-const Button: React.FC<Properties> = ({ type = 'button', label, isDisabled = false }) => (
-    <LibraryButton type={type} color="brand.900" width="full" isDisabled={isDisabled}>
+const Button: React.FC<Properties> = ({
+    type = 'button',
+    label,
+    size = 'md',
+    isDisabled = false,
+    sx = {},
+}) => (
+    <LibraryButton
+        type={type}
+        width="full"
+        size={size}
+        isDisabled={isDisabled}
+        sx={sx}
+    >
         {label}
     </LibraryButton>
 );

frontend/src/bundles/common/components/components.ts

@@ -1,16 +1,19 @@
 export { Button } from './button/button.js';
 export { Input } from './input/input.js';
-export { PasswordInput } from './input/password-input.js';
 export { Link } from './link/link.js';
 export { RouterProvider } from './router-provider/router-provider.js';
+export { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 export {
     Box,
+    Center,
     ChakraProvider as ComponentsProvider,
     FormControl,
     FormErrorMessage,
     Heading,
+    IconButton,
     InputGroup,
     InputRightElement,
+    SimpleGrid,
     Text,
     VStack,
 } from '@chakra-ui/react';

frontend/src/bundles/common/components/link/link.tsx

@@ -1,3 +1,4 @@
+import { Link as LibraryLink } from '@chakra-ui/react';
 import { NavLink } from 'react-router-dom';
 
 import { type AppRoute } from '~/bundles/common/enums/enums.js';
@@ -6,10 +7,11 @@ import { type ValueOf } from '~/bundles/common/types/types.js';
 type Properties = {
     to: ValueOf<typeof AppRoute>;
     children: React.ReactNode;
+    variant?: 'primary' | 'secondary';
 };
 
-const Link: React.FC<Properties> = ({ children, to }) => (
-    <NavLink to={to}>{children}</NavLink>
+const Link: React.FC<Properties> = ({ children, to, variant = 'primary'  }) => (
+    <LibraryLink as={NavLink} to={to} variant={variant}>{children}</LibraryLink>
 );
 
 export { Link };