gofnnp/h-usersite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dev #14607 Море. Правки по сайту: change interface and api

Browse Source
This commit is contained in:
nikolay 2023-06-29 11:53:38 +04:00
parent 06f668cd3d
commit 0abdb264f5
12 changed files with 422 additions and 395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
angular/src/app/presentation-options/default-option/components/footer/footer.component.html
View File

@ -1,4 +1 @@
<img src="/assets/logo-light-theme.png" alt="Логотип">
<h3>Горячая линия</h3>
<a class="phone-number" href="tel:88003334130">8 (800) 333-41-30</a>
<app-social-media-buttons></app-social-media-buttons>

6
angular/src/app/presentation-options/default-option/components/navbar/menu_item.component.scss
View File

@ -9,11 +9,7 @@
&:hover { &:hover {
background-color: var(--main-color_hover); background-color: var(--main-color_hover);
} }
.title {
color: var(--text-color);
}
.icon { .icon {
} }

8
angular/src/app/presentation-options/default-option/components/navbar/navbar.component.html
View File

@ -7,7 +7,7 @@
<div *ngIf="showDropdown" class="backdrop" (click)="closeMenu()"></div> <div *ngIf="showDropdown" class="backdrop" (click)="closeMenu()"></div>
<div *ngIf="showMenu" class="menu"> <div *ngIf="showMenu" class="menu">
<button mat-button (click)="toggleMenu()"> <button mat-button (click)="toggleMenu()">
<span class="material-icons" style="color: white !important"> <span class="material-icons" style="color: var(--background-color)">
more_horiz more_horiz
</span> </span>
</button> </button>
@ -15,7 +15,7 @@
<div class="menu__dropdown" *ngIf="showDropdown"> <div class="menu__dropdown" *ngIf="showDropdown">
<ul> <ul>
<menu-item [handler]="handler(aboutApp)"> <menu-item [handler]="handler(aboutApp)">
<span class="material-icons icon" style="color: var(--main-color)"> <span class="material-icons icon" style="color: var(--background-color)">
info info
</span> </span>
<span class="item_title">О приложении</span> <span class="item_title">О приложении</span>
@ -40,7 +40,9 @@
(click)="messagingService.requestPermission()" (click)="messagingService.requestPermission()"
class="notification" class="notification"
> >
<img src="./assets/notification.svg" alt="notification" /> <span class="material-icons">
notifications
</span>
</button> </button>
<button mat-stroked-button appDownloadApp>Установить</button> <button mat-stroked-button appDownloadApp>Установить</button>
</div> </div>

6
angular/src/app/presentation-options/default-option/components/navbar/navbar.component.scss
View File

@ -1,9 +1,9 @@
:host { :host {
width: 100%; width: 100%;
.notification { .notification {
img { img {
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
} }
@ -60,7 +60,7 @@
box-shadow: 0px 2px 5px -3px black; box-shadow: 0px 2px 5px -3px black;
.item_title { .item_title {
color: var(--text-color); color: var(--background-color);
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
} }

2
angular/src/app/presentation-options/default-option/components/navbar/navbar.component.ts
View File

@ -39,7 +39,7 @@ export class NavbarComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
const deviceType = getTypeDevice(); const deviceType = getTypeDevice();
this.showMenu = deviceType === DeviceType.ios; this.showMenu = deviceType !== DeviceType.ios;
} }
toggleMenu() { toggleMenu() {

82
angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.html
View File

@ -1,77 +1,39 @@
<app-navbar title="Карта гостя" [backEvent]="showBack ? logout : undefined"></app-navbar> <app-navbar title="Карта гостя" [backEvent]="showBack ? logout : undefined"></app-navbar>
<ng-container *ngIf="!authService.loading && authService.userInfo"> <ng-container *ngIf="!authService.loading && authService.userInfo">
<div class="guest-card"> <div class="guest-card">
<div class="top-info"> <div *ngIf="authService.userInfo?.name" class="owner">
<div class="top-info__level"> <span>Владелец карты</span>
<p id="level">Уровень {{ authService.userInfo.customer_level }}</p> <span class="name">{{authService.userInfo.name}}</span>
<p id="level-percent">Кэшбек {{ authService.currentLvlPeriod.percent }}%</p> </div>
</div> <div class="bonuses">
<p class="top-info__bonus"> <span>Бонусы</span>
<ng-container *ngIf="!isNegativeBalance"> <span>{{authService.getBalanceAmount($any(authService.userInfo?.walletBalances))}}</span>
{{ Math.floor(authService.getBalanceAmount($any(authService.userInfo.walletBalances))) }}
бонусов
</ng-container>
<ng-container *ngIf="isNegativeBalance">
Ошибка! Отрицательный баланс бонусов
</ng-container>
</p>
</div> </div>
<div class="guest-card__qr" (click)="qrCodeClick()"> <div class="guest-card__qr" (click)="qrCodeClick()">
<qr-code <qr-code
[value]="authService.userInfo?.phone?.substr(1) || 'Данные не найдены'" [value]="authService.userInfo?.phone?.substr(1) || 'Данные не найдены'"
[margin]="0" [margin]="0"
[size]="qrCodeSize" [size]="qrCodeSize"
errorCorrectionLevel="H" darkColor="#000000FF"
></qr-code> lightColor="#FFFFFFFF"
</div> errorCorrectionLevel="H"
<div class="guest-card__user-description"> ></qr-code>
<p> <span class="qr-value">{{authService.userInfo?.phone}}</span>
<ng-container *ngIf="authService.currentLvlPeriod.end"> </div>
Осталось купить на сумму
<span class="price">{{
authService.currentLvlPeriod.end -
(authService.userInfo.OrdersSum) +
1
}}</span>
рублей, тогда кэшбек будет
<span class="percent"
>{{ authService.getNextLevel().percent }}%</span
>
с
{{
authService.purchaseData.currentPeriod[1]
.locale("ru")
.format("D MMMM")
}}
</ng-container>
<ng-container *ngIf="!authService.currentLvlPeriod.end">
У Вас последний уровень бонусной программы. Процент начисляемых
бонусов:
{{ authService.currentLvlPeriod.percent }}%
</ng-container>
</p>
</div>
<span id="bonuses-condition"></span>
<app-last-order
[lastOrder]="authService.purchaseData.lastPurchase"
[loading]="authService.loading"
></app-last-order>
<a class="guest-card__loyalty-program" routerLink="loyality-program"
>Подробнее о правилах <br />
Программы лояльности</a
>
</div> </div>
<app-footer></app-footer>
</ng-container> </ng-container>
<ng-container *ngIf="!authService.loading && !authService.userInfo"> <ng-container *ngIf="!authService.loading && !authService.userInfo">
<div class="not-found"> <div class="not-found">
<p>Данные недоступны, попробуйте позже</p> <p>Данные недоступны, попробуйте позже</p>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="authService.loading"> <ng-container *ngIf="authService.loading">
<ng-container <div class="spinner-container">
*ngTemplateOutlet="spinner; context: { $implicit: 85 }" <ng-container
></ng-container> *ngTemplateOutlet="spinner; context: { $implicit: 85 }"
></ng-container>
</div>
</ng-container> </ng-container>
<ng-template #spinner let-diameter> <ng-template #spinner let-diameter>

417
angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss
View File

@ -1,217 +1,268 @@
:host { :host {
.guest-card { // .guest-card {
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
align-items: center; // align-items: center;
max-width: 600px; // max-width: 600px;
margin: 0 auto; // margin: 0 auto;
.top-info { // .top-info {
padding: 8px 0 0; // padding: 8px 0 0;
width: 100%; // width: 100%;
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
align-items: center; // align-items: center;
&__level { // &__level {
width: 100%; // width: 100%;
display: flex; // display: flex;
align-items: center; // align-items: center;
justify-content: space-around; // justify-content: space-around;
font-size: 16px; // font-size: 16px;
} // }
& p { // & p {
color: var(--button-color); // color: var(--button-color);
} // }
p.top-info__bonus { // p.top-info__bonus {
font-size: 20px; // font-size: 20px;
} // }
} // }
&__qr { // &__qr {
margin: 10px; // margin: 10px;
padding: 5px; // padding: 5px;
width: fit-content; // width: fit-content;
// background-image: linear-gradient( // // background-image: linear-gradient(
// #008251 33%, // // #008251 33%,
// transparent 0px, // // transparent 0px,
// transparent 67%, // // transparent 67%,
// #008251 0px // // #008251 0px
// ), // // ),
// linear-gradient( // // linear-gradient(
// 90deg, // // 90deg,
// #008251 33%, // // #008251 33%,
// transparent 0px, // // transparent 0px,
// transparent 66%, // // transparent 66%,
// #008251 0px // // #008251 0px
// ), // // ),
// linear-gradient(#008251 33%, transparent 0px, transparent 67%, #008251 0), // // linear-gradient(#008251 33%, transparent 0px, transparent 67%, #008251 0),
// linear-gradient(90deg, #008251 33%, transparent 0, transparent 66%, #008251 0); // // linear-gradient(90deg, #008251 33%, transparent 0, transparent 66%, #008251 0);
// background-size: 3px 100%, 100% 3px, 3px 100%, 100% 3px; // // background-size: 3px 100%, 100% 3px, 3px 100%, 100% 3px;
// background-position: 0 0, 0 0, 100% 100%, 100% 100%; // // background-position: 0 0, 0 0, 100% 100%, 100% 100%;
// background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; // // background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
cursor: pointer; // cursor: pointer;
} // }
&__user-description { // &__user-description {
padding: 14px 24px; // padding: 14px 24px;
p { // p {
width: 60%; // width: 60%;
text-align: center; // text-align: center;
margin: 0 auto; // margin: 0 auto;
font-style: normal; // font-style: normal;
font-weight: 400; // font-weight: 400;
font-size: 16px; // font-size: 16px;
line-height: 19px; // line-height: 19px;
letter-spacing: -0.5px; // letter-spacing: -0.5px;
} // }
.price, // .price,
.percent { // .percent {
font-weight: bold; // font-weight: bold;
} // }
} // }
&__purchases-description { // &__purchases-description {
margin: 0; // margin: 0;
padding: 14px 24px; // padding: 14px 24px;
width: 100%; // width: 100%;
text-align: center; // text-align: center;
font-style: normal; // font-style: normal;
font-weight: 400; // font-weight: 400;
font-size: 16px; // font-size: 16px;
line-height: 19px; // line-height: 19px;
letter-spacing: -0.5px; // letter-spacing: -0.5px;
grid-template-columns: calc(100% - 24px) 24px; // grid-template-columns: calc(100% - 24px) 24px;
span { // span {
color: #219653; // color: #219653;
} // }
} // }
&__level-info { // &__level-info {
padding-top: 36px; // padding-top: 36px;
padding-left: 36px; // padding-left: 36px;
padding-right: 36px; // padding-right: 36px;
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
align-items: center; // align-items: center;
h2 { // h2 {
font-style: normal; // font-style: normal;
font-weight: 700; // font-weight: 700;
font-size: 17px; // font-size: 17px;
line-height: 22px; // line-height: 22px;
text-align: center; // text-align: center;
letter-spacing: -0.408px; // letter-spacing: -0.408px;
} // }
input[type="range"] { // input[type="range"] {
-webkit-appearance: none; // -webkit-appearance: none;
width: 100%; // width: 100%;
height: 6px; // height: 6px;
border-radius: 5px; // border-radius: 5px;
display: block; // display: block;
position: relative; // position: relative;
background: #231f20; // background: #231f20;
box-shadow: 0px 0px 3px #f2c94c59; // box-shadow: 0px 0px 3px #f2c94c59;
background-image: linear-gradient(#f2c94c, #f2c94c); // background-image: linear-gradient(#f2c94c, #f2c94c);
background-size: 70% 100%; // background-size: 70% 100%;
background-repeat: no-repeat; // background-repeat: no-repeat;
&::before, // &::before,
&::after { // &::after {
content: " "; // content: " ";
display: block; // display: block;
width: 16px; // width: 16px;
height: 16px; // height: 16px;
border-radius: 100%; // border-radius: 100%;
position: absolute; // position: absolute;
top: -5px; // top: -5px;
} // }
&::before { // &::before {
background-color: #f2c94c; // background-color: #f2c94c;
left: 0px; // left: 0px;
} // }
&::after { // &::after {
background-color: #f2c94c; // background-color: #f2c94c;
right: 0px; // right: 0px;
} // }
&::-webkit-slider-thumb { // &::-webkit-slider-thumb {
-webkit-appearance: none; // -webkit-appearance: none;
background: #f2c94c; // background: #f2c94c;
width: 16px; // width: 16px;
height: 16px; // height: 16px;
border-radius: 100%; // border-radius: 100%;
} // }
&::-ms-thumb { // &::-ms-thumb {
-webkit-appearance: none; // -webkit-appearance: none;
height: 20px; // height: 20px;
width: 20px; // width: 20px;
border-radius: 50%; // border-radius: 50%;
background: #f2c94c; // background: #f2c94c;
cursor: ew-resize; // cursor: ew-resize;
box-shadow: 0 0 2px 0 #555; // box-shadow: 0 0 2px 0 #555;
transition: background 0.3s ease-in-out; // transition: background 0.3s ease-in-out;
} // }
&::-moz-range-thumb { // &::-moz-range-thumb {
-webkit-appearance: none; // -webkit-appearance: none;
height: 20px; // height: 20px;
width: 20px; // width: 20px;
border-radius: 50%; // border-radius: 50%;
background: #f2c94c; // background: #f2c94c;
cursor: ew-resize; // cursor: ew-resize;
box-shadow: 0 0 2px 0 #555; // box-shadow: 0 0 2px 0 #555;
transition: background 0.3s ease-in-out; // transition: background 0.3s ease-in-out;
} // }
} // }
} // }
&__download-app { // &__download-app {
width: 100%; // width: 100%;
position: relative; // position: relative;
margin-top: 32px; // margin-top: 32px;
display: flex; // display: flex;
justify-content: flex-end; // justify-content: flex-end;
img { // img {
width: 100%; // width: 100%;
max-width: calc(100% - 16px); // max-width: calc(100% - 16px);
} // }
} // }
&__loyalty-program { // &__loyalty-program {
text-align: center; // text-align: center;
color: var(--button-color); // color: var(--button-color);
font-style: normal; // font-style: normal;
font-weight: bold; // font-weight: bold;
font-size: 12px; // font-size: 12px;
line-height: 16px; // line-height: 16px;
text-decoration: none; // text-decoration: none;
margin: 17px 0 0; // margin: 17px 0 0;
} // }
} // }
.wrapper { // .wrapper {
padding-top: 20px; // padding-top: 20px;
} // }
.not-found { .not-found {
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.guest-card {
max-width: 600px;
margin: 0 auto;
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 20px;
span {
color: var(--text-color);
font-style: italic;
}
.owner {
display: flex;
flex-direction: column;
span {
font-size: 12px;
}
span.name {
font-size: 16px;
}
}
.bonuses {
display: flex;
justify-content: space-between;
align-items: center;
span {
font-size: 18px;
}
}
.guest-card__qr {
margin: 0 auto;
margin-top: 100px;
width: fit-content;
padding: 8px;
border-radius: 6px;
background: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
.qr-value {
color: var(--background-color);
}
}
}
.spinner-container {
margin-top: 40px;
}
} }
app-accordion { app-accordion {

186
angular/src/app/presentation-options/default-option/pages/login/login.component.html
View File

@ -3,102 +3,98 @@
[title]="phoneForm.value.phone" [title]="phoneForm.value.phone"
[backEvent]="backToPhoneForm" [backEvent]="backToPhoneForm"
[ngStyle]="{ [ngStyle]="{
position: 'absolute', position: 'absolute',
top: 0 top: 0
}" }"
></app-navbar> ></app-navbar>
<h1>Участвуй в программе лояльности COFFEE LIKE</h1> <div class="wrapper" *ngIf="isShowNumber; else smsCode">
<p class="description">Начни получать бонусы прямо сейчас</p> <form
<form (ngSubmit)="submitNumber()"
*ngIf="isShowNumber; else smsCode" [formGroup]="phoneForm"
(ngSubmit)="submitNumber()" >
[formGroup]="phoneForm" <!-- <div class="input-container"> -->
> <mat-form-field appearance="outline">
<!-- <div class="input-container"> --> <mat-label>Ваше имя</mat-label>
<mat-form-field appearance="outline"> <input formControlName="name" matInput type="text" />
<mat-label>Ваше имя</mat-label> </mat-form-field>
<input formControlName="name" matInput type="text" /> <!-- </div> -->
</mat-form-field> <div class="input-container">
<!-- </div> --> <!-- <label for="number">Номер телефона</label>
<div class="input-container"> <input id="number" type="text" placeholder="Введите номер" /> -->
<!-- <label for="number">Номер телефона</label> <mat-form-field appearance="outline">
<input id="number" type="text" placeholder="Введите номер" /> --> <mat-label>Номер телефона</mat-label>
<mat-form-field appearance="outline"> <ngx-mat-intl-tel-input
<mat-label>Номер телефона</mat-label> formControlName="phone"
<ngx-mat-intl-tel-input [enablePlaceholder]="true"
formControlName="phone" [enableSearch]="false"
[enablePlaceholder]="true" [onlyCountries]="['ru', 'kg', 'by', 'kz', 'fi', 'de']"
[enableSearch]="false" [preferredCountries]="['ru']"
[onlyCountries]="['ru', 'kg', 'by', 'kz', 'fi', 'de']" name="phone"
[preferredCountries]="['ru']" #phone
name="phone" >
#phone </ngx-mat-intl-tel-input>
> </mat-form-field>
</ngx-mat-intl-tel-input>
</mat-form-field>
</div>
<p class="offer">
Используя приложение, вы принимаете <a href="https://docs.google.com/document/d/1tOZyI9DKerQpMY_N-hMExMB15j2F98E3VDqwIVMkk4I">условия</a>
и соглашаетесь на получение рекламно-информационных сообщений
</p>
<button>Принять участие</button>
</form>
<ng-template #smsCode>
<h2>Введите код из SMS</h2>
<form class="code-form" [formGroup]="codeForm" (ngSubmit)="submitCode()">
<div class="inputs-container">
<label class="box"
><input
class="field"
id="field"
type="tel"
placeholder="•"
#field
formControlName="code"
maxlength="1"
/></label>
<label class="box"
><input
class="field"
id="field1"
type="tel"
placeholder="•"
#field1
formControlName="code1"
maxlength="1"
/></label>
<label class="box"
><input
class="field"
id="field2"
type="tel"
placeholder="•"
#field2
formControlName="code2"
maxlength="1"
/></label>
<label class="box"
><input
class="field"
id="field3"
type="tel"
placeholder="•"
#field3
formControlName="code3"
maxlength="1"
/></label>
</div> </div>
<button>Войти</button> <button>Принять участие</button>
</form> </form>
<p class="resend-code"> </div>
Не пришло SMS?<br /> <ng-template #smsCode>
<ng-container *ngIf="authService.timeLeft"> <div class="wrapper">
Отправим повторно через {{authService.timeLeft}}с <h2>Введите код из SMS</h2>
</ng-container> <form class="code-form" [formGroup]="codeForm" (ngSubmit)="submitCode()">
<ng-container *ngIf="!authService.timeLeft"> <div class="inputs-container">
<span class="resend" (click)="submitNumber()">Отправить повторно</span> <label class="box"
</ng-container> ><input
</p> class="field"
id="field"
type="tel"
placeholder="•"
#field
formControlName="code"
maxlength="1"
/></label>
<label class="box"
><input
class="field"
id="field1"
type="tel"
placeholder="•"
#field1
formControlName="code1"
maxlength="1"
/></label>
<label class="box"
><input
class="field"
id="field2"
type="tel"
placeholder="•"
#field2
formControlName="code2"
maxlength="1"
/></label>
<label class="box"
><input
class="field"
id="field3"
type="tel"
placeholder="•"
#field3
formControlName="code3"
maxlength="1"
/></label>
</div>
<button>Войти</button>
</form>
<p class="resend-code">
Не пришло SMS?<br />
<ng-container *ngIf="authService.timeLeft">
Отправим повторно через {{authService.timeLeft}}с
</ng-container>
<ng-container *ngIf="!authService.timeLeft">
<span class="resend" (click)="submitNumber()">Отправить повторно</span>
</ng-container>
</p>
</div>
</ng-template> </ng-template>
<app-footer></app-footer> <app-footer></app-footer>

23
angular/src/app/presentation-options/default-option/pages/login/login.component.scss
View File

@ -1,13 +1,19 @@
:host { :host {
padding-top: 48px; display: flex;
display: flex; flex-direction: column;
flex-direction: column; align-items: center;
align-items: center;
max-width: 600px;
margin: 0 auto 52px;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
color: var(--text-color);
.wrapper {
max-width: 600px;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 { h1 {
margin-top: 20px; margin-top: 20px;
width: 302px; width: 302px;
@ -41,7 +47,8 @@
} }
form { form {
display: flex; display: flex;
width: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: 35px; margin-top: 35px;

14
angular/src/app/presentation-options/default-option/pages/login/login.component.ts
View File

@ -27,12 +27,12 @@ export class LoginComponent implements OnInit {
code2: new FormControl('', [Validators.required]), code2: new FormControl('', [Validators.required]),
code3: new FormControl('', [Validators.required]), code3: new FormControl('', [Validators.required]),
}); });
private inputIds = ['field', 'field1', 'field2', 'field3']; private inputIds = ['field', 'field1', 'field2', 'field3'];
constructor( constructor(
public authService: AuthService, public authService: AuthService,
private router: Router, private router: Router,
private messageService: MessageService, private messageService: MessageService,
) { } ) { }
ngOnInit(): void { } ngOnInit(): void { }
@ -104,12 +104,12 @@ export class LoginComponent implements OnInit {
if (this.phoneForm.invalid) { if (this.phoneForm.invalid) {
this.phoneForm.markAsTouched(); this.phoneForm.markAsTouched();
this.messageService.clear(); this.messageService.clear();
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
summary: 'Введите имя и телефон', summary: 'Введите имя и телефон',
}); });
return; return;
} }
const data = this.phoneForm.value; const data = this.phoneForm.value;
@ -125,7 +125,7 @@ export class LoginComponent implements OnInit {
const phoneData = this.phoneForm.value; const phoneData = this.phoneForm.value;
this.authService.submitCode( this.authService.submitCode(
Object.values(data).join(''), phoneData.phone!, phoneData.name!); Object.values(data).join(''), phoneData.phone!, phoneData.name!);
} }
backToPhoneForm = () => { backToPhoneForm = () => {

2
angular/src/app/services/auth.service.ts
View File

@ -90,8 +90,6 @@ export class AuthService {
this.userInfo = value.customer_info; this.userInfo = value.customer_info;
this.cookiesService.setCookie('phone-number', this.userInfo!.phone?.slice(2)); this.cookiesService.setCookie('phone-number', this.userInfo!.phone?.slice(2));
this.getLastPurchase();
} }
}, },
error: (e) => { error: (e) => {

66
angular/src/styles.scss
View File

@ -2,21 +2,21 @@
@include mat.core(); @include mat.core();
$primary: ( $accent: (
50 : #f0e4ec, 50 : #e0e0e0,
100 : #d9bcd0, 100 : #b3b3b3,
200 : #bf90b0, 200 : #808080,
300 : #a56390, 300 : #4d4d4d,
400 : #924179, 400 : #262626,
500 : #7f2061, 500 : #000000,
600 : #771c59, 600 : #000000,
700 : #6c184f, 700 : #000000,
800 : #621345, 800 : #000000,
900 : #4f0b33, 900 : #000000,
A100 : #ff85c7, A100 : #a6a6a6,
A200 : #ff52b0, A200 : #8c8c8c,
A400 : #ff1f99, A400 : #737373,
A700 : #ff068d, A700 : #666666,
contrast: ( contrast: (
50 : #000000, 50 : #000000,
100 : #000000, 100 : #000000,
@ -35,7 +35,7 @@ $primary: (
) )
); );
$accent: ( $primary: (
50 : #ffffff, 50 : #ffffff,
100 : #ffffff, 100 : #ffffff,
200 : #ffffff, 200 : #ffffff,
@ -111,24 +111,34 @@ body {
} }
:root { :root {
--main-color: #7F2061; --main-color: #000000;
--main-border-radius: 35px; --main-border-radius: 35px;
--background-color: #ffffff; --background-color: #000000;
--text-color: #222222; --text-color: #ffffff;
--text-color_1: #666666; --text-color_1: #aaaaaa;
--button-color: #7F2061; --button-color: #ffffff;
--button-color_disabled: #4a0d37; --button-color_disabled: #aaaaaa;
--button-text-color: #ffffff; --button-text-color: #000000;
--button-text-color_disabled: #cccccc; --button-text-color_disabled: #cccccc;
--main-color_hover: rgba(127, 32, 97, 0.3); --main-color_hover: rgba(127, 32, 97, 0.3);
} }
.mdc-button__label { .mdc-button__label {
color: var(--button-text-color) !important; color: var(--background-color) !important;
}
.mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid) .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid) .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid) .mdc-notched-outline__trailing {
border-color: var(--text-color_1);
}
.mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid) .mdc-notched-outline__leading {
} }
.mat-mdc-outlined-button:not(:disabled) { .mat-mdc-outlined-button:not(:disabled) {
@ -151,6 +161,14 @@ body {
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
} }
.mdc-text-field:not(.mdc-text-field--disabled, .mdc-text-field--invalid) .mdc-floating-label {
color: var(--text-color_1);
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
color: var(--text-color);
}
hr { hr {
width: 100%; width: 100%;
border-top: 1px solid #BDBDBD; border-top: 1px solid #BDBDBD;