From 333c400ff561229d2d18b9e2389824a5c02e83c2 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Mon, 19 Aug 2024 21:33:34 +0300
Subject: [PATCH 01/55] OV-11: * colors

---
 frontend/src/framework/theme/styles/colors.styles.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/framework/theme/styles/colors.styles.ts b/frontend/src/framework/theme/styles/colors.styles.ts
index 75c91a9c5..c207ae8ac 100644
--- a/frontend/src/framework/theme/styles/colors.styles.ts
+++ b/frontend/src/framework/theme/styles/colors.styles.ts
@@ -3,6 +3,12 @@ const colors = {
         900: '#1a365d',
         200: '#b3e0ff',
     },
+    background: {
+        900: '#0a0049',
+        600: '#35399a',
+        300: '#3c9cf5',
+        50: '#e2e1ec',
+    },
     text: {
         default: '#36454f',
         accent: '#ff5733',

From 4bcf5ab3ca0395ad3e34edc2082ad557d8046813 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Mon, 19 Aug 2024 21:34:23 +0300
Subject: [PATCH 02/55] OV-11: + header component

---
 .../common/components/header/header.tsx       | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 frontend/src/bundles/common/components/header/header.tsx

diff --git a/frontend/src/bundles/common/components/header/header.tsx b/frontend/src/bundles/common/components/header/header.tsx
new file mode 100644
index 000000000..96dd5229a
--- /dev/null
+++ b/frontend/src/bundles/common/components/header/header.tsx
@@ -0,0 +1,33 @@
+import { Flex, Text } from '@chakra-ui/react';
+
+const Header = (): JSX.Element => {
+    return (
+        <Flex
+            as="header"
+            height="75px"
+            position="sticky"
+            top="0"
+            left="0"
+            width="100%"
+            backgroundColor="background.900"
+            color="white"
+            boxShadow="md"
+            zIndex="1000"
+            padding="4"
+            marginBottom="20px"
+        >
+            <Flex
+                width="full"
+                alignItems="center"
+                maxWidth="1440px"
+                margin="0 auto"
+            >
+                <Text fontSize="xl" fontWeight="bold">
+                    Logo
+                </Text>
+            </Flex>
+        </Flex>
+    );
+};
+
+export { Header };

From af83d0eff837bbc937bc536177580a7757169414 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Mon, 19 Aug 2024 21:36:01 +0300
Subject: [PATCH 03/55] OV-11: + header into app

---
 frontend/src/app/app.tsx                             | 7 ++++++-
 frontend/src/bundles/common/components/components.ts | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/app.tsx b/frontend/src/app/app.tsx
index e1f671b35..f7420ca51 100644
--- a/frontend/src/app/app.tsx
+++ b/frontend/src/app/app.tsx
@@ -1,5 +1,9 @@
 import reactLogo from '~/assets/img/react.svg';
-import { Link, RouterOutlet } from '~/bundles/common/components/components.js';
+import {
+    Header,
+    Link,
+    RouterOutlet,
+} from '~/bundles/common/components/components.js';
 import { AppRoute } from '~/bundles/common/enums/enums.js';
 import {
     useAppDispatch,
@@ -27,6 +31,7 @@ const App: React.FC = () => {
 
     return (
         <>
+            <Header />
             <img src={reactLogo} width="30" alt="logo" />
 
             <ul>
diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts
index ce95bfe64..9f899df94 100644
--- a/frontend/src/bundles/common/components/components.ts
+++ b/frontend/src/bundles/common/components/components.ts
@@ -1,4 +1,5 @@
 export { Button } from './button/button.js';
+export { Header } from './header/header.js';
 export { Input } from './input/input.js';
 export { Link } from './link/link.js';
 export { RouterProvider } from './router-provider/router-provider.js';

From 89bd1459e02966236595baa3da5e7a6b03eee7d8 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Tue, 20 Aug 2024 10:41:25 +0300
Subject: [PATCH 04/55] OV-11: * header component

---
 frontend/src/bundles/common/components/header/header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/bundles/common/components/header/header.tsx b/frontend/src/bundles/common/components/header/header.tsx
index 96dd5229a..2a0322074 100644
--- a/frontend/src/bundles/common/components/header/header.tsx
+++ b/frontend/src/bundles/common/components/header/header.tsx
@@ -20,9 +20,9 @@ const Header = (): JSX.Element => {
                 width="full"
                 alignItems="center"
                 maxWidth="1440px"
-                margin="0 auto"
+                justifyContent="space-between"
             >
-                <Text fontSize="xl" fontWeight="bold">
+                <Text fontSize="xl" fontWeight="lighter">
                     Logo
                 </Text>
             </Flex>

From af7193f72d73fb3410eeeb27435cfae1dee1c266 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Tue, 20 Aug 2024 11:52:05 +0300
Subject: [PATCH 05/55] OV-18: + Modal component

---
 .../bundles/common/components/components.ts   |  1 +
 .../bundles/common/components/modal/modal.tsx | 36 +++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 frontend/src/bundles/common/components/modal/modal.tsx

diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts
index ce95bfe64..f25a0cb03 100644
--- a/frontend/src/bundles/common/components/components.ts
+++ b/frontend/src/bundles/common/components/components.ts
@@ -1,6 +1,7 @@
 export { Button } from './button/button.js';
 export { Input } from './input/input.js';
 export { Link } from './link/link.js';
+export { Modal } from './modal/modal.js';
 export { RouterProvider } from './router-provider/router-provider.js';
 export {
     Box,
diff --git a/frontend/src/bundles/common/components/modal/modal.tsx b/frontend/src/bundles/common/components/modal/modal.tsx
new file mode 100644
index 000000000..e10682e5d
--- /dev/null
+++ b/frontend/src/bundles/common/components/modal/modal.tsx
@@ -0,0 +1,36 @@
+import {
+    Modal as ChakraModal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalHeader,
+    ModalOverlay,
+} from '@chakra-ui/react';
+import { type ReactNode } from 'react';
+
+type Properties = {
+    isOpen: boolean;
+    closeModal: () => void;
+    title?: string;
+    children: ReactNode;
+};
+
+const Modal = ({
+    isOpen,
+    closeModal,
+    title,
+    children,
+}: Properties): JSX.Element => {
+    return (
+        <ChakraModal isOpen={isOpen} onClose={closeModal}>
+            <ModalOverlay />
+            <ModalContent>
+                <ModalHeader>{title}</ModalHeader>
+                <ModalCloseButton />
+                <ModalBody>{children}</ModalBody>
+            </ModalContent>
+        </ChakraModal>
+    );
+};
+
+export { Modal };

From 2faab74eadf7ae442224089171ea459a403a3c71 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Tue, 20 Aug 2024 14:36:53 +0300
Subject: [PATCH 06/55] OV-18: + Tab component

---
 .../libs/components/tab/tab.tsx                   | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/libs/components/tab/tab.tsx

diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/libs/components/tab/tab.tsx b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/libs/components/tab/tab.tsx
new file mode 100644
index 000000000..5853e7885
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/libs/components/tab/tab.tsx
@@ -0,0 +1,15 @@
+import { Tab as ChakraTab } from '@chakra-ui/react';
+
+type Properties = {
+    label: string;
+};
+
+const Tab = ({ label }: Properties): JSX.Element => {
+    return (
+        <ChakraTab borderRadius="10px" _selected={{ backgroundColor: '' }}>
+            {label}
+        </ChakraTab>
+    );
+};
+
+export { Tab };

From d2340b62c4998546619fddcfdb42c6caeecd32c3 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Tue, 20 Aug 2024 14:38:45 +0300
Subject: [PATCH 07/55] OV-18: + VideoModalSideBar component

---
 .../libs/components/components.ts             |  1 +
 .../video-modal-side-bar.tsx                  | 34 +++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/libs/components/components.ts
 create mode 100644 frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/video-modal-side-bar.tsx

diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/libs/components/components.ts b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/libs/components/components.ts
new file mode 100644
index 000000000..e5eeec838
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/libs/components/components.ts
@@ -0,0 +1 @@
+export { Tab } from './tab/tab.js';
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/video-modal-side-bar.tsx b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/video-modal-side-bar.tsx
new file mode 100644
index 000000000..3948c46f6
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/video-modal-side-bar.tsx
@@ -0,0 +1,34 @@
+import { TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
+
+import { Tab } from './libs/components/components.js';
+
+const VideoModalSideBar = (): JSX.Element => {
+    return (
+        <Tabs
+            orientation="vertical"
+            backgroundColor="gray"
+            height="full"
+            size="lg"
+            variant="enclosed"
+        >
+            <TabList width="30%">
+                <Tab label="One" />
+                <Tab label="Two" />
+                <Tab label="Three" />
+            </TabList>
+            <TabPanels>
+                <TabPanel>
+                    <p>one!</p>
+                </TabPanel>
+                <TabPanel>
+                    <p>two!</p>
+                </TabPanel>
+                <TabPanel>
+                    <p>three!</p>
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    );
+};
+
+export { VideoModalSideBar };

From fe050edba8c9f8c9d45b80eda562d10276f6113b Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Tue, 20 Aug 2024 14:39:42 +0300
Subject: [PATCH 08/55] OV-18: + VideoModal component

---
 .../components/video-modal/libs/components/components.ts   | 1 +
 .../bundles/common/components/video-modal/video-modal.tsx  | 7 +++++++
 2 files changed, 8 insertions(+)
 create mode 100644 frontend/src/bundles/common/components/video-modal/libs/components/components.ts
 create mode 100644 frontend/src/bundles/common/components/video-modal/video-modal.tsx

diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/components.ts b/frontend/src/bundles/common/components/video-modal/libs/components/components.ts
new file mode 100644
index 000000000..5f623fe39
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/libs/components/components.ts
@@ -0,0 +1 @@
+export { VideoModalSideBar } from './video-modal-side-bar/video-modal-side-bar.js';
diff --git a/frontend/src/bundles/common/components/video-modal/video-modal.tsx b/frontend/src/bundles/common/components/video-modal/video-modal.tsx
new file mode 100644
index 000000000..77d5953e6
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/video-modal.tsx
@@ -0,0 +1,7 @@
+import { VideoModalSideBar } from './libs/components/components.js';
+
+const VideoModal = (): JSX.Element => {
+    return <VideoModalSideBar />;
+};
+
+export { VideoModal };

From 617444e3b92363e455781395e85c6288fa88a45b Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Tue, 20 Aug 2024 14:46:08 +0300
Subject: [PATCH 09/55] OV-11: + conditional rendering

---
 frontend/src/app/app.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/app.tsx b/frontend/src/app/app.tsx
index f7420ca51..309b4baca 100644
--- a/frontend/src/app/app.tsx
+++ b/frontend/src/app/app.tsx
@@ -31,7 +31,11 @@ const App: React.FC = () => {
 
     return (
         <>
-            <Header />
+            {pathname === AppRoute.SIGN_UP ||
+            pathname === AppRoute.SIGN_IN ? null : (
+                <Header />
+            )}
+
             <img src={reactLogo} width="30" alt="logo" />
 
             <ul>

From cc693ceb776f357053892755fe6400924071a441 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Tue, 20 Aug 2024 15:39:49 +0300
Subject: [PATCH 10/55] OV-11: - header from app

---
 frontend/src/app/app.tsx | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/frontend/src/app/app.tsx b/frontend/src/app/app.tsx
index 309b4baca..e1f671b35 100644
--- a/frontend/src/app/app.tsx
+++ b/frontend/src/app/app.tsx
@@ -1,9 +1,5 @@
 import reactLogo from '~/assets/img/react.svg';
-import {
-    Header,
-    Link,
-    RouterOutlet,
-} from '~/bundles/common/components/components.js';
+import { Link, RouterOutlet } from '~/bundles/common/components/components.js';
 import { AppRoute } from '~/bundles/common/enums/enums.js';
 import {
     useAppDispatch,
@@ -31,11 +27,6 @@ const App: React.FC = () => {
 
     return (
         <>
-            {pathname === AppRoute.SIGN_UP ||
-            pathname === AppRoute.SIGN_IN ? null : (
-                <Header />
-            )}
-
             <img src={reactLogo} width="30" alt="logo" />
 
             <ul>

From cd43f07e5e901df61aaf790e769e8ba3bc19e642 Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Sun, 18 Aug 2024 15:07:06 +0300
Subject: [PATCH 11/55] OV-1: + password input

---
 frontend/package.json                         |  1 +
 .../auth/components/common/components.ts      |  1 +
 .../common/password-input/password-input.tsx  | 40 +++++++++++++++++++
 .../bundles/common/components/components.ts   |  6 +++
 .../theme/styles/components.styles.ts         | 10 +++++
 package-lock.json                             | 13 ++++++
 6 files changed, 71 insertions(+)
 create mode 100644 frontend/src/bundles/auth/components/common/components.ts
 create mode 100644 frontend/src/bundles/auth/components/common/password-input/password-input.tsx

diff --git a/frontend/package.json b/frontend/package.json
index 881769413..41ff12932 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,6 +27,7 @@
         "vite": "5.4.0"
     },
     "dependencies": {
+        "@chakra-ui/icons": "2.1.1",
         "@chakra-ui/react": "2.8.2",
         "@emotion/react": "11.13.0",
         "@emotion/styled": "11.13.0",
diff --git a/frontend/src/bundles/auth/components/common/components.ts b/frontend/src/bundles/auth/components/common/components.ts
new file mode 100644
index 000000000..b5b4684f7
--- /dev/null
+++ b/frontend/src/bundles/auth/components/common/components.ts
@@ -0,0 +1 @@
+export { PasswordInput } from './password-input/password-input.js';
diff --git a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
new file mode 100644
index 000000000..a87a0e65b
--- /dev/null
+++ b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
@@ -0,0 +1,40 @@
+import {
+    IconButton,
+    Input,
+    InputGroup,
+    InputRightElement,
+    ViewIcon,
+    ViewOffIcon,
+} from '~/bundles/common/components/components.js';
+import { useCallback, useState } from '~/bundles/common/hooks/hooks.js';
+
+const PasswordInput: React.FC = () => {
+    const [showPassword, setShowPassword] = useState<boolean>(false);
+
+    const handlePasswordIconClick = useCallback((): void => {
+        setShowPassword((previousShowPassword) => !previousShowPassword);
+    }, []);
+
+    return (
+        <InputGroup>
+            <Input
+                type={showPassword ? 'text' : 'password'}
+                label="Password"
+                placeholder="••••••••"
+                name="password"
+            />
+            <InputRightElement top="unset" bottom={0}>
+                <IconButton
+                    aria-label={
+                        showPassword ? 'Hide password' : 'Show password'
+                    }
+                    icon={showPassword ? <ViewIcon /> : <ViewOffIcon />}
+                    onClick={handlePasswordIconClick}
+                    variant="ghostIcon"
+                />
+            </InputRightElement>
+        </InputGroup>
+    );
+};
+
+export { PasswordInput };
diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts
index 71c774689..9da09a971 100644
--- a/frontend/src/bundles/common/components/components.ts
+++ b/frontend/src/bundles/common/components/components.ts
@@ -4,12 +4,18 @@ export { Link } from './link/link.js';
 export { Loader } from './loader/loader.js';
 export { Overlay } from './overlay/overlay.js';
 export { RouterProvider } from './router-provider/router-provider.js';
+export { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 export {
     Box,
+    Center,
     Circle,
     ChakraProvider as ComponentsProvider,
     Flex,
     Heading,
+    IconButton,
+    InputGroup,
+    InputRightElement,
+    SimpleGrid,
     Text,
     VStack,
 } from '@chakra-ui/react';
diff --git a/frontend/src/framework/theme/styles/components.styles.ts b/frontend/src/framework/theme/styles/components.styles.ts
index 417d40ef9..cb0d05804 100644
--- a/frontend/src/framework/theme/styles/components.styles.ts
+++ b/frontend/src/framework/theme/styles/components.styles.ts
@@ -78,6 +78,16 @@ const components = {
             },
         },
     },
+    Button: {
+        variants: {
+            ghostIcon: {
+                color: 'white',
+                _hover: {
+                    color: 'brand.secondary.300',
+                },
+            },
+        },
+    },
 };
 
 export { components };
diff --git a/package-lock.json b/package-lock.json
index 711edfde0..c679dfd41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -71,6 +71,7 @@
         "frontend": {
             "version": "1.0.0",
             "dependencies": {
+                "@chakra-ui/icons": "2.1.1",
                 "@chakra-ui/react": "2.8.2",
                 "@emotion/react": "11.13.0",
                 "@emotion/styled": "11.13.0",
@@ -803,6 +804,18 @@
                 "react": ">=18"
             }
         },
+        "node_modules/@chakra-ui/icons": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-2.1.1.tgz",
+            "integrity": "sha512-3p30hdo4LlRZTT5CwoAJq3G9fHI0wDc0pBaMHj4SUn0yomO+RcDRlzhdXqdr5cVnzax44sqXJVnf3oQG0eI+4g==",
+            "dependencies": {
+                "@chakra-ui/icon": "3.2.0"
+            },
+            "peerDependencies": {
+                "@chakra-ui/system": ">=2.0.0",
+                "react": ">=18"
+            }
+        },
         "node_modules/@chakra-ui/image": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-2.1.0.tgz",

From aaa8b5d9cfc54bf8b13a847d8b0b736490c2571d Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Sun, 18 Aug 2024 15:24:26 +0300
Subject: [PATCH 12/55] OV-1: + signin validation schema

---
 .../sign-in-form/constants/constants.ts       |  8 +++++
 frontend/src/bundles/users/types/types.ts     |  1 +
 frontend/src/bundles/users/users.ts           |  6 +++-
 .../validation-schemas/validation-schemas.ts  |  2 +-
 .../enums/user-validation-message.enum.ts     |  3 ++
 .../users/enums/user-validation-rule.enum.ts  |  5 ++-
 shared/src/bundles/users/types/types.ts       |  1 +
 .../types/user-sign-in-request-dto.type.ts    |  6 ++++
 shared/src/bundles/users/users.ts             |  6 +++-
 .../user-sign-in.validation-schema.ts         | 36 +++++++++++++++++++
 .../validation-schemas/validation-schemas.ts  |  1 +
 shared/src/index.ts                           |  2 ++
 12 files changed, 73 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/bundles/auth/components/sign-in-form/constants/constants.ts
 create mode 100644 shared/src/bundles/users/types/user-sign-in-request-dto.type.ts
 create mode 100644 shared/src/bundles/users/validation-schemas/user-sign-in.validation-schema.ts

diff --git a/frontend/src/bundles/auth/components/sign-in-form/constants/constants.ts b/frontend/src/bundles/auth/components/sign-in-form/constants/constants.ts
new file mode 100644
index 000000000..3e3264e83
--- /dev/null
+++ b/frontend/src/bundles/auth/components/sign-in-form/constants/constants.ts
@@ -0,0 +1,8 @@
+import { type UserSignInRequestDto } from '~/bundles/users/users.js';
+
+const DEFAULT_SIGN_IN_PAYLOAD: UserSignInRequestDto = {
+    email: '',
+    password: '',
+};
+
+export { DEFAULT_SIGN_IN_PAYLOAD };
diff --git a/frontend/src/bundles/users/types/types.ts b/frontend/src/bundles/users/types/types.ts
index fb8e20c76..0a38e94bf 100644
--- a/frontend/src/bundles/users/types/types.ts
+++ b/frontend/src/bundles/users/types/types.ts
@@ -1,6 +1,7 @@
 export {
     type UserGetAllItemResponseDto,
     type UserGetAllResponseDto,
+    type UserSignInRequestDto,
     type UserSignUpRequestDto,
     type UserSignUpResponseDto,
 } from 'shared';
diff --git a/frontend/src/bundles/users/users.ts b/frontend/src/bundles/users/users.ts
index 443083e1c..59ffe28cb 100644
--- a/frontend/src/bundles/users/users.ts
+++ b/frontend/src/bundles/users/users.ts
@@ -14,7 +14,11 @@ export { userApi };
 export {
     type UserGetAllItemResponseDto,
     type UserGetAllResponseDto,
+    type UserSignInRequestDto,
     type UserSignUpRequestDto,
     type UserSignUpResponseDto,
 } from './types/types.js';
-export { userSignUpValidationSchema } from './validation-schemas/validation-schemas.js';
+export {
+    userSignInValidationSchema,
+    userSignUpValidationSchema,
+} from './validation-schemas/validation-schemas.js';
diff --git a/frontend/src/bundles/users/validation-schemas/validation-schemas.ts b/frontend/src/bundles/users/validation-schemas/validation-schemas.ts
index 7bc9a09c5..5952fe0cf 100644
--- a/frontend/src/bundles/users/validation-schemas/validation-schemas.ts
+++ b/frontend/src/bundles/users/validation-schemas/validation-schemas.ts
@@ -1 +1 @@
-export { userSignUpValidationSchema } from 'shared';
+export { userSignInValidationSchema, userSignUpValidationSchema } from 'shared';
diff --git a/shared/src/bundles/users/enums/user-validation-message.enum.ts b/shared/src/bundles/users/enums/user-validation-message.enum.ts
index b28063d96..f369a8c1a 100644
--- a/shared/src/bundles/users/enums/user-validation-message.enum.ts
+++ b/shared/src/bundles/users/enums/user-validation-message.enum.ts
@@ -1,6 +1,9 @@
 const UserValidationMessage = {
     EMAIL_REQUIRE: 'Email is required',
     EMAIL_WRONG: 'Email is wrong',
+    FIELD_REQUIRE: 'Please fill out this field',
+    EMAIL_INVALID: 'Please enter a valid email',
+    PASSWORD_LENGTH: 'Password must have from 6 to 12 characters',
 } as const;
 
 export { UserValidationMessage };
diff --git a/shared/src/bundles/users/enums/user-validation-rule.enum.ts b/shared/src/bundles/users/enums/user-validation-rule.enum.ts
index 36ca9c2e2..eb7d606aa 100644
--- a/shared/src/bundles/users/enums/user-validation-rule.enum.ts
+++ b/shared/src/bundles/users/enums/user-validation-rule.enum.ts
@@ -1,5 +1,8 @@
 const UserValidationRule = {
-    EMAIL_MINIMUM_LENGTH: 1,
+    EMAIL_MINIMUM_LENGTH: 6,
+    EMAIL_MAXIMUM_LENGTH: 320,
+    PASSWORD_MINIMUM_LENGTH: 6,
+    PASSWORD_MAXIMUM_LENGTH: 12,
 } as const;
 
 export { UserValidationRule };
diff --git a/shared/src/bundles/users/types/types.ts b/shared/src/bundles/users/types/types.ts
index 7564f70b2..f6fd8caa2 100644
--- a/shared/src/bundles/users/types/types.ts
+++ b/shared/src/bundles/users/types/types.ts
@@ -1,4 +1,5 @@
 export { type UserGetAllItemResponseDto } from './user-get-all-item-response-dto.type.js';
 export { type UserGetAllResponseDto } from './user-get-all-response-dto.type.js';
+export { type UserSignInRequestDto } from './user-sign-in-request-dto.type.js';
 export { type UserSignUpRequestDto } from './user-sign-up-request-dto.type.js';
 export { type UserSignUpResponseDto } from './user-sign-up-response-dto.type.js';
diff --git a/shared/src/bundles/users/types/user-sign-in-request-dto.type.ts b/shared/src/bundles/users/types/user-sign-in-request-dto.type.ts
new file mode 100644
index 000000000..8098c64cf
--- /dev/null
+++ b/shared/src/bundles/users/types/user-sign-in-request-dto.type.ts
@@ -0,0 +1,6 @@
+type UserSignInRequestDto = {
+    email: string;
+    password: string;
+};
+
+export { type UserSignInRequestDto };
diff --git a/shared/src/bundles/users/users.ts b/shared/src/bundles/users/users.ts
index e65858985..162c57439 100644
--- a/shared/src/bundles/users/users.ts
+++ b/shared/src/bundles/users/users.ts
@@ -2,7 +2,11 @@ export { UsersApiPath, UserValidationMessage } from './enums/enums.js';
 export {
     type UserGetAllItemResponseDto,
     type UserGetAllResponseDto,
+    type UserSignInRequestDto,
     type UserSignUpRequestDto,
     type UserSignUpResponseDto,
 } from './types/types.js';
-export { userSignUp as userSignUpValidationSchema } from './validation-schemas/validation-schemas.js';
+export {
+    userSignIn as userSignInValidationSchema,
+    userSignUp as userSignUpValidationSchema,
+} from './validation-schemas/validation-schemas.js';
diff --git a/shared/src/bundles/users/validation-schemas/user-sign-in.validation-schema.ts b/shared/src/bundles/users/validation-schemas/user-sign-in.validation-schema.ts
new file mode 100644
index 000000000..100cb3dad
--- /dev/null
+++ b/shared/src/bundles/users/validation-schemas/user-sign-in.validation-schema.ts
@@ -0,0 +1,36 @@
+import { z } from 'zod';
+
+import { UserValidationMessage, UserValidationRule } from '../enums/enums.js';
+
+type UserSignInRequestValidationDto = {
+    email: z.ZodString;
+    password: z.ZodString;
+};
+
+const userSignIn = z
+    .object<UserSignInRequestValidationDto>({
+        email: z
+            .string({ required_error: UserValidationMessage.FIELD_REQUIRE })
+            .trim()
+            .min(UserValidationRule.EMAIL_MINIMUM_LENGTH, {
+                message: UserValidationMessage.EMAIL_INVALID,
+            })
+            .max(UserValidationRule.EMAIL_MAXIMUM_LENGTH, {
+                message: UserValidationMessage.EMAIL_INVALID,
+            })
+            .email({
+                message: UserValidationMessage.EMAIL_INVALID,
+            }),
+        password: z
+            .string({ required_error: UserValidationMessage.FIELD_REQUIRE })
+            .trim()
+            .min(UserValidationRule.PASSWORD_MINIMUM_LENGTH, {
+                message: UserValidationMessage.PASSWORD_LENGTH,
+            })
+            .max(UserValidationRule.PASSWORD_MAXIMUM_LENGTH, {
+                message: UserValidationMessage.PASSWORD_LENGTH,
+            }),
+    })
+    .required();
+
+export { userSignIn };
diff --git a/shared/src/bundles/users/validation-schemas/validation-schemas.ts b/shared/src/bundles/users/validation-schemas/validation-schemas.ts
index cb1c2ad60..f6c85f13c 100644
--- a/shared/src/bundles/users/validation-schemas/validation-schemas.ts
+++ b/shared/src/bundles/users/validation-schemas/validation-schemas.ts
@@ -1 +1,2 @@
+export { userSignIn } from './user-sign-in.validation-schema.js';
 export { userSignUp } from './user-sign-up.validation-schema.js';
diff --git a/shared/src/index.ts b/shared/src/index.ts
index df887038b..a0f2d2c57 100644
--- a/shared/src/index.ts
+++ b/shared/src/index.ts
@@ -2,9 +2,11 @@ export { AuthApiPath } from './bundles/auth/auth.js';
 export {
     type UserGetAllItemResponseDto,
     type UserGetAllResponseDto,
+    type UserSignInRequestDto,
     type UserSignUpRequestDto,
     type UserSignUpResponseDto,
     UsersApiPath,
+    userSignInValidationSchema,
     userSignUpValidationSchema,
 } from './bundles/users/users.js';
 export {

From 9ecc8efbd9c75db7ce9c59e4049b9e2e4c5a593f Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Sun, 18 Aug 2024 15:26:32 +0300
Subject: [PATCH 13/55] OV-1: + button customization

---
 .../src/framework/theme/styles/components.styles.ts    | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/src/framework/theme/styles/components.styles.ts b/frontend/src/framework/theme/styles/components.styles.ts
index cb0d05804..a64bd5171 100644
--- a/frontend/src/framework/theme/styles/components.styles.ts
+++ b/frontend/src/framework/theme/styles/components.styles.ts
@@ -80,6 +80,16 @@ const components = {
     },
     Button: {
         variants: {
+            solid: {
+                color: 'white',
+                bgColor: 'brand.secondary.300',
+                _hover: {
+                    bg: 'brand.secondary.600',
+                    _disabled: {
+                        bg: 'brand.secondary.600',
+                    },
+                },
+            },
             ghostIcon: {
                 color: 'white',
                 _hover: {

From e7e9112f88ae169148cb9272a21bcedb04f9c680 Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Sun, 18 Aug 2024 15:51:16 +0300
Subject: [PATCH 14/55] OV-1: * signin form

---
 .../common/password-input/password-input.tsx  | 10 ++-
 .../components/sign-in-form/sign-in-form.tsx  | 64 ++++++++++++++++---
 .../common/components/button/button.tsx       | 11 +++-
 3 files changed, 70 insertions(+), 15 deletions(-)

diff --git a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
index a87a0e65b..2a2252066 100644
--- a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
+++ b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
@@ -8,7 +8,11 @@ import {
 } from '~/bundles/common/components/components.js';
 import { useCallback, useState } from '~/bundles/common/hooks/hooks.js';
 
-const PasswordInput: React.FC = () => {
+type Properties = {
+    hasError: boolean;
+};
+
+const PasswordInput: React.FC<Properties> = ({ hasError }) => {
     const [showPassword, setShowPassword] = useState<boolean>(false);
 
     const handlePasswordIconClick = useCallback((): void => {
@@ -16,14 +20,14 @@ const PasswordInput: React.FC = () => {
     }, []);
 
     return (
-        <InputGroup>
+        <InputGroup size="md">
             <Input
                 type={showPassword ? 'text' : 'password'}
                 label="Password"
                 placeholder="••••••••"
                 name="password"
             />
-            <InputRightElement top="unset" bottom={0}>
+            <InputRightElement top="unset" bottom={hasError ? '1.5rem' : 0}>
                 <IconButton
                     aria-label={
                         showPassword ? 'Hide password' : 'Show password'
diff --git a/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx b/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
index bbcad3139..98507b5f8 100644
--- a/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
+++ b/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
@@ -1,17 +1,61 @@
-import { Button, Heading } from '~/bundles/common/components/components.js';
+import { PasswordInput } from '~/bundles/auth/components/common/components.js';
+import {
+    Box,
+    Button,
+    FormProvider,
+    Heading,
+    Input,
+    Link,
+    Text,
+    VStack,
+} from '~/bundles/common/components/components.js';
+import { AppRoute } from '~/bundles/common/enums/enums.js';
+import { useAppForm } from '~/bundles/common/hooks/hooks.js';
+import {
+    type UserSignInRequestDto,
+    userSignInValidationSchema,
+} from '~/bundles/users/users.js';
+
+import { DEFAULT_SIGN_IN_PAYLOAD } from './constants/constants.js';
 
 type Properties = {
-    onSubmit: () => void;
+    onSubmit: (payload: UserSignInRequestDto) => void;
 };
 
-const SignInForm: React.FC<Properties> = () => (
-    <>
-        <Heading as="h1">Sign In</Heading>
+const SignInForm: React.FC<Properties> = ({ onSubmit }) => {
+    const form = useAppForm<UserSignInRequestDto>({
+        initialValues: DEFAULT_SIGN_IN_PAYLOAD,
+        validationSchema: userSignInValidationSchema,
+        onSubmit,
+    });
+
+    const { handleSubmit, errors } = form;
 
-        <form>
-            <Button label="Sign in" />
-        </form>
-    </>
-);
+    return (
+        <FormProvider value={form}>
+            <Box w="55%" color="white">
+                <Heading as="h1" color="white">
+                    Sign In
+                </Heading>
+                <Text>
+                    Don’t have an account?{' '}
+                    <Link to={AppRoute.SIGN_UP}>Go to registration</Link>
+                </Text>
+                <form onSubmit={handleSubmit}>
+                    <VStack spacing={4} align="flex-start">
+                        <Input
+                            type="text"
+                            label="Email"
+                            placeholder="user@gmail.com"
+                            name="email"
+                        />
+                        <PasswordInput hasError={Boolean(errors.password)} />
+                        <Button type="submit" label="Sign in" size="lg" />
+                    </VStack>
+                </form>
+            </Box>
+        </FormProvider>
+    );
+};
 
 export { SignInForm };
diff --git a/frontend/src/bundles/common/components/button/button.tsx b/frontend/src/bundles/common/components/button/button.tsx
index fa9006438..dc5e39746 100644
--- a/frontend/src/bundles/common/components/button/button.tsx
+++ b/frontend/src/bundles/common/components/button/button.tsx
@@ -3,10 +3,17 @@ import { Button as LibraryButton } from '@chakra-ui/react';
 type Properties = {
     label: string;
     type?: 'button' | 'submit';
+    size?: 'md' | 'lg';
+    isDisabled?: boolean;
 };
 
-const Button: React.FC<Properties> = ({ type = 'button', label }) => (
-    <LibraryButton type={type} width="full">
+const Button: React.FC<Properties> = ({
+    type = 'button',
+    label,
+    size = 'md',
+    isDisabled = false,
+}) => (
+    <LibraryButton type={type} width="full" size={size} isDisabled={isDisabled}>
         {label}
     </LibraryButton>
 );

From a25efdb002985a8fc5f596112e5363bcd26404b7 Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Sun, 18 Aug 2024 16:25:56 +0300
Subject: [PATCH 15/55] OV-1: + customize common link

---
 .../components/sign-in-form/sign-in-form.tsx  | 10 ++++---
 .../bundles/common/components/link/link.tsx   |  8 ++++--
 .../theme/styles/components.styles.ts         | 26 ++++++++++++++++---
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx b/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
index 98507b5f8..1571e8fd3 100644
--- a/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
+++ b/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
@@ -34,15 +34,17 @@ const SignInForm: React.FC<Properties> = ({ onSubmit }) => {
     return (
         <FormProvider value={form}>
             <Box w="55%" color="white">
-                <Heading as="h1" color="white">
+                <Heading as="h1" color="white" mb="0.4rem">
                     Sign In
                 </Heading>
-                <Text>
+                <Text mb="1.5rem">
                     Don’t have an account?{' '}
-                    <Link to={AppRoute.SIGN_UP}>Go to registration</Link>
+                    <Link to={AppRoute.SIGN_UP} variant="secondary">
+                        Go to registration
+                    </Link>
                 </Text>
                 <form onSubmit={handleSubmit}>
-                    <VStack spacing={4} align="flex-start">
+                    <VStack spacing="1.2rem" align="flex-start">
                         <Input
                             type="text"
                             label="Email"
diff --git a/frontend/src/bundles/common/components/link/link.tsx b/frontend/src/bundles/common/components/link/link.tsx
index 222ce9fd2..593734682 100644
--- a/frontend/src/bundles/common/components/link/link.tsx
+++ b/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,13 @@ 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 };
diff --git a/frontend/src/framework/theme/styles/components.styles.ts b/frontend/src/framework/theme/styles/components.styles.ts
index a64bd5171..53dc79434 100644
--- a/frontend/src/framework/theme/styles/components.styles.ts
+++ b/frontend/src/framework/theme/styles/components.styles.ts
@@ -82,22 +82,40 @@ const components = {
         variants: {
             solid: {
                 color: 'white',
-                bgColor: 'brand.secondary.300',
+                bgColor: colors.brand.secondary[300],
                 _hover: {
-                    bg: 'brand.secondary.600',
+                    bg: colors.brand.secondary[600],
                     _disabled: {
-                        bg: 'brand.secondary.600',
+                        bg: colors.brand.secondary[600],
                     },
                 },
             },
             ghostIcon: {
                 color: 'white',
                 _hover: {
-                    color: 'brand.secondary.300',
+                    color: colors.brand.secondary[300],
                 },
             },
         },
     },
+    Link: {
+        variants: {
+            primary: {
+                color: 'text.default',
+            },
+            secondary: {
+                color: colors.brand.secondary[300],
+                _hover: {
+                    color: colors.brand.secondary[600],
+                },
+            },
+        },
+        baseStyle: {
+            _hover: {
+                textDecoration: 'none',
+            },
+        },
+    },
 };
 
 export { components };

From 8a576dc4cd34fba2b4491e21684c52af052cc7e3 Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Sun, 18 Aug 2024 16:46:24 +0300
Subject: [PATCH 16/55] OV-1: * signin button margin

---
 .../auth/components/sign-in-form/sign-in-form.tsx |  7 ++++++-
 .../bundles/common/components/button/button.tsx   | 15 +++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx b/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
index 1571e8fd3..baac3b3d8 100644
--- a/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
+++ b/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
@@ -52,7 +52,12 @@ const SignInForm: React.FC<Properties> = ({ onSubmit }) => {
                             name="email"
                         />
                         <PasswordInput hasError={Boolean(errors.password)} />
-                        <Button type="submit" label="Sign in" size="lg" />
+                        <Button
+                            type="submit"
+                            label="Sign in"
+                            size="lg"
+                            sx={{ mt: '1rem' }}
+                        />
                     </VStack>
                 </form>
             </Box>
diff --git a/frontend/src/bundles/common/components/button/button.tsx b/frontend/src/bundles/common/components/button/button.tsx
index dc5e39746..5a28c731c 100644
--- a/frontend/src/bundles/common/components/button/button.tsx
+++ b/frontend/src/bundles/common/components/button/button.tsx
@@ -1,10 +1,14 @@
-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> = ({
@@ -12,8 +16,15 @@ const Button: React.FC<Properties> = ({
     label,
     size = 'md',
     isDisabled = false,
+    sx = {},
 }) => (
-    <LibraryButton type={type} width="full" size={size} isDisabled={isDisabled}>
+    <LibraryButton
+        type={type}
+        width="full"
+        size={size}
+        isDisabled={isDisabled}
+        sx={sx}
+    >
         {label}
     </LibraryButton>
 );

From 10b0d96a947582b2b10018bc1cc168be0cb2706a Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Sun, 18 Aug 2024 23:21:17 +0300
Subject: [PATCH 17/55] OV-1: + sign-in action flow

---
 frontend/src/bundles/auth/auth-api.ts          | 18 ++++++++++++++++++
 frontend/src/bundles/auth/pages/auth.tsx       | 14 ++++++++++----
 frontend/src/bundles/auth/store/actions.ts     | 13 ++++++++++++-
 frontend/src/bundles/auth/store/auth.ts        |  3 ++-
 frontend/src/bundles/auth/store/slice.ts       | 16 +++++++++++++++-
 frontend/src/bundles/users/types/types.ts      |  1 +
 frontend/src/bundles/users/users.ts            |  1 +
 .../bundles/auth/enums/auth-api-path.enum.ts   |  1 +
 shared/src/bundles/users/types/types.ts        |  1 +
 .../types/user-sign-in-response-dto.type.ts    |  6 ++++++
 shared/src/bundles/users/users.ts              |  1 +
 shared/src/index.ts                            |  1 +
 12 files changed, 69 insertions(+), 7 deletions(-)
 create mode 100644 shared/src/bundles/users/types/user-sign-in-response-dto.type.ts

diff --git a/frontend/src/bundles/auth/auth-api.ts b/frontend/src/bundles/auth/auth-api.ts
index a81074fa4..53c946f10 100644
--- a/frontend/src/bundles/auth/auth-api.ts
+++ b/frontend/src/bundles/auth/auth-api.ts
@@ -1,5 +1,7 @@
 import { ApiPath, ContentType } from '~/bundles/common/enums/enums.js';
 import {
+    type UserSignInRequestDto,
+    type UserSignInResponseDto,
     type UserSignUpRequestDto,
     type UserSignUpResponseDto,
 } from '~/bundles/users/users.js';
@@ -20,6 +22,22 @@ class AuthApi extends BaseHttpApi {
         super({ path: ApiPath.AUTH, baseUrl, http, storage });
     }
 
+    public async signIn(
+        payload: UserSignInRequestDto,
+    ): Promise<UserSignInResponseDto> {
+        const response = await this.load(
+            this.getFullEndpoint(AuthApiPath.SIGN_IN, {}),
+            {
+                method: 'POST',
+                contentType: ContentType.JSON,
+                payload: JSON.stringify(payload),
+                hasAuth: false,
+            },
+        );
+
+        return await response.json<UserSignInResponseDto>();
+    }
+
     public async signUp(
         payload: UserSignUpRequestDto,
     ): Promise<UserSignUpResponseDto> {
diff --git a/frontend/src/bundles/auth/pages/auth.tsx b/frontend/src/bundles/auth/pages/auth.tsx
index 6592265c3..2db1b12ca 100644
--- a/frontend/src/bundles/auth/pages/auth.tsx
+++ b/frontend/src/bundles/auth/pages/auth.tsx
@@ -5,7 +5,10 @@ import {
     useCallback,
     useLocation,
 } from '~/bundles/common/hooks/hooks.js';
-import { type UserSignUpRequestDto } from '~/bundles/users/users.js';
+import {
+    type UserSignInRequestDto,
+    type UserSignUpRequestDto,
+} from '~/bundles/users/users.js';
 
 import { SignInForm, SignUpForm } from '../components/components.js';
 import { actions as authActions } from '../store/auth.js';
@@ -17,9 +20,12 @@ const Auth: React.FC = () => {
     }));
     const { pathname } = useLocation();
 
-    const handleSignInSubmit = useCallback((): void => {
-        // handle sign in
-    }, []);
+    const handleSignInSubmit = useCallback(
+        (payload: UserSignInRequestDto): void => {
+            void dispatch(authActions.signIn(payload));
+        },
+        [dispatch],
+    );
 
     const handleSignUpSubmit = useCallback(
         (payload: UserSignUpRequestDto): void => {
diff --git a/frontend/src/bundles/auth/store/actions.ts b/frontend/src/bundles/auth/store/actions.ts
index 267bbf82d..572207854 100644
--- a/frontend/src/bundles/auth/store/actions.ts
+++ b/frontend/src/bundles/auth/store/actions.ts
@@ -2,12 +2,23 @@ import { createAsyncThunk } from '@reduxjs/toolkit';
 
 import { type AsyncThunkConfig } from '~/bundles/common/types/types.js';
 import {
+    type UserSignInRequestDto,
     type UserSignUpRequestDto,
     type UserSignUpResponseDto,
 } from '~/bundles/users/users.js';
 
 import { name as sliceName } from './slice.js';
 
+const signIn = createAsyncThunk<
+    UserSignUpResponseDto,
+    UserSignInRequestDto,
+    AsyncThunkConfig
+>(`${sliceName}/sign-in`, (signInPayload, { extra }) => {
+    const { authApi } = extra;
+
+    return authApi.signIn(signInPayload);
+});
+
 const signUp = createAsyncThunk<
     UserSignUpResponseDto,
     UserSignUpRequestDto,
@@ -18,4 +29,4 @@ const signUp = createAsyncThunk<
     return authApi.signUp(registerPayload);
 });
 
-export { signUp };
+export { signIn, signUp };
diff --git a/frontend/src/bundles/auth/store/auth.ts b/frontend/src/bundles/auth/store/auth.ts
index b99cc3038..821d63396 100644
--- a/frontend/src/bundles/auth/store/auth.ts
+++ b/frontend/src/bundles/auth/store/auth.ts
@@ -1,8 +1,9 @@
-import { signUp } from './actions.js';
+import { signIn, signUp } from './actions.js';
 import { actions } from './slice.js';
 
 const allActions = {
     ...actions,
+    signIn,
     signUp,
 };
 
diff --git a/frontend/src/bundles/auth/store/slice.ts b/frontend/src/bundles/auth/store/slice.ts
index 746d4b107..52cf77b51 100644
--- a/frontend/src/bundles/auth/store/slice.ts
+++ b/frontend/src/bundles/auth/store/slice.ts
@@ -2,15 +2,18 @@ import { createSlice } from '@reduxjs/toolkit';
 
 import { DataStatus } from '~/bundles/common/enums/enums.js';
 import { type ValueOf } from '~/bundles/common/types/types.js';
+import { type UserSignInResponseDto } from '~/bundles/users/users.js';
 
-import { signUp } from './actions.js';
+import { signIn, signUp } from './actions.js';
 
 type State = {
     dataStatus: ValueOf<typeof DataStatus>;
+    user: UserSignInResponseDto | null;
 };
 
 const initialState: State = {
     dataStatus: DataStatus.IDLE,
+    user: null,
 };
 
 const { reducer, actions, name } = createSlice({
@@ -18,6 +21,17 @@ const { reducer, actions, name } = createSlice({
     name: 'auth',
     reducers: {},
     extraReducers(builder) {
+        builder.addCase(signIn.pending, (state) => {
+            state.dataStatus = DataStatus.PENDING;
+        });
+        builder.addCase(signIn.fulfilled, (state, action) => {
+            state.user = action.payload;
+            state.dataStatus = DataStatus.FULFILLED;
+        });
+        builder.addCase(signIn.rejected, (state) => {
+            state.user = null;
+            state.dataStatus = DataStatus.REJECTED;
+        });
         builder.addCase(signUp.pending, (state) => {
             state.dataStatus = DataStatus.PENDING;
         });
diff --git a/frontend/src/bundles/users/types/types.ts b/frontend/src/bundles/users/types/types.ts
index 0a38e94bf..66268a76e 100644
--- a/frontend/src/bundles/users/types/types.ts
+++ b/frontend/src/bundles/users/types/types.ts
@@ -2,6 +2,7 @@ export {
     type UserGetAllItemResponseDto,
     type UserGetAllResponseDto,
     type UserSignInRequestDto,
+    type UserSignInResponseDto,
     type UserSignUpRequestDto,
     type UserSignUpResponseDto,
 } from 'shared';
diff --git a/frontend/src/bundles/users/users.ts b/frontend/src/bundles/users/users.ts
index 59ffe28cb..1c0f3bf9d 100644
--- a/frontend/src/bundles/users/users.ts
+++ b/frontend/src/bundles/users/users.ts
@@ -15,6 +15,7 @@ export {
     type UserGetAllItemResponseDto,
     type UserGetAllResponseDto,
     type UserSignInRequestDto,
+    type UserSignInResponseDto,
     type UserSignUpRequestDto,
     type UserSignUpResponseDto,
 } from './types/types.js';
diff --git a/shared/src/bundles/auth/enums/auth-api-path.enum.ts b/shared/src/bundles/auth/enums/auth-api-path.enum.ts
index 5833c6684..79d9340e1 100644
--- a/shared/src/bundles/auth/enums/auth-api-path.enum.ts
+++ b/shared/src/bundles/auth/enums/auth-api-path.enum.ts
@@ -1,5 +1,6 @@
 const AuthApiPath = {
     ROOT: '/',
+    SIGN_IN: '/sign-in',
     SIGN_UP: '/sign-up',
 } as const;
 
diff --git a/shared/src/bundles/users/types/types.ts b/shared/src/bundles/users/types/types.ts
index f6fd8caa2..36cfa4fdb 100644
--- a/shared/src/bundles/users/types/types.ts
+++ b/shared/src/bundles/users/types/types.ts
@@ -1,5 +1,6 @@
 export { type UserGetAllItemResponseDto } from './user-get-all-item-response-dto.type.js';
 export { type UserGetAllResponseDto } from './user-get-all-response-dto.type.js';
 export { type UserSignInRequestDto } from './user-sign-in-request-dto.type.js';
+export { type UserSignInResponseDto } from './user-sign-in-response-dto.type.js';
 export { type UserSignUpRequestDto } from './user-sign-up-request-dto.type.js';
 export { type UserSignUpResponseDto } from './user-sign-up-response-dto.type.js';
diff --git a/shared/src/bundles/users/types/user-sign-in-response-dto.type.ts b/shared/src/bundles/users/types/user-sign-in-response-dto.type.ts
new file mode 100644
index 000000000..afb72b351
--- /dev/null
+++ b/shared/src/bundles/users/types/user-sign-in-response-dto.type.ts
@@ -0,0 +1,6 @@
+type UserSignInResponseDto = {
+    id: number;
+    email: string;
+};
+
+export { type UserSignInResponseDto };
diff --git a/shared/src/bundles/users/users.ts b/shared/src/bundles/users/users.ts
index 162c57439..5a2147adc 100644
--- a/shared/src/bundles/users/users.ts
+++ b/shared/src/bundles/users/users.ts
@@ -3,6 +3,7 @@ export {
     type UserGetAllItemResponseDto,
     type UserGetAllResponseDto,
     type UserSignInRequestDto,
+    type UserSignInResponseDto,
     type UserSignUpRequestDto,
     type UserSignUpResponseDto,
 } from './types/types.js';
diff --git a/shared/src/index.ts b/shared/src/index.ts
index a0f2d2c57..70edb82b5 100644
--- a/shared/src/index.ts
+++ b/shared/src/index.ts
@@ -3,6 +3,7 @@ export {
     type UserGetAllItemResponseDto,
     type UserGetAllResponseDto,
     type UserSignInRequestDto,
+    type UserSignInResponseDto,
     type UserSignUpRequestDto,
     type UserSignUpResponseDto,
     UsersApiPath,

From 5906b265c4c03437aff35878cf3924463fa74c8d Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Mon, 19 Aug 2024 00:12:13 +0300
Subject: [PATCH 18/55] OV-1: + customize input

---
 .../theme/styles/components.styles.ts         | 38 -------------------
 1 file changed, 38 deletions(-)

diff --git a/frontend/src/framework/theme/styles/components.styles.ts b/frontend/src/framework/theme/styles/components.styles.ts
index 53dc79434..417d40ef9 100644
--- a/frontend/src/framework/theme/styles/components.styles.ts
+++ b/frontend/src/framework/theme/styles/components.styles.ts
@@ -78,44 +78,6 @@ const components = {
             },
         },
     },
-    Button: {
-        variants: {
-            solid: {
-                color: 'white',
-                bgColor: colors.brand.secondary[300],
-                _hover: {
-                    bg: colors.brand.secondary[600],
-                    _disabled: {
-                        bg: colors.brand.secondary[600],
-                    },
-                },
-            },
-            ghostIcon: {
-                color: 'white',
-                _hover: {
-                    color: colors.brand.secondary[300],
-                },
-            },
-        },
-    },
-    Link: {
-        variants: {
-            primary: {
-                color: 'text.default',
-            },
-            secondary: {
-                color: colors.brand.secondary[300],
-                _hover: {
-                    color: colors.brand.secondary[600],
-                },
-            },
-        },
-        baseStyle: {
-            _hover: {
-                textDecoration: 'none',
-            },
-        },
-    },
 };
 
 export { components };

From 90ec5868b1d24413b71fe0a6c2691a2b476a5dae Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Mon, 19 Aug 2024 00:14:51 +0300
Subject: [PATCH 19/55] OV-1: + grid for auth page

---
 frontend/src/bundles/auth/pages/auth.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/bundles/auth/pages/auth.tsx b/frontend/src/bundles/auth/pages/auth.tsx
index 2db1b12ca..54e09e59d 100644
--- a/frontend/src/bundles/auth/pages/auth.tsx
+++ b/frontend/src/bundles/auth/pages/auth.tsx
@@ -1,3 +1,4 @@
+import { Center, SimpleGrid } from '~/bundles/common/components/components.js';
 import { AppRoute } from '~/bundles/common/enums/enums.js';
 import {
     useAppDispatch,
@@ -50,7 +51,10 @@ const Auth: React.FC = () => {
     return (
         <>
             state: {dataStatus}
-            {getScreen(pathname)}
+            <SimpleGrid columns={2}>
+                <Center bgColor="background.600">{getScreen(pathname)}</Center>
+                <Center bgColor="background.900">LOGO</Center>
+            </SimpleGrid>
         </>
     );
 };

From fb30a5ddd70ca517af45f3a230d54ff395f1ccaf Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Mon, 19 Aug 2024 11:18:37 +0300
Subject: [PATCH 20/55] OV-1: * signin action types

---
 frontend/src/bundles/auth/store/actions.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/bundles/auth/store/actions.ts b/frontend/src/bundles/auth/store/actions.ts
index 572207854..75f929b7f 100644
--- a/frontend/src/bundles/auth/store/actions.ts
+++ b/frontend/src/bundles/auth/store/actions.ts
@@ -3,6 +3,7 @@ import { createAsyncThunk } from '@reduxjs/toolkit';
 import { type AsyncThunkConfig } from '~/bundles/common/types/types.js';
 import {
     type UserSignInRequestDto,
+    type UserSignInResponseDto,
     type UserSignUpRequestDto,
     type UserSignUpResponseDto,
 } from '~/bundles/users/users.js';
@@ -10,7 +11,7 @@ import {
 import { name as sliceName } from './slice.js';
 
 const signIn = createAsyncThunk<
-    UserSignUpResponseDto,
+    UserSignInResponseDto,
     UserSignInRequestDto,
     AsyncThunkConfig
 >(`${sliceName}/sign-in`, (signInPayload, { extra }) => {

From f43fdabbcad488594f661b593bb3ed195e44b3c1 Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Mon, 19 Aug 2024 13:01:20 +0300
Subject: [PATCH 21/55] OV-1: - mock data

---
 frontend/src/app/app.tsx                      | 57 +++----------------
 .../components/sign-in-form/sign-in-form.tsx  |  2 +
 frontend/src/bundles/auth/pages/auth.tsx      | 26 ++++++---
 3 files changed, 27 insertions(+), 58 deletions(-)

diff --git a/frontend/src/app/app.tsx b/frontend/src/app/app.tsx
index e1f671b35..671be91a9 100644
--- a/frontend/src/app/app.tsx
+++ b/frontend/src/app/app.tsx
@@ -1,61 +1,18 @@
-import reactLogo from '~/assets/img/react.svg';
-import { Link, RouterOutlet } from '~/bundles/common/components/components.js';
+import { RouterOutlet } from '~/bundles/common/components/components.js';
 import { AppRoute } from '~/bundles/common/enums/enums.js';
-import {
-    useAppDispatch,
-    useAppSelector,
-    useEffect,
-    useLocation,
-} from '~/bundles/common/hooks/hooks.js';
-import { actions as userActions } from '~/bundles/users/store/users.js';
+import { useLocation } from '~/bundles/common/hooks/hooks.js';
 
 const App: React.FC = () => {
     const { pathname } = useLocation();
-    const dispatch = useAppDispatch();
-    const { users, dataStatus } = useAppSelector(({ users }) => ({
-        users: users.users,
-        dataStatus: users.dataStatus,
-    }));
 
-    const isRoot = pathname === AppRoute.ROOT;
-
-    useEffect(() => {
-        if (isRoot) {
-            void dispatch(userActions.loadAll());
-        }
-    }, [isRoot, dispatch]);
+    const isAuth =
+        pathname === AppRoute.SIGN_IN || pathname === AppRoute.SIGN_UP;
 
     return (
         <>
-            <img src={reactLogo} width="30" alt="logo" />
-
-            <ul>
-                <li>
-                    <Link to={AppRoute.ROOT}>Root</Link>
-                </li>
-                <li>
-                    <Link to={AppRoute.SIGN_IN}>Sign in</Link>
-                </li>
-                <li>
-                    <Link to={AppRoute.SIGN_UP}>Sign up</Link>
-                </li>
-            </ul>
-            <p>Current path: {pathname}</p>
-
-            <div>
-                <RouterOutlet />
-            </div>
-            {isRoot && (
-                <>
-                    <h2>Users:</h2>
-                    <h3>Status: {dataStatus}</h3>
-                    <ul>
-                        {users.map((it) => (
-                            <li key={it.id}>{it.email}</li>
-                        ))}
-                    </ul>
-                </>
-            )}
+            {/* TODO Header */}
+            {!isAuth && 'Header'}
+            <RouterOutlet />
         </>
     );
 };
diff --git a/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx b/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
index baac3b3d8..0febbe718 100644
--- a/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
+++ b/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
@@ -34,6 +34,8 @@ const SignInForm: React.FC<Properties> = ({ onSubmit }) => {
     return (
         <FormProvider value={form}>
             <Box w="55%" color="white">
+                {/* TODO: Add logo */}
+                <h2 style={{ marginBottom: '50px' }}>LOGO</h2>
                 <Heading as="h1" color="white" mb="0.4rem">
                     Sign In
                 </Heading>
diff --git a/frontend/src/bundles/auth/pages/auth.tsx b/frontend/src/bundles/auth/pages/auth.tsx
index 54e09e59d..26f0ef42e 100644
--- a/frontend/src/bundles/auth/pages/auth.tsx
+++ b/frontend/src/bundles/auth/pages/auth.tsx
@@ -1,5 +1,7 @@
+import { Navigate } from 'react-router-dom';
+
 import { Center, SimpleGrid } from '~/bundles/common/components/components.js';
-import { AppRoute } from '~/bundles/common/enums/enums.js';
+import { AppRoute, DataStatus } from '~/bundles/common/enums/enums.js';
 import {
     useAppDispatch,
     useAppSelector,
@@ -35,6 +37,10 @@ const Auth: React.FC = () => {
         [dispatch],
     );
 
+    if (dataStatus === DataStatus.FULFILLED) {
+        return <Navigate to={AppRoute.ROOT} replace />;
+    }
+
     const getScreen = (screen: string): React.ReactNode => {
         switch (screen) {
             case AppRoute.SIGN_IN: {
@@ -49,13 +55,17 @@ const Auth: React.FC = () => {
     };
 
     return (
-        <>
-            state: {dataStatus}
-            <SimpleGrid columns={2}>
-                <Center bgColor="background.600">{getScreen(pathname)}</Center>
-                <Center bgColor="background.900">LOGO</Center>
-            </SimpleGrid>
-        </>
+        <SimpleGrid columns={2} height="100vh">
+            {/* TODO: Replace with valid loader */}
+            {dataStatus === DataStatus.PENDING && (
+                <p style={{ position: 'absolute', top: 0, color: 'white' }}>
+                    Loading...
+                </p>
+            )}
+            <Center bgColor="background.600">{getScreen(pathname)}</Center>
+            {/* TODO: Add logo */}
+            <Center bgColor="background.900">LOGO</Center>
+        </SimpleGrid>
     );
 };
 

From aaf21196c41b594210f44178255fb335fb33c58a Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Mon, 19 Aug 2024 15:03:15 +0300
Subject: [PATCH 22/55] OV-1: + form-header, form-error

---
 .../auth/components/common/components.ts      |  2 +
 .../common/form-error/form-error.tsx          | 19 ++++++
 .../common/form-header/form-header.tsx        | 21 +++++++
 .../components/sign-in-form/sign-in-form.tsx  | 61 +++++++++++++------
 frontend/src/bundles/auth/store/slice.ts      | 11 ++--
 .../bundles/common/components/components.ts   |  2 +
 frontend/src/bundles/common/enums/enums.ts    |  8 ++-
 .../enums/user-validation-message.enum.ts     |  1 +
 shared/src/index.ts                           |  1 +
 9 files changed, 104 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/bundles/auth/components/common/form-error/form-error.tsx
 create mode 100644 frontend/src/bundles/auth/components/common/form-header/form-header.tsx

diff --git a/frontend/src/bundles/auth/components/common/components.ts b/frontend/src/bundles/auth/components/common/components.ts
index b5b4684f7..22726d9a9 100644
--- a/frontend/src/bundles/auth/components/common/components.ts
+++ b/frontend/src/bundles/auth/components/common/components.ts
@@ -1 +1,3 @@
+export { FormError } from './form-error/form-error.js';
+export { FormHeader } from './form-header/form-header.js';
 export { PasswordInput } from './password-input/password-input.js';
diff --git a/frontend/src/bundles/auth/components/common/form-error/form-error.tsx b/frontend/src/bundles/auth/components/common/form-error/form-error.tsx
new file mode 100644
index 000000000..965799129
--- /dev/null
+++ b/frontend/src/bundles/auth/components/common/form-error/form-error.tsx
@@ -0,0 +1,19 @@
+import {
+    FormControl,
+    FormErrorMessage,
+} from '~/bundles/common/components/components.js';
+
+type Properties = {
+    isVisible: boolean;
+    message: string;
+};
+
+const FormError: React.FC<Properties> = ({ isVisible, message }) => {
+    return (
+        <FormControl isInvalid={isVisible}>
+            <FormErrorMessage>{message}</FormErrorMessage>
+        </FormControl>
+    );
+};
+
+export { FormError };
diff --git a/frontend/src/bundles/auth/components/common/form-header/form-header.tsx b/frontend/src/bundles/auth/components/common/form-header/form-header.tsx
new file mode 100644
index 000000000..ef396cabb
--- /dev/null
+++ b/frontend/src/bundles/auth/components/common/form-header/form-header.tsx
@@ -0,0 +1,21 @@
+import { Heading, Text } from '~/bundles/common/components/components.js';
+
+type Properties = {
+    headerText: string;
+    subheader: React.ReactNode;
+};
+
+const FormHeader: React.FC<Properties> = ({ headerText, subheader }) => {
+    return (
+        <>
+            {/* TODO: Add logo */}
+            <h2 style={{ marginBottom: '50px' }}>LOGO</h2>
+            <Heading as="h1" color="white" mb="0.4rem">
+                {headerText}
+            </Heading>
+            <Text mb="1.5rem">{subheader}</Text>
+        </>
+    );
+};
+
+export { FormHeader };
diff --git a/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx b/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
index 0febbe718..ce2fe38db 100644
--- a/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
+++ b/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
@@ -1,16 +1,26 @@
-import { PasswordInput } from '~/bundles/auth/components/common/components.js';
+import {
+    FormError,
+    FormHeader,
+    PasswordInput,
+} from '~/bundles/auth/components/common/components.js';
 import {
     Box,
     Button,
     FormProvider,
-    Heading,
     Input,
     Link,
-    Text,
     VStack,
 } from '~/bundles/common/components/components.js';
-import { AppRoute } from '~/bundles/common/enums/enums.js';
-import { useAppForm } from '~/bundles/common/hooks/hooks.js';
+import {
+    AppRoute,
+    DataStatus,
+    UserValidationMessage,
+} from '~/bundles/common/enums/enums.js';
+import {
+    useAppForm,
+    useAppSelector,
+    useMemo,
+} from '~/bundles/common/hooks/hooks.js';
 import {
     type UserSignInRequestDto,
     userSignInValidationSchema,
@@ -23,28 +33,37 @@ type Properties = {
 };
 
 const SignInForm: React.FC<Properties> = ({ onSubmit }) => {
+    const { dataStatus, errorMessage } = useAppSelector(({ auth }) => ({
+        dataStatus: auth.dataStatus,
+        errorMessage: auth.errorMessage,
+    }));
     const form = useAppForm<UserSignInRequestDto>({
         initialValues: DEFAULT_SIGN_IN_PAYLOAD,
         validationSchema: userSignInValidationSchema,
         onSubmit,
     });
 
-    const { handleSubmit, errors } = form;
+    const { handleSubmit, errors, values } = form;
+
+    const isEmpty = useMemo(
+        () => Object.values(values).some((value) => value.trim().length === 0),
+        [values],
+    );
 
     return (
         <FormProvider value={form}>
             <Box w="55%" color="white">
-                {/* TODO: Add logo */}
-                <h2 style={{ marginBottom: '50px' }}>LOGO</h2>
-                <Heading as="h1" color="white" mb="0.4rem">
-                    Sign In
-                </Heading>
-                <Text mb="1.5rem">
-                    Don’t have an account?{' '}
-                    <Link to={AppRoute.SIGN_UP} variant="secondary">
-                        Go to registration
-                    </Link>
-                </Text>
+                <FormHeader
+                    headerText="Sign In"
+                    subheader={
+                        <>
+                            Don’t have an account?{' '}
+                            <Link to={AppRoute.SIGN_UP} variant="secondary">
+                                Go to registration
+                            </Link>
+                        </>
+                    }
+                />
                 <form onSubmit={handleSubmit}>
                     <VStack spacing="1.2rem" align="flex-start">
                         <Input
@@ -54,11 +73,19 @@ const SignInForm: React.FC<Properties> = ({ onSubmit }) => {
                             name="email"
                         />
                         <PasswordInput hasError={Boolean(errors.password)} />
+                        <FormError
+                            isVisible={dataStatus === DataStatus.REJECTED}
+                            message={
+                                errorMessage ||
+                                UserValidationMessage.INVALID_DATA
+                            }
+                        />
                         <Button
                             type="submit"
                             label="Sign in"
                             size="lg"
                             sx={{ mt: '1rem' }}
+                            isDisabled={isEmpty}
                         />
                     </VStack>
                 </form>
diff --git a/frontend/src/bundles/auth/store/slice.ts b/frontend/src/bundles/auth/store/slice.ts
index 52cf77b51..46b1a6fb8 100644
--- a/frontend/src/bundles/auth/store/slice.ts
+++ b/frontend/src/bundles/auth/store/slice.ts
@@ -8,12 +8,14 @@ import { signIn, signUp } from './actions.js';
 
 type State = {
     dataStatus: ValueOf<typeof DataStatus>;
-    user: UserSignInResponseDto | null;
+    user: UserSignInResponseDto | undefined;
+    errorMessage: string | undefined;
 };
 
 const initialState: State = {
     dataStatus: DataStatus.IDLE,
-    user: null,
+    user: undefined,
+    errorMessage: undefined,
 };
 
 const { reducer, actions, name } = createSlice({
@@ -28,8 +30,9 @@ const { reducer, actions, name } = createSlice({
             state.user = action.payload;
             state.dataStatus = DataStatus.FULFILLED;
         });
-        builder.addCase(signIn.rejected, (state) => {
-            state.user = null;
+        builder.addCase(signIn.rejected, (state, action) => {
+            state.user = undefined;
+            state.errorMessage = action.error.message;
             state.dataStatus = DataStatus.REJECTED;
         });
         builder.addCase(signUp.pending, (state) => {
diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts
index 9da09a971..ca51ed2c3 100644
--- a/frontend/src/bundles/common/components/components.ts
+++ b/frontend/src/bundles/common/components/components.ts
@@ -11,6 +11,8 @@ export {
     Circle,
     ChakraProvider as ComponentsProvider,
     Flex,
+    FormControl,
+    FormErrorMessage,
     Heading,
     IconButton,
     InputGroup,
diff --git a/frontend/src/bundles/common/enums/enums.ts b/frontend/src/bundles/common/enums/enums.ts
index 0e65d3c5b..ef77ebca3 100644
--- a/frontend/src/bundles/common/enums/enums.ts
+++ b/frontend/src/bundles/common/enums/enums.ts
@@ -1,3 +1,9 @@
 export { AppRoute } from './app-route.enum.js';
 export { DataStatus } from './data-status.enum.js';
-export { ApiPath, AppEnvironment, ContentType, ServerErrorType } from 'shared';
+export {
+    ApiPath,
+    AppEnvironment,
+    ContentType,
+    ServerErrorType,
+    UserValidationMessage,
+} from 'shared';
diff --git a/shared/src/bundles/users/enums/user-validation-message.enum.ts b/shared/src/bundles/users/enums/user-validation-message.enum.ts
index f369a8c1a..cf5ece5ac 100644
--- a/shared/src/bundles/users/enums/user-validation-message.enum.ts
+++ b/shared/src/bundles/users/enums/user-validation-message.enum.ts
@@ -4,6 +4,7 @@ const UserValidationMessage = {
     FIELD_REQUIRE: 'Please fill out this field',
     EMAIL_INVALID: 'Please enter a valid email',
     PASSWORD_LENGTH: 'Password must have from 6 to 12 characters',
+    INVALID_DATA: 'Incorrect email or password. Please try again.',
 } as const;
 
 export { UserValidationMessage };
diff --git a/shared/src/index.ts b/shared/src/index.ts
index 70edb82b5..d4b77ee0e 100644
--- a/shared/src/index.ts
+++ b/shared/src/index.ts
@@ -9,6 +9,7 @@ export {
     UsersApiPath,
     userSignInValidationSchema,
     userSignUpValidationSchema,
+    UserValidationMessage,
 } from './bundles/users/users.js';
 export {
     ApiPath,

From 69aa36ff6a88a76747d6d5e7c01e908c87edcaf3 Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Mon, 19 Aug 2024 15:15:57 +0300
Subject: [PATCH 23/55] OV-1: * password input padding

---
 .../auth/components/common/password-input/password-input.tsx   | 1 +
 frontend/src/bundles/common/components/input/input.tsx         | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
index 2a2252066..cbeaa387d 100644
--- a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
+++ b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
@@ -26,6 +26,7 @@ const PasswordInput: React.FC<Properties> = ({ hasError }) => {
                 label="Password"
                 placeholder="••••••••"
                 name="password"
+                icon="right"
             />
             <InputRightElement top="unset" bottom={hasError ? '1.5rem' : 0}>
                 <IconButton
diff --git a/frontend/src/bundles/common/components/input/input.tsx b/frontend/src/bundles/common/components/input/input.tsx
index 571c3fe72..ea10368ca 100644
--- a/frontend/src/bundles/common/components/input/input.tsx
+++ b/frontend/src/bundles/common/components/input/input.tsx
@@ -14,6 +14,7 @@ type Properties<T extends FormValues> = {
     label: string;
     name: FieldInputProps<T>['name'];
     placeholder?: string;
+    icon?: 'right' | 'none';
 };
 
 const Input = <T extends FormValues>({
@@ -21,6 +22,7 @@ const Input = <T extends FormValues>({
     label,
     name,
     placeholder = '',
+    icon = 'none',
 }: Properties<T>): JSX.Element => {
     const [field, meta] = useFormField({ name });
 
@@ -36,6 +38,7 @@ const Input = <T extends FormValues>({
                 type={type}
                 placeholder={placeholder}
                 error={error}
+                style={{ paddingRight: icon === 'right' ? '2.5rem' : 0 }}
                 as={LibraryInput}
             />
             <FormErrorMessage>{error}</FormErrorMessage>

From a3aac1308fd75aea1a8ac085d84fb64772fea89d Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Mon, 19 Aug 2024 23:35:20 +0300
Subject: [PATCH 24/55] OV-1: * fix comments

---
 .../components/common/form-header/form-header.tsx  |  4 ++--
 .../common/password-input/password-input.tsx       | 14 ++++++++------
 .../auth/components/sign-in-form/sign-in-form.tsx  | 12 ++++--------
 frontend/src/bundles/auth/store/slice.ts           | 11 ++++-------
 .../src/bundles/common/components/input/input.tsx  |  2 +-
 5 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/frontend/src/bundles/auth/components/common/form-header/form-header.tsx b/frontend/src/bundles/auth/components/common/form-header/form-header.tsx
index ef396cabb..cdda109d9 100644
--- a/frontend/src/bundles/auth/components/common/form-header/form-header.tsx
+++ b/frontend/src/bundles/auth/components/common/form-header/form-header.tsx
@@ -10,10 +10,10 @@ const FormHeader: React.FC<Properties> = ({ headerText, subheader }) => {
         <>
             {/* TODO: Add logo */}
             <h2 style={{ marginBottom: '50px' }}>LOGO</h2>
-            <Heading as="h1" color="white" mb="0.4rem">
+            <Heading as="h1" color="white" mb="6px">
                 {headerText}
             </Heading>
-            <Text mb="1.5rem">{subheader}</Text>
+            <Text mb="24px">{subheader}</Text>
         </>
     );
 };
diff --git a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
index cbeaa387d..798cd0675 100644
--- a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
+++ b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
@@ -13,27 +13,29 @@ type Properties = {
 };
 
 const PasswordInput: React.FC<Properties> = ({ hasError }) => {
-    const [showPassword, setShowPassword] = useState<boolean>(false);
+    const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
 
     const handlePasswordIconClick = useCallback((): void => {
-        setShowPassword((previousShowPassword) => !previousShowPassword);
+        setIsPasswordVisible(
+            (previousIsPasswordVisible) => !previousIsPasswordVisible,
+        );
     }, []);
 
     return (
         <InputGroup size="md">
             <Input
-                type={showPassword ? 'text' : 'password'}
+                type={isPasswordVisible ? 'text' : 'password'}
                 label="Password"
                 placeholder="••••••••"
                 name="password"
                 icon="right"
             />
-            <InputRightElement top="unset" bottom={hasError ? '1.5rem' : 0}>
+            <InputRightElement top="unset" bottom={hasError ? '24px' : 0}>
                 <IconButton
                     aria-label={
-                        showPassword ? 'Hide password' : 'Show password'
+                        isPasswordVisible ? 'Hide password' : 'Show password'
                     }
-                    icon={showPassword ? <ViewIcon /> : <ViewOffIcon />}
+                    icon={isPasswordVisible ? <ViewIcon /> : <ViewOffIcon />}
                     onClick={handlePasswordIconClick}
                     variant="ghostIcon"
                 />
diff --git a/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx b/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
index ce2fe38db..b0a215e3c 100644
--- a/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
+++ b/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
@@ -33,9 +33,8 @@ type Properties = {
 };
 
 const SignInForm: React.FC<Properties> = ({ onSubmit }) => {
-    const { dataStatus, errorMessage } = useAppSelector(({ auth }) => ({
+    const { dataStatus } = useAppSelector(({ auth }) => ({
         dataStatus: auth.dataStatus,
-        errorMessage: auth.errorMessage,
     }));
     const form = useAppForm<UserSignInRequestDto>({
         initialValues: DEFAULT_SIGN_IN_PAYLOAD,
@@ -65,7 +64,7 @@ const SignInForm: React.FC<Properties> = ({ onSubmit }) => {
                     }
                 />
                 <form onSubmit={handleSubmit}>
-                    <VStack spacing="1.2rem" align="flex-start">
+                    <VStack spacing="20px" align="flex-start">
                         <Input
                             type="text"
                             label="Email"
@@ -75,16 +74,13 @@ const SignInForm: React.FC<Properties> = ({ onSubmit }) => {
                         <PasswordInput hasError={Boolean(errors.password)} />
                         <FormError
                             isVisible={dataStatus === DataStatus.REJECTED}
-                            message={
-                                errorMessage ||
-                                UserValidationMessage.INVALID_DATA
-                            }
+                            message={UserValidationMessage.INVALID_DATA}
                         />
                         <Button
                             type="submit"
                             label="Sign in"
                             size="lg"
-                            sx={{ mt: '1rem' }}
+                            sx={{ mt: '16px' }}
                             isDisabled={isEmpty}
                         />
                     </VStack>
diff --git a/frontend/src/bundles/auth/store/slice.ts b/frontend/src/bundles/auth/store/slice.ts
index 46b1a6fb8..52cf77b51 100644
--- a/frontend/src/bundles/auth/store/slice.ts
+++ b/frontend/src/bundles/auth/store/slice.ts
@@ -8,14 +8,12 @@ import { signIn, signUp } from './actions.js';
 
 type State = {
     dataStatus: ValueOf<typeof DataStatus>;
-    user: UserSignInResponseDto | undefined;
-    errorMessage: string | undefined;
+    user: UserSignInResponseDto | null;
 };
 
 const initialState: State = {
     dataStatus: DataStatus.IDLE,
-    user: undefined,
-    errorMessage: undefined,
+    user: null,
 };
 
 const { reducer, actions, name } = createSlice({
@@ -30,9 +28,8 @@ const { reducer, actions, name } = createSlice({
             state.user = action.payload;
             state.dataStatus = DataStatus.FULFILLED;
         });
-        builder.addCase(signIn.rejected, (state, action) => {
-            state.user = undefined;
-            state.errorMessage = action.error.message;
+        builder.addCase(signIn.rejected, (state) => {
+            state.user = null;
             state.dataStatus = DataStatus.REJECTED;
         });
         builder.addCase(signUp.pending, (state) => {
diff --git a/frontend/src/bundles/common/components/input/input.tsx b/frontend/src/bundles/common/components/input/input.tsx
index ea10368ca..286cdfc75 100644
--- a/frontend/src/bundles/common/components/input/input.tsx
+++ b/frontend/src/bundles/common/components/input/input.tsx
@@ -38,7 +38,7 @@ const Input = <T extends FormValues>({
                 type={type}
                 placeholder={placeholder}
                 error={error}
-                style={{ paddingRight: icon === 'right' ? '2.5rem' : 0 }}
+                style={{ paddingRight: icon === 'right' ? '40px' : 0 }}
                 as={LibraryInput}
             />
             <FormErrorMessage>{error}</FormErrorMessage>

From a7a7dad23cf4327b3284ba53597d562572b25145 Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Mon, 19 Aug 2024 23:42:59 +0300
Subject: [PATCH 25/55] OV-1: + label to password input

---
 .../components/common/password-input/password-input.tsx   | 8 +++++---
 .../bundles/auth/components/sign-in-form/sign-in-form.tsx | 6 +++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
index 798cd0675..aee3a2c63 100644
--- a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
+++ b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
@@ -9,10 +9,12 @@ import {
 import { useCallback, useState } from '~/bundles/common/hooks/hooks.js';
 
 type Properties = {
+    label: string;
+    name: string;
     hasError: boolean;
 };
 
-const PasswordInput: React.FC<Properties> = ({ hasError }) => {
+const PasswordInput: React.FC<Properties> = ({ label, name, hasError }) => {
     const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
 
     const handlePasswordIconClick = useCallback((): void => {
@@ -25,9 +27,9 @@ const PasswordInput: React.FC<Properties> = ({ hasError }) => {
         <InputGroup size="md">
             <Input
                 type={isPasswordVisible ? 'text' : 'password'}
-                label="Password"
+                label={label}
                 placeholder="••••••••"
-                name="password"
+                name={name}
                 icon="right"
             />
             <InputRightElement top="unset" bottom={hasError ? '24px' : 0}>
diff --git a/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx b/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
index b0a215e3c..f3a73d1f5 100644
--- a/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
+++ b/frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx
@@ -71,7 +71,11 @@ const SignInForm: React.FC<Properties> = ({ onSubmit }) => {
                             placeholder="user@gmail.com"
                             name="email"
                         />
-                        <PasswordInput hasError={Boolean(errors.password)} />
+                        <PasswordInput
+                            label="Password"
+                            name="password"
+                            hasError={Boolean(errors.password)}
+                        />
                         <FormError
                             isVisible={dataStatus === DataStatus.REJECTED}
                             message={UserValidationMessage.INVALID_DATA}

From ddbe9d8f24b878701279d6cabf578591568899b0 Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Tue, 20 Aug 2024 00:07:06 +0300
Subject: [PATCH 26/55] OV-1: * fix form-header font size

---
 .../auth/components/common/form-header/form-header.tsx      | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/bundles/auth/components/common/form-header/form-header.tsx b/frontend/src/bundles/auth/components/common/form-header/form-header.tsx
index cdda109d9..47397c365 100644
--- a/frontend/src/bundles/auth/components/common/form-header/form-header.tsx
+++ b/frontend/src/bundles/auth/components/common/form-header/form-header.tsx
@@ -10,10 +10,12 @@ const FormHeader: React.FC<Properties> = ({ headerText, subheader }) => {
         <>
             {/* TODO: Add logo */}
             <h2 style={{ marginBottom: '50px' }}>LOGO</h2>
-            <Heading as="h1" color="white" mb="6px">
+            <Heading as="h1" color="white" mb="6px" fontSize="30px">
                 {headerText}
             </Heading>
-            <Text mb="24px">{subheader}</Text>
+            <Text mb="24px" fontSize="14px">
+                {subheader}
+            </Text>
         </>
     );
 };

From b9b83b3e8b39473b482d9cdeb21c2c0624889180 Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Tue, 20 Aug 2024 11:14:39 +0300
Subject: [PATCH 27/55] OV-1: * fix password bug

---
 .../auth/components/common/password-input/password-input.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
index aee3a2c63..9f82dcdda 100644
--- a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
+++ b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
@@ -32,7 +32,7 @@ const PasswordInput: React.FC<Properties> = ({ label, name, hasError }) => {
                 name={name}
                 icon="right"
             />
-            <InputRightElement top="unset" bottom={hasError ? '24px' : 0}>
+            <InputRightElement top="unset" bottom={hasError ? '27px' : 0}>
                 <IconButton
                     aria-label={
                         isPasswordVisible ? 'Hide password' : 'Show password'

From baac9675d438c3d1ceb4cf0b3f3a1a7514b7f182 Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Tue, 20 Aug 2024 11:42:38 +0300
Subject: [PATCH 28/55] OV-1: * fix password icon position

---
 .../auth/components/common/password-input/password-input.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
index 9f82dcdda..57e8cf7ae 100644
--- a/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
+++ b/frontend/src/bundles/auth/components/common/password-input/password-input.tsx
@@ -32,7 +32,7 @@ const PasswordInput: React.FC<Properties> = ({ label, name, hasError }) => {
                 name={name}
                 icon="right"
             />
-            <InputRightElement top="unset" bottom={hasError ? '27px' : 0}>
+            <InputRightElement top="unset" bottom={hasError ? '25px' : 0}>
                 <IconButton
                     aria-label={
                         isPasswordVisible ? 'Hide password' : 'Show password'

From f554d561e8fc69ed1c76ad68a6dad341831150ab Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Tue, 20 Aug 2024 16:01:38 +0300
Subject: [PATCH 29/55] OV-1: - header from app

---
 frontend/src/app/app.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/frontend/src/app/app.tsx b/frontend/src/app/app.tsx
index 671be91a9..54a2eff7f 100644
--- a/frontend/src/app/app.tsx
+++ b/frontend/src/app/app.tsx
@@ -1,17 +1,8 @@
 import { RouterOutlet } from '~/bundles/common/components/components.js';
-import { AppRoute } from '~/bundles/common/enums/enums.js';
-import { useLocation } from '~/bundles/common/hooks/hooks.js';
 
 const App: React.FC = () => {
-    const { pathname } = useLocation();
-
-    const isAuth =
-        pathname === AppRoute.SIGN_IN || pathname === AppRoute.SIGN_UP;
-
     return (
         <>
-            {/* TODO Header */}
-            {!isAuth && 'Header'}
             <RouterOutlet />
         </>
     );

From 77b1334dac6fc7556a4f899290d13b4741e76541 Mon Sep 17 00:00:00 2001
From: XCODE89 <maph0989@gmail.com>
Date: Tue, 20 Aug 2024 10:55:03 -0400
Subject: [PATCH 30/55] OV-10: + colors and typography

---
 .../bundles/common/components/components.ts   |  1 +
 .../framework/theme/styles/colors.styles.ts   | 18 ++++++-
 .../theme/styles/components.styles.ts         | 50 ++++++++++++++++++-
 3 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts
index ce95bfe64..28baf5beb 100644
--- a/frontend/src/bundles/common/components/components.ts
+++ b/frontend/src/bundles/common/components/components.ts
@@ -6,6 +6,7 @@ export {
     Box,
     ChakraProvider as ComponentsProvider,
     Heading,
+    Text,
     VStack,
 } from '@chakra-ui/react';
 export { FormikProvider as FormProvider } from 'formik';
diff --git a/frontend/src/framework/theme/styles/colors.styles.ts b/frontend/src/framework/theme/styles/colors.styles.ts
index 75c91a9c5..fa4d261ad 100644
--- a/frontend/src/framework/theme/styles/colors.styles.ts
+++ b/frontend/src/framework/theme/styles/colors.styles.ts
@@ -1,9 +1,23 @@
 const colors = {
+    background: {
+        900: '#0A0049',
+        600: '#35399A',
+        300: '#3C9CF5',
+        50: '#E2E1EC',
+    },
     brand: {
-        900: '#1a365d',
-        200: '#b3e0ff',
+        orange: '#FF6E1C',
+        green: '#3BAF28',
+        hover: '#EB5500',
+        error: '#E13B00',
+    },
+    typography: {
+        900: '#181B1A',
+        600: '#616271',
+        300: '#989898',
     },
     text: {
+        white: '#ffffff',
         default: '#36454f',
         accent: '#ff5733',
     },
diff --git a/frontend/src/framework/theme/styles/components.styles.ts b/frontend/src/framework/theme/styles/components.styles.ts
index 2e62e5878..58988a555 100644
--- a/frontend/src/framework/theme/styles/components.styles.ts
+++ b/frontend/src/framework/theme/styles/components.styles.ts
@@ -1,7 +1,55 @@
 const components = {
     Heading: {
         baseStyle: {
-            color: 'text.accent',
+            color: 'text.white',
+            fontFamily: 'Poppins, sans-serif',
+            textAlign: 'left',
+        },
+        variants: {
+            H1: {
+                fontSize: '54px',
+                fontWeight: '600',
+                lineHeight: '64px',
+            },
+            H2: {
+                fontSize: '30px',
+                fontWeight: '600',
+                lineHeight: '32px',
+            },
+            H3: {
+                fontSize: '18px',
+                fontWeight: '700',
+                lineHeight: '27px',
+            },
+        },
+    },
+    Text: {
+        baseStyle: {
+            color: 'text.white',
+            fontFamily: 'Poppins, sans-serif',
+            textAlign: 'left',
+        },
+        variants: {
+            body1: {
+                fontSize: '16px',
+                fontWeight: '500',
+                lineHeight: '22px',
+            },
+            bodySmall: {
+                fontSize: '14px',
+                fontWeight: '400',
+                lineHeight: '20px',
+            },
+            caption: {
+                fontSize: '12px',
+                fontWeight: '400',
+                lineHeight: '16px',
+            },
+            button: {
+                fontSize: '14px',
+                fontWeight: '600',
+                lineHeight: '16px',
+            },
         },
     },
 };

From e411fe23b3ddc52f3df1cd21e826d188578b75fc Mon Sep 17 00:00:00 2001
From: JKaypa <jose_kaypa@hotmail.com>
Date: Tue, 20 Aug 2024 10:56:32 -0500
Subject: [PATCH 31/55] OV-2: + implemented swagger and added sign-in docs

---
 backend/src/bundles/auth/auth.controller.ts   | 45 +++++++++++++++++--
 .../server-application/base-server-app-api.ts | 20 ++++++++-
 2 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/backend/src/bundles/auth/auth.controller.ts b/backend/src/bundles/auth/auth.controller.ts
index 148002532..eaf4bb7a3 100644
--- a/backend/src/bundles/auth/auth.controller.ts
+++ b/backend/src/bundles/auth/auth.controller.ts
@@ -55,9 +55,9 @@ class AuthController extends BaseController {
 
     /**
      * @swagger
-     * /auth/sign-up:
+     * /auth/sign-in:
      *    post:
-     *      description: Sign up user into the application
+     *      description: Sign in user into the application
      *      requestBody:
      *        description: User auth data
      *        required: true
@@ -72,7 +72,7 @@ class AuthController extends BaseController {
      *                password:
      *                  type: string
      *      responses:
-     *        201:
+     *        200:
      *          description: Successful operation
      *          content:
      *            application/json:
@@ -82,7 +82,15 @@ class AuthController extends BaseController {
      *                  message:
      *                    type: object
      *                    $ref: '#/components/schemas/User'
+     *        400:
+     *          description: Failed operation
+     *          content:
+     *            application/json:
+     *              schema:
+     *                  type: object
+     *                  $ref: '#/components/schemas/Error'
      */
+
     private async signIn(
         options: ApiHandlerOptions<{
             body: UserSignInRequestDto;
@@ -94,6 +102,37 @@ class AuthController extends BaseController {
         };
     }
 
+    /**
+     * @swagger
+     * /auth/sign-up:
+     *    post:
+     *      description: Sign up user into the application
+     *      requestBody:
+     *        description: User auth data
+     *        required: true
+     *        content:
+     *          application/json:
+     *            schema:
+     *              type: object
+     *              properties:
+     *                email:
+     *                  type: string
+     *                  format: email
+     *                password:
+     *                  type: string
+     *      responses:
+     *        201:
+     *          description: Successful operation
+     *          content:
+     *            application/json:
+     *              schema:
+     *                type: object
+     *                properties:
+     *                  message:
+     *                    type: object
+     *                    $ref: '#/components/schemas/User'
+     */
+
     private async signUp(
         options: ApiHandlerOptions<{
             body: UserSignUpRequestDto;
diff --git a/backend/src/common/server-application/base-server-app-api.ts b/backend/src/common/server-application/base-server-app-api.ts
index 6630eaebc..e86461e11 100644
--- a/backend/src/common/server-application/base-server-app-api.ts
+++ b/backend/src/common/server-application/base-server-app-api.ts
@@ -38,11 +38,27 @@ class BaseServerAppApi implements ServerAppApi {
             definition: {
                 openapi: '3.0.0',
                 info: {
-                    title: 'Hello World',
+                    title: 'OutreachVids API documentation',
                     version: `${this.version}.0.0`,
                 },
+                components: {
+                    schemas: {
+                        Error: {
+                            type: 'object',
+                            properties: {
+                                errorType: {
+                                    type: 'string',
+                                    enum: ['COMMON', 'VALIDATION'],
+                                },
+                                message: {
+                                    type: 'string',
+                                },
+                            },
+                        },
+                    },
+                },
             },
-            apis: [`src/packages/**/*.controller.${controllerExtension}`],
+            apis: [`src/bundles/**/*.controller.${controllerExtension}`],
         });
     }
 }

From 841abb8900786a1e2660cf5f9b2c5003ef5531d1 Mon Sep 17 00:00:00 2001
From: XCODE89 <maph0989@gmail.com>
Date: Tue, 20 Aug 2024 17:15:46 -0400
Subject: [PATCH 32/55] OV-10: * green added

---
 .../framework/theme/styles/colors.styles.ts   | 11 ++++-----
 .../theme/styles/components.styles.ts         | 23 +++++++++----------
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/frontend/src/framework/theme/styles/colors.styles.ts b/frontend/src/framework/theme/styles/colors.styles.ts
index 10ec09c65..f62a370f5 100644
--- a/frontend/src/framework/theme/styles/colors.styles.ts
+++ b/frontend/src/framework/theme/styles/colors.styles.ts
@@ -7,13 +7,10 @@ const colors = {
         50: '#e2e1ec',
     },
     brand: {
-        900: '#1a365d',
-        200: '#b3e0ff',
-        secondary: {
-            300: '#ff6e1c',
-            600: '#eb5500',
-            900: '#e13b00',
-        },
+        orange: '#ff6e1c',
+        hover: '#eb5500',
+        green: '#3BAF28',
+        error: '#e13b00'
     },
     shadow: {
         200: 'rgba(0, 0, 0, 0.2)',
diff --git a/frontend/src/framework/theme/styles/components.styles.ts b/frontend/src/framework/theme/styles/components.styles.ts
index 1493476e7..eff37108f 100644
--- a/frontend/src/framework/theme/styles/components.styles.ts
+++ b/frontend/src/framework/theme/styles/components.styles.ts
@@ -3,7 +3,7 @@ import { colors } from './colors.styles.js';
 const components = {
     Heading: {
         baseStyle: {
-            color: 'text.white',
+            color: colors.white,
             fontFamily: 'Poppins, sans-serif',
             textAlign: 'left',
         },
@@ -27,7 +27,7 @@ const components = {
     },
     Text: {
         baseStyle: {
-            color: 'text.white',
+            color: colors.white,
             fontFamily: 'Poppins, sans-serif',
             textAlign: 'left',
         },
@@ -52,25 +52,24 @@ const components = {
                 fontWeight: '600',
                 lineHeight: '16px',
             },
-            color: colors.text.accent,
         },
     },
     Button: {
         variants: {
             solid: {
                 color: colors.white,
-                bgColor: colors.brand.secondary[300],
+                bgColor: colors.brand.orange,
                 _hover: {
-                    bg: colors.brand.secondary[600],
+                    bg: colors.brand.hover,
                     _disabled: {
-                        bg: colors.brand.secondary[600],
+                        bg: colors.brand.hover,
                     },
                 },
             },
             ghostIcon: {
                 color: colors.white,
                 _hover: {
-                    color: colors.brand.secondary[300],
+                    color: colors.brand.orange,
                 },
             },
         },
@@ -81,9 +80,9 @@ const components = {
                 color: colors.text.default,
             },
             secondary: {
-                color: colors.brand.secondary[300],
+                color: colors.brand.orange,
                 _hover: {
-                    color: colors.brand.secondary[600],
+                    color: colors.brand.hover,
                 },
             },
         },
@@ -99,7 +98,7 @@ const components = {
                 field: {
                     _focus: {
                         borderWidth: '2px',
-                        borderColor: colors.brand.secondary[300],
+                        borderColor: colors.brand.orange,
                         boxShadow: 'none',
                     },
                     _placeholder: {
@@ -107,7 +106,7 @@ const components = {
                     },
                     _invalid: {
                         borderWidth: '2px',
-                        borderColor: colors.brand.secondary[900],
+                        borderColor: colors.brand.error,
                         boxShadow: 'none',
                     },
                     _autofill: {
@@ -123,7 +122,7 @@ const components = {
     FormError: {
         baseStyle: {
             text: {
-                color: colors.brand.secondary[900],
+                color: colors.brand.error,
             },
         },
     },

From 961ebea0bc55e1a4ddaab40f148170e703fcc75a Mon Sep 17 00:00:00 2001
From: XCODE89 <maph0989@gmail.com>
Date: Tue, 20 Aug 2024 17:30:12 -0400
Subject: [PATCH 33/55] OV-10: * green added

---
 frontend/src/framework/theme/styles/colors.styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/framework/theme/styles/colors.styles.ts b/frontend/src/framework/theme/styles/colors.styles.ts
index f62a370f5..f99f124d3 100644
--- a/frontend/src/framework/theme/styles/colors.styles.ts
+++ b/frontend/src/framework/theme/styles/colors.styles.ts
@@ -10,7 +10,7 @@ const colors = {
         orange: '#ff6e1c',
         hover: '#eb5500',
         green: '#3BAF28',
-        error: '#e13b00'
+        error: '#e13b00',
     },
     shadow: {
         200: 'rgba(0, 0, 0, 0.2)',

From 9dfd87e16bbfd1767322a4a7940d9431e185e5a5 Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Wed, 21 Aug 2024 00:59:43 +0300
Subject: [PATCH 34/55] OV-27: + studio page

---
 frontend/src/app/app.tsx                      | 56 +------------------
 .../common/components/button/button.tsx       | 27 ++++++++-
 .../bundles/common/components/components.ts   |  2 +
 .../common/components/header/header.tsx       | 29 ++++++----
 .../bundles/common/enums/app-route.enum.ts    |  1 +
 frontend/src/bundles/studio/pages/studio.tsx  | 31 ++++++++++
 .../theme/styles/components.styles.ts         | 13 +++++
 frontend/src/index.tsx                        |  5 ++
 8 files changed, 95 insertions(+), 69 deletions(-)
 create mode 100644 frontend/src/bundles/studio/pages/studio.tsx

diff --git a/frontend/src/app/app.tsx b/frontend/src/app/app.tsx
index e1f671b35..54a2eff7f 100644
--- a/frontend/src/app/app.tsx
+++ b/frontend/src/app/app.tsx
@@ -1,61 +1,9 @@
-import reactLogo from '~/assets/img/react.svg';
-import { Link, RouterOutlet } from '~/bundles/common/components/components.js';
-import { AppRoute } from '~/bundles/common/enums/enums.js';
-import {
-    useAppDispatch,
-    useAppSelector,
-    useEffect,
-    useLocation,
-} from '~/bundles/common/hooks/hooks.js';
-import { actions as userActions } from '~/bundles/users/store/users.js';
+import { RouterOutlet } from '~/bundles/common/components/components.js';
 
 const App: React.FC = () => {
-    const { pathname } = useLocation();
-    const dispatch = useAppDispatch();
-    const { users, dataStatus } = useAppSelector(({ users }) => ({
-        users: users.users,
-        dataStatus: users.dataStatus,
-    }));
-
-    const isRoot = pathname === AppRoute.ROOT;
-
-    useEffect(() => {
-        if (isRoot) {
-            void dispatch(userActions.loadAll());
-        }
-    }, [isRoot, dispatch]);
-
     return (
         <>
-            <img src={reactLogo} width="30" alt="logo" />
-
-            <ul>
-                <li>
-                    <Link to={AppRoute.ROOT}>Root</Link>
-                </li>
-                <li>
-                    <Link to={AppRoute.SIGN_IN}>Sign in</Link>
-                </li>
-                <li>
-                    <Link to={AppRoute.SIGN_UP}>Sign up</Link>
-                </li>
-            </ul>
-            <p>Current path: {pathname}</p>
-
-            <div>
-                <RouterOutlet />
-            </div>
-            {isRoot && (
-                <>
-                    <h2>Users:</h2>
-                    <h3>Status: {dataStatus}</h3>
-                    <ul>
-                        {users.map((it) => (
-                            <li key={it.id}>{it.email}</li>
-                        ))}
-                    </ul>
-                </>
-            )}
+            <RouterOutlet />
         </>
     );
 };
diff --git a/frontend/src/bundles/common/components/button/button.tsx b/frontend/src/bundles/common/components/button/button.tsx
index fa9006438..81e033ac0 100644
--- a/frontend/src/bundles/common/components/button/button.tsx
+++ b/frontend/src/bundles/common/components/button/button.tsx
@@ -1,12 +1,33 @@
-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';
+    variant?: string;
+    size?: 'md' | 'lg';
+    isDisabled?: boolean;
+    sx?: SystemStyleObject;
 };
 
-const Button: React.FC<Properties> = ({ type = 'button', label }) => (
-    <LibraryButton type={type} width="full">
+const Button: React.FC<Properties> = ({
+    type = 'button',
+    label,
+    variant = 'solid',
+    size = 'md',
+    isDisabled = false,
+    sx = {},
+}) => (
+    <LibraryButton
+        type={type}
+        w="full"
+        variant={variant}
+        size={size}
+        isDisabled={isDisabled}
+        sx={sx}
+    >
         {label}
     </LibraryButton>
 );
diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts
index 45422fab3..b5c255fa7 100644
--- a/frontend/src/bundles/common/components/components.ts
+++ b/frontend/src/bundles/common/components/components.ts
@@ -5,12 +5,14 @@ export { Link } from './link/link.js';
 export { Loader } from './loader/loader.js';
 export { Overlay } from './overlay/overlay.js';
 export { RouterProvider } from './router-provider/router-provider.js';
+export { DownloadIcon } from '@chakra-ui/icons';
 export {
     Box,
     Circle,
     ChakraProvider as ComponentsProvider,
     Flex,
     Heading,
+    IconButton,
     Text,
     VStack,
 } from '@chakra-ui/react';
diff --git a/frontend/src/bundles/common/components/header/header.tsx b/frontend/src/bundles/common/components/header/header.tsx
index 2a0322074..7846ddee7 100644
--- a/frontend/src/bundles/common/components/header/header.tsx
+++ b/frontend/src/bundles/common/components/header/header.tsx
@@ -1,6 +1,12 @@
-import { Flex, Text } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
 
-const Header = (): JSX.Element => {
+type Properties = {
+    left?: React.ReactNode;
+    center?: React.ReactNode;
+    right?: React.ReactNode;
+};
+
+const Header: React.FC<Properties> = ({ left, center, right }) => {
     return (
         <Flex
             as="header"
@@ -8,24 +14,23 @@ const Header = (): JSX.Element => {
             position="sticky"
             top="0"
             left="0"
-            width="100%"
+            width="full"
             backgroundColor="background.900"
-            color="white"
             boxShadow="md"
             zIndex="1000"
             padding="4"
             marginBottom="20px"
+            alignItems="center"
+            justifyContent="space-between"
         >
-            <Flex
-                width="full"
-                alignItems="center"
-                maxWidth="1440px"
-                justifyContent="space-between"
-            >
-                <Text fontSize="xl" fontWeight="lighter">
+            {left ?? (
+                // {/* TODO: Add logo */}
+                <Text fontSize="xl" fontWeight="lighter" color="white">
                     Logo
                 </Text>
-            </Flex>
+            )}
+            <Box>{center}</Box>
+            <Box>{right}</Box>
         </Flex>
     );
 };
diff --git a/frontend/src/bundles/common/enums/app-route.enum.ts b/frontend/src/bundles/common/enums/app-route.enum.ts
index dfc5352ec..9d1c5334e 100644
--- a/frontend/src/bundles/common/enums/app-route.enum.ts
+++ b/frontend/src/bundles/common/enums/app-route.enum.ts
@@ -2,6 +2,7 @@ const AppRoute = {
     ROOT: '/',
     SIGN_IN: '/sign-in',
     SIGN_UP: '/sign-up',
+    STUDIO: '/studio',
 } as const;
 
 export { AppRoute };
diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx
new file mode 100644
index 000000000..fd0acd3d0
--- /dev/null
+++ b/frontend/src/bundles/studio/pages/studio.tsx
@@ -0,0 +1,31 @@
+import {
+    Button,
+    DownloadIcon,
+    Header,
+    IconButton,
+} from '~/bundles/common/components/components.js';
+
+const Studio: React.FC = () => {
+    return (
+        <>
+            <Header
+                center={
+                    <Button
+                        variant="primaryOutlined"
+                        label="Resize"
+                        sx={{ width: '135px' }}
+                    />
+                }
+                right={
+                    <IconButton
+                        variant="primaryOutlined"
+                        aria-label="Download"
+                        icon={<DownloadIcon />}
+                    />
+                }
+            />
+        </>
+    );
+};
+
+export { Studio };
diff --git a/frontend/src/framework/theme/styles/components.styles.ts b/frontend/src/framework/theme/styles/components.styles.ts
index 417d40ef9..01b8d24f2 100644
--- a/frontend/src/framework/theme/styles/components.styles.ts
+++ b/frontend/src/framework/theme/styles/components.styles.ts
@@ -18,6 +18,19 @@ const components = {
                     },
                 },
             },
+            primaryOutlined: {
+                color: colors.background[300],
+                border: '1px solid',
+                borderColor: colors.background[300],
+                _hover: {
+                    color: 'white',
+                    bg: colors.background[300],
+                    _disabled: {
+                        color: colors.background[300],
+                        bg: 'none',
+                    },
+                },
+            },
             ghostIcon: {
                 color: colors.white,
                 _hover: {
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 1412d521b..901c2d1de 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -9,6 +9,7 @@ import {
     StoreProvider,
 } from '~/bundles/common/components/components.js';
 import { AppRoute } from '~/bundles/common/enums/enums.js';
+import { Studio } from '~/bundles/studio/pages/studio.js';
 import { store } from '~/framework/store/store.js';
 import { theme } from '~/framework/theme/theme.js';
 
@@ -29,6 +30,10 @@ const routes = [
                 path: AppRoute.SIGN_UP,
                 element: <Auth />,
             },
+            {
+                path: AppRoute.STUDIO,
+                element: <Studio />,
+            },
         ],
     },
 ];

From 78518d040995ffd487177eb9aa74c1145cd7b5af Mon Sep 17 00:00:00 2001
From: XCODE89 <maph0989@gmail.com>
Date: Tue, 20 Aug 2024 19:51:23 -0400
Subject: [PATCH 35/55] OV-10: * secondary property in colors.brand

---
 .../framework/theme/styles/colors.styles.ts    | 10 ++++++----
 .../theme/styles/components.styles.ts          | 18 +++++++++---------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/frontend/src/framework/theme/styles/colors.styles.ts b/frontend/src/framework/theme/styles/colors.styles.ts
index f99f124d3..8ae8d0cce 100644
--- a/frontend/src/framework/theme/styles/colors.styles.ts
+++ b/frontend/src/framework/theme/styles/colors.styles.ts
@@ -7,10 +7,12 @@ const colors = {
         50: '#e2e1ec',
     },
     brand: {
-        orange: '#ff6e1c',
-        hover: '#eb5500',
-        green: '#3BAF28',
-        error: '#e13b00',
+        secondary: {
+            50: '#3BAF28',
+            300: '#ff6e1c',
+            600: '#eb5500',
+            900: '#e13b00',
+        },
     },
     shadow: {
         200: 'rgba(0, 0, 0, 0.2)',
diff --git a/frontend/src/framework/theme/styles/components.styles.ts b/frontend/src/framework/theme/styles/components.styles.ts
index eff37108f..ff9a15c66 100644
--- a/frontend/src/framework/theme/styles/components.styles.ts
+++ b/frontend/src/framework/theme/styles/components.styles.ts
@@ -58,18 +58,18 @@ const components = {
         variants: {
             solid: {
                 color: colors.white,
-                bgColor: colors.brand.orange,
+                bgColor: colors.brand.secondary[300],
                 _hover: {
-                    bg: colors.brand.hover,
+                    bg: colors.brand.secondary[600],
                     _disabled: {
-                        bg: colors.brand.hover,
+                        bg: colors.brand.secondary[600],
                     },
                 },
             },
             ghostIcon: {
                 color: colors.white,
                 _hover: {
-                    color: colors.brand.orange,
+                    color: colors.brand.secondary[300],
                 },
             },
         },
@@ -80,9 +80,9 @@ const components = {
                 color: colors.text.default,
             },
             secondary: {
-                color: colors.brand.orange,
+                color: colors.brand.secondary[300],
                 _hover: {
-                    color: colors.brand.hover,
+                    color: colors.brand.secondary[600],
                 },
             },
         },
@@ -98,7 +98,7 @@ const components = {
                 field: {
                     _focus: {
                         borderWidth: '2px',
-                        borderColor: colors.brand.orange,
+                        borderColor: colors.brand.secondary[300],
                         boxShadow: 'none',
                     },
                     _placeholder: {
@@ -106,7 +106,7 @@ const components = {
                     },
                     _invalid: {
                         borderWidth: '2px',
-                        borderColor: colors.brand.error,
+                        borderColor: colors.brand.secondary[900],
                         boxShadow: 'none',
                     },
                     _autofill: {
@@ -122,7 +122,7 @@ const components = {
     FormError: {
         baseStyle: {
             text: {
-                color: colors.brand.error,
+                color: colors.brand.secondary[900],
             },
         },
     },

From 64162de5e3b56a8559ce0617080d616cd80fb36a Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 21 Aug 2024 10:02:15 +0300
Subject: [PATCH 36/55] OV-18: + tab component

---
 .../libs/components/tab/tab.tsx                            | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)
 rename frontend/src/bundles/common/components/video-modal/libs/components/{video-modal-side-bar => video-modal-content}/libs/components/tab/tab.tsx (55%)

diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/libs/components/tab/tab.tsx b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/tab/tab.tsx
similarity index 55%
rename from frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/libs/components/tab/tab.tsx
rename to frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/tab/tab.tsx
index 5853e7885..1459629a9 100644
--- a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/libs/components/tab/tab.tsx
+++ b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/tab/tab.tsx
@@ -6,7 +6,12 @@ type Properties = {
 
 const Tab = ({ label }: Properties): JSX.Element => {
     return (
-        <ChakraTab borderRadius="10px" _selected={{ backgroundColor: '' }}>
+        <ChakraTab
+            justifyContent="stretch"
+            borderRadius="10px"
+            textAlign="left"
+            _selected={{ backgroundColor: 'gray.300' }}
+        >
             {label}
         </ChakraTab>
     );

From d9b5c99094446dc072c860c124f9dd37595029d0 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 21 Aug 2024 10:03:06 +0300
Subject: [PATCH 37/55] OV-18: * colors

---
 frontend/src/framework/theme/styles/colors.styles.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/framework/theme/styles/colors.styles.ts b/frontend/src/framework/theme/styles/colors.styles.ts
index 0429cb141..ef4ccf7ee 100644
--- a/frontend/src/framework/theme/styles/colors.styles.ts
+++ b/frontend/src/framework/theme/styles/colors.styles.ts
@@ -5,6 +5,7 @@ const colors = {
         200: '#b3e0ff',
         secondary: {
             300: '#ff6e1c',
+            600: '#eb5500',
         },
     },
     shadow: {

From 393710b7d074e4c537770d6d34d00fb397f2aa9b Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 21 Aug 2024 10:05:30 +0300
Subject: [PATCH 38/55] OV-18: + enum

---
 .../libs/components/video-preview/libs/enums/enums.ts       | 1 +
 .../video-preview/libs/enums/video-preview.enum.ts          | 6 ++++++
 2 files changed, 7 insertions(+)
 create mode 100644 frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/enums.ts
 create mode 100644 frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/video-preview.enum.ts

diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/enums.ts b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/enums.ts
new file mode 100644
index 000000000..42f29f46e
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/enums.ts
@@ -0,0 +1 @@
+export { VideoPreview } from './video-preview.enum.js';
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/video-preview.enum.ts b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/video-preview.enum.ts
new file mode 100644
index 000000000..55e124bb8
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/video-preview.enum.ts
@@ -0,0 +1,6 @@
+const VideoPreview = {
+    PORTRAIT: 'portrait',
+    LANDSCAPE: 'landscape',
+} as const;
+
+export { VideoPreview };

From 9da3d9267f376e4589d2c98b674ba66a0f32a607 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 21 Aug 2024 10:07:01 +0300
Subject: [PATCH 39/55] OV-18: + type

---
 .../libs/components/video-preview/libs/types/types.ts          | 1 +
 .../components/video-preview/libs/types/video-preview.type.ts  | 3 +++
 2 files changed, 4 insertions(+)
 create mode 100644 frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/types/types.ts
 create mode 100644 frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/types/video-preview.type.ts

diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/types/types.ts b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/types/types.ts
new file mode 100644
index 000000000..be952c440
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/types/types.ts
@@ -0,0 +1 @@
+export { type VideoPreview } from './video-preview.type.js';
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/types/video-preview.type.ts b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/types/video-preview.type.ts
new file mode 100644
index 000000000..5ba129e47
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/types/video-preview.type.ts
@@ -0,0 +1,3 @@
+type VideoPreview = 'portrait' | 'landscape';
+
+export { type VideoPreview };

From aadc9dcea30e14efda8d13c0c0805ce626a79e8e Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 21 Aug 2024 10:08:45 +0300
Subject: [PATCH 40/55] OV-18: + video-preview component

---
 .../video-preview/video-preview.tsx           | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/video-preview.tsx

diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/video-preview.tsx b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/video-preview.tsx
new file mode 100644
index 000000000..a86514b0c
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/video-preview.tsx
@@ -0,0 +1,62 @@
+import { Box, Button, Flex, Text } from '@chakra-ui/react';
+import { useCallback, useState } from 'react';
+
+import { VideoPreview as VideoPreviewValues } from './libs/enums/enums.js';
+import { type VideoPreview as VideoPreviewType } from './libs/types/types.js';
+
+const VideoPreview = (): JSX.Element => {
+    const [view, setView] = useState<VideoPreviewType>(
+        VideoPreviewValues.PORTRAIT,
+    );
+
+    const setPortraitView = useCallback((): void => {
+        setView(VideoPreviewValues.PORTRAIT);
+    }, []);
+
+    const setLandscapeView = useCallback((): void => {
+        setView(VideoPreviewValues.LANDSCAPE);
+    }, []);
+
+    return (
+        <Flex flexDirection="column" alignItems="center">
+            <Box
+                width={view === VideoPreviewValues.PORTRAIT ? '250px' : '720px'}
+                height="444px"
+                borderWidth="1px"
+                borderColor="gray.300"
+                borderRadius="md"
+                display="flex"
+                justifyContent="center"
+                alignItems="center"
+                mb={4}
+            >
+                <Text color="gray.400">
+                    {view === VideoPreviewValues.PORTRAIT
+                        ? '1080 x 1920'
+                        : '1920 x 1080'}
+                </Text>
+            </Box>
+
+            <Flex justifyContent="center" gap={4}>
+                <Button
+                    backgroundColor="brand.secondary.300"
+                    color="white"
+                    onMouseEnter={setLandscapeView}
+                    _hover={{ bg: 'brand.secondary.600' }}
+                >
+                    Use landscape
+                </Button>
+                <Button
+                    backgroundColor="brand.secondary.300"
+                    color="white"
+                    onMouseEnter={setPortraitView}
+                    _hover={{ bg: 'brand.secondary.600' }}
+                >
+                    Use portrait
+                </Button>
+            </Flex>
+        </Flex>
+    );
+};
+
+export { VideoPreview };

From 742e62ab7a0a112c72ff29a1422722d9fdd5f8a1 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 21 Aug 2024 10:09:48 +0300
Subject: [PATCH 41/55] OV-18: + exports

---
 .../video-modal-content/libs/components/components.ts           | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/components.ts

diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/components.ts b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/components.ts
new file mode 100644
index 000000000..d179bd19c
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/components.ts
@@ -0,0 +1,2 @@
+export { Tab } from './tab/tab.js';
+export { VideoPreview } from './video-preview/video-preview.js';

From 0dbf2cedf56d39a9d2d44c6a0d05fadc91c4c590 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 21 Aug 2024 10:11:18 +0300
Subject: [PATCH 42/55] OV-18: - old files

---
 .../bundles/common/components/modal/modal.tsx | 36 -------------------
 .../libs/components/components.ts             |  1 -
 .../video-modal-side-bar.tsx                  | 34 ------------------
 3 files changed, 71 deletions(-)
 delete mode 100644 frontend/src/bundles/common/components/modal/modal.tsx
 delete mode 100644 frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/libs/components/components.ts
 delete mode 100644 frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/video-modal-side-bar.tsx

diff --git a/frontend/src/bundles/common/components/modal/modal.tsx b/frontend/src/bundles/common/components/modal/modal.tsx
deleted file mode 100644
index e10682e5d..000000000
--- a/frontend/src/bundles/common/components/modal/modal.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import {
-    Modal as ChakraModal,
-    ModalBody,
-    ModalCloseButton,
-    ModalContent,
-    ModalHeader,
-    ModalOverlay,
-} from '@chakra-ui/react';
-import { type ReactNode } from 'react';
-
-type Properties = {
-    isOpen: boolean;
-    closeModal: () => void;
-    title?: string;
-    children: ReactNode;
-};
-
-const Modal = ({
-    isOpen,
-    closeModal,
-    title,
-    children,
-}: Properties): JSX.Element => {
-    return (
-        <ChakraModal isOpen={isOpen} onClose={closeModal}>
-            <ModalOverlay />
-            <ModalContent>
-                <ModalHeader>{title}</ModalHeader>
-                <ModalCloseButton />
-                <ModalBody>{children}</ModalBody>
-            </ModalContent>
-        </ChakraModal>
-    );
-};
-
-export { Modal };
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/libs/components/components.ts b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/libs/components/components.ts
deleted file mode 100644
index e5eeec838..000000000
--- a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/libs/components/components.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Tab } from './tab/tab.js';
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/video-modal-side-bar.tsx b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/video-modal-side-bar.tsx
deleted file mode 100644
index 3948c46f6..000000000
--- a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-side-bar/video-modal-side-bar.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
-
-import { Tab } from './libs/components/components.js';
-
-const VideoModalSideBar = (): JSX.Element => {
-    return (
-        <Tabs
-            orientation="vertical"
-            backgroundColor="gray"
-            height="full"
-            size="lg"
-            variant="enclosed"
-        >
-            <TabList width="30%">
-                <Tab label="One" />
-                <Tab label="Two" />
-                <Tab label="Three" />
-            </TabList>
-            <TabPanels>
-                <TabPanel>
-                    <p>one!</p>
-                </TabPanel>
-                <TabPanel>
-                    <p>two!</p>
-                </TabPanel>
-                <TabPanel>
-                    <p>three!</p>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
-    );
-};
-
-export { VideoModalSideBar };

From 68796b7cfae4964828c834b6acf7bd79648b094c Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 21 Aug 2024 10:12:34 +0300
Subject: [PATCH 43/55] OV-18: + VideoModalContent component

---
 .../video-modal/libs/components/components.ts |  2 +-
 .../video-modal-content.tsx                   | 24 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/video-modal-content.tsx

diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/components.ts b/frontend/src/bundles/common/components/video-modal/libs/components/components.ts
index 5f623fe39..9ba9d1e9d 100644
--- a/frontend/src/bundles/common/components/video-modal/libs/components/components.ts
+++ b/frontend/src/bundles/common/components/video-modal/libs/components/components.ts
@@ -1 +1 @@
-export { VideoModalSideBar } from './video-modal-side-bar/video-modal-side-bar.js';
+export { VideoModalContent } from './video-modal-content/video-modal-content.js';
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/video-modal-content.tsx b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/video-modal-content.tsx
new file mode 100644
index 000000000..01524e5a7
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/video-modal-content.tsx
@@ -0,0 +1,24 @@
+import { TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
+
+import { Tab, VideoPreview } from './libs/components/components.js';
+
+const VideoModalContent = (): JSX.Element => {
+    return (
+        <Tabs orientation="vertical" variant="unstyled" height="full">
+            <TabList
+                backgroundColor="gray.100"
+                padding="20px 20px 20px"
+                minWidth="290px"
+            >
+                <Tab label="Start from scratch" />
+            </TabList>
+            <TabPanels>
+                <TabPanel>
+                    <VideoPreview />
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    );
+};
+
+export { VideoModalContent };

From d2bec02e2ff5dbb6c612dd0478fea4204607485c Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 21 Aug 2024 10:13:52 +0300
Subject: [PATCH 44/55] OV-18: + VideoModal component

---
 .../bundles/common/components/components.ts   |  1 +
 .../components/video-modal/video-modal.tsx    | 45 +++++++++++++++++--
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts
index c453d5f1a..82afbde76 100644
--- a/frontend/src/bundles/common/components/components.ts
+++ b/frontend/src/bundles/common/components/components.ts
@@ -4,6 +4,7 @@ export { Link } from './link/link.js';
 export { Loader } from './loader/loader.js';
 export { Overlay } from './overlay/overlay.js';
 export { RouterProvider } from './router-provider/router-provider.js';
+export { VideoModal } from './video-modal/video-modal.js';
 export {
     Box,
     ChakraProvider as ComponentsProvider,
diff --git a/frontend/src/bundles/common/components/video-modal/video-modal.tsx b/frontend/src/bundles/common/components/video-modal/video-modal.tsx
index 77d5953e6..934ca60c9 100644
--- a/frontend/src/bundles/common/components/video-modal/video-modal.tsx
+++ b/frontend/src/bundles/common/components/video-modal/video-modal.tsx
@@ -1,7 +1,46 @@
-import { VideoModalSideBar } from './libs/components/components.js';
+import {
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalHeader,
+    ModalOverlay,
+} from '@chakra-ui/react';
 
-const VideoModal = (): JSX.Element => {
-    return <VideoModalSideBar />;
+import { VideoModalContent } from './libs/components/components.js';
+
+type Properties = {
+    isOpen: boolean;
+    closeModal: () => void;
+};
+
+const VideoModal = ({ isOpen, closeModal }: Properties): JSX.Element => {
+    return (
+        <Modal isOpen={isOpen} onClose={closeModal} isCentered>
+            <ModalOverlay />
+            <ModalContent
+                borderRadius="17px"
+                maxWidth="90%"
+                maxHeight="90%"
+                height="full"
+                overflow="hidden"
+            >
+                <ModalHeader
+                    backgroundColor="gray.100"
+                    width="100%"
+                    maxWidth="290px"
+                    paddingLeft="40px"
+                    padding="33px 44px 0px"
+                >
+                    Create video
+                </ModalHeader>
+                <ModalCloseButton margin="20px" />
+                <ModalBody padding="0px">
+                    <VideoModalContent />
+                </ModalBody>
+            </ModalContent>
+        </Modal>
+    );
 };
 
 export { VideoModal };

From 2e8f11a0a3acede6c43683ea4aef8f15f242ddb2 Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Wed, 21 Aug 2024 10:52:23 +0300
Subject: [PATCH 45/55] OV-27: + chakra icons

---
 frontend/package.json |  1 +
 package-lock.json     | 13 +++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/frontend/package.json b/frontend/package.json
index 881769413..41ff12932 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,6 +27,7 @@
         "vite": "5.4.0"
     },
     "dependencies": {
+        "@chakra-ui/icons": "2.1.1",
         "@chakra-ui/react": "2.8.2",
         "@emotion/react": "11.13.0",
         "@emotion/styled": "11.13.0",
diff --git a/package-lock.json b/package-lock.json
index 711edfde0..c679dfd41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -71,6 +71,7 @@
         "frontend": {
             "version": "1.0.0",
             "dependencies": {
+                "@chakra-ui/icons": "2.1.1",
                 "@chakra-ui/react": "2.8.2",
                 "@emotion/react": "11.13.0",
                 "@emotion/styled": "11.13.0",
@@ -803,6 +804,18 @@
                 "react": ">=18"
             }
         },
+        "node_modules/@chakra-ui/icons": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-2.1.1.tgz",
+            "integrity": "sha512-3p30hdo4LlRZTT5CwoAJq3G9fHI0wDc0pBaMHj4SUn0yomO+RcDRlzhdXqdr5cVnzax44sqXJVnf3oQG0eI+4g==",
+            "dependencies": {
+                "@chakra-ui/icon": "3.2.0"
+            },
+            "peerDependencies": {
+                "@chakra-ui/system": ">=2.0.0",
+                "react": ">=18"
+            }
+        },
         "node_modules/@chakra-ui/image": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-2.1.0.tgz",

From a6158d4f05a84e0d8a3d649abd8ea4d65c912c2a Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 21 Aug 2024 11:29:38 +0300
Subject: [PATCH 46/55] OV-18: + enum

---
 .../libs/components/video-preview/libs/enums/enums.ts       | 1 +
 .../components/video-preview/libs/enums/video-sizes.enum.ts | 6 ++++++
 2 files changed, 7 insertions(+)
 create mode 100644 frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/video-sizes.enum.ts

diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/enums.ts b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/enums.ts
index 42f29f46e..9a2f32d26 100644
--- a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/enums.ts
+++ b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/enums.ts
@@ -1 +1,2 @@
 export { VideoPreview } from './video-preview.enum.js';
+export { VideoSizeLabel } from './video-sizes.enum.js';
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/video-sizes.enum.ts b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/video-sizes.enum.ts
new file mode 100644
index 000000000..8be9ed814
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/video-sizes.enum.ts
@@ -0,0 +1,6 @@
+const VideoSizeLabel = {
+    PORTRAIT: '1080 x 1920',
+    LANDSCAPE: '1920 x 1080',
+} as const;
+
+export { VideoSizeLabel };

From 8270db92ea18df1027cd3ab9b59a037966facadf Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 21 Aug 2024 11:31:21 +0300
Subject: [PATCH 47/55] OV-18: + icon

---
 .../libs/components/tab/tab.tsx               | 13 +++++--
 .../video-preview/video-preview.tsx           | 36 +++++++++++++------
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/tab/tab.tsx b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/tab/tab.tsx
index 1459629a9..ea8761154 100644
--- a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/tab/tab.tsx
+++ b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/tab/tab.tsx
@@ -1,10 +1,13 @@
-import { Tab as ChakraTab } from '@chakra-ui/react';
+import { Icon, Tab as ChakraTab } from '@chakra-ui/react';
+import { type IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 type Properties = {
     label: string;
+    icon: IconDefinition;
 };
 
-const Tab = ({ label }: Properties): JSX.Element => {
+const Tab = ({ label, icon }: Properties): JSX.Element => {
     return (
         <ChakraTab
             justifyContent="stretch"
@@ -12,6 +15,12 @@ const Tab = ({ label }: Properties): JSX.Element => {
             textAlign="left"
             _selected={{ backgroundColor: 'gray.300' }}
         >
+            <Icon
+                as={FontAwesomeIcon}
+                icon={icon}
+                padding="5px"
+                height="16px"
+            />{' '}
             {label}
         </ChakraTab>
     );
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/video-preview.tsx b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/video-preview.tsx
index a86514b0c..8586316f2 100644
--- a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/video-preview.tsx
+++ b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/video-preview.tsx
@@ -1,7 +1,12 @@
-import { Box, Button, Flex, Text } from '@chakra-ui/react';
+import { Button, Flex, Icon, Text } from '@chakra-ui/react';
+import { faPlay } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useCallback, useState } from 'react';
 
-import { VideoPreview as VideoPreviewValues } from './libs/enums/enums.js';
+import {
+    VideoPreview as VideoPreviewValues,
+    VideoSizeLabel,
+} from './libs/enums/enums.js';
 import { type VideoPreview as VideoPreviewType } from './libs/types/types.js';
 
 const VideoPreview = (): JSX.Element => {
@@ -19,23 +24,34 @@ const VideoPreview = (): JSX.Element => {
 
     return (
         <Flex flexDirection="column" alignItems="center">
-            <Box
+            <Flex
                 width={view === VideoPreviewValues.PORTRAIT ? '250px' : '720px'}
                 height="444px"
                 borderWidth="1px"
                 borderColor="gray.300"
                 borderRadius="md"
-                display="flex"
                 justifyContent="center"
                 alignItems="center"
                 mb={4}
             >
-                <Text color="gray.400">
-                    {view === VideoPreviewValues.PORTRAIT
-                        ? '1080 x 1920'
-                        : '1920 x 1080'}
-                </Text>
-            </Box>
+                <Flex
+                    flexDirection="column"
+                    alignItems="center"
+                    color="gray.400"
+                >
+                    <Icon
+                        as={FontAwesomeIcon}
+                        icon={faPlay}
+                        padding="5px"
+                        height="16px"
+                    />
+                    <Text>
+                        {view === VideoPreviewValues.PORTRAIT
+                            ? VideoSizeLabel.PORTRAIT
+                            : VideoSizeLabel.LANDSCAPE}
+                    </Text>
+                </Flex>
+            </Flex>
 
             <Flex justifyContent="center" gap={4}>
                 <Button

From be2a8fd9336049e49a22efc209e088a3fe5f0be4 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 21 Aug 2024 11:34:38 +0300
Subject: [PATCH 48/55] OV-18: + dependencies

---
 frontend/package.json |  3 +++
 package-lock.json     | 58 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+)

diff --git a/frontend/package.json b/frontend/package.json
index 881769413..25983088a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,9 +27,12 @@
         "vite": "5.4.0"
     },
     "dependencies": {
+        "@chakra-ui/icons": "2.1.1",
         "@chakra-ui/react": "2.8.2",
         "@emotion/react": "11.13.0",
         "@emotion/styled": "11.13.0",
+        "@fortawesome/free-solid-svg-icons": "6.6.0",
+        "@fortawesome/react-fontawesome": "0.2.2",
         "@reduxjs/toolkit": "2.2.7",
         "formik": "2.4.6",
         "framer-motion": "11.3.24",
diff --git a/package-lock.json b/package-lock.json
index 711edfde0..7f75e979e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -71,9 +71,12 @@
         "frontend": {
             "version": "1.0.0",
             "dependencies": {
+                "@chakra-ui/icons": "2.1.1",
                 "@chakra-ui/react": "2.8.2",
                 "@emotion/react": "11.13.0",
                 "@emotion/styled": "11.13.0",
+                "@fortawesome/free-solid-svg-icons": "6.6.0",
+                "@fortawesome/react-fontawesome": "0.2.2",
                 "@reduxjs/toolkit": "2.2.7",
                 "formik": "2.4.6",
                 "framer-motion": "11.3.24",
@@ -803,6 +806,18 @@
                 "react": ">=18"
             }
         },
+        "node_modules/@chakra-ui/icons": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-2.1.1.tgz",
+            "integrity": "sha512-3p30hdo4LlRZTT5CwoAJq3G9fHI0wDc0pBaMHj4SUn0yomO+RcDRlzhdXqdr5cVnzax44sqXJVnf3oQG0eI+4g==",
+            "dependencies": {
+                "@chakra-ui/icon": "3.2.0"
+            },
+            "peerDependencies": {
+                "@chakra-ui/system": ">=2.0.0",
+                "react": ">=18"
+            }
+        },
         "node_modules/@chakra-ui/image": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-2.1.0.tgz",
@@ -2786,6 +2801,49 @@
                 "yaml": "^2.2.2"
             }
         },
+        "node_modules/@fortawesome/fontawesome-common-types": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+            "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/fontawesome-svg-core": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+            "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+            "peer": true,
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "6.6.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/free-solid-svg-icons": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+            "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "6.6.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/react-fontawesome": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+            "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+            "dependencies": {
+                "prop-types": "^15.8.1"
+            },
+            "peerDependencies": {
+                "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+                "react": ">=16.3"
+            }
+        },
         "node_modules/@gitbeaker/core": {
             "version": "38.12.1",
             "resolved": "https://registry.npmjs.org/@gitbeaker/core/-/core-38.12.1.tgz",

From ff65ee37ef314813a952eb25dd8753421dcdcabb Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 21 Aug 2024 11:35:21 +0300
Subject: [PATCH 49/55] OV-18: * VideoModal component

---
 .../video-modal-content/video-modal-content.tsx          | 9 +++++++--
 .../common/components/video-modal/video-modal.tsx        | 6 ++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/video-modal-content.tsx b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/video-modal-content.tsx
index 01524e5a7..fa077b615 100644
--- a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/video-modal-content.tsx
+++ b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/video-modal-content.tsx
@@ -1,4 +1,5 @@
 import { TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
+import { faPlay } from '@fortawesome/free-solid-svg-icons/faPlay';
 
 import { Tab, VideoPreview } from './libs/components/components.js';
 
@@ -10,9 +11,13 @@ const VideoModalContent = (): JSX.Element => {
                 padding="20px 20px 20px"
                 minWidth="290px"
             >
-                <Tab label="Start from scratch" />
+                <Tab icon={faPlay} label="Start from scratch" />
             </TabList>
-            <TabPanels>
+            <TabPanels
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+            >
                 <TabPanel>
                     <VideoPreview />
                 </TabPanel>
diff --git a/frontend/src/bundles/common/components/video-modal/video-modal.tsx b/frontend/src/bundles/common/components/video-modal/video-modal.tsx
index 934ca60c9..cd8c75b41 100644
--- a/frontend/src/bundles/common/components/video-modal/video-modal.tsx
+++ b/frontend/src/bundles/common/components/video-modal/video-modal.tsx
@@ -23,13 +23,11 @@ const VideoModal = ({ isOpen, closeModal }: Properties): JSX.Element => {
                 maxWidth="90%"
                 maxHeight="90%"
                 height="full"
-                overflow="hidden"
+                overflow="auto"
             >
                 <ModalHeader
                     backgroundColor="gray.100"
-                    width="100%"
-                    maxWidth="290px"
-                    paddingLeft="40px"
+                    width="290px"
                     padding="33px 44px 0px"
                 >
                     Create video

From a957cdc625760b143316c2109641649685345620 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 21 Aug 2024 12:38:12 +0300
Subject: [PATCH 50/55] OV-18: - libs folder

---
 .../video-modal-content/{libs => }/components/components.ts     | 0
 .../video-modal-content/{libs => }/components/tab/tab.tsx       | 0
 .../{libs => }/components/video-preview/libs/enums/enums.ts     | 0
 .../components/video-preview/libs/enums/video-preview.enum.ts   | 0
 .../components/video-preview/libs/enums/video-sizes.enum.ts     | 0
 .../{libs => }/components/video-preview/libs/types/types.ts     | 0
 .../components/video-preview/libs/types/video-preview.type.ts   | 0
 .../{libs => }/components/video-preview/video-preview.tsx       | 0
 .../libs/components/video-modal-content/video-modal-content.tsx | 2 +-
 9 files changed, 1 insertion(+), 1 deletion(-)
 rename frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/{libs => }/components/components.ts (100%)
 rename frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/{libs => }/components/tab/tab.tsx (100%)
 rename frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/{libs => }/components/video-preview/libs/enums/enums.ts (100%)
 rename frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/{libs => }/components/video-preview/libs/enums/video-preview.enum.ts (100%)
 rename frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/{libs => }/components/video-preview/libs/enums/video-sizes.enum.ts (100%)
 rename frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/{libs => }/components/video-preview/libs/types/types.ts (100%)
 rename frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/{libs => }/components/video-preview/libs/types/video-preview.type.ts (100%)
 rename frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/{libs => }/components/video-preview/video-preview.tsx (100%)

diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/components.ts b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/components.ts
similarity index 100%
rename from frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/components.ts
rename to frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/components.ts
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/tab/tab.tsx b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/tab/tab.tsx
similarity index 100%
rename from frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/tab/tab.tsx
rename to frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/tab/tab.tsx
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/enums.ts b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/enums/enums.ts
similarity index 100%
rename from frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/enums.ts
rename to frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/enums/enums.ts
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/video-preview.enum.ts b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/enums/video-preview.enum.ts
similarity index 100%
rename from frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/video-preview.enum.ts
rename to frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/enums/video-preview.enum.ts
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/video-sizes.enum.ts b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/enums/video-sizes.enum.ts
similarity index 100%
rename from frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/enums/video-sizes.enum.ts
rename to frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/enums/video-sizes.enum.ts
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/types/types.ts b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/types/types.ts
similarity index 100%
rename from frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/types/types.ts
rename to frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/types/types.ts
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/types/video-preview.type.ts b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/types/video-preview.type.ts
similarity index 100%
rename from frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/libs/types/video-preview.type.ts
rename to frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/types/video-preview.type.ts
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/video-preview.tsx b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/video-preview.tsx
similarity index 100%
rename from frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/libs/components/video-preview/video-preview.tsx
rename to frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/video-preview.tsx
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/video-modal-content.tsx b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/video-modal-content.tsx
index fa077b615..737d6bb2e 100644
--- a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/video-modal-content.tsx
+++ b/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/video-modal-content.tsx
@@ -1,7 +1,7 @@
 import { TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
 import { faPlay } from '@fortawesome/free-solid-svg-icons/faPlay';
 
-import { Tab, VideoPreview } from './libs/components/components.js';
+import { Tab, VideoPreview } from './components/components.js';
 
 const VideoModalContent = (): JSX.Element => {
     return (

From 6189c4259a393b71f7ddd4552eefad39c2ce2d44 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 21 Aug 2024 12:42:59 +0300
Subject: [PATCH 51/55] OV-18: - libs folder

---
 .../components/video-modal/{libs => }/components/components.ts  | 0
 .../components/video-modal-content/components/components.ts     | 0
 .../components/video-modal-content/components/tab/tab.tsx       | 0
 .../components/video-preview/libs/enums/enums.ts                | 0
 .../components/video-preview/libs/enums/video-preview.enum.ts   | 0
 .../components/video-preview/libs/enums/video-sizes.enum.ts     | 0
 .../components/video-preview/libs/types/types.ts                | 0
 .../components/video-preview/libs/types/video-preview.type.ts   | 0
 .../components/video-preview/video-preview.tsx                  | 0
 .../components/video-modal-content/video-modal-content.tsx      | 0
 .../src/bundles/common/components/video-modal/video-modal.tsx   | 2 +-
 11 files changed, 1 insertion(+), 1 deletion(-)
 rename frontend/src/bundles/common/components/video-modal/{libs => }/components/components.ts (100%)
 rename frontend/src/bundles/common/components/video-modal/{libs => }/components/video-modal-content/components/components.ts (100%)
 rename frontend/src/bundles/common/components/video-modal/{libs => }/components/video-modal-content/components/tab/tab.tsx (100%)
 rename frontend/src/bundles/common/components/video-modal/{libs => }/components/video-modal-content/components/video-preview/libs/enums/enums.ts (100%)
 rename frontend/src/bundles/common/components/video-modal/{libs => }/components/video-modal-content/components/video-preview/libs/enums/video-preview.enum.ts (100%)
 rename frontend/src/bundles/common/components/video-modal/{libs => }/components/video-modal-content/components/video-preview/libs/enums/video-sizes.enum.ts (100%)
 rename frontend/src/bundles/common/components/video-modal/{libs => }/components/video-modal-content/components/video-preview/libs/types/types.ts (100%)
 rename frontend/src/bundles/common/components/video-modal/{libs => }/components/video-modal-content/components/video-preview/libs/types/video-preview.type.ts (100%)
 rename frontend/src/bundles/common/components/video-modal/{libs => }/components/video-modal-content/components/video-preview/video-preview.tsx (100%)
 rename frontend/src/bundles/common/components/video-modal/{libs => }/components/video-modal-content/video-modal-content.tsx (100%)

diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/components.ts b/frontend/src/bundles/common/components/video-modal/components/components.ts
similarity index 100%
rename from frontend/src/bundles/common/components/video-modal/libs/components/components.ts
rename to frontend/src/bundles/common/components/video-modal/components/components.ts
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/components.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/components.ts
similarity index 100%
rename from frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/components.ts
rename to frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/components.ts
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/tab/tab.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/tab/tab.tsx
similarity index 100%
rename from frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/tab/tab.tsx
rename to frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/tab/tab.tsx
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/enums/enums.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/enums/enums.ts
similarity index 100%
rename from frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/enums/enums.ts
rename to frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/enums/enums.ts
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/enums/video-preview.enum.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/enums/video-preview.enum.ts
similarity index 100%
rename from frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/enums/video-preview.enum.ts
rename to frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/enums/video-preview.enum.ts
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/enums/video-sizes.enum.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/enums/video-sizes.enum.ts
similarity index 100%
rename from frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/enums/video-sizes.enum.ts
rename to frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/enums/video-sizes.enum.ts
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/types/types.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/types/types.ts
similarity index 100%
rename from frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/types/types.ts
rename to frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/types/types.ts
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/types/video-preview.type.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/types/video-preview.type.ts
similarity index 100%
rename from frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/libs/types/video-preview.type.ts
rename to frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/types/video-preview.type.ts
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/video-preview.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/video-preview.tsx
similarity index 100%
rename from frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/components/video-preview/video-preview.tsx
rename to frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/video-preview.tsx
diff --git a/frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/video-modal-content.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/video-modal-content.tsx
similarity index 100%
rename from frontend/src/bundles/common/components/video-modal/libs/components/video-modal-content/video-modal-content.tsx
rename to frontend/src/bundles/common/components/video-modal/components/video-modal-content/video-modal-content.tsx
diff --git a/frontend/src/bundles/common/components/video-modal/video-modal.tsx b/frontend/src/bundles/common/components/video-modal/video-modal.tsx
index cd8c75b41..b1e81058f 100644
--- a/frontend/src/bundles/common/components/video-modal/video-modal.tsx
+++ b/frontend/src/bundles/common/components/video-modal/video-modal.tsx
@@ -7,7 +7,7 @@ import {
     ModalOverlay,
 } from '@chakra-ui/react';
 
-import { VideoModalContent } from './libs/components/components.js';
+import { VideoModalContent } from './components/components.js';
 
 type Properties = {
     isOpen: boolean;

From 0c3c35abb1aa8f111865206b5eb1888c9da4b7a6 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 21 Aug 2024 12:56:16 +0300
Subject: [PATCH 52/55] OV-18: * video-preview

---
 .../components/video-preview/video-preview.tsx         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/video-preview.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/video-preview.tsx
index 8586316f2..c3a4a6308 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/video-preview.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/video-preview.tsx
@@ -14,11 +14,11 @@ const VideoPreview = (): JSX.Element => {
         VideoPreviewValues.PORTRAIT,
     );
 
-    const setPortraitView = useCallback((): void => {
+    const handleSetPortraitView = useCallback((): void => {
         setView(VideoPreviewValues.PORTRAIT);
     }, []);
 
-    const setLandscapeView = useCallback((): void => {
+    const handleSetLandscapeView = useCallback((): void => {
         setView(VideoPreviewValues.LANDSCAPE);
     }, []);
 
@@ -45,7 +45,7 @@ const VideoPreview = (): JSX.Element => {
                         padding="5px"
                         height="16px"
                     />
-                    <Text>
+                    <Text color="gray.400">
                         {view === VideoPreviewValues.PORTRAIT
                             ? VideoSizeLabel.PORTRAIT
                             : VideoSizeLabel.LANDSCAPE}
@@ -57,7 +57,7 @@ const VideoPreview = (): JSX.Element => {
                 <Button
                     backgroundColor="brand.secondary.300"
                     color="white"
-                    onMouseEnter={setLandscapeView}
+                    onMouseEnter={handleSetLandscapeView}
                     _hover={{ bg: 'brand.secondary.600' }}
                 >
                     Use landscape
@@ -65,7 +65,7 @@ const VideoPreview = (): JSX.Element => {
                 <Button
                     backgroundColor="brand.secondary.300"
                     color="white"
-                    onMouseEnter={setPortraitView}
+                    onMouseEnter={handleSetPortraitView}
                     _hover={{ bg: 'brand.secondary.600' }}
                 >
                     Use portrait

From 6f03027f2c8c941121df5d86b4a21832add41b49 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 21 Aug 2024 12:57:03 +0300
Subject: [PATCH 53/55] OV-18: * video-modal

---
 .../bundles/common/components/video-modal/video-modal.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/bundles/common/components/video-modal/video-modal.tsx b/frontend/src/bundles/common/components/video-modal/video-modal.tsx
index b1e81058f..dfcd36a13 100644
--- a/frontend/src/bundles/common/components/video-modal/video-modal.tsx
+++ b/frontend/src/bundles/common/components/video-modal/video-modal.tsx
@@ -11,12 +11,12 @@ import { VideoModalContent } from './components/components.js';
 
 type Properties = {
     isOpen: boolean;
-    closeModal: () => void;
+    onModalClose: () => void;
 };
 
-const VideoModal = ({ isOpen, closeModal }: Properties): JSX.Element => {
+const VideoModal = ({ isOpen, onModalClose }: Properties): JSX.Element => {
     return (
-        <Modal isOpen={isOpen} onClose={closeModal} isCentered>
+        <Modal isOpen={isOpen} onClose={onModalClose} isCentered>
             <ModalOverlay />
             <ModalContent
                 borderRadius="17px"

From 3fd0034b920104f04d22e0e5d445f2befc326ab4 Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Wed, 21 Aug 2024 14:09:22 +0300
Subject: [PATCH 54/55] OV-27: * change button props order

---
 frontend/src/bundles/common/components/button/button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/bundles/common/components/button/button.tsx b/frontend/src/bundles/common/components/button/button.tsx
index 81e033ac0..69b312847 100644
--- a/frontend/src/bundles/common/components/button/button.tsx
+++ b/frontend/src/bundles/common/components/button/button.tsx
@@ -13,8 +13,8 @@ type Properties = {
 };
 
 const Button: React.FC<Properties> = ({
-    type = 'button',
     label,
+    type = 'button',
     variant = 'solid',
     size = 'md',
     isDisabled = false,

From 295b5da3cfc4b550eb9e3d1fb17d3fc893816968 Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Wed, 21 Aug 2024 14:30:31 +0300
Subject: [PATCH 55/55] OV-1: * change button props order

---
 frontend/src/bundles/common/components/button/button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/bundles/common/components/button/button.tsx b/frontend/src/bundles/common/components/button/button.tsx
index 5a28c731c..7fb25ff6b 100644
--- a/frontend/src/bundles/common/components/button/button.tsx
+++ b/frontend/src/bundles/common/components/button/button.tsx
@@ -12,8 +12,8 @@ type Properties = {
 };
 
 const Button: React.FC<Properties> = ({
-    type = 'button',
     label,
+    type = 'button',
     size = 'md',
     isDisabled = false,
     sx = {},