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 01/21] 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 02/21] 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 03/21] 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 04/21] 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 64162de5e3b56a8559ce0617080d616cd80fb36a Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 21 Aug 2024 10:02:15 +0300
Subject: [PATCH 05/21] 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 06/21] 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 07/21] 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 08/21] 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 09/21] 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 10/21] 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 11/21] 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 12/21] 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 13/21] 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 a6158d4f05a84e0d8a3d649abd8ea4d65c912c2a Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 21 Aug 2024 11:29:38 +0300
Subject: [PATCH 14/21] 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 15/21] 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 16/21] 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 17/21] 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 18/21] 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 19/21] 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 20/21] 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 21/21] 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"