swoocn · swoocn · Mar 14, 2024 · Mar 13, 2024 · Mar 13, 2024 · Mar 13, 2024
diff --git a/frontend/src/app/business/business-settings/business-settings.component.html b/frontend/src/app/business/business-settings/business-settings.component.html
@@ -1,4 +1,4 @@
-<main class="business-registration">
+<main class="business-registration mat-app-background">
   <form [formGroup]="registerShopForm" (ngSubmit)="send()">
   <section class="business-registration__section">
     <div class="business-registration__field">
@@ -50,8 +50,8 @@
     <div class="business-registration__field business-registration__field-middle">
       <label for="" class="business-registration__label"></label>
       <label for="image"
-        class="business-registration__label flex gap-5 mb-3 items-center bg-blue-200 p-3 rounded-md"><img
-          src="../../../assets/images/business/upload.jpg" alt="upload icon" class="w-[50px] h-[50px]" />
+        class="business-registration__label flex gap-5 mb-3 items-center bg-green-200 p-3 rounded-md" style="background-color: #1d724b;">
+        <img src="../../../assets/images/business/upload.jpg" alt="upload icon" class="w-[50px] h-[50px]" />
         <div>{{ 'BUSINESS.REGISTRATION.LABELS.BUSINESS_IMAGES' | translate }}</div>
       </label>
       <input type="file" id="image" name="image" (change)="onFileChange($event)" formControlName="shopImage"

diff --git a/frontend/src/app/business/business-settings/business-settings.component.ts b/frontend/src/app/business/business-settings/business-settings.component.ts
@@ -1,9 +1,11 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { TranslateModule } from '@ngx-translate/core';
-import { CommonModule } from '@angular/common';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { Router, RouterLink } from '@angular/router';
+
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { CommonModule } from '@angular/common';
+
 import { SnackService } from '../../core/service/snack.service';
 import { ShopService } from '../../core/service/shop.service';
 
@@ -16,7 +18,7 @@ import { ShopService } from '../../core/service/shop.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BusinessSettingsComponent {
-  businessTypes: string[] = ['Restaurant', 'Retail Store', 'Servicing', 'Construction', 'Transportation'];
+  businessTypes: string[] =[];
   router: Router = inject(Router);
   showPopup: boolean = false;
   selectedImages: any[] = [];
@@ -36,7 +38,24 @@ export class BusinessSettingsComponent {
   constructor(
     private snackService: SnackService,
     private shopServices: ShopService,
-  ) {}
+    private translateService: TranslateService
+  ) {
+    // initialize business types.
+    this.translateBusinessTypes();
+    this.translateService.onLangChange.subscribe(() => {
+      this.translateBusinessTypes();
+    });
+  }
+
+  translateBusinessTypes() {
+    this.businessTypes = [
+      'RESTAURANT',
+      'RETAIL_STORE',
+      'SERVICE',
+      'CONSTRUCTION',
+      'TRANSPORTATION'
+    ].map(key => this.translateService.instant(`BUSINESS.REGISTRATION.LABELS.BUSINESS_TYPES.${key}`));
+  }
 
   onFileChange(event: any) {
     if (event.target.files) {

diff --git a/frontend/src/app/home/map/map.component.ts b/frontend/src/app/home/map/map.component.ts
@@ -116,7 +116,7 @@ export class MapComponent implements OnInit {
 
   private updateTranslatedStrings(): void {
     this.distanceMessage = this.translateService.instant('BUSINESS_MARKER_DIALOG.DISTANCE_MESSAGE');
-    this.onlinePiOrdersAllowedMessage = this.translateService.instant('BUSINESS_MARKER_DIALOG.DISTANCE_MESSAGE');
+    this.onlinePiOrdersAllowedMessage = this.translateService.instant('BUSINESS_MARKER_DIALOG.ONLINE_PI_ORDERS_ALLOWED_MESSAGE');
     this.menuItemsAvailable = this.translateService.instant('BUSINESS_MARKER_DIALOG.MENU_ITEMS_AVAILABLE_MESSAGE');
     this.visitShop = this.translateService.instant('BUSINESS_MARKER_DIALOG.BUTTONS.VISIT_SHOP');
     this.takeRoute = this.translateService.instant('BUSINESS_MARKER_DIALOG.BUTTONS.TAKE_ROUTE');
@@ -199,7 +199,7 @@ export class MapComponent implements OnInit {
                             <div class="p-4">
                                 <div class="text-lg font-bold mb-2">${shop.name}</div>
                                 <div>${shop.name} is located here and you are about to take routes towards it. It will approximately take you 23 min by car.</div>
-                                <button id="cancelBtn" class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md">Cancel</button>
+                                <button id="cancelBtn" class="mt-4 px-4 py-2 bg-orange-600 text-white rounded-md">Cancel</button>
                             </div>
                         `);
 
@@ -278,7 +278,7 @@ export class MapComponent implements OnInit {
           </div>
           <div class="space-y-1">
             <div class="flex items-center">
-              <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
+              <svg class="h-6 w-6 flex-none fill-gray-100 stroke-green-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
                 <circle cx="12" cy="12" r="11" />
                 <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
               </svg>
@@ -287,7 +287,7 @@ export class MapComponent implements OnInit {
               </div>
             </div>
             <div class="flex items-center">
-              <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
+              <svg class="h-6 w-6 flex-none fill-gray-100 stroke-green-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
                 <circle cx="12" cy="12" r="11" />
                 <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
               </svg>
@@ -296,18 +296,18 @@ export class MapComponent implements OnInit {
               </div>
             </div>
             <div class="flex items-center">
-              <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
+              <svg class="h-6 w-6 flex-none fill-gray-100 stroke-green-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
                 <circle cx="12" cy="12" r="11" />
                 <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
               </svg>
               <div class="ml-1"><code class="text-sm font-bold text-gray-900">15</code> ${this.menuItemsAvailable}</div>
             </div>
           </div>
 
-        <div class="flex items-center justify-center gap-3">
+        <div class="flex items-center mt-3 justify-center gap-3">
 
-        <div class="bg-red-400 w-[100px]  text-center rounded-md text-white py-1 mt-1" id="${shop._id}">${this.visitShop}</div>
-        <div class="bg-blue-400 w-[100px]  text-center rounded-md text-white py-1 mt-1" id="comming">${this.takeRoute}</div>
+        <div class="bg-red-800 w-[100px]   text-center rounded-md text-white py-1 mt-1" id="${shop._id}">${this.visitShop}</div>
+        <div class="bg-blue-800 w-[100px]   text-center rounded-md text-white py-1 mt-1" id="comming">${this.takeRoute}</div>
       </div>
     </div>`;
   }

diff --git a/frontend/src/app/shared/header/header.component.html b/frontend/src/app/shared/header/header.component.html
@@ -28,7 +28,7 @@
     <button mat-icon-button (click)="displayInfoPopup()">
       <mat-icon>info</mat-icon>
     </button>
-    <!-- TODO -> <app-dark-mode-toggler></app-dark-mode-toggler> -->
+    <app-dark-mode-toggler></app-dark-mode-toggler>
     <app-language-switcher></app-language-switcher>
   </div>
 </mat-toolbar>

diff --git a/frontend/src/assets/styles/business/business-settings/main.scss b/frontend/src/assets/styles/business/business-settings/main.scss
@@ -2,11 +2,12 @@
     padding: 1rem;
     font-family: var(--font-family-main);
     font-weight: bold;
-    font-size: 1.1rem;
+    font-size: 1.0rem;
 }
 
 .business-registration__section {
     position: relative;
+    // font-size: 1.0rem;
     top: 50%;
     left: 50%;
     transform: translate(-50%);
@@ -58,7 +59,7 @@
 }
 
 .business-registration__item {
-    font-size: 0.8rem;
+    // font-size: 0.8rem;
     padding: 1rem;
     margin-bottom: 1rem; 
     border-radius: 10px;
@@ -79,7 +80,7 @@
     padding: 0.7rem;
     background-color: #1d724b;
     color: #ffffff;
-    font-size: 0.9rem;
+    // font-size: 0.9rem;
     border-radius: 10px;
     outline: none;
     border: none;
@@ -99,11 +100,11 @@
 
 @media(min-width: 768px) {
     .business-registration-header__title {
-        font-size: 2rem;
+        font-size: 1rem;
     }
 
     .business-registration__label {
-        font-size: 1.3rem;
+        font-size: 1rem;
     }
 
     .business-registration__section {

diff --git a/frontend/src/assets/styles/business/business-settings/popup.scss b/frontend/src/assets/styles/business/business-settings/popup.scss
@@ -11,7 +11,7 @@
   }
 
   .popup {
-    background-color: #FFFFFF;
+    background-color: #ffc153;
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
     padding: 20px;

diff --git a/frontend/src/assets/styles/themes/dark-mode/dark-template.scss b/frontend/src/assets/styles/themes/dark-mode/dark-template.scss
@@ -0,0 +1,116 @@
+/* Built using http://mcg.mbitson.com/#!?darkmode=%23ffc153 */
+
+@use '../../../../../node_modules/@angular/material/' as mat;
+
+$dark-mode-primary-map: (
+    50 : #e0e0e0,
+    100 : #b3b3b3,
+    200 : #808080,
+    300 : #4d4d4d,
+    400 : #262626,
+    500 : #000000, // initial
+    600 : #000000,
+    700 : #000000,
+    800 : #000000,
+    900 : #000000,
+    A100 : #a6a6a6,
+    A200 : #8c8c8c,
+    A400 : #737373,
+    A700 : #666666,
+    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,
+    )
+);
+$dark-mode-accent-map: (
+    50 : #e4eee9,
+    100 : #bbd5c9,
+    200 : #8eb9a5,
+    300 : #619c81,
+    400 : #3f8766,
+    500 : #1d724b, // initial
+    600 : #1a6a44,
+    700 : #155f3b,
+    800 : #115533,
+    900 : #0a4223,
+    A100 : #7affaf,
+    A200 : #47ff91,
+    A400 : #14ff73,
+    A700 : #00f965,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #000000,
+        400 : #ffffff,
+        500 : #ffffff,
+        600 : #ffffff,
+        700 : #ffffff,
+        800 : #ffffff,
+        900 : #ffffff,
+        A100 : #000000,
+        A200 : #000000,
+        A400 : #000000,
+        A700 : #000000,
+    )
+);
+$dark-mode-warn-map: (
+    50 : #f9e0e0,
+    100 : #f0b3b3,
+    200 : #e68080,
+    300 : #db4d4d,
+    400 : #d42626,
+    500 : #cc0000, // initial
+    600 : #c70000,
+    700 : #c00000,
+    800 : #b90000,
+    900 : #ad0000,
+    A100 : #ffd7d7,
+    A200 : #ffa4a4,
+    A400 : #ff7171,
+    A700 : #ff5858,
+    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 : #000000,
+        A700 : #000000,
+    )
+);
+
+// convert maps into 'palettes'
+$dark-mode-primary-palette: mat.define-palette($dark-mode-primary-map, 400, 900);
+$dark-mode-accent-palette: mat.define-palette($dark-mode-accent-map);
+$dark-mode-warn-palette: mat.define-palette($dark-mode-warn-map);
+
+// create 'theme' from palettes
+$app-dark-theme: mat.define-dark-theme((
+    color: (
+        primary: $dark-mode-primary-palette,
+        accent: $dark-mode-accent-palette,
+        warn: $dark-mode-warn-palette,
+    ),
+    typography: mat.define-typography-config(),
+    density: 0,
+));