Merge branch 'coffee-like-test' of https://git.hlcompany.ru/git/usersite into coffee-like-test

This commit is contained in:
gofnnp 2023-05-26 10:42:13 +04:00
commit 1b1dcd9b50
24 changed files with 107 additions and 78 deletions

View File

@ -6,7 +6,7 @@
position: relative; position: relative;
margin-bottom: 1px; margin-bottom: 1px;
width: 100%; width: 100%;
color: #fff; color: var(--text-color);
overflow: hidden; overflow: hidden;
border-bottom: solid 1px #bdbdbd; border-bottom: solid 1px #bdbdbd;
} }

View File

@ -14,9 +14,9 @@
button { button {
padding: 10px 62px; padding: 10px 62px;
margin-top: 8px; margin-top: 8px;
background-color: var(--main-color); background-color: var(--button-color);
color: #fff; color: var(--button-text-color);
border-radius: 3px; border-radius: 3px;
border: none; border: none;
width: calc(50% - 12px); width: calc(50% - 12px);
} }

View File

@ -15,9 +15,9 @@
align-items: center; align-items: center;
width: 60px; width: 60px;
height: 60px; height: 60px;
background: var(--main-color); background: var(--text-color);
border: solid #fff 1px !important; border: solid var(--text-color) 1px !important;
color: #fff; color: var(--text-color);
border-radius: 100%; border-radius: 100%;
font-weight: 600; font-weight: 600;
letter-spacing: 2px; letter-spacing: 2px;

View File

@ -20,13 +20,13 @@
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: #ffffff; color: var(--text-color);
} }
.share { .share {
width: 72px; width: 72px;
height: 48px; height: 48px;
background: #28af49; background: var(--button-color);
padding: 8px 26px; padding: 8px 26px;
border: none; border: none;
} }

View File

@ -8,7 +8,7 @@
width: 100%; width: 100%;
background: #231f20; background: #231f20;
box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.5); box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.5);
color: #fff; color: var(--text-color);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;

View File

@ -15,8 +15,7 @@
} }
.step { .step {
width: 20px; width: 20px;
height: 20px; height: 20px;
background: #fff;
border: 2px solid #acaca6; border: 2px solid #acaca6;
border-radius: 50%; border-radius: 50%;
transition: background 1s; transition: background 1s;

View File

@ -12,4 +12,4 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
} }

View File

@ -186,4 +186,4 @@
*/ */
// input[type="date"]:focus::before, // input[type="date"]:focus::before,
// input[type="date"]:valid::before { display: none } // input[type="date"]:valid::before { display: none }
} }

View File

@ -29,7 +29,7 @@
} }
& p { & p {
color: #28AF49; color: var(--button-color);
} }
p.top-info__bonus{ p.top-info__bonus{
@ -200,7 +200,7 @@
&__loyalty-program { &__loyalty-program {
text-align: center; text-align: center;
color: #28AF49; color: #7F2061;
font-style: normal; font-style: normal;
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 12px;

View File

@ -13,8 +13,8 @@
font-size: 14px; font-size: 14px;
} }
button { button {
background-color: var(--main-color); background-color: var(--button-color);
color: #fff; color: var(--text-color);
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
justify-content: center; justify-content: center;

View File

@ -6,7 +6,7 @@
position: relative; position: relative;
margin-bottom: 1px; margin-bottom: 1px;
width: 100%; width: 100%;
color: #fff; color: var(--text-color);
overflow: hidden; overflow: hidden;
border-bottom: solid 1px #bdbdbd; border-bottom: solid 1px #bdbdbd;
} }
@ -18,8 +18,7 @@
.tab label { .tab label {
display: block; display: block;
padding: 20px 26px; padding: 20px 26px;
position: relative; position: relative;
background: #ffffff00;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@ -33,8 +32,7 @@
// } // }
.tab-content { .tab-content {
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
background: #292929;
-webkit-transition: all 0.35s; -webkit-transition: all 0.35s;
-o-transition: all 0.35s; -o-transition: all 0.35s;
transition: all 0.35s; transition: all 0.35s;

View File

@ -20,13 +20,13 @@
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: #ffffff; color: var(--text-color);
} }
.share { .share {
width: 72px; width: 72px;
height: 48px; height: 48px;
background: #28af49; background: var(--button-color);
padding: 8px 26px; padding: 8px 26px;
border: none; border: none;
} }

View File

@ -16,7 +16,7 @@
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
span { span {
color: #828282; color: var(--text-color_1);
} }
.flex { .flex {
display: flex; display: flex;
@ -31,7 +31,7 @@
width: 100%; width: 100%;
padding: 12px; padding: 12px;
text-align: center; text-align: center;
border: 2px solid #28af49; border: 2px solid var(--button-color);
border-radius: 6px; border-radius: 6px;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
@ -39,7 +39,7 @@
line-height: 22px; line-height: 22px;
letter-spacing: -0.408px; letter-spacing: -0.408px;
background-color: transparent; background-color: transparent;
color: #28af49; color: var(--button-color);
} }
.info { .info {
@ -47,6 +47,6 @@
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: rgba(255, 255, 255, 0.5); color: var(--text-color_1);
} }
} }

View File

@ -6,9 +6,8 @@
box-sizing: border-box; box-sizing: border-box;
padding: 12px 16px; padding: 12px 16px;
width: 100%; width: 100%;
background: #231f20; background: var(--button-color);
box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.5); color: var(--button-text-color);
color: #fff;
display: grid; display: grid;
justify-content: space-between; justify-content: space-between;
grid-template-columns: auto auto auto; grid-template-columns: auto auto auto;

View File

@ -7,9 +7,9 @@
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 100%; border-radius: 100%;
background: #333333; background: var(--button-color);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
} }

View File

@ -24,7 +24,7 @@
} }
& p { & p {
color: #28af49; color: var(--button-color);
} }
p.top-info__bonus { p.top-info__bonus {
@ -35,8 +35,7 @@
&__qr { &__qr {
margin: 10px; margin: 10px;
padding: 5px; padding: 5px;
width: fit-content; width: fit-content;
background-color: #ffffff;
// background-image: linear-gradient( // background-image: linear-gradient(
// #008251 33%, // #008251 33%,
// transparent 0px, // transparent 0px,
@ -193,7 +192,7 @@
&__loyalty-program { &__loyalty-program {
text-align: center; text-align: center;
color: #28af49; color: var(--button-color);
font-style: normal; font-style: normal;
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 12px;

View File

@ -54,7 +54,7 @@
line-height: 17px; line-height: 17px;
text-align: center; text-align: center;
span { span {
color: #13a538; color: var(--button-color);
} }
} }
@ -67,7 +67,7 @@
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: #6a737c; color: var(--text-color_1);
text-align: left; text-align: left;
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -77,12 +77,12 @@
input { input {
width: 100%; width: 100%;
padding: 24px 16px 8px; padding: 24px 16px 8px;
background-color: #252323;
margin-bottom: 16px; margin-bottom: 16px;
border: none; border: none;
border-top: solid #6a737c 1px; border-top: solid var(--text-color_1) 1px;
border-bottom: solid #6a737c 1px; border-bottom: solid var(--text-color_1) 1px;
color: #6a737c; color: var(--text-color_1);
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 22px; font-size: 22px;
@ -94,7 +94,7 @@
height: 46px; height: 46px;
width: calc(100% - 32px); width: calc(100% - 32px);
padding: 10px 24px; padding: 10px 24px;
background: #28af49; background: var(--button-color);
border-radius: 6px; border-radius: 6px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -102,13 +102,14 @@
align-items: center; align-items: center;
border: none; border: none;
letter-spacing: -0.408px; letter-spacing: -0.408px;
color: #ffffff; color: var(--button-text-color);
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 17px; font-size: 17px;
line-height: 22px; line-height: 22px;
&:disabled { &:disabled {
background-color: #344a3a; color: var(--button-text-color_disabled);
background-color: var(--button-color_disabled);
} }
} }
} }
@ -143,15 +144,15 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 42px; height: 42px;
width: 42px; width: 42px;
border-radius: 6px; border-radius: 6px;
// box-shadow: 0 0 6px 1px hsla(240, 54%, 61%, 0.2); // box-shadow: 0 0 6px 1px hsla(240, 54%, 61%, 0.2);
overflow: hidden; overflow: hidden;
will-change: transform; will-change: transform;
} }
.box:focus-within { .box:focus-within {
box-shadow: 0 0 6px 1px rgba($color: #28af49, $alpha: 0.2), box-shadow: 0 0 6px 1px rgba(rgb(127, 32, 97), 0.2),
0 0 0 2px rgba($color: #28af49, $alpha: 0.6); 0 0 0 2px rgba(rgb(127, 32, 97), 0.6);
} }
.box::before, .box::before,
.box::after { .box::after {
@ -185,13 +186,13 @@
outline: 0; outline: 0;
font-size: 25.21px; font-size: 25.21px;
line-height: 42px; line-height: 42px;
color: #fff; color: var(--text-color);
background-color: transparent; background-color: transparent;
text-align: center; text-align: center;
z-index: 100; z-index: 100;
} }
.field::placeholder { .field::placeholder {
color: #fff; color: var(--text-color);
} }
} }
} }

View File

@ -6,7 +6,7 @@
position: relative; position: relative;
margin-bottom: 1px; margin-bottom: 1px;
width: 100%; width: 100%;
color: #fff; color: var(--text-color);
overflow: hidden; overflow: hidden;
border-bottom: solid 1px #bdbdbd; border-bottom: solid 1px #bdbdbd;
} }

View File

@ -19,13 +19,13 @@
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: #ffffff; color: var(--text-color);
} }
.share { .share {
width: 72px; width: 72px;
height: 48px; height: 48px;
background: #28af49; background: var(--button-color);
padding: 8px 26px; padding: 8px 26px;
border: none; border: none;
} }

View File

@ -30,7 +30,7 @@
width: 100%; width: 100%;
padding: 12px; padding: 12px;
text-align: center; text-align: center;
border: 2px solid #28af49; border: 2px solid var(--button-color);
border-radius: 6px; border-radius: 6px;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
@ -38,7 +38,7 @@
line-height: 22px; line-height: 22px;
letter-spacing: -0.408px; letter-spacing: -0.408px;
background-color: transparent; background-color: transparent;
color: #28af49; color: var(--button-color);
} }
.info { .info {

View File

@ -6,9 +6,9 @@
box-sizing: border-box; box-sizing: border-box;
padding: 12px 16px; padding: 12px 16px;
width: 100%; width: 100%;
background: #231f20; background: var(--background-color);
box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.5); box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.5);
color: #fff; color: var(--text-color);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;

View File

@ -95,7 +95,7 @@
height: 46px; height: 46px;
width: calc(100% - 32px); width: calc(100% - 32px);
padding: 10px 24px; padding: 10px 24px;
background: #28af49; background: var(--button-color);
border-radius: 6px; border-radius: 6px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -103,13 +103,13 @@
align-items: center; align-items: center;
border: none; border: none;
letter-spacing: -0.408px; letter-spacing: -0.408px;
color: #ffffff; color: var(--text-color);
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 17px; font-size: 17px;
line-height: 22px; line-height: 22px;
&:disabled { &:disabled {
background-color: #344a3a; background-color: var(--button-color_disabled);
} }
} }
} }
@ -186,13 +186,13 @@
outline: 0; outline: 0;
font-size: 25.21px; font-size: 25.21px;
line-height: 42px; line-height: 42px;
color: #fff; color: var(--text-color);
background-color: transparent; background-color: transparent;
text-align: center; text-align: center;
z-index: 100; z-index: 100;
} }
.field::placeholder { .field::placeholder {
color: #fff; color: var(--text-color);
} }
} }
} }

View File

@ -45,7 +45,8 @@ export class WpJsonService {
getCustomerInfo(systemId: string, token: string, url: string): Observable<any> { getCustomerInfo(systemId: string, token: string, url: string): Observable<any> {
return this._request(`customer_info/${systemId}/${token}/`, 'GET', null, false, url).pipe( return this._request(`customer_info/${systemId}/${token}/`, 'GET', null, false, url).pipe(
switchMap((response) => { switchMap((response) => {
if (response?.customer_info?.errorCode !== 'Customer_CustomerNotFound') { // TODO: typescript compile optional chaining ('response?.customer_info?.errorCode') without check ('response.customer_info.errorCode')
if (response && response.customer_info && response.customer_info.errorCode !== 'Customer_CustomerNotFound') {
return of(response) return of(response)
} else { } else {
return this.newCustomer(systemId, token, url).pipe( return this.newCustomer(systemId, token, url).pipe(

View File

@ -1,7 +1,7 @@
// Сброс стилей // Сброс стилей
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:middle} html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:middle}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
html{height:100%;color:#fff;} html{height:100%;}
body{line-height:1} body{line-height:1}
ol,ul{list-style:none} ol,ul{list-style:none}
blockquote,q{quotes:none} blockquote,q{quotes:none}
@ -12,8 +12,7 @@ table{border-collapse:collapse;border-spacing:0}
// @import url('https://fonts.cdnfonts.com/css/gotham-pro'); // @import url('https://fonts.cdnfonts.com/css/gotham-pro');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* { * {
// font-family: 'Gotham Pro';
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
} }
@ -24,23 +23,52 @@ table{border-collapse:collapse;border-spacing:0}
body { body {
background-color: #231F20; background-color: var(--background-color);
} }
:root { :root {
--main-color: #00b26b; --main-color: #00b26b;
--main-border-radius: 35px; --main-border-radius: 35px;
--background-color: #ffffff;
--text-color: #222222;
--text-color_1: #666666;
--button-color: #7F2061;
--button-color_disabled: #4a0d37;
--button-text-color: #ffffff;
--button-text-color_disabled: #cccccc;
} }
hr { hr {
width: 100%; width: 100%;
border-top: 1px solid#BDBDBD; border-top: 1px solid #BDBDBD;
}
.mat-bottom-sheet-container {
box-shadow: 0px 8px 10px -5px rgba(255, 255, 255, 0.2), 0px 16px 24px 2px rgba(255, 255, 255, 0.14), 0px 6px 30px 5px rgba(255, 255, 255, 0.12);
background: var(--background-color);
color: var(--text-color);
}
.mat-form-field-appearance-outline .mat-form-field-outline {
color: var(--button-color_disabled) !important;
}
.mat-form-field-appearance-outline .mat-form-field-outline {
color: var(--button-color) !important;
} }
.mat-form-field-wrapper { .mat-form-field-wrapper {
padding: 0; padding: 0;
} }
.mat-progress-spinner circle, .mat-spinner circle {
stroke: var(--button-color);
}
.mat-form-field-outline-start, .mat-form-field-outline-end { .mat-form-field-outline-start, .mat-form-field-outline-end {
border-radius: 0 !important; border-radius: 0 !important;
} }
@ -52,11 +80,15 @@ hr {
} }
.mat-focused .mat-form-field-outline > div { .mat-focused .mat-form-field-outline > div {
border-color: #28af49; border-color: var(--button-color);
}
.mat-form-field-label {
color: var(--text-color_1) !important;
} }
.mat-focused .mat-form-field-label { .mat-focused .mat-form-field-label {
color: #fff !important; color: var(--text-color) !important;
} }
.mat-form-field-invalid .mat-form-field-outline > div { .mat-form-field-invalid .mat-form-field-outline > div {
@ -64,7 +96,7 @@ hr {
} }
.country-list-button { .country-list-button {
color: #fff !important; color: var(--text-color) !important;
} }
.mat-menu-panel { .mat-menu-panel {
@ -82,7 +114,7 @@ hr {
} }
.country-selector-code { .country-selector-code {
color: #fff; color: var(--text-color);
} }
@ -102,8 +134,8 @@ qr-code canvas {
mark { mark {
padding: 4px; padding: 4px;
background: #009688; background: var(--background-color);
color: #fff; color: bar(--text-color);
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@ -115,10 +147,10 @@ button {
} }
.p-toast-message-custom { .p-toast-message-custom {
background-color: #fff; background-color: var(--background-color);
border: solid var(--main-color); border: solid var(--main-color);
border-width: 0 0 0 6px; border-width: 0 0 0 6px;
color: #000; color: var(--text-color);
.p-toast-icon-close { .p-toast-icon-close {
color: var(--main-color); color: var(--main-color);
} }