diff --git a/src/components/profile/ProfileSidebarNotes/index.tsx b/src/components/profile/ProfileSidebarNotes/index.tsx new file mode 100644 index 00000000..4bb57a81 --- /dev/null +++ b/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 = () => { + const { closeAllTabs } = useStackContext(); + + return ( + +
+ +
+
+ ); +}; + +export { ProfileSidebarNotes }; diff --git a/src/components/profile/ProfileSidebarNotes/styles.module.scss b/src/components/profile/ProfileSidebarNotes/styles.module.scss new file mode 100644 index 00000000..078e0081 --- /dev/null +++ b/src/components/profile/ProfileSidebarNotes/styles.module.scss @@ -0,0 +1,7 @@ +@import "src/styles/variables"; + +.scroller { + flex: 1; + overflow: auto; + padding: $gap; +} diff --git a/src/components/settings/SettingsMenu/index.tsx b/src/components/settings/SettingsMenu/index.tsx index 1bba1430..a4d6b3b8 100644 --- a/src/components/settings/SettingsMenu/index.tsx +++ b/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 = () => ( @@ -35,9 +35,9 @@ const SettingsMenu: VFC = () => ( -
- - +
+ +
diff --git a/src/components/settings/SettingsMenu/styles.module.scss b/src/components/settings/SettingsMenu/styles.module.scss new file mode 100644 index 00000000..b6501216 --- /dev/null +++ b/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; + } +} diff --git a/src/components/sidebar/SidebarStackCard/styles.module.scss b/src/components/sidebar/SidebarStackCard/styles.module.scss index b374e5fc..5e50b01d 100644 --- a/src/components/sidebar/SidebarStackCard/styles.module.scss +++ b/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 { diff --git a/src/containers/profile/ProfileSidebarHead/index.tsx b/src/containers/profile/ProfileSidebarHead/index.tsx index c770d125..7107c40e 100644 --- a/src/containers/profile/ProfileSidebarHead/index.tsx +++ b/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 = () => { @@ -17,7 +19,8 @@ const ProfileSidebarHead: VFC = () => { -

{user.fullname || user.username}

+
{user.fullname || user.username}
+
{!!user.fullname && `~${user.username}`}
); diff --git a/src/containers/profile/ProfileSidebarHead/styles.module.scss b/src/containers/profile/ProfileSidebarHead/styles.module.scss new file mode 100644 index 00000000..82a7f013 --- /dev/null +++ b/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; +} diff --git a/src/containers/profile/ProfileSidebarMenu/index.tsx b/src/containers/profile/ProfileSidebarMenu/index.tsx index 6bf81045..97481c7b 100644 --- a/src/containers/profile/ProfileSidebarMenu/index.tsx +++ b/src/containers/profile/ProfileSidebarMenu/index.tsx @@ -37,13 +37,21 @@ const ProfileSidebarMenu: VFC = ({ onClose }) => { setActiveTab(2)}>Удалённые посты - +
+ +
- + + + + + ); }; diff --git a/src/containers/profile/ProfileSidebarMenu/styles.module.scss b/src/containers/profile/ProfileSidebarMenu/styles.module.scss index b2c470b1..7fe4dcd8 100644 --- a/src/containers/profile/ProfileSidebarMenu/styles.module.scss +++ b/src/containers/profile/ProfileSidebarMenu/styles.module.scss @@ -11,3 +11,11 @@ .text { margin-top: $gap * 2; } + +.buttons { + flex: 0; +} + +.stats { + display: none; +} diff --git a/src/containers/sidebars/ProfileSidebar/index.tsx b/src/containers/sidebars/ProfileSidebar/index.tsx index 863f2bce..c6f1255d 100644 --- a/src/containers/sidebars/ProfileSidebar/index.tsx +++ b/src/containers/sidebars/ProfileSidebar/index.tsx @@ -1,5 +1,6 @@ import React, { VFC } from 'react'; +import { ProfileSidebarNotes } from '~/components/profile/ProfileSidebarNotes'; import { ProfileSidebarSettings } from '~/components/profile/ProfileSidebarSettings'; import { SidebarStack } from '~/components/sidebar/SidebarStack'; import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard'; @@ -19,6 +20,7 @@ const ProfileSidebar: VFC = ({ onRequestClose }) => { + diff --git a/src/layouts/SettingsLayout/styles.module.scss b/src/layouts/SettingsLayout/styles.module.scss index f7b0f877..3f3800a8 100644 --- a/src/layouts/SettingsLayout/styles.module.scss +++ b/src/layouts/SettingsLayout/styles.module.scss @@ -22,5 +22,6 @@ @include tablet { margin-top: 0; + flex-direction: column; } }