Add logo

Author: dolfinus

package.json

@@ -80,7 +80,7 @@
     "npm": ">10"
   },
   "lint-staged": {
-    "src/**/*": "prettier --write --list-different",
+    "src/**/*.{ts,tsx,js,jsx,json,css,less}": "prettier --write --list-different",
     "src/**/*.{ts,tsx}": "eslint --fix"
   }
 }

src/app/styles/antd.less

@@ -63,3 +63,8 @@
 p:last-of-type {
   margin-bottom: 0;
 }
+
+.ant-layout-header {
+  padding-left: 10px;
+  padding-right: 20px;
+}

src/features/auth/Login/assets/index.ts

@@ -0,0 +1,3 @@
+import Logo from './logo.svg';
+
+export { Logo };

src/features/auth/Login/assets/logo.svg

@@ -4,6 +4,7 @@ import { authService, LoginResponse, useLogin } from '@entities/auth';
 import { Form, Input, Typography } from 'antd';
 import { useTranslation } from 'react-i18next';
 
+import { Logo } from './assets';
 import classes from './styles.module.less';
 
 const { Title } = Typography;
@@ -18,7 +19,8 @@ export const Login = () => {
 
   return (
     <div className={classes.wrapper}>
-      <Title>{t('auth')}</Title>
+      <Logo className={classes.logo} />
+      <Title level={2}>{t('auth')}</Title>
       <ManagedForm mutationFunction={authService.login} onSuccess={onSuccess}>
         <Form.Item label={t('username')} name="username" rules={[{ required: true }]}>
           <Input size="large" />

src/features/auth/Login/index.tsx

@@ -7,4 +7,9 @@
   background-color: @white;
   border-radius: 16px;
   box-shadow: @box-shadow-base;
+
+  .logo {
+    width: auto;
+    height: auto;
+  }
 }

src/features/auth/Login/styles.module.less

@@ -0,0 +1,3 @@
+import Logo from './logo.svg';
+
+export { Logo };

src/widgets/layout/Header/assets/index.ts

@@ -8,6 +8,7 @@ import { ChangeLanguageSelect } from '@shared/config';
 
 import classes from './styles.module.less';
 import { LogoutButton } from './components';
+import { Logo } from './assets';
 
 const { Header: AntdHeader } = Layout;
 const { Text } = Typography;
@@ -17,9 +18,8 @@ export const Header = () => {
 
   return (
     <AntdHeader className={classes.header}>
-      {/* TODO: [DOP-20026] Need to add logo */}
       <div className={classes.left}>
-        <div className={classes.logo} />
+        <Logo className={classes.logo} />
         <div className={classes.select}>
           <SelectGroup />
         </div>

src/widgets/layout/Header/assets/logo.svg

@@ -6,9 +6,13 @@
   .left {
     display: flex;
     align-items: center;
+    gap: 40px;
 
     .logo {
       min-width: 200px;
+      width: auto;
+      height: 64px;
+      padding: 10px;
     }
 
     .select {