From 27c87bea0a4287a1668edc29ef2305059be77ad9 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 28 Jul 2022 14:12:18 +0700
Subject: [PATCH] made better sidebar logout button

---
 src/components/menu/MenuButton/index.tsx      |  6 +++-
 .../sidebar/SidebarStack/styles.module.scss   |  2 +-
 .../ProfileSidebarLogoutButton/index.tsx      | 28 +++++++++++++++++++
 .../styles.module.scss                        |  6 ++++
 .../profile/ProfileSidebarMenu/index.tsx      |  6 ++--
 .../sidebars/ProfileSidebar/index.tsx         |  2 +-
 src/sprites/Sprites.tsx                       | 10 +++++++
 src/styles/_global.scss                       |  4 +++
 8 files changed, 58 insertions(+), 6 deletions(-)
 create mode 100644 src/containers/profile/ProfileSidebarLogoutButton/index.tsx
 create mode 100644 src/containers/profile/ProfileSidebarLogoutButton/styles.module.scss

diff --git a/src/components/menu/MenuButton/index.tsx b/src/components/menu/MenuButton/index.tsx
index 90ff0f97..24c52242 100644
--- a/src/components/menu/MenuButton/index.tsx
+++ b/src/components/menu/MenuButton/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useState } from 'react';
+import React, { FC, ReactNode, useEffect, useState } from 'react';
 
 import { Placement } from '@popperjs/core';
 import classNames from 'classnames';
@@ -56,6 +56,10 @@ const MenuButton: FC<MenuButtonProps> = ({
 
   const visible = activate === 'focus' ? focus.focused : hover.focused;
 
+  useEffect(() => {
+    popper.update?.();
+  }, [visible]);
+
   return (
     <>
       <button
diff --git a/src/components/sidebar/SidebarStack/styles.module.scss b/src/components/sidebar/SidebarStack/styles.module.scss
index 8fa51734..acc8b946 100644
--- a/src/components/sidebar/SidebarStack/styles.module.scss
+++ b/src/components/sidebar/SidebarStack/styles.module.scss
@@ -1,7 +1,7 @@
 @import "src/styles/variables";
 
 .stack {
-  background: transparentize($content_bg, 0.1);
+  background: transparentize($content_bg, 0.2);
   display: flex;
   flex-direction: row-reverse;
   width: auto;
diff --git a/src/containers/profile/ProfileSidebarLogoutButton/index.tsx b/src/containers/profile/ProfileSidebarLogoutButton/index.tsx
new file mode 100644
index 00000000..f2311214
--- /dev/null
+++ b/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 }
\ No newline at end of file
diff --git a/src/containers/profile/ProfileSidebarLogoutButton/styles.module.scss b/src/containers/profile/ProfileSidebarLogoutButton/styles.module.scss
new file mode 100644
index 00000000..586552f9
--- /dev/null
+++ b/src/containers/profile/ProfileSidebarLogoutButton/styles.module.scss
@@ -0,0 +1,6 @@
+@import "src/styles/variables";
+
+.wrapper {
+  max-width: 300px;
+  font: $font_14_regular;
+}
\ No newline at end of file
diff --git a/src/containers/profile/ProfileSidebarMenu/index.tsx b/src/containers/profile/ProfileSidebarMenu/index.tsx
index dadcf52f..8cc8a37d 100644
--- a/src/containers/profile/ProfileSidebarMenu/index.tsx
+++ b/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>
   );
diff --git a/src/containers/sidebars/ProfileSidebar/index.tsx b/src/containers/sidebars/ProfileSidebar/index.tsx
index 4e17fd44..8aad811b 100644
--- a/src/containers/sidebars/ProfileSidebar/index.tsx
+++ b/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>
diff --git a/src/sprites/Sprites.tsx b/src/sprites/Sprites.tsx
index b7e34144..18bee9f6 100644
--- a/src/sprites/Sprites.tsx
+++ b/src/sprites/Sprites.tsx
@@ -415,6 +415,16 @@ const Sprites: FC = () => (
         d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
       />
     </g>
+
+    <g id="logout">
+      <path fill="none" d="M0 0h24v24H0V0z" stroke="none" />
+      <path
+        stroke="none"
+        d="M11 13q.425 0 .713-.288Q12 12.425 12 12t-.287-.713Q11.425 11 11 11t-.712.287Q10 11.575 10 12t.288.712Q10.575 13 11 13Zm-4 8v-2l6-1V6.875q0-.375-.225-.675-.225-.3-.575-.35L7 5V3l5.5.9q1.1.2 1.8 1.025T15 6.85v12.8Zm-4 0v-2h2V5q0-.85.588-1.425Q6.175 3 7 3h10q.85 0 1.425.575Q19 4.15 19 5v14h2v2Zm4-2h10V5H7Z"
+      />
+    </g>
+
+    
   </svg>
 );
 
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index f1877d76..7cdfcab0 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -174,3 +174,7 @@ p {
 #__next {
   min-height: 100vh;
 }
+
+small {
+  font-size: 0.8em;
+}
\ No newline at end of file