From 5cb88250c53fb3017a472723f695454a3cf78391 Mon Sep 17 00:00:00 2001 From: nikolay Date: Fri, 14 Jul 2023 15:00:37 +0400 Subject: [PATCH] change colors to old version --- .../guest-card/guest-card.component.scss | 1 + .../components/footer/footer.component.html | 2 +- .../navbar/menu_item.component.scss | 2 +- .../components/navbar/navbar.component.html | 10 +- .../components/navbar/navbar.component.scss | 5 +- .../components/navbar/navbar.component.ts | 31 ++-- .../social-media-buttons.component.scss | 2 +- .../guest-card/guest-card.component.scss | 2 + .../pages/login/login.component.scss | 4 +- angular/src/styles.scss | 151 +++++++++++------- 10 files changed, 130 insertions(+), 80 deletions(-) diff --git a/angular/src/app/pages/guest-card/guest-card.component.scss b/angular/src/app/pages/guest-card/guest-card.component.scss index 7d3683e..84d20b6 100644 --- a/angular/src/app/pages/guest-card/guest-card.component.scss +++ b/angular/src/app/pages/guest-card/guest-card.component.scss @@ -75,6 +75,7 @@ font-size: 16px; line-height: 19px; letter-spacing: -0.5px; + color: var(--text-color); } .price, diff --git a/angular/src/app/presentation-options/default-option/components/footer/footer.component.html b/angular/src/app/presentation-options/default-option/components/footer/footer.component.html index c79ae71..a3bb425 100644 --- a/angular/src/app/presentation-options/default-option/components/footer/footer.component.html +++ b/angular/src/app/presentation-options/default-option/components/footer/footer.component.html @@ -1,4 +1,4 @@ -Логотип +Логотип

Горячая линия

8 (800) 333-41-30 diff --git a/angular/src/app/presentation-options/default-option/components/navbar/menu_item.component.scss b/angular/src/app/presentation-options/default-option/components/navbar/menu_item.component.scss index 80f9464..fcb2184 100644 --- a/angular/src/app/presentation-options/default-option/components/navbar/menu_item.component.scss +++ b/angular/src/app/presentation-options/default-option/components/navbar/menu_item.component.scss @@ -4,7 +4,7 @@ align-items: center; padding: 10px; cursor: pointer; - transition: background-color 0.1s; + transition: background-color 0.1s; &:hover { background-color: var(--main-color_hover); diff --git a/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.html b/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.html index 7eae632..c4fe1eb 100644 --- a/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.html +++ b/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.html @@ -8,7 +8,7 @@
@@ -16,7 +16,7 @@
    - + info О приложении @@ -34,8 +34,8 @@ Установить приложение - - + + notifications @@ -44,7 +44,7 @@ - + logout Выйти diff --git a/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.scss b/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.scss index a25fff6..5ce2697 100644 --- a/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.scss +++ b/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.scss @@ -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); diff --git a/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.ts b/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.ts index 9649311..be5af75 100644 --- a/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.ts +++ b/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.ts @@ -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,17 +24,17 @@ 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() { } + aboutApp() {} ngOnInit(): void { this.isios = getTypeDevice() == DeviceType.ios; @@ -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(); + }; } - diff --git a/angular/src/app/presentation-options/default-option/components/social-media-buttons/social-media-buttons.component.scss b/angular/src/app/presentation-options/default-option/components/social-media-buttons/social-media-buttons.component.scss index 109b400..100fc51 100644 --- a/angular/src/app/presentation-options/default-option/components/social-media-buttons/social-media-buttons.component.scss +++ b/angular/src/app/presentation-options/default-option/components/social-media-buttons/social-media-buttons.component.scss @@ -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; diff --git a/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss b/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss index c4b9e03..be38e90 100644 --- a/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss +++ b/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss @@ -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, diff --git a/angular/src/app/presentation-options/default-option/pages/login/login.component.scss b/angular/src/app/presentation-options/default-option/pages/login/login.component.scss index a109a94..86198c8 100644 --- a/angular/src/app/presentation-options/default-option/pages/login/login.component.scss +++ b/angular/src/app/presentation-options/default-option/pages/login/login.component.scss @@ -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 { diff --git a/angular/src/styles.scss b/angular/src/styles.scss index f284643..b0a76ba 100644 --- a/angular/src/styles.scss +++ b/angular/src/styles.scss @@ -3,20 +3,53 @@ @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, + 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 : #ffffff, + 600 : #ffffff, + 700 : #ffffff, + 800 : #ffffff, + 900 : #ffffff, + A100 : #000000, + A200 : #000000, + A400 : #000000, + A700 : #000000, + ) +); + +$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, @@ -29,44 +62,12 @@ $primary: ( 800 : #ffffff, 900 : #ffffff, A100 : #000000, - A200 : #000000, + A200 : #ffffff, 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, - contrast: ( - 50 : #000000, - 100 : #000000, - 200 : #000000, - 300 : #000000, - 400 : #000000, - 500 : #000000, - 600 : #000000, - 700 : #000000, - 800 : #000000, - 900 : #000000, - A100 : #000000, - A200 : #000000, - A400 : #000000, - A700 : #000000, - ) -); $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; - - --button-color: #7F2061; - --button-color_disabled: #4a0d37; + --text-color: #ffffff; + --text-color_1: #8d8d8d; + + --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-button__label { +.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;