made better sidebar logout button

src/containers/profile/ProfileSidebarLogoutButton/index.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+
+import { Group } from '~/components/containers/Group';
+import { Padder } from '~/components/containers/Padder';
+import { Button } from '~/components/input/Button';
+import { Icon } from '~/components/input/Icon';
+import { MenuButton } from '~/components/menu';
+
+import styles from './styles.module.scss';
+
+interface ProfileSidebarLogoutButtonProps {
+  onLogout?: () => void;
+}
+
+const ProfileSidebarLogoutButton: FC<ProfileSidebarLogoutButtonProps> = ({ onLogout }) => (
+  <MenuButton icon={<Button color="link" iconRight="logout">Выйти</Button>} position="top-end">
+    <Padder className={styles.wrapper}>
+      <Group>
+        <h5>Захотелось наружу?</h5>
+        <div>Там холодно, страшно и больше не раздают пончики!</div>
+        <div />
+        <div><Button onClick={onLogout} color="primary" stretchy>Выпустите меня!</Button></div>
+      </Group>
+    </Padder>
+  </MenuButton>
+);
+
+export { ProfileSidebarLogoutButton }

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

@@ -0,0 +1,6 @@
+@import "src/styles/variables";
+
+.wrapper {
+  max-width: 300px;
+  font: $font_14_regular;
+}

src/containers/profile/ProfileSidebarMenu/index.tsx

@@ -14,6 +14,8 @@ import { ProfileStats } from '~/containers/profile/ProfileStats';
 import { useAuth } from '~/hooks/auth/useAuth';
 import markdown from '~/styles/common/markdown.module.scss';
 
+import { ProfileSidebarLogoutButton } from '../ProfileSidebarLogoutButton';
+
 import styles from './styles.module.scss';
 
 interface ProfileSidebarMenuProps {
@@ -49,9 +51,7 @@ const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => {
 
       <Group className={styles.buttons} horizontal>
         <Filler />
-        <MenuButton icon={<Button color="link"><Icon icon="dots-vertical" size={24} /></Button>} position="top-end">
-          <MenuItemWithIcon onClick={onLogout}>Выйти</MenuItemWithIcon>
-        </MenuButton>
+        <ProfileSidebarLogoutButton onLogout={onLogout}/>
       </Group>
     </div>
   );

src/containers/sidebars/ProfileSidebar/index.tsx

@@ -15,7 +15,7 @@ interface ProfileSidebarProps extends DialogComponentProps {
 const ProfileSidebar: VFC<ProfileSidebarProps> = ({ onRequestClose }) => {
   return (
     <SidebarWrapper onClose={onRequestClose}>
-      <SidebarStack initialTab={0}>
+      <SidebarStack>
         <SidebarStackCard headerFeature="close" title="Профиль" onBackPress={onRequestClose}>
           <ProfileSidebarMenu onClose={onRequestClose} />
         </SidebarStackCard>