added login stamp

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

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 @mixin mobile {
   @media (max-width: $cell * 2) {

src/components/flow/FlowLoginStamp/index.tsx

@@ -0,0 +1,35 @@
+import React, { FC, useCallback } from 'react';
+
+import { Filler } from '~/components/containers/Filler';
+import { Button } from '~/components/input/Button';
+import { Dialog } from '~/constants/modal';
+import { useShowModal } from '~/hooks/modal/useShowModal';
+
+import styles from './styles.module.scss';
+
+const FlowLoginStamp = () => {
+  const showModal = useShowModal(Dialog.Login);
+
+  const onClick = useCallback(() => showModal({}), []);
+
+  return (
+    <div className={styles.stamp}>
+      <Filler />
+
+      <div className={styles.content}>
+        <h2>Привет, друг</h2>
+        <p>Ночь темна и полна опасностей, не желаешь ли войти?</p>
+        <Button
+          stretchy
+          color="outline-white"
+          className={styles.button}
+          onClick={onClick}
+        >
+          Впустите меня!
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export { FlowLoginStamp };

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

@@ -0,0 +1,42 @@
+@import 'src/styles/variables';
+
+.stamp {
+  @include outer_shadow;
+
+  background: #2b0011 url('/images/join_us.svg') 50% 100%;
+  background-size: cover;
+  width: 100%;
+  border-radius: $cell_radius;
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+  padding: $gap;
+  box-sizing: border-box;
+  flex: 0 1;
+
+  h2 {
+    font: $font_cell_title;
+    text-transform: uppercase;
+    word-break: break-word;
+
+    @include tablet {
+      font: $font_18_semibold;
+    }
+  }
+
+  p {
+    margin: 0.5em 0;
+    line-height: 1.4em;
+    font: $font_16_medium;
+
+    @include phone {
+      font: $font_14_medium;
+    }
+  }
+}
+
+.button {
+  margin-top: 1.4em;
+}

src/layouts/FlowLayout/index.tsx

@@ -1,23 +1,22 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 
 import { FlowGrid } from '~/components/flow/FlowGrid';
+import { FlowLoginStamp } from '~/components/flow/FlowLoginStamp';
 import { FlowSwiperHero } from '~/components/flow/FlowSwiperHero';
 import { FlowStamp } from '~/containers/flow/FlowStamp';
 import { SubmitBarRouter } from '~/containers/main/SubmitBarRouter';
-import { useUser } from '~/hooks/auth/useUser';
+import { useAuth } from '~/hooks/auth/useAuth';
 import { useInfiniteLoader } from '~/hooks/dom/useInfiniteLoader';
 import { useFlowContext } from '~/utils/providers/FlowProvider';
 
 import styles from './styles.module.scss';
 
-interface Props {}
-
-const FlowLayout: FC<Props> = () => {
+const FlowLayout = () => {
   const { heroes, nodes, onChangeCellView, loadMore, isSyncing } =
     useFlowContext();
-  const { user } = useUser();
+  const { user, isUser } = useAuth();
 
   useInfiniteLoader(loadMore, isSyncing);
 
@@ -32,6 +31,12 @@ const FlowLayout: FC<Props> = () => {
           <FlowStamp isFluid={false} onToggleLayout={console.warn} />
         </div>
 
+        {!isUser && (
+          <div className={styles.login}>
+            <FlowLoginStamp />
+          </div>
+        )}
+
         <FlowGrid
           nodes={nodes}
           user={user}

src/layouts/FlowLayout/styles.module.scss

@@ -58,3 +58,24 @@ $cols: math.div($content_width, $cell);
     grid-row-end: span 1;
   }
 }
+
+.login {
+  grid-row-start: 4;
+  grid-row-end: span 2;
+  grid-column: -3 / -4;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  overflow: hidden;
+  position: relative;
+
+  @include desktop {
+    display: none;
+  }
+
+  @media (max-width: $flow_hide_recents) {
+    display: flex;
+    grid-column: 1 / 2;
+    grid-row-end: span 2;
+  }
+}