change colors to old version

This commit is contained in:
nikolay 2023-07-14 15:00:37 +04:00
parent 9d00a32d4f
commit 5cb88250c5
10 changed files with 130 additions and 80 deletions

View File

@ -75,6 +75,7 @@
font-size: 16px;
line-height: 19px;
letter-spacing: -0.5px;
color: var(--text-color);
}
.price,

View File

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

View File

@ -8,7 +8,7 @@
<div *ngIf="showDropdown" class="backdrop" (click)="closeMenu()"></div>
<div class="menu">
<button mat-button (click)="toggleMenu()">
<span class="material-icons" style="color: white !important">
<span class="material-icons" style="color: var(--text-color) !important">
more_horiz
</span>
</button>
@ -16,7 +16,7 @@
<div class="menu__dropdown" *ngIf="showDropdown">
<ul>
<menu-item [handler]="handler(aboutApp)">
<span class="material-icons icon" style="color: var(--main-color)">
<span class="material-icons icon" style="color: var(--main-color_2)">
info
</span>
<span class="item_title">О приложении</span>
@ -34,8 +34,8 @@
Установить приложение
</span>
</menu-item>
<menu-item *ngIf="!messagingService.checkRequestPermission()" [handler]="handler(messagingService.requestPermission)">
<span class="material-icons" style="color: var(--main-color)">
<menu-item *ngIf="!notified()" [handler]="handler(notify)">
<span class="material-icons" style="color: var(--main-color_2)">
notifications
</span>
<span class="item_title">
@ -44,7 +44,7 @@
</menu-item>
</ng-container>
<menu-item [handler]="handler(logout)">
<span class="material-icons" style="color: var(--main-color)">
<span class="material-icons" style="color: var(--main-color_2)">
logout
</span>
<span class="item_title">Выйти</span>

View File

@ -15,7 +15,7 @@
box-sizing: border-box;
padding: 12px 16px;
width: 100%;
background: var(--button-color);
background: var(--main-color_2);
color: var(--button-text-color);
display: flex;
flex-direction: column;
@ -52,12 +52,13 @@
.menu__dropdown {
z-index: 110;
position: absolute;
background-color: white;
background-color: var(--background-color_1);
width: 250px;
height: fit-content;
right: 20px;
border-radius: 6px;
box-shadow: 0px 2px 5px -3px black;
overflow: hidden;
.item_title {
color: var(--text-color);

View File

@ -10,10 +10,10 @@ import { AuthService } from 'src/app/services/auth.service';
@Component({
selector: 'app-navbar[title]',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
styleUrls: ['./navbar.component.scss'],
})
export class NavbarComponent implements OnInit {
@Input() title: string = 'Название не задано'
@Input() title: string = 'Название не задано';
@Input() backEvent?: () => void;
showDropdown: boolean = false;
@ -24,14 +24,14 @@ export class NavbarComponent implements OnInit {
private appleWalletService: AppleWalletService,
private cookiesService: CookiesService,
private _bottomSheet: MatBottomSheet,
private authService: AuthService,
private authService: AuthService
) {}
handler(cb: () => void): (e: any) => void {
return (e: any) => {
cb();
this.closeMenu();
}
};
}
aboutApp() {}
@ -50,7 +50,7 @@ export class NavbarComponent implements OnInit {
closeMenu = () => {
this.showDropdown = false;
}
};
back() {
if (this.backEvent) {
@ -60,11 +60,11 @@ export class NavbarComponent implements OnInit {
addToWallet = () => {
this.appleWalletService.addCardToWallet();
}
};
deleteToken = (): void => {
this.cookiesService.logout();
}
};
logout = () => {
const bottomSheet = this._bottomSheet.open(ExitComponent);
@ -75,8 +75,15 @@ export class NavbarComponent implements OnInit {
}
},
});
}
};
installApp = () => { }
}
installApp = () => {};
notified = () => {
return this.messagingService.checkRequestPermission();
};
notify = () => {
this.messagingService.requestPermission();
};
}

View File

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

View File

@ -36,6 +36,8 @@
margin: 10px;
padding: 5px;
width: fit-content;
background-color: var(--text-color);
border-radius: 6px;
// background-image: linear-gradient(
// #008251 33%,
// transparent 0px,

View File

@ -153,8 +153,8 @@
will-change: transform;
}
.box:focus-within {
box-shadow: 0 0 6px 1px rgba(rgb(127, 32, 97), 0.2),
0 0 0 2px rgba(rgb(127, 32, 97), 0.6);
box-shadow: 0 0 6px 1px rgba(rgb(0, 92, 80), 0.2),
0 0 0 2px rgba(rgb(0, 92, 80), 0.6);
}
.box::before,
.box::after {

View File

@ -3,64 +3,31 @@
@include mat.core();
$primary: (
50 : #f0e4ec,
100 : #d9bcd0,
200 : #bf90b0,
300 : #a56390,
400 : #924179,
500 : #7f2061,
600 : #771c59,
700 : #6c184f,
800 : #621345,
900 : #4f0b33,
A100 : #ff85c7,
A200 : #ff52b0,
A400 : #ff1f99,
A700 : #ff068d,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #ffffff,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #ffffff,
A700 : #ffffff,
)
);
$accent: (
50 : #ffffff,
100 : #ffffff,
200 : #ffffff,
300 : #ffffff,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #ffffff,
A200 : #ffffff,
A400 : #ffffff,
A700 : #ffffff,
50 : #e5f5e9,
100 : #bfe7c8,
200 : #94d7a4,
300 : #69c780,
400 : #48bb64,
500 : #28af49,
600 : #24a842,
700 : #1e9f39,
800 : #189631,
900 : #0f8621,
A100 : #b8ffc0,
A200 : #85ff94,
A400 : #52ff67,
A700 : #38ff51,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #000000,
600 : #000000,
700 : #000000,
800 : #000000,
900 : #000000,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
@ -68,6 +35,40 @@ $accent: (
)
);
$accent: (
50 : #e5e4e4,
100 : #bdbcbc,
200 : #918f90,
300 : #656263,
400 : #444141,
500 : #231f20,
600 : #1f1b1c,
700 : #1a1718,
800 : #151213,
900 : #0c0a0b,
A100 : #ff52ff,
A200 : #ff1fff,
A400 : #eb00eb,
A700 : #d200d2,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #ffffff,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #ffffff,
A400 : #ffffff,
A700 : #ffffff,
)
);
$primary-palette: mat.define-palette($primary);
$accent-palette: mat.define-palette($accent);
@ -111,23 +112,51 @@ body {
}
:root {
--main-color: #7F2061;
--main-color: #28AF49;
--main-color_2: #005C50;
--main-border-radius: 35px;
--background-color: #ffffff;
--background-color: #231F20;
--background-color_1: #000000;
--text-color: #222222;
--text-color_1: #666666;
--text-color: #ffffff;
--text-color_1: #8d8d8d;
--button-color: #7F2061;
--button-color_disabled: #4a0d37;
--button-color: #28AF49 ;
--button-color_disabled: rgb(40, 175, 73, 0.9);
--button-text-color: #ffffff;
--button-text-color_disabled: #cccccc;
--main-color_hover: rgba(127, 32, 97, 0.3);
--main-color_hover: rgba(40, 175, 73, 0.6);
}
.mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid, .mat-focused) .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid, .mat-focused) .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid, .mat-focused) .mdc-notched-outline__trailing {
border-color: var(--main-color_hover) !important;
}
.mat-mdc-outlined-button:not(:disabled) {
border-color: var(--text-color) !important;
.mdc-button__label {
color: var(--text-color);
}
}
.mdc-text-field:not(.mdc-text-field--disabled, .mdc-text-field--invalid) .mdc-floating-label {
color: var(--main-color_hover);
}
.mdc-text-field span {
color: inherit !important;
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
color: var(--text-color);
}
.mdc-button__label span {
color: var(--button-text-color) !important;
}
@ -143,6 +172,10 @@ body {
font-family: Montserrat;
}
p, span, h1, h2, h3, h4, h5, h6 {
color: var(--text-color);
}
.mat-h2,
.mat-headline-6,
.mat-typography .mat-h2,
@ -151,6 +184,12 @@ body {
font-family: Montserrat, sans-serif;
}
.mat-bottom-sheet-container {
background: var(--background-color_1);
color: var(--text-color);
}
hr {
width: 100%;
border-top: 1px solid #BDBDBD;