Merge pull request #273 from BinaryStudioAcademy/task/OV-272-update-l…

…ogo-and-loader

OV-272: Add logo

frontend/src/bundles/auth/components/common/form-header/form-header.tsx

@@ -1,4 +1,4 @@
-import { Heading, Text } from '~/bundles/common/components/components.js';
+import { Heading, Logo, Text } from '~/bundles/common/components/components.js';
 
 import styles from './styles.module.css';
 
@@ -10,8 +10,8 @@ type Properties = {
 const FormHeader: React.FC<Properties> = ({ headerText, subheader }) => {
     return (
         <>
-            {/* TODO: Add logo */}
-            <h2 className={styles['logo']}>LOGO</h2>
+            <Logo textSize="200px" logoSize="60px" />
+
             <Heading as="h1" className={styles['heading']}>
                 {headerText}
             </Heading>

frontend/src/bundles/auth/components/common/form-header/styles.module.css

@@ -1,5 +1,10 @@
 .logo {
     margin-bottom: 50px;
+    display: flex;
+}
+
+.logo img {
+    margin-right: 10px;
 }
 
 .heading {

frontend/src/bundles/auth/pages/auth.tsx

@@ -3,6 +3,7 @@ import { Navigate } from 'react-router-dom';
 import {
     Center,
     Loader,
+    Logo,
     Overlay,
     SimpleGrid,
 } from '~/bundles/common/components/components.js';
@@ -64,12 +65,11 @@ const Auth: React.FC = () => {
             </Overlay>
 
             <Center bgColor="background.600">{getScreen(pathname)}</Center>
-            {/* TODO: Add logo */}
             <Center
                 bgColor="background.900"
                 display={{ base: 'none', sm: 'flex' }}
             >
-                LOGO
+                <Logo logoSize="200px" />
             </Center>
         </SimpleGrid>
     );

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

@@ -4,6 +4,7 @@ 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 { Logo } from './logo/logo.js';
 export { NotFoundAnimation } from './not-found-animation/not-found-animation.js';
 export { Overlay } from './overlay/overlay.js';
 export { Player } from './player/player.js';

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

@@ -1,5 +1,6 @@
-import { Box, Flex, Text } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 
+import { Logo } from '~/bundles/common/components/components.js';
 import { AppRoute } from '~/bundles/common/enums/enums.js';
 
 import { Link } from '../link/link.js';
@@ -15,9 +16,8 @@ const Header: React.FC<Properties> = ({ left, center, right }) => {
     return (
         <Flex as="header" className={styles['header']}>
             {left ?? (
-                // {/* TODO: Add logo */}
                 <Link to={AppRoute.ROOT}>
-                    <Text className={styles['logoText']}>Logo</Text>
+                    <Logo textSize="150px" logoSize="40px" />
                 </Link>
             )}
             <Box>{center}</Box>

frontend/src/bundles/common/components/header/styles.module.css

@@ -12,8 +12,15 @@
     justify-content: space-between;
 }
 
-.logoText {
-    font-size: var(--chakra-fontSizes-xl);
-    font-weight: var(--chakra-fontWeights-lighter);
-    color: var(--chakra-colors-white);
+.logo {
+    width: 50px;
+    height: 50px;
+}
+
+.logo-container {
+    display: flex;
+    align-items: center;
+}
+.logo-container img {
+    margin-right: 10px;
 }

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

@@ -1,17 +1,19 @@
-import { Box, Circle, Flex, Text } from '@chakra-ui/react';
+import {
+    Box,
+    Circle,
+    Flex,
+    Logo,
+    Text,
+} from '~/bundles/common/components/components.js';
 
 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 size="full" color="text.default">
+                    <Logo logoSize="70px" />
                 </Circle>
                 <Circle
                     position="absolute"

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

@@ -0,0 +1,28 @@
+import { type ChakraProps as ChakraProperties, Box } from '@chakra-ui/react';
+
+import logo from '~/assets/img/logo.svg';
+import logoTxt from '~/assets/img/logo-text.svg';
+import { Image } from '~/bundles/common/components/components.js';
+
+type Properties = {
+    textSize?: string;
+    logoSize: string;
+} & ChakraProperties;
+
+const Logo: React.FC<Properties> = ({ logoSize, textSize, ...rest }) => {
+    return (
+        <Box display="flex" alignItems="center">
+            <Image src={logo} alt="Logo" {...rest} ml={2} boxSize={logoSize} />
+            {textSize && (
+                <Image
+                    src={logoTxt}
+                    alt="Logo Text"
+                    boxSize={textSize}
+                    ml={2}
+                />
+            )}
+        </Box>
+    );
+};
+
+export { Logo };