fixed illustration and sizings on a phone

src/components/flow/FlowLoginStamp/index.tsx

@@ -1,8 +1,9 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';
 import { Dialog } from '~/constants/modal';
+import { useWindowSize } from '~/hooks/dom/useWindowSize';
 import { useShowModal } from '~/hooks/modal/useShowModal';
 
 import styles from './styles.module.scss';
@@ -11,9 +12,10 @@ const FlowLoginStamp = () => {
   const showModal = useShowModal(Dialog.Login);
 
   const onClick = useCallback(() => showModal({}), [showModal]);
+  const { isTablet } = useWindowSize();
 
   return (
-    <div className={styles.stamp}>
+    <div className={styles.stamp} onClick={onClick}>
       <Filler />
 
       <div className={styles.content}>
@@ -23,9 +25,9 @@ const FlowLoginStamp = () => {
           stretchy
           color="outline-white"
           className={styles.button}
-          onClick={onClick}
+          size={isTablet ? 'small' : 'normal'}
         >
-          Впустите меня!
+          Впустите!
         </Button>
       </div>
     </div>

src/components/flow/FlowLoginStamp/styles.module.scss

@@ -9,6 +9,7 @@
   border-radius: $cell_radius;
   display: flex;
   flex-direction: column;
+  cursor: pointer;
 }
 
 .content {
@@ -16,13 +17,21 @@
   box-sizing: border-box;
   flex: 0 1;
 
+  @include phone {
+    padding: $gap / 2;
+  }
+
   h2 {
     font: $font_cell_title;
     text-transform: uppercase;
     word-break: break-word;
 
     @include tablet {
-      font: $font_18_semibold;
+      font: $font_16_semibold;
+    }
+
+    @include phone {
+      font: $font_14_semibold;
     }
   }
 
@@ -31,7 +40,7 @@
     line-height: 1.4em;
     font: $font_16_medium;
 
-    @include phone {
+    @include tablet {
       font: $font_14_medium;
     }
   }
@@ -39,4 +48,9 @@
 
 .button {
   margin-top: 1.4em;
+
+  @include tablet {
+    font: $font_12_semibold;
+    margin-top: 1em;
+  }
 }

src/layouts/FlowLayout/index.tsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { observer } from 'mobx-react-lite';
 
 import { FlowGrid } from '~/components/flow/FlowGrid';
 import { FlowLoginStamp } from '~/components/flow/FlowLoginStamp';
@@ -11,7 +12,7 @@ import { useFlowContext } from '~/utils/providers/FlowProvider';
 
 import styles from './styles.module.scss';
 
-const FlowLayout = () => {
+const FlowLayout = observer(() => {
   const { heroes, nodes, onChangeCellView, loadMore, isSyncing } =
     useFlowContext();
   const { user, isUser } = useAuth();
@@ -45,6 +46,6 @@ const FlowLayout = () => {
       <SubmitBarRouter prefix="" />
     </div>
   );
-};
+});
 
 export { FlowLayout };