refactor main components and IProps

src/containers/main/BottomContainer/index.tsx

@@ -1,19 +0,0 @@
-import { FC } from 'react';
-
-import { PlayerView } from '~/containers/player/PlayerView';
-
-import styles from './styles.module.scss';
-
-type IProps = {};
-
-const BottomContainer: FC<IProps> = () => (
-  <div className={styles.wrap}>
-    <div className={styles.content}>
-      <div className={styles.padder}>
-        <PlayerView />
-      </div>
-    </div>
-  </div>
-);
-
-export { BottomContainer };

src/containers/main/BottomContainer/styles.module.scss

@@ -1,39 +0,0 @@
-@import 'src/styles/variables';
-
-.wrap {
-  position: fixed;
-  bottom: 0;
-  pointer-events: none;
-  touch-action: none;
-  height: $bar_height;
-  display: flex;
-  z-index: 10;
-  width: 100%;
-  left: 0;
-  align-items: center;
-  justify-content: center;
-  //padding: 0 calc(min(100vw, #{$content_width}) - 64px) 0 $gap;
-  box-sizing: border-box;
-  padding: 0;
-}
-
-.content {
-  position: relative;
-  flex: 0 1 $content_width;
-  height: $bar_height;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.padder {
-  display: flex;
-  flex-basis: calc(min(100vw - 94px, #{$content_width}));
-  align-items: center;
-  justify-content: flex-end;
-
-  & > div {
-    pointer-events: all;
-    touch-action: auto;
-  }
-}

src/containers/main/Container/index.tsx

@@ -1,15 +0,0 @@
-import { FC } from 'react';
-
-import classNames from 'classnames';
-
-import styles from './styles.module.scss';
-
-interface IProps {
-  className?: string;
-}
-
-const Container: FC<IProps> = ({ className, children }) => (
-  <div className={classNames(styles.container, className)}>{children}</div>
-);
-
-export { Container };

src/containers/main/Container/styles.module.scss

@@ -1,5 +0,0 @@
-@import "src/styles/variables.scss";
-
-.container {
-  @include container;
-}

src/containers/main/Header/index.tsx

@@ -7,8 +7,8 @@ import { observer } from 'mobx-react-lite';
 import { Anchor } from '~/components/common/Anchor';
 import { Authorized } from '~/components/common/Authorized';
 import { Filler } from '~/components/common/Filler';
+import { Logo } from '~/components/common/Logo';
 import { Button } from '~/components/input/Button';
-import { Logo } from '~/components/main/Logo';
 import { Dialog } from '~/constants/modal';
 import { URLS } from '~/constants/urls';
 import { useAuth } from '~/hooks/auth/useAuth';

src/containers/main/MainRouter/index.tsx

@@ -10,9 +10,9 @@ import BorisPage from '~/pages/boris';
 import LabPage from '~/pages/lab';
 import NodePage from '~/pages/node/[id]';
 
-interface IProps {}
+interface Props {}
 
-const MainRouter: FC<IProps> = () => {
+const MainRouter: FC<Props> = () => {
   const { isUser } = useAuth();
   const location = useLocation();
 

src/containers/main/SubmitBarRouter/index.tsx

@@ -4,12 +4,12 @@ import { Authorized } from '~/components/common/Authorized';
 
 import { SubmitBarSSR } from './components/SubmitBar/ssr';
 
-interface IProps {
+interface Props {
   prefix?: string;
   isLab?: boolean;
 }
 
-const SubmitBarRouter: FC<IProps> = ({ isLab }) => (
+const SubmitBarRouter: FC<Props> = ({ isLab }) => (
   <Authorized>
     <SubmitBarSSR isLab={isLab} />
   </Authorized>

src/containers/main/UserButtonWithNotifications/components/UserButton/index.tsx

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+
+import { Avatar } from '~/components/common/Avatar';
+import { Group } from '~/components/common/Group';
+import { imagePresets } from '~/constants/urls';
+import { IFile } from '~/types';
+import { getURL } from '~/utils/dom';
+
+import styles from './styles.module.scss';
+
+interface Props {
+  username: string;
+  photo?: IFile;
+  hasUpdates?: boolean;
+
+  onClick?: () => void;
+}
+
+const UserButton: FC<Props> = ({ username, photo, hasUpdates, onClick }) => {
+  return (
+    <button className={styles.wrap} onClick={onClick}>
+      <Group horizontal className={styles.user_button}>
+        <div className={styles.username}>{username}</div>
+        <Avatar
+          url={getURL(photo, imagePresets.avatar)}
+          size={32}
+          hasUpdates={hasUpdates}
+        />
+      </Group>
+    </button>
+  );
+};
+
+export { UserButton };

src/containers/main/UserButtonWithNotifications/components/UserButton/styles.module.scss

@@ -0,0 +1,55 @@
+@import 'src/styles/variables';
+
+.wrap {
+  position: relative;
+  z-index: 2;
+
+  &:hover .menu {
+    display: flex;
+  }
+}
+
+.user_button {
+  align-items: center;
+  border-radius: $radius;
+  font: $font_16_semibold;
+  text-transform: uppercase;
+  flex: 0 !important;
+  cursor: pointer;
+  margin-left: $gap;
+  white-space: nowrap;
+  padding: 0;
+}
+
+.user_avatar {
+  @include outer_shadow();
+
+  flex: 0 0 32px;
+  width: 32px;
+  height: 32px;
+  background: white;
+  border-radius: $radius;
+  margin-left: ($gap + 2px) !important;
+  background: 50% 50% no-repeat $color_primary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+
+  svg {
+    fill: #222222;
+    stroke: #222222;
+    width: 24px;
+    height: 24px;
+  }
+
+  @include tablet {
+    margin-left: 0 !important;
+  }
+}
+
+.username {
+  @include tablet {
+    display: none;
+  }
+}

src/containers/main/UserButtonWithNotifications/index.tsx

@@ -1,11 +1,12 @@
 import { FC, useCallback } from 'react';
 
-import { UserButton } from '~/components/main/UserButton';
 import { SidebarName } from '~/constants/sidebar';
 import { useAuth } from '~/hooks/auth/useAuth';
 import { useNotifications } from '~/utils/providers/NotificationProvider';
 import { useSidebar } from '~/utils/providers/SidebarProvider';
 
+import { UserButton } from './components/UserButton';
+
 interface UserButtonWithNotificationsProps {}
 
 const UserButtonWithNotifications: FC<