Merge branch 'next' into task/OV-11-add-header

.github/ISSUE_TEMPLATE/task.yml

@@ -0,0 +1,17 @@
+name: Task
+description: Abstract task description
+title: 'TASK:'
+projects: 'BinaryStudioAcademy/30'
+body:
+    - type: textarea
+      id: what-feature
+      attributes:
+          label: What task?
+          placeholder: Add descriptions
+      validations:
+          required: true
+    - type: textarea
+      id: screenshots
+      attributes:
+          label: Add screenshots
+          placeholder: Add screenshots, mockups, etc.

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

@@ -2,6 +2,8 @@ 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 { Loader } from './loader/loader.js';
+export { Overlay } from './overlay/overlay.js';
 export { RouterProvider } from './router-provider/router-provider.js';
 export {
     Box,

frontend/src/bundles/common/components/loader/libs/constants/constants.ts

@@ -0,0 +1 @@
+export { SPIN_ANIMATION } from './spin-animation.constant.js';

frontend/src/bundles/common/components/loader/libs/constants/spin-animation.constant.ts

@@ -0,0 +1,8 @@
+import { keyframes } from '@chakra-ui/react';
+
+const SPIN_ANIMATION = keyframes`
+    0% { transform: rotate(0deg);}
+    100% { transform: rotate(360deg)}
+`;
+
+export { SPIN_ANIMATION };

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

@@ -0,0 +1,32 @@
+import { Box, Circle, Flex, Text } from '@chakra-ui/react';
+
+import { SPIN_ANIMATION } from './libs/constants/constants.js';
+
+const Loader = (): JSX.Element => {
+    return (
+        <Flex flexDirection="column" alignItems="center">
+            <Box position="relative" width="100px" height="100px">
+                <Circle
+                    size="full"
+                    backgroundColor="white"
+                    color="text.default"
+                >
+                    LOGO
+                </Circle>
+                <Circle
+                    position="absolute"
+                    inset="0"
+                    borderWidth="5px"
+                    borderColor="shadow.200"
+                    borderTopColor="brand.secondary.300"
+                    animation={`${SPIN_ANIMATION} 1s linear infinite`}
+                />
+            </Box>
+            <Text fontSize="lg" marginTop="10px">
+                Loading...
+            </Text>
+        </Flex>
+    );
+};
+
+export { Loader };

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

@@ -0,0 +1,26 @@
+import { Fade, Flex } from '@chakra-ui/react';
+
+type Properties = {
+    isOpen: boolean;
+    children: React.ReactNode;
+};
+
+const Overlay = ({ isOpen, children }: Properties): JSX.Element => {
+    return (
+        <Fade in={isOpen}>
+            <Flex
+                width="full"
+                height="full"
+                position="absolute"
+                background="shadow.700"
+                color="white"
+                justifyContent="center"
+                alignItems="center"
+            >
+                {children}
+            </Flex>
+        </Fade>
+    );
+};
+
+export { Overlay };

frontend/src/framework/theme/styles/colors.styles.ts

@@ -1,7 +1,15 @@
 const colors = {
+    white: '#ffffff',
     brand: {
         900: '#1a365d',
         200: '#b3e0ff',
+        secondary: {
+            300: '#ff6e1c',
+        },
+    },
+    shadow: {
+        200: 'rgba(0, 0, 0, 0.2)',
+        700: 'rgba(0, 0, 0, 0.7)',
     },
     background: {
         900: '#0a0049',