diff --git a/.env.development b/.env.development index 589f28a1..cf60c666 100644 --- a/.env.development +++ b/.env.development @@ -1,3 +1,3 @@ #REACT_APP_API_HOST=http://localhost:3334/ -REACT_APP_API_HOST=https://pig.vault48.org/ -REACT_APP_REMOTE_CURRENT=https://pig.vault48.org/static/ +REACT_APP_API_HOST=https://pig.staging.vault48.org/ +REACT_APP_REMOTE_CURRENT=https://pig.staging.vault48.org/static/ diff --git a/src/components/containers/Square/index.tsx b/src/components/containers/Square/index.tsx new file mode 100644 index 00000000..885aeabf --- /dev/null +++ b/src/components/containers/Square/index.tsx @@ -0,0 +1,16 @@ +import React, { FC } from 'react'; +import styles from './styles.module.scss'; +import { DivProps } from '~/utils/types'; +import classNames from 'classnames'; + +interface IProps extends DivProps {} + +const Square: FC = ({ children, ...rest }) => ( +
+
+ {children} +
+
+); + +export { Square }; diff --git a/src/components/containers/Square/styles.module.scss b/src/components/containers/Square/styles.module.scss new file mode 100644 index 00000000..32e127d8 --- /dev/null +++ b/src/components/containers/Square/styles.module.scss @@ -0,0 +1,12 @@ +.square { + position: relative; + padding-bottom: 100%; +} + +.content { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} diff --git a/src/components/lab/LabBanner/index.tsx b/src/components/lab/LabBanner/index.tsx index 856a7844..c0013d8b 100644 --- a/src/components/lab/LabBanner/index.tsx +++ b/src/components/lab/LabBanner/index.tsx @@ -3,11 +3,12 @@ import styles from './styles.module.scss'; import { Card } from '~/components/containers/Card'; import { Placeholder } from '~/components/placeholders/Placeholder'; import { Group } from '~/components/containers/Group'; +import { Square } from '~/components/containers/Square'; interface IProps {} const LabBanner: FC = () => ( - +
Лаборатория!
@@ -18,14 +19,9 @@ const LabBanner: FC = () => ( пределами Убежища.

- -

- Ловим радиоактивных жуков, приручаем утконосов-вампиров, катаемся на младшем научном - сотруднике Егоре Порсифоровиче (у него как раз сейчас линька). -

-
+ ); export { LabBanner }; diff --git a/src/components/lab/LabBanner/styles.module.scss b/src/components/lab/LabBanner/styles.module.scss index 734ab1c5..705bb895 100644 --- a/src/components/lab/LabBanner/styles.module.scss +++ b/src/components/lab/LabBanner/styles.module.scss @@ -2,12 +2,14 @@ .wrap { @include outer_shadow; - @include lab_gradient; + background: url('../../../sprites/boris_lab.svg') 50% 50% no-repeat; + background-size: cover; display: flex; - align-items: flex-end; + align-items: flex-start; justify-content: stretch; - min-height: $cell; + border-radius: $radius; + padding: $gap; } .title { @@ -18,8 +20,4 @@ .content { font: $font_14_regular; line-height: 19px; - - strong { - font-weight: bold; - } } diff --git a/src/sprites/boris_lab.svg b/src/sprites/boris_lab.svg index b47a54e8..31d78eb8 100644 --- a/src/sprites/boris_lab.svg +++ b/src/sprites/boris_lab.svg @@ -2,11 +2,11 @@ + inkscape:current-layer="layer2" + inkscape:snap-global="false"> + + - + id="defs2"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + style="stop-color:#652585;stop-opacity:1" /> + style="stop-color:#190c3a;stop-opacity:1" /> + + + + + @@ -70,173 +343,8 @@ cy="117.83934" cx="340.17853" id="circle4986" - style="fill:url(#radialGradient4988);fill-opacity:1;stroke-width:0.171116" /> + style="fill:url(#radialGradient4988);fill-opacity:1;stroke-width:0.17111641" /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -249,38 +357,6 @@ offset="1" id="stop2116" /> - - - - - - @@ -297,587 +373,1119 @@ clipPathUnits="userSpaceOnUse" id="clipPath5332"> - - - - - - - - - - - - - - - - - - - - + gradientTransform="matrix(4.1025138,4.904937e-7,-4.7336306e-7,3.9592323,-527.377,-192.81817)" + cx="168.7189" + cy="57.244839" + fx="168.7189" + fy="57.244839" + r="7.9375" /> + + + + + + + + + + + + + + + + + + + + + + + + + + + xlink:href="#linearGradient4821" + id="linearGradient6161" + x1="324.49344" + y1="93.745972" + x2="368.39355" + y2="127.57774" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(1.1418755,0,0,1.1418755,-48.142151,-16.146449)" /> + + + + + + + + + + + + + + + + + id="stop40735" /> + id="stop40737" /> + xlink:href="#linearGradient61405" + id="linearGradient41781" + x1="-19.176756" + y1="118.95985" + x2="29.362944" + y2="150.83885" + gradientUnits="userSpaceOnUse" /> + inkscape:collect="always" + xlink:href="#linearGradient61405" + id="linearGradient44065" + x1="-6.6934075" + y1="43.281124" + x2="-5.7737708" + y2="39.286343" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(-1,0,0,1,-20.308419,0.77114603)" /> + + + + + + + + + + + + + + + + id="stop5474" /> + id="stop5476" /> - + id="linearGradient448"> + id="stop15674" /> + id="stop15676" /> - + id="linearGradient5763"> + id="stop20147" /> - - - - - - - - - - - + id="stop20149" /> + + + - - - - - - + inkscape:groupmode="layer" + id="layer5" + inkscape:label="Color" + style="display:inline" + sodipodi:insensitive="true"> + + + - - - - - - - - - - + id="g3291" + transform="matrix(0.65056248,0,0,0.65056248,18.899842,10.357625)"> + + + + + + - + id="g3592" + transform="translate(0.20334968)"> + - + style="opacity:0.843279;fill:#2c89a0;stroke:none;stroke-width:0.0596688;stroke-linecap:round;stroke-opacity:0.997939;stop-color:#000000" + id="rect3588" + width="1.9908036" + height="1.1153698" + x="-16.930225" + y="59.415508" + rx="0.9954018" + ry="0.12744768" /> + id="g4781" + transform="translate(-27.100238)"> - - + id="path4775" + style="opacity:0.467754;fill:#902ca0;stroke:none;stroke-width:0.162404;stroke-linecap:round;stroke-opacity:0.997939;stop-color:#000000" + d="m -16.777241,60.449539 v 7.19646 c 0,0.617992 0.375492,1.115695 0.842223,1.115695 0.466731,0 0.842614,-0.497703 0.842614,-1.115695 v -7.19646 c -0.175978,0.04906 -0.487003,0.08113 -0.842614,0.08113 -0.355611,0 -0.666245,-0.03207 -0.842223,-0.08113 z" /> - - - - - - - + id="path4777" + style="fill:url(#linearGradient4783);fill-opacity:1;stroke:none;stroke-width:0.122849;stroke-linecap:round;stroke-opacity:0.997939;stop-color:#000000" + d="m -16.573796,64.62334 v 2.909601 c 0,0.466205 0.28481,0.841666 0.638825,0.841666 0.354015,0 0.639122,-0.375461 0.639122,-0.841666 V 64.62334 c -0.133479,0.03701 -0.369391,0.0612 -0.639122,0.0612 -0.26973,0 -0.505346,-0.02419 -0.638825,-0.0612 z" + sodipodi:nodetypes="cssscsc" /> + + + + id="path4785" + style="opacity:0.467754;fill:#a07d2c;stroke:none;stroke-width:0.162404;stroke-linecap:round;stroke-opacity:0.997939;stop-color:#000000" + d="m -16.777241,60.449539 v 7.19646 c 0,0.617992 0.375492,1.115695 0.842223,1.115695 0.466731,0 0.842614,-0.497703 0.842614,-1.115695 v -7.19646 c -0.175978,0.04906 -0.487003,0.08113 -0.842614,0.08113 -0.355611,0 -0.666245,-0.03207 -0.842223,-0.08113 z" /> + id="path4787" + style="fill:url(#linearGradient4793);fill-opacity:1;stroke:none;stroke-width:0.122849;stroke-linecap:round;stroke-opacity:0.997939;stop-color:#000000" + d="m -16.573796,64.62334 v 2.909601 c 0,0.466205 0.28481,0.841666 0.638825,0.841666 0.354015,0 0.639122,-0.375461 0.639122,-0.841666 V 64.62334 c -0.133479,0.03701 -0.369391,0.0612 -0.639122,0.0612 -0.26973,0 -0.505346,-0.02419 -0.638825,-0.0612 z" + sodipodi:nodetypes="cssscsc" /> + + + + id="path4795" + style="opacity:0.467754;fill:#a02c57;stroke:none;stroke-width:0.162404;stroke-linecap:round;stroke-opacity:0.997939;stop-color:#000000" + d="m -16.777241,60.449539 v 7.19646 c 0,0.617992 0.375492,1.115695 0.842223,1.115695 0.466731,0 0.842614,-0.497703 0.842614,-1.115695 v -7.19646 c -0.175978,0.04906 -0.487003,0.08113 -0.842614,0.08113 -0.355611,0 -0.666245,-0.03207 -0.842223,-0.08113 z" /> + id="path4797" + style="fill:url(#linearGradient4803);fill-opacity:1;stroke:none;stroke-width:0.122849;stroke-linecap:round;stroke-opacity:0.997939;stop-color:#000000" + d="m -16.573796,64.62334 v 2.909601 c 0,0.466205 0.28481,0.841666 0.638825,0.841666 0.354015,0 0.639122,-0.375461 0.639122,-0.841666 V 64.62334 c -0.133479,0.03701 -0.369391,0.0612 -0.639122,0.0612 -0.26973,0 -0.505346,-0.02419 -0.638825,-0.0612 z" + sodipodi:nodetypes="cssscsc" /> + + + + + + + id="rect29917" + style="opacity:1;fill:#2c89a0;fill-opacity:1;stroke:none;stroke-width:0.201814;stroke-linecap:round;stroke-opacity:0.997939;stop-color:#000000" + d="M 30.970703,244.0625 V 250 h 73.783207 v -5.9375 z" + transform="matrix(0.40669934,0,0,0.40669934,-29.05154,-15.92103)" /> + - - - - - - - + id="path30013" + style="opacity:1;fill:#2c89a0;fill-opacity:1;stroke:none;stroke-width:0.0820776;stroke-linecap:round;stroke-opacity:0.997939;stop-color:#000000" + d="m 16.080172,83.339028 v 2.414777 h 30.007582 v -2.414777 z" /> + + id="path30021" + style="opacity:1;fill:#2c89a0;fill-opacity:1;stroke:none;stroke-width:0.0738544;stroke-linecap:round;stroke-opacity:0.997939;stop-color:#000000" + d="m 48.616089,83.339028 v 2.414777 h 24.295985 v -2.414777 z" /> - - + id="path1707-3" + style="display:inline;opacity:0.644681;fill:#2c89a0;fill-opacity:1;stroke:none;stroke-width:0.0439973" + d="m 28.311104,45.694966 c -0.269944,3e-6 -0.488776,0.093 -0.488789,0.207731 -8.26e-4,0.04854 -0.0037,0.07345 0,0.119593 6.4e-5,0.03934 0.02642,0.07787 0.07598,0.111093 0,0 -0.0061,0.669062 -0.08004,0.942392 -0.07389,0.27333 -0.302434,0.631882 -0.302434,0.631882 0,0 -0.71144,1.265282 -0.722664,1.285768 -0.01122,0.02048 -0.08905,0.156499 -0.09209,0.278022 2e-6,0.337448 0.695456,0.25927 1.584656,0.259271 0.8892,-10e-7 1.635422,0.07818 1.635424,-0.259271 -0.02263,-0.20974 -0.05886,-0.224589 -0.07504,-0.264057 -0.01618,-0.03947 -0.751752,-1.299733 -0.751752,-1.299733 0,0 -0.216711,-0.339467 -0.290397,-0.612044 -0.07368,-0.272578 -0.08004,-0.96223 -0.08004,-0.96223 0.04957,-0.03323 0.07591,-0.07175 0.07598,-0.111093 0.0044,-0.04795 0.0081,-0.07221 0,-0.119593 -1.3e-5,-0.114726 -0.218844,-0.207728 -0.488789,-0.207731 z" + sodipodi:nodetypes="cccczczccczczccccc" /> + + + + + + id="path4518" + style="opacity:0.352937;fill:#2c89a0;stroke:none;stroke-width:0.264583;stroke-linecap:round;stroke-opacity:0.997939;stop-color:#000000" + d="m 11.888171,26.523444 a 7.4293589,7.4293589 0 0 0 -7.4290036,7.429005 7.4293589,7.4293589 0 0 0 7.4290036,7.429522 7.4293589,7.4293589 0 0 0 7.429521,-7.429522 7.4293589,7.4293589 0 0 0 -7.429521,-7.429005 z m 0,2.692861 a 4.7361207,4.7361207 0 0 1 4.736145,4.736144 4.7361207,4.7361207 0 0 1 -4.736145,4.736145 4.7361207,4.7361207 0 0 1 -4.7361449,-4.736145 4.7361207,4.7361207 0 0 1 4.7361449,-4.736144 z" /> + id="path4603" + style="opacity:0.644681;fill:#2c89a0;stroke:none;stroke-width:0.264583;stroke-linecap:round;stroke-opacity:0.997939;stop-color:#000000" + d="m 30.381762,26.523444 a 7.4293589,7.4293589 0 0 0 -7.429004,7.429005 7.4293589,7.4293589 0 0 0 7.429004,7.429522 7.4293589,7.4293589 0 0 0 7.42952,-7.429522 7.4293589,7.4293589 0 0 0 -7.42952,-7.429005 z m 0,2.692861 a 4.7361207,4.7361207 0 0 1 4.736145,4.736144 4.7361207,4.7361207 0 0 1 -4.736145,4.736145 4.7361207,4.7361207 0 0 1 -4.736145,-4.736145 4.7361207,4.7361207 0 0 1 4.736145,-4.736144 z" /> + id="path4605" + style="opacity:0.456773;fill:#2c89a0;stroke:none;stroke-width:0.264583;stroke-linecap:round;stroke-opacity:0.997939;stop-color:#000000" + d="m 48.535741,26.523444 a 7.4293589,7.4293589 0 0 0 -7.429004,7.429005 7.4293589,7.4293589 0 0 0 7.429004,7.429522 7.4293589,7.4293589 0 0 0 7.42952,-7.429522 7.4293589,7.4293589 0 0 0 -7.42952,-7.429005 z m 0,2.692861 a 4.7361207,4.7361207 0 0 1 4.736145,4.736144 4.7361207,4.7361207 0 0 1 -4.736145,4.736145 4.7361207,4.7361207 0 0 1 -4.736145,-4.736145 4.7361207,4.7361207 0 0 1 4.736145,-4.736144 z" /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +