@flower-city-online/itinerary-lib 0.0.31 → 0.0.32

package/src/lib/itinerary-app/modules/pathway/pages/itinerary-preview/itinerary-preview.component.html

@@ -0,0 +1,70 @@
+<div class="pt-10 max-padd-container">
+  <app-map-header
+    [title]="'Create Itinerary'"
+    [backLink]="'/'"
+    [customcss]="''"
+  ></app-map-header>
+</div>
+<div class="mt-6">
+  <lib-map
+    [mapType]="mapType"
+    [markers]="locationsMarkers"
+    [enableDrag]="true"
+    [initialLocation]="initialLocation"
+    (mapLoaded)="onMapLoaded($event)"
+  ></lib-map>
+</div>
+
+<div class="main-itini-preview absolute bottom-0 py-3">
+  <section class="fixed bottom-0 w-full">
+    <div class="tracking-widest px-5 py-6 rounded-t-3xl">
+      <div class="tracking-bottom-com">
+        <div class="flex items-center justify-center gap-x-2">
+          <div class="flex items-center gap-x-1 text-xs">
+            <img [src]="ICONS['locationWhite']" alt="location" />
+            <span>{{ places.length }} Places</span>
+          </div>
+          <div class="h-4 border w-0 border-secondary"></div>
+          <div class="flex items-center justify-center gap-x-2">
+            <img [src]="ICONS['clock']" alt="" />
+            <span>45 minutes</span>
+            <span class="text-secondary font-thin">(6.6 Km)</span>
+          </div>
+        </div>
+        <div
+          class="border border-dashed opacity-55 rotate-90 absolute -left-6 top-36"
+        ></div>
+        <div class="font-Gilroy mt-5 mb-3 flex flex-col gap-y-5">
+          <div
+            *ngFor="let place of places"
+            class="flex items-center justify-between w-full gap-x-4"
+          >
+            <div class="flex items-center justify-start gap-x-4">
+              <div
+                class="z-50 icon w-8 h-8 outset-shadow flex items-center justify-center rounded-full"
+              >
+                <img [src]="ICONS['restu']" alt="" />
+              </div>
+              <div class="text">
+                <h2 class="f-sm f-xs flex items-center gap-x-1">
+                  {{ place.name | translate }}
+                  <img [src]="ICONS['enLocation']" alt="" />
+                </h2>
+                <p class="f-xs text-secondary">
+                  {{ place.description! | translate }}
+                </p>
+              </div>
+            </div>
+            <div class="flex items-center gap-x-3">
+              <img [src]="ICONS['groupBinBar']" alt="" class="cursor-pointer" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="background-gradient py-5 px-16">
+      <lib-primary-btn class="">{{ "PREVIEW" | translate }}</lib-primary-btn>
+    </div>
+  </section>
+</div>

package/src/lib/itinerary-app/modules/pathway/pages/itinerary-preview/itinerary-preview.component.scss

@@ -0,0 +1,10 @@
+.main-itini-preview,
+.tracking-bottom-com {
+  font-family: Gilroy-Regular !important;
+}
+
+.tracking-bottom-com,
+.text {
+  font-family: Gilroy-Regular !important;
+  font-size: 12px !important;
+}

package/src/lib/itinerary-app/modules/pathway/pages/itinerary-preview/itinerary-preview.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItineraryPreviewComponent } from './itinerary-preview.component';
+
+describe('ItineraryPreviewComponent', () => {
+  let component: ItineraryPreviewComponent;
+  let fixture: ComponentFixture<ItineraryPreviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ItineraryPreviewComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ItineraryPreviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/pathway/pages/itinerary-preview/itinerary-preview.component.ts

@@ -0,0 +1,59 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnInit,
+} from '@angular/core';
+import { MapMarkerModel } from '@naniteninja/ionic-lib';  
+import { Itinerary } from '../../../../_models/Itinerary';
+import { ApiService } from '../../../../_services/api.service';
+import { LocationService } from '../../../../_services/location.service';
+import { ICONS } from '../../../../_constants/constants';
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-itinerary-preview',
+    templateUrl: './itinerary-preview.component.html',
+    styleUrl: './itinerary-preview.component.scss',
+    standalone: false
+})
+export class ItineraryPreviewComponent implements OnInit {
+  initialLocation = { lat: 24.8607, lng: 67.0011 }; // Centered on California
+  ICONS: { [key: string]: string } = ICONS;
+  places: Itinerary[] = [];
+
+  constructor(
+    public locationService: LocationService,
+    public apiService: ApiService,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    this.apiService.get('/assets/data.json').subscribe((data) => {
+      this.places = data as Itinerary[];
+      this.cdr.detectChanges();
+    });
+    this.locationService.getCurrentLocation().subscribe((location) => {
+      this.initialLocation.lat = location.lat;
+      this.initialLocation.lng = location.long;
+    });
+  }
+  handleSearch(_event: string): void {
+    // Handle search event
+  }
+  mapType: google.maps.MapTypeId = google.maps.MapTypeId.ROADMAP;
+  locationsMarkers: MapMarkerModel[] = [
+    {
+      icon: 'assets/1.png#custom_pin_maps',
+      id: '1',
+      omitMarkerCircle: false,
+      position: this.initialLocation,
+      radius: 100000,
+    },
+  ];
+
+  onMapLoaded(_event: Event): void {}
+
+  toggleDrawingTool(): void {
+    // Add your drawing tool toggle logic here
+  }
+}

package/src/lib/itinerary-app/modules/pathway/pages/non-visual-map-filter/non-visual-map-filter.component.html

@@ -0,0 +1,45 @@
+<div class="pt-10 max-padd-container">
+  <app-map-header
+    [title]="'Create Itinerary'"
+    [backLink]="'/'"
+    [customcss]="''"
+  ></app-map-header>
+</div>
+<div class="mt-6">
+  <app-googlemap #map></app-googlemap>
+</div>
+<div class="absolute bottom-0 py-3">
+  <section class="fixed bottom-0 w-full">
+    <div class="tracking-widest px-5 py-6 rounded-t-xl drawer-shadow">
+      <div class="flex justify-between items-center">
+        <h1 class="no-visual-class xs:text-sm sm:text-md">No Visual Filters</h1>
+        <div
+          class="bg-grey rounded-full searchbar-shadow flex items-center justify-between"
+        >
+          <lib-primary-btn class="rounded-full p-2 px-4 focus:bg-primary">
+            <img [src]="ICONS['location']" alt="" />
+          </lib-primary-btn>
+
+          <lib-primary-btn
+            class="rounded-full p-2 px-4 focus:bg-primary"
+            (click)="toggleDrawingTool()"
+          >
+            <img [src]="ICONS['write']" alt="" />
+          </lib-primary-btn>
+          <lib-primary-btn class="rounded-full p-2 px-4 focus:bg-primary">
+            <img [src]="ICONS['warn']" alt="" />
+          </lib-primary-btn>
+        </div>
+      </div>
+      <div class="filter-class text-xs py-2 mt-2">
+        {{ "NO_VISUAL_FILTER" | translate }}
+      </div>
+    </div>
+
+    <div class="background-gradient py-5 px-16">
+      <lib-primary-btn class="">{{
+        "IMAGE_CROPPER.CONTINUE" | translate
+      }}</lib-primary-btn>
+    </div>
+  </section>
+</div>

package/src/lib/itinerary-app/modules/pathway/pages/non-visual-map-filter/non-visual-map-filter.component.scss

@@ -0,0 +1,17 @@
+@use "../../../../_styles/colors" as *;
+@use "../../../../_styles/fonts" as *;
+
+.filter-class {
+  font-family: $filter-font !important;
+  font-size: 12px !important;
+}
+
+.no-visual-class {
+  color: $text-color-3;
+  font-family: Calistoga;
+  font-size: 19.692px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 160%;
+  text-transform: capitalize;
+}

package/src/lib/itinerary-app/modules/pathway/pages/non-visual-map-filter/non-visual-map-filter.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NonVisualMapFilterComponent } from './non-visual-map-filter.component';
+
+describe('NonVisualMapFilterComponent', () => {
+  let component: NonVisualMapFilterComponent;
+  let fixture: ComponentFixture<NonVisualMapFilterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NonVisualMapFilterComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NonVisualMapFilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/pathway/pages/non-visual-map-filter/non-visual-map-filter.component.ts

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
+import { GooglemapComponent } from '../../components/googlemap/googlemap.component';
+import { Iicon } from '../../../../_interface/icon'; 
+import { ICONS } from '../../../../_constants/constants';
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-non-visual-map-filter',
+    templateUrl: './non-visual-map-filter.component.html',
+    styleUrl: './non-visual-map-filter.component.scss',
+    standalone: false
+})
+export class NonVisualMapFilterComponent {
+  mapType = 'roadmap';
+  locationsMarkers = [
+    { lat: 37.7749, lng: -122.4194, label: 'San Francisco' },
+    { lat: 34.0522, lng: -118.2437, label: 'Los Angeles' },
+  ];
+  initialLocation = { lat: 36.7783, lng: -119.4179 };
+  ICONS: Iicon = ICONS;
+  @ViewChild('map') map!: GooglemapComponent;
+
+  toggleDrawingTool(): void {
+    this.map.startDrawingPolygon();
+  }
+}

package/src/lib/itinerary-app/modules/pathway/pathway-routing.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { DefaultDestinationComponent } from './pages/default-destination/default-destination.component';
+import { ItineraryPreviewComponent } from './pages/itinerary-preview/itinerary-preview.component';
+import { NonVisualMapFilterComponent } from './pages/non-visual-map-filter/non-visual-map-filter.component';
+import { PathwayRoutesEnum } from '../../_enums/PathwayRoutes.enum';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: PathwayRoutesEnum.ItineraryPreview,
+    pathMatch: 'full',
+  },
+  {
+    path: PathwayRoutesEnum.NonVisualMapFilter,
+    component: NonVisualMapFilterComponent,
+  },
+  {
+    path: PathwayRoutesEnum.ItineraryPreview,
+    component: ItineraryPreviewComponent,
+  },
+  {
+    path: PathwayRoutesEnum.DefaultDestination,
+    component: DefaultDestinationComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  declarations: [],
+  exports: [RouterModule],
+})
+export class PathwayRoutingModule {}

package/src/lib/itinerary-app/modules/pathway/pathway.component.html

@@ -0,0 +1,3 @@
+<div class="py-1 w-screen h-screen">
+  <router-outlet></router-outlet>
+</div>

package/src/lib/itinerary-app/modules/pathway/pathway.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PathwayComponent } from './pathway.component';
+
+describe('PathwayComponent', () => {
+  let component: PathwayComponent;
+  let fixture: ComponentFixture<PathwayComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [PathwayComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PathwayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/pathway/pathway.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-pathway',
+    templateUrl: './pathway.component.html',
+    styleUrl: './pathway.component.scss',
+    standalone: false
+})
+export class PathwayComponent {}

package/src/lib/itinerary-app/modules/pathway/pathway.module.ts

@@ -0,0 +1,46 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { ButtonsModule, LibMapModule } from '@naniteninja/ionic-lib';
+import { SharedModule } from '../../shared/shared.module';
+import { GooglemapComponent } from './components/googlemap/googlemap.component';
+import { MapHeaderComponent } from './components/map-header/map-header.component';
+import { DefaultDestinationComponent } from './pages/default-destination/default-destination.component';
+import { ItineraryPreviewComponent } from './pages/itinerary-preview/itinerary-preview.component';
+import { NonVisualMapFilterComponent } from './pages/non-visual-map-filter/non-visual-map-filter.component';
+import { PathwayRoutingModule } from './pathway-routing.module';
+import { PathwayComponent } from './pathway.component';
+import { GoogleMapsModule } from '@angular/google-maps';
+import { environment } from '../../../../environments/environment';
+
+@NgModule({
+  declarations: [
+    NonVisualMapFilterComponent,
+    ItineraryPreviewComponent,
+    DefaultDestinationComponent,
+    PathwayComponent,
+    GooglemapComponent,
+    MapHeaderComponent,
+  ],
+  imports: [
+    TranslateModule,
+    CommonModule,
+    PathwayRoutingModule,
+    SharedModule,
+    ButtonsModule,
+    FormsModule,
+    GoogleMapsModule,
+    MatIcon,
+    LibMapModule.forRoot({
+      identityPoolId: environment.identityPoolId,
+      mapName: environment.mapName,
+      region: environment.region,
+      placeIndex: environment.placeIndex,
+      routeCalculatorName: environment.routeCalculatorName,
+    } as any)
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class PathwayModule { }

package/src/lib/itinerary-app/modules/search/components/clear-history-popup/clear-history-popup.component.html

@@ -0,0 +1,20 @@
+  <div class="delete-modal text-center">
+    <img [ngSrc]="ICONS['delete']" height="46" width="46" class="mx-auto" />
+    
+    <h3 class="font-[Calistoga] mt-5">
+      {{ "ITINERARY.CLEAR_SEARCH_HISTORY" | translate }}
+    </h3>
+    
+    <p class="text-white mb-2 max-w-[80%] ml-auto mr-auto mt-1 text-[10px]">
+      {{ "ITINERARY.CLEAR_SEARCH_WARNING" | translate }}
+    </p>
+    
+    <div class="flex justify-center gap-10 mt-5">
+      <button class="custom-flat-button font-[Calistoga]" (click)="closeModal()">
+        {{ "COMMON.KEEP" | translate }}
+      </button>
+      <button class="custom-flat-button-highlighted-font font-[Calistoga]" (click)="deleteItinerary()">
+        {{ "COMMON.CLEAR" | translate }}
+      </button>
+    </div>
+  </div>

package/src/lib/itinerary-app/modules/search/components/clear-history-popup/clear-history-popup.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClearHistoryPopupComponent } from './clear-history-popup.component';
+
+describe('ClearHistoryPopupComponent', () => {
+  let component: ClearHistoryPopupComponent;
+  let fixture: ComponentFixture<ClearHistoryPopupComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ClearHistoryPopupComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ClearHistoryPopupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/search/components/clear-history-popup/clear-history-popup.component.ts

@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { ICONS } from '../../../../_constants/constants';
+import { Iicon } from '../../../../_interface/icon';
+import { ModalClearHistoryService } from '../../../../_services/modal.clearhistory.service';
+
+@Component({
+    selector: 'lib-clear-history-popup',
+    templateUrl: './clear-history-popup.component.html',
+    styleUrl: './clear-history-popup.component.css',
+    standalone: false
+})
+export class ClearHistoryPopupComponent {
+  @Output() clearHistory: EventEmitter<void> = new EventEmitter<void>();
+  ICONS: Iicon = ICONS;
+
+  constructor(private clearHistoryModalService: ModalClearHistoryService) {
+
+  }
+
+  closeModal(): void {
+    this.clearHistoryModalService.toggleModal = false;
+  }
+
+  deleteItinerary(): void {
+    this.clearHistoryModalService.toggleModal = false;
+    this.clearHistory.emit();
+  }
+}

package/src/lib/itinerary-app/modules/search/components/quick-actions/quick-actions.component.html

@@ -0,0 +1,19 @@
+<p class="search-sub-heading mt-3">Quick actions...</p>
+<div class="flex row items-center gap-3 mt-2 cursor-pointer font-purple" [routerLink]="ItineraryRoutes.ITINERARY_BUILDER">
+  <span>
+    <img [ngSrc]="ICONS['plus2']" height="14" width="15" />
+  </span>
+  Create Itinerary
+</div>
+<div class="flex row items-center gap-3 mt-2 cursor-pointer font-purple" [routerLink]="ItineraryRoutes.ITINERARY_BUILDER">
+  <span>
+    <img [ngSrc]="ICONS['star']" height="14" width="15" />
+  </span>
+  Featured Itineraries
+</div>
+<div class="flex row items-center gap-3 mt-2 cursor-pointer font-purple" [routerLink]="ItineraryRoutes.ITINERARY_BUILDER">
+  <span>
+    <img [ngSrc]="ICONS['requests']" height="14" width="15" />
+  </span>
+  Requests
+</div>

package/src/lib/itinerary-app/modules/search/components/quick-actions/quick-actions.component.scss

@@ -0,0 +1,31 @@
+@use "../../../../_styles/colors" as *;
+
+.search-sub-heading {
+  color: $text-color-4;
+  font-size: var(--font-size-small);
+}
+
+.font-purple {
+  color: $text-color-2;
+}
+
+.main-btn {
+  color: var(--secondary-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px 0px;
+  width: 160px;
+  font-size: 18px;
+  font-weight: bolder;
+  margin-top: 10px;
+  font-weight: lighter;
+}
+
+.main-btn:last-child {
+  width: 193px;
+}
+
+.main-btn span {
+  margin-top: 2px;
+}

package/src/lib/itinerary-app/modules/search/components/quick-actions/quick-actions.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuickActionsComponent } from './quick-actions.component';
+
+describe('QuickActionsComponent', () => {
+  let component: QuickActionsComponent;
+  let fixture: ComponentFixture<QuickActionsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [QuickActionsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(QuickActionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/search/components/quick-actions/quick-actions.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ItinerariesRoutesEnum } from '../../../../_enums/ItenariesRoutes.enum';
+import { Iicon } from '../../../../_interface/icon';
+import { ICONS } from '../../../../_constants/constants';
+ 
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-quick-actions',
+    templateUrl: './quick-actions.component.html',
+    styleUrl: './quick-actions.component.scss',
+    standalone: false
+})
+export class QuickActionsComponent {
+  ICONS: Iicon = ICONS;
+  ItineraryRoutes = ItinerariesRoutesEnum;
+}

package/src/lib/itinerary-app/modules/search/components/recent-searches/recent-searches.component.html

@@ -0,0 +1,6 @@
+<div>
+  <p class="search-sub-heading">
+    {{ "RECENT_SEARCHES" | translate }}
+  </p>
+  <app-recent-searches-list></app-recent-searches-list>
+</div>

package/src/lib/itinerary-app/modules/search/components/recent-searches/recent-searches.component.scss

@@ -0,0 +1,6 @@
+@use "../../../../_styles/colors" as *;
+
+.search-sub-heading {
+  color: $text-color-4;
+  font-size: var(--font-size-small);
+}

package/src/lib/itinerary-app/modules/search/components/recent-searches/recent-searches.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RecentSearchesComponent } from './recent-searches.component';
+
+describe('RecentSearchesComponent', () => {
+  let component: RecentSearchesComponent;
+  let fixture: ComponentFixture<RecentSearchesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [RecentSearchesComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RecentSearchesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/search/components/recent-searches/recent-searches.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-recent-searches',
+    templateUrl: './recent-searches.component.html',
+    styleUrl: './recent-searches.component.scss',
+    standalone: false
+})
+export class RecentSearchesComponent {}

package/src/lib/itinerary-app/modules/search/components/recent-searches-item/recent-searches-item.component.html

@@ -0,0 +1,11 @@
+<div class="search-history-bar">
+  <div class="search-history-bar-sub">
+    <span>
+      <img [ngSrc]="ICONS['history']" height="13" width="14" />
+    </span>
+    <span class="search-history-text">Previous Search</span>
+  </div>
+  <span>
+    <img [ngSrc]="ICONS['close']" height="9" width="10" class="cursor-pointer" />
+  </span>
+</div>

package/src/lib/itinerary-app/modules/search/components/recent-searches-item/recent-searches-item.component.scss

@@ -0,0 +1,22 @@
+@use "../../../../_styles/colors" as *;
+
+.search-history-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0px;
+}
+
+.search-history-bar-sub {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.search-history-text {
+  margin-left: 10px;
+  margin-top: 2px;
+  font-weight: lighter;
+  color: $text-color-6;
+  font-size: var(--font-size-medium);
+}