fixed appearance for profile sidebar

src/components/profile/ProfileSidebarNotes/index.tsx

@@ -0,0 +1,23 @@
+import React, { VFC } from 'react';
+
+import { useStackContext } from '~/components/sidebar/SidebarStack';
+import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
+import { SettingsNotes } from '~/containers/settings/SettingsNotes';
+
+import styles from './styles.module.scss';
+
+interface ProfileSidebarNotesProps {}
+
+const ProfileSidebarNotes: VFC<ProfileSidebarNotesProps> = () => {
+  const { closeAllTabs } = useStackContext();
+
+  return (
+    <SidebarStackCard width={800} headerFeature="back" title="Заметки" onBackPress={closeAllTabs}>
+      <div className={styles.scroller}>
+        <SettingsNotes />
+      </div>
+    </SidebarStackCard>
+  );
+};
+
+export { ProfileSidebarNotes };

src/components/profile/ProfileSidebarNotes/styles.module.scss

@@ -0,0 +1,7 @@
+@import "src/styles/variables";
+
+.scroller {
+  flex: 1;
+  overflow: auto;
+  padding: $gap;
+}

src/components/settings/SettingsMenu/index.tsx

@@ -1,6 +1,5 @@
 import React, { VFC } from 'react';
 
-import classNames from 'classnames';
 import Link from 'next/link';
 
 import { Filler } from '~/components/containers/Filler';
@@ -9,9 +8,10 @@ import { Button } from '~/components/input/Button';
 import { VerticalMenu } from '~/components/menu/VerticalMenu';
 import { URLS } from '~/constants/urls';
 import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead';
-import styles from '~/containers/profile/ProfileSidebarMenu/styles.module.scss';
 import { ProfileStats } from '~/containers/profile/ProfileStats';
 
+import styles from './styles.module.scss';
+
 interface SettingsMenuProps {}
 
 const SettingsMenu: VFC<SettingsMenuProps> = () => (
@@ -35,9 +35,9 @@ const SettingsMenu: VFC<SettingsMenuProps> = () => (
         </Link>
       </VerticalMenu>
 
-      <br />
-
-      <ProfileStats />
+      <div className={styles.stats}>
+        <ProfileStats />
+      </div>
 
       <Group horizontal>
         <Filler />

src/components/settings/SettingsMenu/styles.module.scss

@@ -0,0 +1,21 @@
+@import "../../../styles/variables";
+
+.wrap {
+  padding: $gap;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.text {
+  margin-top: $gap * 2;
+}
+
+.stats {
+  margin-top: 1em;
+
+  @include tablet {
+    display: none;
+  }
+}

src/components/sidebar/SidebarStackCard/styles.module.scss

@@ -8,6 +8,8 @@
   flex-direction: column;
   height: 100%;
   min-height: 0;
+  box-shadow: transparentize(black, 0.8) -5px 0 5px;
+  border-radius: $radius;
 }
 
 .head {