Simplify theme config (#398)

angular.json

@@ -35,8 +35,8 @@
                         "styles": [
                             "src/styles/core.scss",
                             {
-                                "input": "src/styles/themes/light.scss",
+                                "input": "src/styles/themes/main.scss",
-                                "bundleName": "themes/light",
+                                "bundleName": "themes/main",
                                 "lazy": true
                             },
                             {
@@ -117,8 +117,8 @@
                         "styles": [
                             "src/styles/core.scss",
                             {
-                                "input": "src/styles/themes/light.scss",
+                                "input": "src/styles/themes/main.scss",
-                                "bundleName": "themes/light",
+                                "bundleName": "themes/main",
                                 "lazy": true
                             },
                             {
@@ -142,8 +142,8 @@
                         "styles": [
                             "src/styles/core.scss",
                             {
-                                "input": "src/styles/themes/light.scss",
+                                "input": "src/styles/themes/main.scss",
-                                "bundleName": "themes/light",
+                                "bundleName": "themes/main",
                                 "lazy": true
                             },
                             {

icons-config.json

@@ -1,4 +1,4 @@
 {
-    "resultIconsDirPath": "src/app/icons/icons",
+    "resultIconsDirPath": "src/app/icons",
-    "sourceIconsDirPaths": ["src/assets/icons/default", "src/assets/icons/persian-green"]
+    "sourceIconsDirPaths": ["src/assets/icons"]
 }

src/app/home/actionbar/actionbar.component.ts

@@ -2,8 +2,6 @@ import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
 
 import { DropdownTriggerDirective } from '@dsh/components/layout';
 
-import { ThemeManager, ThemeName } from '../../theme-manager';
-
 @Component({
     selector: 'dsh-actionbar',
     templateUrl: 'actionbar.component.html',
@@ -12,14 +10,6 @@ import { ThemeManager, ThemeName } from '../../theme-manager';
 export class ActionbarComponent {
     @ViewChild(DropdownTriggerDirective, { static: true }) trigger: DropdownTriggerDirective;
 
-    constructor(private themeService: ThemeManager) {}
-
-    changeTheme() {
-        const themes: ThemeName[] = Object.values(ThemeName);
-        const nextThemeIdx = (themes.findIndex((name) => name === this.themeService.current) + 1) % themes.length;
-        this.themeService.change(themes[nextThemeIdx]);
-    }
-
     closeDropdown() {
         this.trigger.close();
     }

src/app/home/brand/brand-name.ts

@@ -0,0 +1,4 @@
+export enum BrandName {
+    rbkmoney = 'rbkmoney',
+    vrbcube = 'vrbcube',
+}

src/app/home/brand/brand.component.html

@@ -1,6 +1 @@
-<mat-icon
+<mat-icon [routerLink]="navigationLink" [svgIcon]="iconConfig?.name" [style.width]="iconConfig?.width"></mat-icon>
-    [routerLink]="navigationLink"
-    [svgIcon]="iconName"
-    [style.width]="size?.width"
-    [style.height]="size?.height"
-></mat-icon>

src/app/home/brand/brand.component.ts

@@ -2,7 +2,12 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 import { coerceBoolean } from '@dsh/utils';
 
-import { ConfigService } from '../../config';
+import { BrandName } from './brand-name';
+
+interface IconConfig {
+    name: string;
+    width: string;
+}
 
 @Component({
     selector: 'dsh-brand',
@@ -11,14 +16,24 @@ import { ConfigService } from '../../config';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BrandComponent {
-    @Input() @coerceBoolean inverted: boolean;
+    @Input() name: BrandName;
+    @Input() @coerceBoolean inverted = false;
     @Input() navigationLink = '/';
 
-    size: { width?: string; height?: string } = this.configService.theme.logo.size;
+    get iconConfig(): IconConfig | null {
-
+        switch (this.name) {
-    constructor(private configService: ConfigService) {}
+            case BrandName.vrbcube:
-
+                return {
-    get iconName(): string {
+                    name: 'logo_vrbcube_black',
-        return this.inverted ? 'logo_white' : 'logo';
+                    width: '147px',
+                };
+            case BrandName.rbkmoney:
+                return {
+                    name: this.inverted ? 'logo_rbkmoney_white' : 'logo_rbkmoney_black',
+                    width: '96px',
+                };
+            default:
+                return null;
+        }
     }
 }

src/app/home/brand/index.ts

@@ -1,2 +1,3 @@
 export * from './brand.module';
 export * from './brand.component';
+export * from './brand-name';

src/app/home/home.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="routerNavigationEnd$ | async">
-    <dsh-welcome-image *ngIf="hasBackground" [imageUrls]="imageUrls"></dsh-welcome-image>
+    <dsh-welcome-image *ngIf="hasBackground"></dsh-welcome-image>
     <ng-container *ngTemplateOutlet="(isMobileScreen$ | async) ? mobile : laptop"> </ng-container>
 </div>
 
@@ -8,13 +8,13 @@
 </ng-template>
 
 <ng-template #mobile>
-    <dsh-mobile-grid [inverted]="hasBackground">
+    <dsh-mobile-grid [inverted]="hasBackground" [logoName]="logoName">
         <ng-container *ngTemplateOutlet="content"></ng-container>
     </dsh-mobile-grid>
 </ng-template>
 
 <ng-template #laptop>
-    <dsh-laptop-grid [inverted]="hasBackground">
+    <dsh-laptop-grid [inverted]="hasBackground" [logoName]="logoName">
         <ng-container *ngTemplateOutlet="content"></ng-container>
     </dsh-laptop-grid>
 </ng-template>

src/app/home/home.component.ts

@@ -4,7 +4,6 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Observable } from 'rxjs';
 import { filter, map, take } from 'rxjs/operators';
 
-import { ConfigService } from '../config';
 import { ThemeManager } from '../theme-manager';
 import { ROOT_ROUTE_PATH } from './navigation/consts';
 import { ScreenSize } from './services/screen-size-control/interfaces/screen-size';
@@ -23,17 +22,16 @@ export class HomeComponent implements OnInit {
     constructor(
         private screenSizeController: ScreenSizeControlService,
         private router: Router,
-        private configService: ConfigService,
         // need to create class when home component was init
         private themeManager: ThemeManager
     ) {}
 
-    get imageUrls() {
+    get hasBackground(): boolean {
-        return this.configService.theme.backgroundImageUrls;
+        return this.router.url === ROOT_ROUTE_PATH && this.themeManager.isMainBackgroundImages;
     }
 
-    get hasBackground() {
+    get logoName(): string {
-        return this.router.url === ROOT_ROUTE_PATH && this.themeManager.hasMainBackground;
+        return this.themeManager.logoName;
     }
 
     ngOnInit(): void {

src/app/home/laptop-grid/laptop-grid.component.html

@@ -1,4 +1,4 @@
 <div class="laptop-grid">
-    <dsh-toolbar [inverted]="inverted"></dsh-toolbar>
+    <dsh-toolbar [inverted]="inverted" [logoName]="logoName"></dsh-toolbar>
     <ng-content></ng-content>
 </div>

src/app/home/laptop-grid/laptop-grid.component.ts

@@ -11,4 +11,6 @@ export class LaptopGridComponent {
     @Input()
     @coerceBoolean
     inverted: boolean;
+
+    @Input() logoName: string;
 }

src/app/home/mobile-grid/mobile-grid.component.html

@@ -15,7 +15,7 @@
     <mat-drawer-content class="mobile-grid-content">
         <div class="mobile-grid-content-actions" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="20px">
             <mat-icon class="mobile-grid-toggle-button" (click)="openSideNav()" [svgIcon]="menuIcon"></mat-icon>
-            <dsh-brand fxFlex="168px" [inverted]="inverted" class="dsh-side-section"></dsh-brand>
+            <dsh-brand fxFlex="168px" [inverted]="inverted" [name]="logoName" class="dsh-side-section"></dsh-brand>
         </div>
         <ng-content></ng-content>
     </mat-drawer-content>

src/app/home/mobile-grid/mobile-grid.component.ts

@@ -26,6 +26,8 @@ export class MobileGridComponent implements OnInit {
     @coerceBoolean
     inverted: boolean;
 
+    @Input() logoName: string;
+
     @ViewChild(MatDrawer) drawer: MatDrawer;
 
     menu$: Observable<NavigationFlatNode[]>;

src/app/home/toolbar/toolbar.component.html

@@ -1,5 +1,5 @@
 <div class="toolbar" fxLayout fxLayoutGap="24px" fxLayoutAlign="start center">
-    <dsh-brand fxFlex="168px" [inverted]="inverted" class="dsh-side-section"></dsh-brand>
+    <dsh-brand fxFlex="168px" [inverted]="inverted" [name]="logoName" class="dsh-side-section"></dsh-brand>
     <nav *transloco="let t; scope: 'toolbar'; read: 'toolbar.nav'" dsh-tab-nav-bar type="main" [inverted]="inverted">
         <ng-container *ngFor="let link of links$ | async">
             <a dsh-tab-link *ngIf="!link.hidden" [routerLink]="link.path" [active]="(active$ | async) === link">

src/app/home/toolbar/toolbar.component.ts

@@ -13,6 +13,7 @@ import { ToolbarLinksService } from './toolbar-links.service';
 })
 export class ToolbarComponent {
     @Input() @coerceBoolean inverted: boolean;
+    @Input() logoName: string;
 
     links$ = this.toolbarLinksService.links$;
     active$ = this.toolbarLinksService.active$;

src/app/home/welcome-image/welcome-image.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import random from 'lodash-es/random';
 
 @Component({
@@ -8,7 +8,13 @@ import random from 'lodash-es/random';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class WelcomeImageComponent {
-    @Input() imageUrls: string[];
+    imageUrls = [
+        'assets/background/1.png',
+        'assets/background/2.png',
+        'assets/background/3.png',
+        'assets/background/4.png',
+        'assets/background/5.png',
+    ];
 
     get imageUrl() {
         const idx = random(0, this.imageUrls.length - 1);

src/app/icons/icons.json

@@ -7,6 +7,7 @@
     "arrow_front",
     "attach",
     "bill",
+    "bill_persian_green",
     "brightness_4",
     "brightness_5",
     "build",
@@ -22,14 +23,17 @@
     "keyboard_arrow_down",
     "keyboard_arrow_up",
     "launch",
+    "logo_rbkmoney_black",
+    "logo_rbkmoney_white",
+    "logo_vrbcube_black",
     "mastercard",
+    "menu",
+    "menu_inverted",
+    "menu_notify",
     "mir",
     "mode_comment",
     "more_horiz",
     "more_vert",
-    "menu",
-    "menu_inverted",
-    "menu_notify",
     "notification",
     "output",
     "patrick",
@@ -52,5 +56,6 @@
     "visibility",
     "wallet",
     "wallet_menu",
+    "wallet_persian_green",
     "yandex_pay"
 ]

src/app/icons/icons.service.ts

@@ -2,50 +2,23 @@ import { Injectable } from '@angular/core';
 import { MatIconRegistry } from '@angular/material/icon';
 import { IconOptions } from '@angular/material/icon/icon-registry';
 import { DomSanitizer } from '@angular/platform-browser';
-import difference from 'lodash-es/difference';
 
-import { ConfigService } from '../config';
+import icons from './icons.json';
-import { ThemeManager, ThemeName } from '../theme-manager';
-import icons from './icons/default.json';
-import persianGreenIcons from './icons/persian-green.json';
-import { Logo } from './types/logo';
 
 const ICONS_ROOT_DIR = 'assets/icons';
 
-const DEFAULT_ICONS_DIR = 'default';
-const DEFAULT_ICONS = icons;
-
-const THEME_ICONS: { [N in ThemeName]?: string[] } = {
-    [ThemeName.persianGreen]: persianGreenIcons,
-};
-
 @Injectable()
 export class IconsService {
-    constructor(
+    constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) {}
-        private matIconRegistry: MatIconRegistry,
-        private domSanitizer: DomSanitizer,
-        private themeManager: ThemeManager,
-        private configService: ConfigService
-    ) {}
 
     async init() {
-        const themeIcons = THEME_ICONS[this.themeManager.current] || [];
+        this.addIcons(icons);
-        const baseIcons = difference(DEFAULT_ICONS, themeIcons);
-        this.addIconsByDir(baseIcons, DEFAULT_ICONS_DIR);
-        this.addIconsByDir(themeIcons, this.themeManager.current);
-        this.addBrandIcons();
         this.matIconRegistry.setDefaultFontSetClass('material-icons-outlined');
     }
 
-    private addIconsByDir(iconNames: string[], dir: string) {
+    private addIcons(iconNames: string[]) {
         for (const name of iconNames) {
-            this.addIcon(name, `${ICONS_ROOT_DIR}/${dir}/${name}.svg`);
+            this.addIcon(name, `${ICONS_ROOT_DIR}/${name}.svg`);
-        }
-    }
-
-    private addBrandIcons() {
-        for (const [type, path] of Object.entries(this.configService.theme.logo.icons)) {
-            this.addIcon(Logo[type], path);
         }
     }
 

src/app/icons/icons/persian-green.json

@@ -1 +0,0 @@
-["bill", "wallet"]

src/app/icons/types/logo.ts

@@ -1,4 +0,0 @@
-export enum Logo {
-    default = 'logo',
-    white = 'logo_white',
-}

src/app/sections/main/main.component.html

@@ -12,6 +12,11 @@
     </div>
 </div>
 <div fxLayout fxLayout.lt-md="column" fxLayoutGap="32px">
-    <dsh-payments fxFlex="50" fxFlex.lt-md="100"></dsh-payments>
+    <dsh-payments fxFlex="50" fxFlex.lt-md="100" [currentThemeName]="currentThemeName"></dsh-payments>
-    <dsh-wallets fxFlex="50" fxFlex.lt-md="100" *ngIf="hasWallets$ | async"></dsh-wallets>
+    <dsh-wallets
+        fxFlex="50"
+        fxFlex.lt-md="100"
+        *ngIf="hasWallets$ | async"
+        [currentThemeName]="currentThemeName"
+    ></dsh-wallets>
 </div>

src/app/sections/main/main.component.ts

@@ -14,7 +14,8 @@ export class MainComponent {
     docsEndpoint = this.configService.ext.docsEndpoint;
     supportMailto = `mailto:${this.configService.ext.supportEmail}`;
     hasWallets$ = this.walletsService.hasWallets$;
-    inverted = this.themeManager.hasMainBackground;
+    inverted = this.themeManager.isMainBackgroundImages;
+    currentThemeName = this.themeManager.current;
 
     constructor(
         private configService: ConfigService,

src/app/sections/main/parts/payments/payments.component.html

@@ -5,7 +5,7 @@
     fxLayoutGap="32px"
 >
     <div fxLayout fxLayoutGap="32px">
-        <mat-icon fxHide.xs="true" fxFlex="180px" class="bill-icon" svgIcon="bill"></mat-icon>
+        <mat-icon fxHide.xs="true" fxFlex="180px" class="bill-icon" [svgIcon]="iconName"></mat-icon>
         <div fxLayout="column" fxLayoutGap="24px">
             <div fxLayout fxLayoutAlign="space-between">
                 <h2 class="dsh-display-1">{{ t('title') }}</h2>

src/app/sections/main/parts/payments/payments.component.ts

@@ -1,7 +1,8 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 import { SpinnerType } from '@dsh/components/indicators';
 
+import { ThemeName } from '../../../../theme-manager';
 import { PaymentsService } from './payments.service';
 
 @Component({
@@ -12,6 +13,7 @@ import { PaymentsService } from './payments.service';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PaymentsComponent {
+    @Input() currentThemeName: ThemeName;
     spinnerType = SpinnerType.FulfillingBouncingCircle;
     isLoading$ = this.paymentsService.isLoading$;
     actionBtnContent$ = this.paymentsService.actionBtnContent$;
@@ -22,4 +24,15 @@ export class PaymentsComponent {
     log = console.log;
 
     constructor(private paymentsService: PaymentsService) {}
+
+    get iconName(): string {
+        switch (this.currentThemeName) {
+            case ThemeName.main:
+                return 'bill';
+            case ThemeName.persianGreen:
+                return 'bill_persian_green';
+            default:
+                return '';
+        }
+    }
 }

src/app/sections/main/parts/wallets/wallets.component.html

@@ -11,7 +11,7 @@
                 {{ t('subheading') }}
             </h4>
         </div>
-        <mat-icon fxHide.xs="true" fxFlex="138px" class="wallet-icon" svgIcon="wallet"></mat-icon>
+        <mat-icon fxHide.xs="true" fxFlex="138px" class="wallet-icon" [svgIcon]="iconName"></mat-icon>
     </div>
     <div fxLayout>
         <button fxFlex="50" fxFlex.xs="100" dsh-button color="accent" size="lg" routerLink="wallet-section">

src/app/sections/main/parts/wallets/wallets.component.ts

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+import { ThemeName } from '../../../../theme-manager';
 
 @Component({
     selector: 'dsh-wallets',
@@ -6,4 +8,17 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
     styleUrls: ['wallets.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class WalletsComponent {}
+export class WalletsComponent {
+    @Input() currentThemeName: ThemeName;
+
+    get iconName(): string {
+        switch (this.currentThemeName) {
+            case ThemeName.main:
+                return 'wallet';
+            case ThemeName.persianGreen:
+                return 'wallet_persian_green';
+            default:
+                return '';
+        }
+    }
+}

src/app/sections/sections.module.ts

@@ -1,10 +1,8 @@
-import { inject, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 
 import { ShopModule } from '@dsh/api/shop';
 import { WalletModule } from '@dsh/api/wallet';
-import { SPINNER_THEME } from '@dsh/components/indicators';
 
-import { ConfigService } from '../config';
 import { MainModule } from './main';
 import { DEBOUNCE_FETCHER_ACTION_TIME, DEFAULT_FETCHER_DEBOUNCE_ACTION_TIME } from './partial-fetcher';
 import { CHARTS_THEME } from './payment-section/analytics/charts-theme';
@@ -29,7 +27,6 @@ import {
         { provide: DIALOG_CONFIG, useValue: DEFAULT_DIALOG_CONFIG },
         { provide: DEBOUNCE_FETCHER_ACTION_TIME, useValue: DEFAULT_FETCHER_DEBOUNCE_ACTION_TIME },
         { provide: CHARTS_THEME, useValue: DEFAULT_CHARTS_THEME },
-        { provide: SPINNER_THEME, useFactory: () => inject(ConfigService).theme.components.spinner },
     ],
 })
 export class SectionsModule {}

src/app/theme-manager/theme-manager.service.ts

@@ -15,7 +15,8 @@ export class ThemeManager {
     private static readonly KEY = 'theme';
 
     current: ThemeName;
-    hasMainBackground: boolean;
+    isMainBackgroundImages = false;
+    logoName: string;
 
     private element: HTMLScriptElement | HTMLLinkElement;
 
@@ -31,20 +32,16 @@ export class ThemeManager {
     }
 
     async init() {
-        this.hasMainBackground = !!this.configService.theme.backgroundImageUrls?.length;
+        const theme = this.configService?.theme;
-
+        this.isMainBackgroundImages = theme?.isMainBackgroundImages;
+        this.logoName = theme?.logoName;
         const name = this.settingsService.getLocalStorageItem(ThemeManager.KEY);
         const correctedName = this.getCorrectName(name);
         this.change(correctedName);
     }
 
     private getCorrectName(theme: string): ThemeName {
-        // TODO: For several themes you will need to add a list of allowed theme to the config
+        return isTheme(theme) ? theme : ThemeName.main;
-        const allowedThemes: ThemeName[] = [this.configService.theme.default as ThemeName];
-        if (isTheme(theme) && allowedThemes.includes(theme)) {
-            return theme;
-        }
-        return (this.configService.theme.default as ThemeName) || ThemeName.light;
     }
 
     private set(name: ThemeName) {

src/app/theme-manager/types/theme-name.ts

@@ -1,4 +1,4 @@
 export enum ThemeName {
-    light = 'light',
+    main = 'main',
     persianGreen = 'persian-green',
 }

src/appConfig.json

@@ -15,25 +15,8 @@
         "webvisor": true
     },
     "theme": {
-        "default": "light",
+        "name": "light",
-        "backgroundImageUrls": [
+        "isMainBackgroundImages": true,
-            "assets/background/1.png",
+        "logoName": "rbkmoney"
-            "assets/background/2.png",
-            "assets/background/3.png",
-            "assets/background/4.png",
-            "assets/background/5.png"
-        ],
-        "logo": {
-            "icons": {
-                "default": "assets/logo/rbkmoney/default.svg",
-                "white": "assets/logo/rbkmoney/white.svg"
-            },
-            "size": {
-                "width": "96px"
-            }
-        },
-        "components": {
-            "spinner": { "color": "#695BFF" }
-        }
     }
 }

src/assets/icons/apple_pay.svg

@@ -1,6 +1,6 @@
 <svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <title>Apple Pay</title>
-    <g clip-path="url(#ID-0__919a736e-2c27-4393-a9aa-46a6abb65c17)">
+    <g clip-path="url(#ID-0__2f28b04d-2215-431e-8da6-fafaed16cd36)">
         <path
             d="M22.7584 0.333496L23.0124 0.333829C23.0821 0.334163 23.1518 0.335163 23.2217 0.336829C23.3487 0.340162 23.4981 0.347162 23.6417 0.373161C23.7747 0.39716 23.8874 0.434159 23.9964 0.48949C24.2168 0.601244 24.3958 0.780357 24.5074 1.0008C24.5627 1.10946 24.5994 1.22213 24.6234 1.35545C24.649 1.49778 24.6564 1.64744 24.6594 1.7751C24.6614 1.84443 24.6624 1.9141 24.6627 1.98443C24.6634 2.06876 24.6634 2.15375 24.6634 2.23842V13.7619C24.6634 13.8466 24.6634 13.9313 24.6627 14.0169C24.6624 14.0864 24.6613 14.1558 24.6594 14.2252C24.656 14.3529 24.649 14.5026 24.6234 14.6459C24.6026 14.7689 24.5635 14.8881 24.5074 14.9996C24.3951 15.2198 24.216 15.3989 23.9957 15.5112C23.8842 15.5675 23.7649 15.6067 23.6417 15.6275C23.5031 15.6497 23.3631 15.6618 23.2228 15.6635C23.1528 15.6652 23.0828 15.6662 23.0118 15.6662C22.9274 15.6669 22.8424 15.6669 22.7581 15.6669H2.23896C2.15529 15.6669 2.07163 15.6669 1.98697 15.6662C1.91697 15.6662 1.84697 15.6652 1.77864 15.6635C1.63796 15.6617 1.4976 15.6497 1.35866 15.6275C1.2351 15.6069 1.1154 15.5675 1.00368 15.5109C0.894149 15.4554 0.794221 15.3827 0.707687 15.2955C0.620885 15.2089 0.548427 15.109 0.49303 14.9996C0.436661 14.8878 0.397445 14.7683 0.376701 14.6449C0.354035 14.5061 0.34189 14.3658 0.340369 14.2252C0.338705 14.1557 0.337705 14.0862 0.337369 14.0166L0.337036 13.8133V2.18742L0.337369 1.98443C0.337703 1.91476 0.338703 1.8451 0.340369 1.7751C0.343703 1.64811 0.350702 1.49878 0.376701 1.35479C0.397293 1.23147 0.436518 1.112 0.49303 1.00047C0.604868 0.780271 0.783811 0.601328 1.00401 0.48949C1.11559 0.433188 1.23505 0.394081 1.35833 0.373494C1.49732 0.350842 1.63782 0.338697 1.77864 0.337163C1.84831 0.335496 1.91797 0.334496 1.9873 0.334163L2.24196 0.333496H22.7584Z"
             fill="white"
@@ -15,7 +15,7 @@
         />
     </g>
     <defs>
-        <clipPath id="ID-0__919a736e-2c27-4393-a9aa-46a6abb65c17">
+        <clipPath id="ID-0__2f28b04d-2215-431e-8da6-fafaed16cd36">
             <rect width="25" height="16" fill="white" />
         </clipPath>
     </defs>

src/assets/icons/bill.svg

@@ -3,7 +3,7 @@
         fill-rule="evenodd"
         clip-rule="evenodd"
         d="M66.3611 114.503V37.5108L60.831 32.8572L55.3009 37.5108L49.7708 32.8572L44.2407 37.5108L38.7106 32.8572L33.1805 37.5108L27.6504 32.8572L22.1204 37.5108L16.5903 32.8572L11.0602 37.5108L5.53009 32.8572L0 37.5108V114.934C0 119.507 3.5779 123.214 7.99146 123.214H72.8182C69.238 123.132 66.3611 119.256 66.3611 114.503Z"
-        fill="url(#ID-0__6dd8b8ee-5a5e-46f2-a751-142910d92ab4)"
+        fill="url(#ID-0__98b2a4a0-3e04-43f7-84a5-1a1f034d7a76)"
     />
     <rect
         x="60.4138"
@@ -17,13 +17,13 @@
         fill-rule="evenodd"
         clip-rule="evenodd"
         d="M43.9741 123.269H52.9665V61.7424H35.8683V112.884C35.8683 118.62 39.4906 123.269 43.9741 123.269Z"
-        fill="url(#ID-1__6315ee06-b55d-422d-8e5c-3265a42c6d97)"
+        fill="url(#ID-1__7daac809-93da-4be0-bfcd-11d3006e1a41)"
     />
     <path
         fill-rule="evenodd"
         clip-rule="evenodd"
         d="M33.4154 112.884C33.4154 118.62 29.7931 123.269 25.3096 123.269L98.4616 123.181L102.164 6.10352e-05L43.725 0.215813C38.0256 0.215813 33.4154 6.12843 33.4154 13.4308V112.884Z"
-        fill="url(#ID-2__ff8b800b-2e53-4fc9-a0dc-0ac6d2d11e54)"
+        fill="url(#ID-2__b55212a5-2176-44e0-bf09-0390ace34ea1)"
     />
     <path
         fill-rule="evenodd"
@@ -96,7 +96,7 @@
     />
     <defs>
         <linearGradient
-            id="ID-0__6dd8b8ee-5a5e-46f2-a751-142910d92ab4"
+            id="ID-0__98b2a4a0-3e04-43f7-84a5-1a1f034d7a76"
             x1="0"
             y1="106.601"
             x2="46.0708"
@@ -107,7 +107,7 @@
             <stop offset="1" stop-color="#5810A6" />
         </linearGradient>
         <linearGradient
-            id="ID-1__6315ee06-b55d-422d-8e5c-3265a42c6d97"
+            id="ID-1__7daac809-93da-4be0-bfcd-11d3006e1a41"
             x1="34.1204"
             y1="126.062"
             x2="52.7638"
@@ -118,7 +118,7 @@
             <stop offset="1" stop-color="#5810A6" />
         </linearGradient>
         <linearGradient
-            id="ID-2__ff8b800b-2e53-4fc9-a0dc-0ac6d2d11e54"
+            id="ID-2__b55212a5-2176-44e0-bf09-0390ace34ea1"
             x1="25.3096"
             y1="162.833"
             x2="74.0748"

src/assets/icons/bill_persian_green.svg

@@ -3,7 +3,7 @@
         fill-rule="evenodd"
         clip-rule="evenodd"
         d="M66.3611 114.503V37.5108L60.831 32.8571L55.3009 37.5108L49.7708 32.8571L44.2407 37.5108L38.7106 32.8571L33.1805 37.5108L27.6504 32.8571L22.1204 37.5108L16.5903 32.8571L11.0602 37.5108L5.53009 32.8571L0 37.5108V114.934C0 119.507 3.5779 123.214 7.99146 123.214H72.8182C69.238 123.131 66.3611 119.256 66.3611 114.503Z"
-        fill="url(#ID-0__f2140cfd-7205-4e2a-99af-0cd30ef13d95)"
+        fill="url(#ID-0__96f7ccc9-dc9f-4dd0-93e3-b66adc38681e)"
     />
     <rect
         x="60.4137"
@@ -17,13 +17,13 @@
         fill-rule="evenodd"
         clip-rule="evenodd"
         d="M43.9742 123.269H52.9666V61.7424H35.8683V112.884C35.8683 118.62 39.4906 123.269 43.9742 123.269Z"
-        fill="url(#ID-1__d386eaac-9a47-4db7-ac75-c40ee251b28b)"
+        fill="url(#ID-1__28abb2d9-737c-4f9b-9f18-0d0f774ed437)"
     />
     <path
         fill-rule="evenodd"
         clip-rule="evenodd"
         d="M33.4153 112.884C33.4153 118.62 29.793 123.269 25.3095 123.269L98.4615 123.181L102.164 3.8147e-06L43.7249 0.215755C38.0255 0.215755 33.4153 6.12837 33.4153 13.4307V112.884Z"
-        fill="url(#ID-2__a1c1b2f7-5e3e-428f-a0e0-9664ad9c5310)"
+        fill="url(#ID-2__3ad19422-8ebc-4e8a-b7ee-0d4ac1fabebd)"
     />
     <path
         fill-rule="evenodd"
@@ -96,7 +96,7 @@
     />
     <defs>
         <linearGradient
-            id="ID-0__f2140cfd-7205-4e2a-99af-0cd30ef13d95"
+            id="ID-0__96f7ccc9-dc9f-4dd0-93e3-b66adc38681e"
             x1="0"
             y1="106.601"
             x2="46.0708"
@@ -107,7 +107,7 @@
             <stop offset="1" stop-color="#13448B" />
         </linearGradient>
         <linearGradient
-            id="ID-1__d386eaac-9a47-4db7-ac75-c40ee251b28b"
+            id="ID-1__28abb2d9-737c-4f9b-9f18-0d0f774ed437"
             x1="34.1205"
             y1="126.062"
             x2="52.7639"
@@ -118,7 +118,7 @@
             <stop offset="1" stop-color="#003A8E" />
         </linearGradient>
         <linearGradient
-            id="ID-2__a1c1b2f7-5e3e-428f-a0e0-9664ad9c5310"
+            id="ID-2__3ad19422-8ebc-4e8a-b7ee-0d4ac1fabebd"
             x1="25.3095"
             y1="162.833"
             x2="74.0748"

src/assets/icons/logo_vrbcube_black.svg

@@ -19,15 +19,15 @@
     />
     <path
         d="M14.3163 34.6567L24.4671 6.125H20.9487L12.2942 30.979L3.5993 6.125H0L10.2317 34.6567H14.3163Z"
-        fill="url(#ID-0__5dce6ee6-83cc-4f65-a9e5-b41c6de779f8)"
+        fill="url(#ID-0__c78d993c-db3a-4b97-8bef-746826276e75)"
     />
     <path
         d="M38.6602 23.0176L47.7596 34.5758H43.594L34.7374 23.0581H31.9065V34.5758H28.5498V6.24622H37.5683C38.9164 6.24622 40.17 6.40787 41.3294 6.73118C42.5156 7.02754 43.5401 7.52596 44.4029 8.22645C45.2656 8.90004 45.9396 9.77565 46.425 10.8533C46.9372 11.931 47.2068 13.2242 47.2338 14.733C47.2338 16.1339 47.0181 17.3463 46.5867 18.3702C46.1553 19.3939 45.5487 20.2426 44.7669 20.9162C43.985 21.5628 43.0683 22.0612 42.0168 22.4114C40.9923 22.7617 39.8734 22.9637 38.6602 23.0176ZM31.9065 20.1888H37.6087C39.55 20.1888 41.0732 19.7711 42.1786 18.9359C43.311 18.0738 43.8772 16.6728 43.8772 14.733C43.8772 12.7662 43.284 11.3787 42.0977 10.5704C40.9384 9.73523 39.4421 9.31759 37.6087 9.31759H31.9065V20.1888Z"
-        fill="url(#ID-1__3b32c05d-aa16-49cf-82b9-6a30b85cec36)"
+        fill="url(#ID-1__c3d7a482-d2f0-40f5-86e3-4a59b61b6b47)"
     />
     <defs>
         <linearGradient
-            id="ID-0__5dce6ee6-83cc-4f65-a9e5-b41c6de779f8"
+            id="ID-0__c78d993c-db3a-4b97-8bef-746826276e75"
             x1="-0.485442"
             y1="18.4734"
             x2="46.6962"
@@ -38,7 +38,7 @@
             <stop offset="1" stop-color="#00A39B" />
         </linearGradient>
         <linearGradient
-            id="ID-1__3b32c05d-aa16-49cf-82b9-6a30b85cec36"
+            id="ID-1__c3d7a482-d2f0-40f5-86e3-4a59b61b6b47"
             x1="-0.485396"
             y1="18.4734"
             x2="46.6963"

src/assets/icons/mir.svg

@@ -12,22 +12,22 @@
     width="49px"
     y="0px"
     x="0px"
-    id="ID-0__9f584532-397d-4c50-9305-120ee1fe1a10"
+    id="ID-0__f1ec11ba-799a-4bb2-a06c-49adebe144ff"
     version="1.1"
 >
-    <metadata id="ID-1__9339621c-cd8d-4fe3-8c87-2933e4ea6e25">
+    <metadata id="ID-1__087f6683-fd69-4b04-9b56-7f5267f13b5d">
         <rdf:RDF
             ><cc:Work rdf:about=""
                 ><dc:format>image/svg+xml</dc:format
                 ><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work
         ></rdf:RDF>
     </metadata>
-    <defs id="ID-2__14dfcf12-83ea-411e-a0e6-6d5eccfbe56e" />
+    <defs id="ID-2__394c4ab1-c3ae-4de8-acfd-0666178c7e25" />
-    <style id="ID-3__620b915a-c881-4832-8c13-a20aa3a03c4f" type="text/css">
+    <style id="ID-3__2276ba26-2220-4b5b-a841-c0af3bfd497e" type="text/css">
         .st0 {
             fill-rule: evenodd;
             clip-rule: evenodd;
-            fill: url(#ID-4__667d0bfc-73bc-4916-a43e-c241d998ec3c);
+            fill: url(#ID-4__66d715b4-ea7c-48a8-adb1-a061d9a64033);
         }
         .st1 {
             fill-rule: evenodd;
@@ -42,29 +42,29 @@
         y1="3"
         x1="34.1742"
         gradientUnits="userSpaceOnUse"
-        id="ID-4__667d0bfc-73bc-4916-a43e-c241d998ec3c"
+        id="ID-4__66d715b4-ea7c-48a8-adb1-a061d9a64033"
     >
-        <stop id="ID-5__1b28d9f0-a523-4f1e-8264-fbb6fa4f6f8d" style="stop-color: #00b4e6" offset="0" />
+        <stop id="ID-5__d50901a0-3c50-4b89-b51c-be3738f36f3f" style="stop-color: #00b4e6" offset="0" />
-        <stop id="ID-6__05f76168-5374-4f32-a2af-3b0d38a2345f" style="stop-color: #088ccb" offset="1" />
+        <stop id="ID-6__53706c32-839c-4585-b66a-9797a8772b83" style="stop-color: #088ccb" offset="1" />
     </linearGradient>
     <path
-        id="ID-7__fc5ad9b2-4c64-4f80-83d5-aac9ba74cffe"
+        id="ID-7__bf0f6760-9caa-4e74-89ca-e27e704377f0"
         d="M43.5,0h-9.3c0.5,3.1,3.5,6,6.8,6h7.4c0.1-0.3,0.1-0.7,0.1-1C48.5,2.2,46.3,0,43.5,0z"
         class="st0"
     />
     <path
         style="clip-rule: evenodd; fill: #4db45f; fill-rule: evenodd"
-        id="ID-8__f83424ba-2ceb-45ac-8ca3-80685db0d82f"
+        id="ID-8__85399873-581b-4927-a21a-17da15f7148a"
         d="m 35,6.5 0,7.5 4.5,0 0,-4 4,0 c 2.2,0 4.1,-1.5 4.7,-3.5 z"
         class="st1"
     />
     <path
-        id="ID-9__394178d5-bd58-4efe-8dc5-d5d8303aed5e"
+        id="ID-9__3d165612-3e55-4742-933b-89831d5d0f44"
         d="M19,0v14h4c0,0,1,0,1.5-1C27.2,7.6,28,6,28,6h0.5v8H33V0h-4c0,0-1,0.1-1.5,1C25.2,5.6,24,8,24,8h-0.5V0H19z"
         class="st1"
     />
     <path
-        id="ID-10__d5e34fa5-ebc4-4c4c-83c9-9fdf8dd0091f"
+        id="ID-10__45955435-e8e7-4f6a-8348-cc0f0dd64692"
         d="M0,14V0h4.5c0,0,1.3,0,2,2c1.8,5.3,2,6,2,6s0.4-1.3,2-6c0.7-2,2-2,2-2H17v14h-4.5V6.5H12L9.5,14h-2L5,6.5H4.5  V14H0z"
         class="st1"
     />

src/assets/icons/patrick.svg

@@ -1,5 +1,5 @@
 <svg width="132" height="147" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#ID-0__10aa442c-441c-482a-9c01-d72587bf4a60)">
+    <g clip-path="url(#ID-0__db755201-4d53-411a-8918-687b3388b70f)">
         <path
             d="M20.521 46.558l2.563 3.543 8.95-13.698 18.294 8.33 19.436 3.196 20.593-3.387 9.675-5.465 5.19 2.788 7.05-4.602.351-3.287-2.326-1-12.02-3.705-2.055-.418-2.217-8.68-4.4-9.196-5.98-4.577-6.506-3.53-7.98-1.945-4.207 1.315-8.592 5.304-9.793 7.091-.852 13.922-21.165 3.699-5.672 5.023 1.663 9.279z"
             fill="#8330EC"
@@ -86,7 +86,7 @@
         />
     </g>
     <defs>
-        <clipPath id="ID-0__10aa442c-441c-482a-9c01-d72587bf4a60">
+        <clipPath id="ID-0__db755201-4d53-411a-8918-687b3388b70f">
             <path fill="#fff" d="M0 0h132v147H0z" />
         </clipPath>
     </defs>

src/assets/icons/pin_drop.svg

@@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#ID-0__88bb6a7d-e9c0-4700-a35e-2f2ca9b00d7d)">
+    <g clip-path="url(#ID-0__8ee66563-8a18-4327-9b0c-6ce4b5dc5fea)">
         <path
             d="M14.048 18.0238L5.55499 10.8854C5.47143 10.8152 5.48418 10.683 5.57963 10.63C7.71554 9.44469 10.3613 9.69989 12.2313 11.2716L12.5191 11.5135C14.389 13.0852 15.0956 15.6477 14.2953 17.9556C14.2596 18.0588 14.1315 18.0941 14.048 18.0238Z"
             stroke="#475166"
@@ -21,7 +21,7 @@
         />
     </g>
     <defs>
-        <clipPath id="ID-0__88bb6a7d-e9c0-4700-a35e-2f2ca9b00d7d">
+        <clipPath id="ID-0__8ee66563-8a18-4327-9b0c-6ce4b5dc5fea">
             <rect width="24" height="24" fill="white" />
         </clipPath>
     </defs>

src/assets/icons/samsung_pay.svg

@@ -2,7 +2,7 @@
 <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg
     version="1.1"
-    id="ID-0__15babfd9-f016-436a-b325-b9869db44259"
+    id="ID-0__3054a94a-bd2d-4c7c-8238-b98529b57c8a"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px"
@@ -18,7 +18,7 @@
     </style>
     <title>Samsung Pay</title>
     <path
-        id="ID-1__f55d3ddf-0ba7-49a1-a233-830849469af1"
+        id="ID-1__87d34e4b-12e9-43e8-b22d-a9dabcc71a7d"
         class="st0"
         d="M385.3,1.2V5c-3.9-3.2-8.8-5-13.9-5c-12.6,0-22.9,11-22.9,24.5s10.2,24.5,22.9,24.5
 	c5.1,0,10-1.8,13.9-5v4.2h10.5V1.2H385.3z M372.6,39.8c-7.6,0-13.8-6.8-13.8-15.3S365,9.3,372.6,9.3s13.8,6.8,13.8,15.3

src/assets/icons/visa.svg

@@ -1,6 +1,6 @@
 <svg width="30" height="10" viewBox="0 0 30 10" fill="none" xmlns="http://www.w3.org/2000/svg">
     <title>VISA</title>
-    <g clip-path="url(#ID-0__a12fca45-2f9b-44cf-aa05-e88a84d75d64)">
+    <g clip-path="url(#ID-0__23da536f-6c4e-48d1-b758-6e57c80c2294)">
         <path d="M13 9.85556H10.5698L12.0899 0.175293H14.5199L13 9.85556Z" fill="#00579F" />
         <path
             d="M21.8097 0.412127C21.3304 0.216261 20.5701 0 19.63 0C17.2301 0 15.5401 1.31809 15.5298 3.20257C15.5098 4.59294 16.7397 5.36518 17.6596 5.82877C18.5999 6.30249 18.9195 6.61169 18.9195 7.03395C18.9099 7.68245 18.1597 7.98139 17.46 7.98139C16.4898 7.98139 15.9699 7.82727 15.1799 7.46647L14.8598 7.3118L14.5198 9.48481C15.0898 9.75226 16.1399 9.9896 17.2301 10C19.7801 10 21.4402 8.7023 21.4598 6.69409C21.4695 5.59212 20.8201 4.74774 19.4199 4.05776C18.57 3.61484 18.0494 3.31618 18.0494 2.86299C18.0594 2.451 18.4897 2.02902 19.4492 2.02902C20.2392 2.00835 20.8197 2.20394 21.2594 2.39967L21.4792 2.50246L21.8097 0.412127Z"
@@ -20,7 +20,7 @@
         />
     </g>
     <defs>
-        <clipPath id="ID-0__a12fca45-2f9b-44cf-aa05-e88a84d75d64">
+        <clipPath id="ID-0__23da536f-6c4e-48d1-b758-6e57c80c2294">
             <rect width="30" height="10" fill="white" />
         </clipPath>
     </defs>

src/assets/icons/wallet.svg

@@ -6,11 +6,11 @@
     />
     <path
         d="M0 33.7555C0 30.9968 2.23634 28.7605 4.995 28.7605H133.005C135.764 28.7605 138 30.9968 138 33.7555V48.9688C138 51.7275 135.764 53.9638 133.005 53.9638H4.995C2.23634 53.9638 0 51.7275 0 48.9688V33.7555Z"
-        fill="url(#ID-0__ede09693-ced0-4eb2-a130-597704776c9d)"
+        fill="url(#ID-0__983a2013-402e-45c4-bfe9-47fc282d040c)"
     />
     <path
         d="M12.9407 53.989C5.79377 53.989 0 48.3414 0 41.3748V125.386C0 132.352 5.79377 138 12.9407 138H125.059C132.206 138 138 132.352 138 125.386V41.3748C138 44.7203 136.637 47.9288 134.21 50.2944C131.783 52.66 128.491 53.989 125.059 53.989H12.9407Z"
-        fill="url(#ID-1__a90d8007-317f-41d4-9667-df578b2f93cb)"
+        fill="url(#ID-1__7cc4356b-9b8e-4ab6-8bae-fa0ee95753ef)"
     />
     <path
         d="M125.059 82.7495H81.9407C74.7938 82.7495 69 88.3971 69 95.3638C69 102.33 74.7938 107.978 81.9407 107.978H125.059C132.206 107.978 138 102.33 138 95.3638V70.1353C138 77.1019 132.206 82.7495 125.059 82.7495Z"
@@ -23,11 +23,11 @@
     <path
         opacity="0.8"
         d="M22.8533 37.313C22.8629 43.1036 24.254 48.8127 26.9167 53.989H95.3732C98.0359 48.8127 99.427 43.1036 99.4366 37.313C99.4195 34.4305 99.0547 31.5599 98.3496 28.7605H23.9145C23.2181 31.5609 22.8619 34.4315 22.8533 37.313H22.8533Z"
-        fill="url(#ID-2__3b289b9d-a8a5-478b-9d37-d8966cc7980f)"
+        fill="url(#ID-2__e04d24b6-68ed-4dfb-8f9b-727020efbe9b)"
     />
     <defs>
         <linearGradient
-            id="ID-0__ede09693-ced0-4eb2-a130-597704776c9d"
+            id="ID-0__983a2013-402e-45c4-bfe9-47fc282d040c"
             x1="0"
             y1="28.7605"
             x2="0"
@@ -38,7 +38,7 @@
             <stop offset="1" stop-color="#8825D9" />
         </linearGradient>
         <linearGradient
-            id="ID-1__a90d8007-317f-41d4-9667-df578b2f93cb"
+            id="ID-1__7cc4356b-9b8e-4ab6-8bae-fa0ee95753ef"
             x1="137.701"
             y1="89.7919"
             x2="0"
@@ -50,7 +50,7 @@
             <stop offset="1" stop-color="#2D1AD0" />
         </linearGradient>
         <linearGradient
-            id="ID-2__3b289b9d-a8a5-478b-9d37-d8966cc7980f"
+            id="ID-2__e04d24b6-68ed-4dfb-8f9b-727020efbe9b"
             x1="22.8533"
             y1="28.7605"
             x2="22.8533"

src/assets/icons/wallet_persian_green.svg

@@ -6,11 +6,11 @@
     />
     <path
         d="M0 33.7555C0 30.9969 2.23634 28.7605 4.995 28.7605H133.005C135.764 28.7605 138 30.9969 138 33.7555V48.9688C138 51.7275 135.764 53.9638 133.005 53.9638H4.995C2.23634 53.9638 0 51.7275 0 48.9688V33.7555Z"
-        fill="url(#ID-0__a2c382eb-4fc5-44e9-ad12-cc62b1acb931)"
+        fill="url(#ID-0__33fc2bb6-767e-443a-8b76-acd65d2bb855)"
     />
     <path
         d="M12.9407 53.989C5.79377 53.989 0 48.3414 0 41.3748V125.386C0 132.352 5.79377 138 12.9407 138H125.059C132.206 138 138 132.352 138 125.386V41.3748C138 44.7203 136.637 47.9288 134.21 50.2944C131.783 52.66 128.491 53.989 125.059 53.989H12.9407Z"
-        fill="url(#ID-1__781d9fbb-2d13-490e-abdf-6398e928926b)"
+        fill="url(#ID-1__b95b832a-05fd-4406-b034-d5fb4b139e35)"
     />
     <path
         d="M125.059 82.7496H81.9407C74.7938 82.7496 69 88.3972 69 95.3638C69 102.33 74.7938 107.978 81.9407 107.978H125.059C132.206 107.978 138 102.33 138 95.3638V70.1353C138 77.102 132.206 82.7496 125.059 82.7496Z"
@@ -23,11 +23,11 @@
     <path
         opacity="0.8"
         d="M22.8533 37.313C22.8628 43.1036 24.2539 48.8127 26.9167 53.989H95.3732C98.0359 48.8127 99.427 43.1036 99.4365 37.313C99.4195 34.4305 99.0546 31.5599 98.3495 28.7605H23.9144C23.218 31.5609 22.8619 34.4315 22.8533 37.313H22.8533Z"
-        fill="url(#ID-2__f5aa3310-5b99-4b05-a299-9e4ecdebd95b)"
+        fill="url(#ID-2__61d67280-48f6-4098-8498-d687132d408e)"
     />
     <defs>
         <linearGradient
-            id="ID-0__a2c382eb-4fc5-44e9-ad12-cc62b1acb931"
+            id="ID-0__33fc2bb6-767e-443a-8b76-acd65d2bb855"
             x1="0"
             y1="28.7605"
             x2="0"
@@ -38,7 +38,7 @@
             <stop offset="1" stop-color="#003A8E" />
         </linearGradient>
         <linearGradient
-            id="ID-1__781d9fbb-2d13-490e-abdf-6398e928926b"
+            id="ID-1__b95b832a-05fd-4406-b034-d5fb4b139e35"
             x1="137.701"
             y1="89.792"
             x2="0"
@@ -49,7 +49,7 @@
             <stop offset="1" stop-color="#254F8A" />
         </linearGradient>
         <linearGradient
-            id="ID-2__f5aa3310-5b99-4b05-a299-9e4ecdebd95b"
+            id="ID-2__61d67280-48f6-4098-8498-d687132d408e"
             x1="22.8533"
             y1="28.7605"
             x2="22.8533"

src/components/indicators/spinner/index.ts

@@ -1,4 +1,3 @@
 export * from './spinner.module';
 export * from './spinner.component';
 export * from './spinner-type';
-export * from './spinner-theme';

src/components/indicators/spinner/spinner-theme.ts

@@ -1,6 +0,0 @@
-import { InjectionToken } from '@angular/core';
-
-export type SpinnerThemeProvider = {
-    color: string;
-};
-export const SPINNER_THEME = new InjectionToken<SpinnerThemeProvider>('Spinner theme');

src/components/indicators/spinner/spinner.component.ts

@@ -1,7 +1,7 @@
-import { Component, Inject, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import random from 'lodash.random';
 
-import { SpinnerThemeProvider, SPINNER_THEME } from './spinner-theme';
+import { ThemeManager, ThemeName } from '../../../app/theme-manager';
 import { SpinnerType } from './spinner-type';
 
 @Component({
@@ -14,11 +14,19 @@ export class SpinnerComponent implements OnChanges {
     @Input() size = 50;
     activeSpinner = SpinnerType.Spring;
     spinnersCount = 7;
-    color = this.theme.color;
 
     SpinnerType = SpinnerType;
 
-    constructor(@Inject(SPINNER_THEME) private theme: SpinnerThemeProvider) {}
+    constructor(private themeManager: ThemeManager) {}
+
+    get color() {
+        switch (this.themeManager.current) {
+            case ThemeName.persianGreen:
+                return '#003b8e';
+            case ThemeName.main:
+                return '#695bff';
+        }
+    }
 
     ngOnChanges({ type }: SimpleChanges) {
         this.activeSpinner = type && type.currentValue ? type.currentValue : random(0, this.spinnersCount);

src/styles/themes/main.scss

@@ -13,8 +13,6 @@ $background: (
 
 $foreground: (
     // Overrides
-    text: #475166,
-    slider-min: #475166,
     // Custom
     contrast-text: $light-text,
     light-text: mat-color(mat-palette($mat-grey), 500),
@@ -28,7 +26,7 @@ $config: (
     warn: mat-palette($dsh-warn, 300),
     is-dark: false,
     // Custom
-    name: 'light',
+    name: 'main',
     success-base: mat-color(mat-palette($dsh-success), 400),
     pending-base: mat-color(mat-palette($dsh-pending), 800),
     warn-base: mat-color(mat-palette($dsh-warn), 300)