Merge branch 'next' into task/OV-5-JWT-token

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

@@ -6,7 +6,7 @@ type Properties = {
 };
 
 const Button: React.FC<Properties> = ({ type = 'button', label }) => (
-    <LibraryButton type={type} color="brand.900" width="full">
+    <LibraryButton type={type} width="full">
         {label}
     </LibraryButton>
 );

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

@@ -1,11 +1,16 @@
 export { Button } from './button/button.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,
+    Circle,
     ChakraProvider as ComponentsProvider,
+    Flex,
     Heading,
+    Text,
     VStack,
 } from '@chakra-ui/react';
 export { FormikProvider as FormProvider } from 'formik';

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/bundles/users/components/components.ts

@@ -0,0 +1 @@
+export { UserCard } from './user-card/user-card.js';

frontend/src/bundles/users/components/user-card/user-card.tsx

@@ -0,0 +1,32 @@
+import {
+    Button,
+    Circle,
+    Flex,
+    Text,
+    VStack,
+} from '~/bundles/common/components/components.js';
+
+const UserCard: React.FC = () => (
+    <VStack rounded="lg" bg="background.600" spacing="10px" p="15px 5px 10px">
+        <Flex
+            w="full"
+            align="center"
+            color="brand.secondary.900"
+            gap="15px"
+            pl="10px"
+        >
+            {/* TODO: replace Circle and Text content with dynamic values */}
+            <Circle
+                size="40px"
+                border="2px solid"
+                borderColor="brand.secondary.900"
+            >
+                FN
+            </Circle>
+            <Text>Firstname Lastname</Text>
+        </Flex>
+        <Button label="Create video" />
+    </VStack>
+);
+
+export { UserCard };

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

@@ -1,7 +1,28 @@
 const colors = {
+    white: '#ffffff',
+    background: {
+        900: '#0a0049',
+        600: '#35399a',
+        300: '#3c9cf5',
+        50: '#e2e1ec',
+    },
     brand: {
         900: '#1a365d',
         200: '#b3e0ff',
+        secondary: {
+            300: '#ff6e1c',
+            600: '#eb5500',
+            900: '#e13b00',
+        },
+    },
+    shadow: {
+        200: 'rgba(0, 0, 0, 0.2)',
+        700: 'rgba(0, 0, 0, 0.7)',
+    },
+    typography: {
+        900: '#181b1a',
+        600: '#616271',
+        300: '#989898',
     },
     text: {
         default: '#36454f',

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

@@ -1,7 +1,81 @@
+import { colors } from './colors.styles.js';
+
 const components = {
     Heading: {
         baseStyle: {
-            color: 'text.accent',
+            color: colors.text.accent,
+        },
+    },
+    Button: {
+        variants: {
+            solid: {
+                color: colors.white,
+                bgColor: colors.brand.secondary[300],
+                _hover: {
+                    bg: colors.brand.secondary[600],
+                    _disabled: {
+                        bg: colors.brand.secondary[600],
+                    },
+                },
+            },
+            ghostIcon: {
+                color: colors.white,
+                _hover: {
+                    color: colors.brand.secondary[300],
+                },
+            },
+        },
+    },
+    Link: {
+        variants: {
+            primary: {
+                color: colors.text.default,
+            },
+            secondary: {
+                color: colors.brand.secondary[300],
+                _hover: {
+                    color: colors.brand.secondary[600],
+                },
+            },
+        },
+        baseStyle: {
+            _hover: {
+                textDecoration: 'none',
+            },
+        },
+    },
+    Input: {
+        variants: {
+            outline: {
+                field: {
+                    _focus: {
+                        borderWidth: '2px',
+                        borderColor: colors.brand.secondary[300],
+                        boxShadow: 'none',
+                    },
+                    _placeholder: {
+                        color: colors.typography[300],
+                    },
+                    _invalid: {
+                        borderWidth: '2px',
+                        borderColor: colors.brand.secondary[900],
+                        boxShadow: 'none',
+                    },
+                    _autofill: {
+                        textFillColor: colors.white,
+                        caretColor: colors.white,
+                        boxShadow: '0 0 0 0 inherit inset',
+                        transition: 'background-color 5000s ease-in-out 0s',
+                    },
+                },
+            },
+        },
+    },
+    FormError: {
+        baseStyle: {
+            text: {
+                color: colors.brand.secondary[900],
+            },
         },
     },
 };