fixed appearance for profile sidebar

src/containers/profile/ProfileSidebarHead/index.tsx

@@ -6,6 +6,8 @@ import { ProfileAvatar } from '~/components/profile/ProfileAvatar';
 import { usePatchUser } from '~/hooks/auth/usePatchUser';
 import { useUser } from '~/hooks/auth/useUser';
 
+import styles from './styles.module.scss';
+
 interface ProfileSidebarHeadProps {}
 
 const ProfileSidebarHead: VFC<ProfileSidebarHeadProps> = () => {
@@ -17,7 +19,8 @@ const ProfileSidebarHead: VFC<ProfileSidebarHeadProps> = () => {
       <ProfileAvatar canEdit onChangePhoto={updatePhoto} photo={user.photo} size={72} />
 
       <Filler>
-        <h2>{user.fullname || user.username}</h2>
+        <div className={styles.name}>{user.fullname || user.username}</div>
+        <div className={styles.username}>{!!user.fullname && `~${user.username}`}</div>
       </Filler>
     </Group>
   );

src/containers/profile/ProfileSidebarHead/styles.module.scss

@@ -0,0 +1,11 @@
+@import "src/styles/variables";
+
+.name {
+  font: $font_20_semibold;
+}
+
+.username {
+  margin-top: 2px;
+  opacity: 0.5;
+  font: $font_14_medium;
+}

src/containers/profile/ProfileSidebarMenu/index.tsx

@@ -37,13 +37,21 @@ const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => {
             <VerticalMenu.Item onClick={() => setActiveTab(2)}>Удалённые посты</VerticalMenu.Item>
           </VerticalMenu>
 
-          <ProfileStats />
+          <div className={styles.stats}>
+            <ProfileStats />
+          </div>
         </Group>
       </Filler>
 
-      <Button round onClick={onClose} color="secondary">
-        Закрыть
-      </Button>
+      <Group className={styles.buttons}>
+        <Button round onClick={onClose} color="outline">
+          Выйти
+        </Button>
+
+        <Button round onClick={onClose} color="outline-white">
+          Закрыть
+        </Button>
+      </Group>
     </div>
   );
 };

src/containers/profile/ProfileSidebarMenu/styles.module.scss

@@ -11,3 +11,11 @@
 .text {
   margin-top: $gap * 2;
 }
+
+.buttons {
+  flex: 0;
+}
+
+.stats {
+  display: none;
+}