diff --git a/public/images/join_us.svg b/public/images/join_us.svg index 8df03952..0a1dd09e 100644 --- a/public/images/join_us.svg +++ b/public/images/join_us.svg @@ -25,16 +25,76 @@ inkscape:deskcolor="#d1d1d1" inkscape:document-units="mm" inkscape:zoom="0.36893178" - inkscape:cx="90.802694" - inkscape:cy="384.895" + inkscape:cx="-147.72379" + inkscape:cy="425.55293" inkscape:window-width="1280" inkscape:window-height="731" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" - inkscape:current-layer="g2" /> + inkscape:current-layer="layer2" /> + + + + + + + + + + + + + + + + + + + + @@ -87,7 +147,7 @@ inkscape:collect="always" id="linearGradient49"> - + x2="76.641373" + y2="86.737411" /> + + + + + + + id="path84" + style="opacity:1;fill:url(#linearGradient85);stroke:none;stroke-width:0.529167;stroke-miterlimit:0" + d="M 40.856421 4.7371785 L 0 27.968319 L 0 170.73221 C 26.280196 169.72577 55.261556 168.659 81.285478 167.71948 L 135.46667 108.72721 L 135.46667 46.371847 C 95.610885 28.615261 40.856421 4.7371785 40.856421 4.7371785 z " /> + + + transform="matrix(1.7325907,-0.12158362,0.12158362,1.7325907,-687.36603,-182.93389)"> + sodipodi:nodetypes="ccccccccccccccccccccccccc" /> + d="m 378.05446,212.99605 0.41494,-12.69427 1.48418,-10.69339 2.69473,6.6705 0.94561,8.04689 -1.31081,7.19891 v 2.05139 l 1.59649,0.0935 0.99762,-9.25406 -1.83167,-15.66414 -1.28367,-2.62802 2.51006,-8.39665 4.76044,-2.62275 1.82526,6.46623 0.0795,14.3556 -3.03017,2.80064 1.04775,7.39752 -0.77584,21.40031 c 0,0 -1.98372,-12.2563 -10.12445,-14.52817 z" + id="path79" + sodipodi:nodetypes="cccccccccccccccccccc" /> - + transform="matrix(1.9284524,0.13236011,-0.13236011,1.9284524,-626.67385,-324.37757)"> + transform="matrix(1.5453304,0,0,1.5453304,-387.90697,-171.27605)"> + d="m 296.97357,209.50577 -20.18763,3.18787 -1.03096,10.43875 -2.38965,4.34825 -0.50127,18.03105 1.79508,1.51853 1.77334,14.1834 20.18762,0.35447 2.47793,-12.39535 2.83441,11.33295 24.79136,0.70793 -3.79482,-24.21518 c 10e-4,-7e-5 0.0221,-10e-4 0.0221,-10e-4 v -12.02081 l -2.61671,-4.53552 -1.04769,-6.68506 z" /> + transform="matrix(1.4330688,0,0,1.4330688,-232.61766,-90.88657)"> + + + inkscape:label="fog_front"> + diff --git a/src/components/flow/FlowGrid/styles.module.scss b/src/components/flow/FlowGrid/styles.module.scss index 8e1e30f9..ea6378f4 100644 --- a/src/components/flow/FlowGrid/styles.module.scss +++ b/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) { diff --git a/src/components/flow/FlowLoginStamp/index.tsx b/src/components/flow/FlowLoginStamp/index.tsx new file mode 100644 index 00000000..3a8818c7 --- /dev/null +++ b/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 ( +
+ + +
+

Привет, друг

+

Ночь темна и полна опасностей, не желаешь ли войти?

+ +
+
+ ); +}; + +export { FlowLoginStamp }; diff --git a/src/components/flow/FlowLoginStamp/styles.module.scss b/src/components/flow/FlowLoginStamp/styles.module.scss new file mode 100644 index 00000000..c99f7368 --- /dev/null +++ b/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; +} diff --git a/src/layouts/FlowLayout/index.tsx b/src/layouts/FlowLayout/index.tsx index 8b6da3de..3b4aa5e6 100644 --- a/src/layouts/FlowLayout/index.tsx +++ b/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 = () => { +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 = () => { + {!isUser && ( +
+ +
+ )} +