diff --git a/public/images/join_us.svg b/public/images/join_us.svg index 0a1dd09e..17adcb0a 100644 --- a/public/images/join_us.svg +++ b/public/images/join_us.svg @@ -25,16 +25,41 @@ inkscape:deskcolor="#d1d1d1" inkscape:document-units="mm" inkscape:zoom="0.36893178" - inkscape:cx="-147.72379" - inkscape:cy="425.55293" + inkscape:cx="4.0657923" + inkscape:cy="420.13187" inkscape:window-width="1280" inkscape:window-height="731" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" - inkscape:current-layer="layer2" /> + inkscape:current-layer="layer1" + showgrid="false" /> + + + + + + + + @@ -71,18 +96,6 @@ offset="1" id="stop92" /> - - - - @@ -95,30 +108,6 @@ offset="1" id="stop88" /> - - - - - - - - @@ -429,29 +418,11 @@ xlink:href="#linearGradient55" id="linearGradient57" gradientUnits="userSpaceOnUse" - gradientTransform="matrix(-1,0,0,1,162.84215,-47.750597)" + gradientTransform="matrix(-1,0,0,1,166.32456,-35.879387)" x1="34.523041" y1="80.819336" x2="34.523041" y2="141.67996" /> - - - - + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(0.64711081,0,0,0.64711081,251.9794,90.165542)" /> + + + + id="layer5" + inkscape:label="bg" + style="display:inline"> + + + style="opacity:1;fill:#ff9955;stroke-width:0.529167;stroke-miterlimit:0" + d="M 37.446686,124.52712 44.323635,22.92427 87.171159,6.1813722 113.11696,145.76551 Z" + id="path51" + sodipodi:nodetypes="ccccc" /> + + + + + d="M 129.47782,22.877773 19.569803,46.872691 c 0,0 -8.912996,41.06075 -16.0873896,75.948339 v 47.37023 c 25.7869006,-1.2392 87.6780046,-3.50282 135.4666666,-5.2281 V 31.963007 c -2.7997,-2.679394 -9.47126,-9.085234 -9.47126,-9.085234 z" /> + id="path84" + style="opacity:1;fill:url(#linearGradient85);stroke:none;stroke-width:0.529167;stroke-miterlimit:0" + d="M 40.856421,15.320512 0,38.551653 V 181.31555 c 26.280196,-1.00644 55.261556,-2.07321 81.285478,-3.01273 L 135.46667,119.31055 V 56.955181 C 95.610885,39.198595 40.856421,15.320512 40.856421,15.320512 Z" /> + style="display:inline;opacity:1" + transform="matrix(1.5332523,-0.10759516,0.10759516,1.5332523,-608.6312,-144.33945)"> - + style="display:inline;mix-blend-mode:normal;fill:#782144;fill-opacity:1;stroke-width:1.17784" + id="path18572-0" + cx="419.85403" + cy="133.89543" + rx="5.4156246" + ry="5.3635511" + transform="rotate(7.9404812)" /> + transform="matrix(1.7065797,0.11713179,-0.11713179,1.7065797,-549.63012,-269.50972)"> + transform="matrix(1.3675368,0,0,1.3675368,-337.27555,-134.02287)"> - - @@ -794,6 +782,16 @@ id="path34426" sodipodi:nodetypes="ccccccccccc" /> + + + + - - - + inkscape:label="fog_front" /> + + diff --git a/src/components/flow/FlowLoginStamp/index.tsx b/src/components/flow/FlowLoginStamp/index.tsx index c54cf410..1dcc82c1 100644 --- a/src/components/flow/FlowLoginStamp/index.tsx +++ b/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 ( -
+
@@ -23,9 +25,9 @@ const FlowLoginStamp = () => { stretchy color="outline-white" className={styles.button} - onClick={onClick} + size={isTablet ? 'small' : 'normal'} > - Впустите меня! + Впустите!
diff --git a/src/components/flow/FlowLoginStamp/styles.module.scss b/src/components/flow/FlowLoginStamp/styles.module.scss index c99f7368..f073468b 100644 --- a/src/components/flow/FlowLoginStamp/styles.module.scss +++ b/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; + } } diff --git a/src/layouts/FlowLayout/index.tsx b/src/layouts/FlowLayout/index.tsx index 54de2507..7b9bacf4 100644 --- a/src/layouts/FlowLayout/index.tsx +++ b/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 = () => {
); -}; +}); export { FlowLayout };