welcome pages

src/global-styles/mixins.scss

@@ -20,6 +20,10 @@
 	background-size: 100% auto;
 	background-position: bottom center;
 
+	@media (max-width: 1024px) {
+		padding: 40px;
+	}
+
 	@media (max-width: $mobile) {
 		margin: 0;
 		padding: 0 30px 30px;

src/global-styles/typography.scss

 @mixin mainTitle {
 	font-weight: 700;
 	font-size: 44px;
-	line-height: 50px;
+	line-height: 1.14;
 	letter-spacing: 0.01em;
+
+	@media (max-width: 1024px) {
+		font-size: 38px;
+	}
 }
 
 @mixin title {
@@ -46,6 +50,11 @@
 	line-height: 23px;
 	color: $gray-dark;
 
+	@media (max-width: 1024px) {
+		font-size: 17px;
+		line-height: 22px;
+	}
+
 	@media (max-width: $mobile) {
 		font-weight: 400;
 		font-size: 16px;

src/svg/logo.svg

-<svg width="116" height="41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="116" height="41" viewBox="0 0 116 41" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M13.2173 22.6693h3.4287v5.0188l4.7112-5.0188h4.1615l-6.0722 6.5373 6.1507 6.8719h-4.5279l-4.0569-4.7357-.3664.4376v4.2981h-3.4287V22.6693zM26.7754 22.6693h3.481l3.5334 8.4161 3.926-8.4161h3.4811l-8.5325 18.2994H29.131l2.8267-5.8939-5.1823-12.4055zM74.6199 36.0785H72.814V22.6693h3.324v7.8757l6.9882-7.8757h1.6489v13.4092H81.425V28.383l-6.8051 7.6955zM100.636 36.0785h-3.4807l-3.4025-8.4419-3.481 8.4419h-3.4549l5.8105-13.4092h2.1985l5.8101 13.4092zM116 36.0785h-3.481l-3.403-8.4419-3.481 8.4419h-3.481l5.811-13.4092h2.225L116 36.0785zM116 39.2185H36.9307v1.7502H116v-1.7502zM26.1995 39.2185H0v1.7502h26.1995v-1.7502zM55.7229 25.4747L52.87 27.0189c-.5234-.5405-1.0731-.9265-1.5965-1.1582-.5235-.2059-1.1255-.3088-1.8322-.3088-1.2825 0-2.3032.3861-3.1146 1.1324-.7852.7464-1.1778 1.6987-1.1778 2.8827 0 1.1324.3926 2.059 1.1516 2.7796.7591.7207 1.7537 1.081 2.9838 1.081 1.518 0 2.722-.5148 3.5857-1.5443l2.6959 1.8274c-1.4657 1.8789-3.5334 2.8054-6.1769 2.8054-2.408 0-4.2663-.6949-5.6273-2.0847-1.361-1.3899-2.0415-3.0371-2.0415-4.8902 0-1.2869.3403-2.4965.9946-3.5775.6543-1.081 1.5704-1.9561 2.7482-2.5738 1.1778-.6177 2.5126-.9265 3.9522-.9265 1.361 0 2.5649.2574 3.638.7978 1.0993.4891 1.9892 1.2354 2.6697 2.2135zM62.0307 28.2286v4.6328h.8898c1.4658 0 2.4342-.1802 2.9315-.5405.4973-.3603.759-.8751.759-1.57 0-.7721-.2879-1.3898-.8899-1.8531-.602-.4633-1.5704-.6692-2.9576-.6692h-.7328zm0-6.8977v3.8092h.759c.8637 0 1.4919-.1802 1.9106-.5405.4188-.3603.6282-.8236.6282-1.4413 0-.5662-.2094-1.0038-.602-1.3384-.3926-.3345-.9946-.489-1.806-.489h-.8898zm-3.5073 14.8249V18.0623h2.9053c1.6751 0 2.9052.1029 3.6904.3088 1.0993.2831 1.9892.8236 2.6435 1.5957.6543.7722.9684 1.6987.9684 2.754 0 .6949-.157 1.3126-.4449 1.8788-.2879.5662-.7852 1.081-1.4396 1.5957 1.1255.5148 1.9369 1.1582 2.4603 1.9304.5235.7721.7852 1.6986.7852 2.7539 0 1.0295-.2617 1.956-.8113 2.7796-.5235.8494-1.2302 1.4671-2.0677 1.8789-.8376.4118-2.0154.6177-3.5073.6177h-5.1823zM3.50722 28.2029v4.6327h.88989c1.46571 0 2.43412-.1801 2.95758-.5405.4973-.3603.75903-.875.75903-1.57 0-.7721-.28791-1.3898-.88989-1.8531-.60199-.4632-1.5704-.6691-2.95758-.6691h-.75903zm0-6.8977v3.8091h.75903c.86371 0 1.49187-.1801 1.91065-.5405.41877-.3603.62815-.8236.62815-1.4413 0-.5662-.20938-1.0037-.60198-1.3383-.3926-.3346-.99459-.489-1.80596-.489h-.88989zM0 36.13V18.0365h2.90523c1.6751 0 2.90524.103 3.69044.3089 1.09928.2831 1.98917.8236 2.6435 1.5957.65433.7721.96843 1.6987.96843 2.7539 0 .6949-.1571 1.3126-.44496 1.8788-.28791.5663-.7852 1.081-1.43954 1.5958 1.12546.5147 1.9368 1.1582 2.4603 1.9303.5235.7721.7852 1.6987.7852 2.7539 0 1.0295-.2617 1.9561-.8114 2.7797-.5234.8493-1.23012 1.467-2.06767 1.8788-.83754.4118-2.01534.6177-3.50722.6177H0z" fill="#006C43"/>
   <path d="M15.416 12.0397s4.6589 1.3898 16.2798 1.3641c18.3475-.0515 36.2238-9.49722 44.8872-10.5782 8.6634-1.08098 13.6101-.05147 16.463 1.64721 2.8529 1.69868 4.4233 4.40113 4.4233 4.40113s-6.7789-4.0408-24.76-.30885C54.7021 12.2713 39.8095 16.0547 24.4458 14.1244c-5.5487-.6949-9.0298-2.0847-9.0298-2.0847z" fill="#AFCA0B"/>
   <path d="M60.1201 14.1501s15.0758-4.81291 22.6138-5.19898c7.5117-.36032 10.9927.61771 13.8718 1.75018 2.8791 1.1067 4.0043 2.5995 4.0043 2.5995s-6.3599-2.2392-13.8716-2.2392c-7.5118 0-26.6183 3.0885-26.6183 3.0885zM37.3755 8.59082c7.0668-1.28688 7.5379-1.64721 14.2383-3.91212 5.3131-1.80163 9.6056-3.52605 12.5108-4.066539 3.481-.6434399 4.8944-.6434399 6.2031-.5919647C73.2852.148884 75.9549 1.61593 75.9549 1.61593S73.0497.869537 64.6481 3.67494C58.9685 5.57952 53.158 7.22672 49.6508 7.87016c-2.9576.54049-6.8051 1.08098-12.2753.72066z" fill="#006C43"/>

src/view/block/header/Header.scss

@@ -29,12 +29,21 @@
 	padding-top: 20px;
 	padding-bottom: 20px;
 	max-width: 100%;
+
+	@media (max-width: $mobile) {
+		padding-top: 15px;
+		padding-bottom: 5px;
+	}
 }
 
 .page-header__logo {
 	@include hover;
 	display: block;
 	width: 116px;
+
+	@media (max-width: $mobile) {
+		width: 85px;
+	}
 }
 
 .page-header__logo svg {
@@ -43,11 +52,15 @@
 }
 
 .page-header__user-block {
-	position: relative;
-	top: 10px;
 	display: flex;
 	align-items: center;
 	margin-right: -2px;
+
+	@media (max-width: $mobile) {
+		position: relative;
+		margin-right: -12px;
+		top: 4px;
+	}
 }
 
 .page-header__user-block .page-header__logout-link {
@@ -57,6 +70,9 @@
 	color: #030303;
 
 	@media (max-width: $mobile) {
+		margin-left: 0;
+		padding: 9px 10px;
+		height: 40px;
 		font-size: 0;
 	}
 }
@@ -70,12 +86,18 @@
 	width: 1px;
 	height: 33px;
 	background-color: #303030;
+
+	@media (max-width: $mobile) {
+		display: none;
+	}
 }
 
 .page-header__user-block .page-header__logout-link svg {
 	display: none;
 
 	@media (max-width: $mobile) {
+		position: static;
+		transform: none;
 		display: block;
 	}
 }
@@ -84,10 +106,23 @@
 	padding-right: 0;
 	padding-left: 48px;
 	color: $accent-dark;
+
+	@media (max-width: $mobile) {
+		padding: 8px 10px;
+		height: 40px;
+		font-size: 0;
+	}
 }
 
 .page-header__user-block .page-header__profile-link svg {
 	color: $accent-main;
+
+	@media (max-width: $mobile) {
+		position: static;
+		transform: none;
+		width: 20px;
+		height: 20px;
+	}
 }
 
 .button-temp {

src/view/cmp/button/button.scss

 .button {
   position: relative;
+  display: inline-block;
+  vertical-align: top;
   box-sizing: border-box;
   padding: 0 32px;
   text-align: center;

src/view/page/account/Account.jsx

@@ -29,6 +29,29 @@ export default D.declare('view.page.Account', () =>
             <Info
                 img={
                     <picture>
+                        <source srcset="/uploads/images/assistant-final-mob.svg" media={"(max-width: 767px)"}/>
+                        <img src="/uploads/images/assistant-final.svg" width="450" height="360" alt={"Изображение помощника"}/>
+                    </picture>
+                }
+                buttons={[
+                    <Button class={"button button--bordered welcome-page__button"} type={"button"}>
+                        <span>Сначала потренироваться</span>
+                    </Button>,
+                    <Button class={"button button--primary welcome-page__button"} type={"button"}>
+                        <span>Начать тестирование</span><Arr width="17" height="11"/>
+                    </Button>
+                ]}>
+                <div className="welcome-page__message">
+                    <h1 className="welcome-page__title">Добро пожаловать в&nbsp;итоговое тестирование!</h1>
+                    <div className="welcome-page__text">
+                        <p>Текст про тестирование и&nbsp;его правила.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do&nbsp;eiusmod tempor incididunt ut&nbsp;labore et&nbsp;dolore magna aliqua.</p>
+                        <p class="welcome-page__date">Тестирование проходит в&nbsp;период: <time>25.08-30.08</time></p>
+                    </div>
+                </div>
+            </Info>
+            <Info
+                img={
+                    <picture>
                         <source srcset="/uploads/images/assistant-top-mob.svg" media={"(max-width: 767px)"}/>
                         <img src="/uploads/images/assistant-top.svg" width="450" height="360" alt={"Изображение помощника"}/>
                     </picture>
@@ -105,14 +128,72 @@ export default D.declare('view.page.Account', () =>
                     </picture>
                 }
                 buttons={[
-                    <Button class={"button button--primary welcome-page__button"} type={"button"}>
+                    <Button class={"button button--primary welcome-page__button welcome-page__button--wide"} type={"button"}>
                         <span>Я готов! Начать</span><Arr width="17" height="11"/>
                     </Button>
                 ]}>
                 <div className="welcome-page__message welcome-page__message--warning">
-                    <h1 className="welcome-page__title"><em>Внимание!</em>
Тестирование
невозможно&nbsp;прервать</h1>
+                    <h1 className="welcome-page__title"><em>Внимание!</em>
Тестирование
невозможно прервать</h1>
+                    <div className="welcome-page__text">
+                        <p>Это последнее предупреждение. Вы&nbsp;уверены, что&nbsp;готовы начать?</p>
+                    </div>
+                </div>
+            </Info>
+            <Info
+                img={
+                    <picture>
+                        <source srcset="/uploads/images/assistant-activate-mob.svg" media={"(max-width: 767px)"}/>
+                        <img src="/uploads/images/assistant-activate.svg" width="450" height="360" alt={"Изображение помощника"}/>
+                    </picture>
+                }
+                buttons={
+                    <Button class={"button button--primary welcome-page__button  welcome-page__button--wide"} type={"button"}>
+                        <span>Продолжить</span><Arr width="17" height="11"/>
+                    </Button>
+                }>
+                <div className="welcome-page__message welcome-page__message--warning">
+                    <h1 className="welcome-page__title"><em>Внимание!</em> Тестирование не&nbsp;активировано</h1>
+                    <div className="welcome-page__text">
+                        <p>Текст про&nbsp;то, что тестирование еще не&nbsp;активировано. СТА&nbsp;&mdash; потренироваться на&nbsp;пробном тестировании. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia augue quam, in&nbsp;dapibus nulla ullamcorper nec. Mauris ac&nbsp;magna est.</p>
+                    </div>
+                </div>
+            </Info>
+            <Info
+                img={
+                    <picture>
+                        <source srcset="/uploads/images/assistant-finished-mob.svg" media={"(max-width: 767px)"}/>
+                        <img src="/uploads/images/assistant-finished.svg" width="450" height="360" alt={"Изображение помощника"}/>
+                    </picture>
+                }
+                buttons={
+                    <Button class={"button button--primary welcome-page__button  welcome-page__button--wide"} type={"button"}>
+                        <span>Готово</span>
+                    </Button>
+                }>
+                <div className="welcome-page__message">
+                    <h1 className="welcome-page__title">Тестирование<br/>завершено</h1>
+                    <div className="welcome-page__text">
+                        <p>Спасибо за&nbsp;участие в&nbsp;тестировании! <br/>Увидимся через месяц!</p>
+                    </div>
+                </div>
+            </Info>
+            <Info
+                img={
+                    <picture>
+                        <source srcset="/uploads/images/assistant-break-mob.svg" media={"(max-width: 767px)"}/>
+                        <img src="/uploads/images/assistant-break.svg" width="450" height="360" alt={"Изображение помощника"}/>
+                    </picture>
+                }
+                buttons={
+                    <Button class={"button button--primary welcome-page__button  welcome-page__button--wide"} type={"button"}>
+                        <span>Начать заново</span>
+                    </Button>
+                }>
+                <div className="welcome-page__message">
+                    <h1 className="welcome-page__title">Тестирование было прервано</h1>
                     <div className="welcome-page__text">
-                        <p>Это последнее предупреждение. Вы&nbsp;уверены, что готовы начать?</p>
+                        <p>Вам придется начать его заново.</p>
+                        <p>Это могло произойти из-за проблем в&nbsp;соединении с&nbsp;интернетом либо из-за нажатия кнопки &laquo;назад&raquo;. Пожалуйста, убедитесь, что&nbsp;Вы находитесь в&nbsp;зоне хорошего приема и&nbsp;начните тестирование снова.</p>
                     </div>
                 </div>
             </Info>

src/view/page/account/welcomePage.scss

 .welcome-page {
 	@include pageInner;
 	background-color: $bg-accent;
+
+	@media (max-width: $mobile) {
+		padding: 0 20px 20px;
+	}
 }
 
 .welcome-page__wrapper {
 	@include container;
+	padding-left: 0;
+	padding-right: 0;
+	max-width: 1000px;
+
+	@media (max-width: $mobile) {
+		display: flex;
+		flex-direction: column;
+		padding-left: 0;
+		padding-right: 0;
+	}
 }
 
 .welcome-page__inner {
 	display: flex;
 	justify-content: space-between;
+
+	@media (max-width: $mobile) {
+		flex-direction: column;
+		flex-grow: 1;
+	}
 }
 
 .welcome-page__info {
 	order: -1;
 	padding-top: 45px;
-	width: 50%;
 	max-width: 500px;
+
+	@media (max-width: 1024px) {
+		max-width: 400px;
+	}
+
+	@media (max-width: $mobile) {
+		order: 2;
+		flex-grow: 1;
+		display: flex;
+		flex-direction: column;
+		margin-left: auto;
+		margin-right: auto;
+		padding-top: 0;
+		width: 100%;
+		max-width: 360px;
+	}
 }
 
 .welcome-page__image {
 	display: flex;
 	justify-content: flex-end;
+	box-sizing: border-box;
 	padding-top: 10px;
-	width: 50%;
-	max-width: calc(100% - 500px);
+	padding-left: 50px;
+	max-width: 50%;
+
+	@media (max-width: 1024px) {
+		padding-top: 40px;
+		padding-left: 0;
+	}
+
+	@media (max-width: $mobile) {
+		margin: 0 auto 10px;
+		padding-top: 30px;
+		width: 100%;
+		max-width: 280px;
+	}
 }
 
 .welcome-page__title {
 	@include mainTitle;
 	margin: 0 0 33px;
+
+	@media (max-width: $mobile) {
+		margin-bottom: 11px;
+		padding-right: 20px;
+		font-weight: 700;
+		font-size: 20px;
+		line-height: 25px;
+	}
 }
 
 .welcome-page__title em {
@@ -42,6 +97,16 @@
 
 .welcome-page__text {
 	@include mainBodyText;
+	min-height: 97px;
+
+	@media (max-width: 1024px) {
+		min-height: 60px;
+	}
+
+	@media (max-width: $mobile) {
+		margin-bottom: 40px;
+		letter-spacing: 0.2px;
+	}
 }
 
 .welcome-page__text p {
@@ -49,16 +114,31 @@
 }
 
 .welcome-page__result {
+	margin-left: 9px;
 	font-weight: 700;
 	font-size: 44px;
-	line-height: 50px;
+	line-height: 40px;
 	letter-spacing: 0.01em;
 	color: $text-main;
+
+	@media (max-width: 1024px) {
+		font-size: 38px;
+	}
+
+	@media (max-width: $mobile) {
+		font-size: 32px;
+	}
 }
 
 .welcome-page__result sup {
+	margin-left: 4px;
 	font-size: 24px;
 	line-height: 32px;
+
+	@media (max-width: $mobile) {
+		vertical-align: middle;
+		font-size: 32px;
+	}
 }
 
 .welcome-page__message em {
@@ -66,8 +146,41 @@
 	color: $accent-main;
 }
 
-.welcome-page__message--warning em {
-	color: $sienna;
+.welcome-page__message time {
+	margin-left: 10px;
+	font-size: 17px;
+	color: $text-main;
+
+	@media (max-width: $mobile) {
+		margin-left: 0;
+		font-size: 16px;
+		letter-spacing: 0.15px;
+		white-space: nowrap;
+	}
+}
+
+.welcome-page__message--warning {
+	em {
+		color: $sienna;
+	}
+}
+
+.welcome-page__message--result p {
+	margin-bottom: 7px;
+}
+
+.welcome-page__message--result p > b {
+	display: inline-block;
+	vertical-align: top;
+	margin-top: 10px;
+
+	@media (max-width: $mobile) {
+		font-weight: 400;
+	}
+}
+
+.welcome-page__message--result p:last-child {
+	margin-bottom: 0;
 }
 
 .welcome-page__message--top {
@@ -86,14 +199,52 @@
 	}
 }
 
+.welcome-page__date {
+	@media (max-width: $mobile) {
+		font-weight: 500;
+		font-size: 16px;
+		line-height: 20px;
+		color: $text-main;
+		letter-spacing: 0.5px;
+	}
+}
+
 .welcome-page__buttons {
 	display: flex;
 	flex-wrap: wrap;
 	margin-top: 52px;
 	min-width: 1000px;
-	max-width: calc(100% - 60px);
+
+	@media (max-width: 1168px) {
+		min-width: calc(100vw - 168px);
+	}
+
+	@media (max-width: $mobile) {
+		flex-direction: column;
+		margin-top: auto;
+		min-width: auto;
+		width: 100%;
+	}
 }
 
 .welcome-page__buttons button {
 	margin: 0 40px 30px 0;
+	padding-left: 40px;
+	padding-right: 40px;
+
+	@media (max-width: $mobile) {
+		margin: 0 0 20px;
+		padding-left: 30px;
+		padding-right: 30px;
+	}
+}
+
+.welcome-page__buttons button:last-child {
+	@media (max-width: $mobile) {
+		margin-bottom: 0;
+	}
+}
+
+button.welcome-page__button--wide {
+	min-width: 275px;
 }

src/view/page/login/LoginPhone.jsx

@@ -38,6 +38,7 @@ export default D.declare('view.page.LoginPhone', ({loginStore}) => {
         label={'Введите номер телефона, чтобы продолжить.'}
         disabled={loginStore.valTrue('phoneChecking')}
         placeholder={'Ваш телефон'}
+                                   enterkeyhint={"send"}
         invalid={loginStore.valTrue('phoneError')}>
           <IF condition={loginStore.valTrue('phoneError')}>
               <span className={"field__error-message"}>{loginStore.val('phoneErrorText')}</span>