edit header

src/container/main/components/layout/header.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { getNavigationsValue } from '@brojs/cli';
-
-const navigations: Array<{ name: string; href: string }> = [
-  {
-    name: 'Регистрация',
-    href: getNavigationsValue('sberhubproject.signup')
-  }
-];
-
-const Header = (): React.ReactElement => {
-  return (
-    <header>
-      <ul>
-        {navigations.map((item) => {
-          return (
-            <li key={item.name}>
-              <Link to={item.href}>{item.name}</Link>
-            </li>
-          );
-        })}
-      </ul>
-    </header>
-  );
-};
-
-export default Header;

src/container/main/components/layout/header/index.style.ts

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+import AppBar from '@mui/material/AppBar';
+
+export const AppBarStyled = styled(AppBar)`
+    background-color: var(--tg-theme-button-color);
+
+`;

src/container/main/components/layout/header/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Logo from './logo';
+import { AppBarStyled } from './index.style';
+import Toolbar from '@mui/material/Toolbar';
+
+const Header = (): React.ReactElement => {
+  return (
+    <header>
+      <AppBarStyled position="static">
+        <Toolbar>
+          <Logo />
+        </Toolbar>          
+      </AppBarStyled>
+    </header>
+  );
+};
+
+export default Header;

src/container/main/components/layout/header/logo/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import logoPng from './logo.png';
+
+const LogoStyled = styled.img`
+  height: 40px;
+  padding: 8px;
+`;
+
+const Logo = () => {
+  return <LogoStyled src={logoPng} alt={'logo'} />;
+};
+
+export default Logo;

src/container/signup/index.tsx

@@ -17,19 +17,8 @@ import { useConstant } from '../Constant';
 import { GridChildrenStyle } from './index.style';
 
 const SingUpPage = (): React.ReactElement => {
-  const [selectedPhoto, setSelectedPhoto] = useState(null);
-  const [selectedOption, setSelectedOption] = useState<string | null>(null);
-
-  const handlePhotoChange = (photo) => {
-    setSelectedPhoto(photo);
-  };
-
-  const handleChange = (selectedOption) => {
-    setSelectedOption(selectedOption);
-  };
-
-
   const { interests } = useConstant();
+
   //const { user_id, username, onClose } = useTelegram();
   /*
   const handleSubmit = async (event) => {
@@ -55,7 +44,7 @@ const SingUpPage = (): React.ReactElement => {
       <Container component="main" maxWidth="xs">
         <Box
           sx={{
-            marginTop: 8,
+            marginTop: 4,
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
@@ -91,8 +80,8 @@ const SingUpPage = (): React.ReactElement => {
               </GridChildrenStyle>
               <GridChildrenStyle size={12}>
                 <Photo 
-                  
-                  onPhotoChange={handlePhotoChange} 
+                  id="photo"
+                  name="photo" 
                 />
               </GridChildrenStyle>
               <GridChildrenStyle size={12}>

src/container/signup/interests/index.style.ts

@@ -33,7 +33,7 @@ export const InterestsStyled = styled(Select)`
     }
 
     &.select__option--is-selected {
-      background-color: var(--tg-theme-selected-color, #0066ff);
+      background-color: var(--tg-theme-button-color);
       color: #ffffff;
     }
 
@@ -48,7 +48,7 @@ export const InterestsStyled = styled(Select)`
   }
 
   .select__multi-value {
-    background-color: var(--tg-theme-selected-color, #0066ff);
+    background-color: var(--tg-theme-button-color);
     color: #ffffff;
     border-radius: 4px;
 

src/container/signup/photo/index.style.ts

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import Avatar from "@mui/material/Avatar";
 
-export const PhotoStyled = styled.div<{ value: string | null }>`
+export const PhotoStyled = styled.div<{ id: string, name: string, value: string | null }>`
   position: relative;
   display: inline-block;
   cursor: pointer;

src/container/signup/photo/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useState } from 'react';
 import { AvatarStyled, PhotoStyled, InputStyled } from './index.style';
 
-const Photo = ({ defaultPhoto = null, onPhotoChange }): React.ReactElement => {
+const Photo = ({ id, name, defaultPhoto = null}): React.ReactElement => {
   const [photo, setPhoto] = useState(defaultPhoto);
 
   const handleFileChange = (event) => {
@@ -13,7 +13,6 @@ const Photo = ({ defaultPhoto = null, onPhotoChange }): React.ReactElement => {
       reader.onload = (e) => {
         const newPhoto = e.target.result;
         setPhoto(newPhoto);
-        if (onPhotoChange) onPhotoChange(newPhoto); 
       };
 
       reader.readAsDataURL(file);
@@ -27,7 +26,11 @@ const Photo = ({ defaultPhoto = null, onPhotoChange }): React.ReactElement => {
 
   
   return (
-    <PhotoStyled>
+    <PhotoStyled
+      id = {id}
+      name = {name}
+      value = {photo}
+    >
       <AvatarStyled
         src={photo}
         alt="Выберите фотографию"