From 489db1978b24577bc233193424adeaa38a9c5779 Mon Sep 17 00:00:00 2001
From: DhaaraniCIT <dhaaranieaswari@gmail.com>
Date: Wed, 5 Feb 2025 14:43:00 +0530
Subject: [PATCH] seatch icon focus state styling

---
 src/app/branding/c1-style-config.ts                           | 3 ++-
 src/app/branding/fyle-style-config.ts                         | 3 ++-
 .../configuration-confirmation-dialog.component.html          | 2 +-
 .../configuration-confirmation-dialog.component.ts            | 4 +++-
 .../configuration-select-field.component.html                 | 2 +-
 .../email-multi-select-field.component.html                   | 2 +-
 .../email-multi-select-field.component.ts                     | 4 +++-
 .../generic-mapping-table.component.html                      | 2 +-
 .../generic-mapping-table/generic-mapping-table.component.ts  | 4 +++-
 src/app/shared/components/input/search/search.component.html  | 2 +-
 src/app/shared/components/input/search/search.component.ts    | 4 +++-
 11 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/app/branding/c1-style-config.ts b/src/app/branding/c1-style-config.ts
index 7ad3eb56a..bdd2ecd7f 100644
--- a/src/app/branding/c1-style-config.ts
+++ b/src/app/branding/c1-style-config.ts
@@ -14,7 +14,8 @@ export const c1Styles = {
         importFieldDependentField: 'tw-pr-24-px tw-pl-[58px]',
         importFieldDependentFieldSvg: 'tw-pt-42-px',
         importFieldDropDownText: '!tw-font-600 tw-text-12-px',
-        stepHeaderH3Text: 'tw-text-18-px'
+        stepHeaderH3Text: 'tw-text-18-px',
+        searchIconFocus: 'tw-text-search-focused-filled-border'
     },
     dashboard: {
         dashboardErrorResolveBtnText: 'p-button primary-outline'
diff --git a/src/app/branding/fyle-style-config.ts b/src/app/branding/fyle-style-config.ts
index 85bb81931..3349a3fb8 100644
--- a/src/app/branding/fyle-style-config.ts
+++ b/src/app/branding/fyle-style-config.ts
@@ -14,7 +14,8 @@ export const fyleStyles = {
         importFieldDependentField: '',
         importFieldDependentFieldSvg: 'tw-pt-46-px',
         importFieldDropDownText: '!tw-font-400 tw-text-14-px',
-        stepHeaderH3Text: ''
+        stepHeaderH3Text: '',
+        searchIconFocus: 'tw-text-search-focused-search-icon'
     },
     dashboard: {
         dashboardErrorResolveBtnText: 'p-button secondary-sm'
diff --git a/src/app/shared/components/configuration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.html b/src/app/shared/components/configuration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.html
index e50faf306..6237e1323 100644
--- a/src/app/shared/components/configuration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.html
+++ b/src/app/shared/components/configuration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.html
@@ -11,7 +11,7 @@
                     </div>
                     <p class="tw-text-20-px tw-font-500 tw-text-text-primary">{{headerText}}</p>
                 </div>
-                <i [ngClass]="{'pi pi-times fyle' : brandingConfig.brandId === 'fyle' && appName!==AppName.QBD_DIRECT, 'pi pi-times fyle qbd' : brandingConfig.brandId === 'fyle' && appName===AppName.QBD_DIRECT, 'pi pi-times co' : brandingConfig.brandId !== 'fyle'}" class="tw-cursor-pointer" style="font-size: 12px" (click)="acceptWarning(false)"></i>
+                <i [ngClass]="[appName!==AppName.QBD_DIRECT ? brandingStyle.common.configurationBrandingClass : brandingStyle.common.configurationBrandingClass + ' qbd']" class="tw-cursor-pointer pi pi-times" style="font-size: 12px" (click)="acceptWarning(false)"></i>
             </div>
         </div>
         <div class="tw-pl-24-px tw-pr-10-px tw-pt-16-px tw-pb-24-px">
diff --git a/src/app/shared/components/configuration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.ts b/src/app/shared/components/configuration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.ts
index 203c7b85b..02ffbf64e 100644
--- a/src/app/shared/components/configuration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.ts
+++ b/src/app/shared/components/configuration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { brandingConfig, brandingKbArticles } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingKbArticles, brandingStyle } from 'src/app/branding/branding-config';
 import { AppName, ConfigurationWarningEvent } from 'src/app/core/models/enum/enum.model';
 import { ConfigurationWarningOut } from 'src/app/core/models/misc/configuration-warning.model';
 import { WindowService } from 'src/app/core/services/common/window.service';
@@ -35,6 +35,8 @@ export class ConfigurationConfirmationDialogComponent implements OnInit {
 
   readonly brandingKbArticles = brandingKbArticles;
 
+  readonly brandingStyle = brandingStyle;
+
   AppName = AppName;
 
   brandIcon: string;
diff --git a/src/app/shared/components/configuration/configuration-select-field/configuration-select-field.component.html b/src/app/shared/components/configuration/configuration-select-field/configuration-select-field.component.html
index 36c64b0b7..031e97bf9 100644
--- a/src/app/shared/components/configuration/configuration-select-field/configuration-select-field.component.html
+++ b/src/app/shared/components/configuration/configuration-select-field/configuration-select-field.component.html
@@ -55,7 +55,7 @@ <h5 *ngIf="formControllerName === 'cccExportType' && brandingConfig.brandId ===
                         <app-search [form]="form" [isDropdown]="true" [placeholder]="'Search'" [styleClasses]="'tw-w-[100%] tw-h-dropdown-option-height tw-bg-white '" (handleSimpleSearch)="simpleSearch($event)" (searchFocused)="onSearchFocus($event)"></app-search>
                     </ng-template>
                     <ng-template pTemplate="filtericon">
-                        <app-svg-icon [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="brandingConfig.brandId === 'fyle' ? 'tw-text-search-focused-search-icon' : 'tw-text-search-focused-filled-border'" [isTextColorAllowed]="true"></app-svg-icon>
+                        <app-svg-icon [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="brandingStyle.configuration.searchIconFocus" [isTextColorAllowed]="true"></app-svg-icon>
                     </ng-template>
                 </p-dropdown>
             </div>
diff --git a/src/app/shared/components/configuration/email-multi-select-field/email-multi-select-field.component.html b/src/app/shared/components/configuration/email-multi-select-field/email-multi-select-field.component.html
index 05f2be427..e459533df 100644
--- a/src/app/shared/components/configuration/email-multi-select-field/email-multi-select-field.component.html
+++ b/src/app/shared/components/configuration/email-multi-select-field/email-multi-select-field.component.html
@@ -32,7 +32,7 @@ <h5 class="!tw-text-text-muted tw-text-14-px tw-pt-8-px !tw-font-400 !tw-leading
                 <div *ngIf="emails.length" class="tw-p-6-px">
                     <p-iconField iconPosition="left">
                         <p-inputIcon>
-                            <app-svg-icon [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="brandingConfig.brandId === 'fyle' ? 'tw-text-search-focused-search-icon' : 'tw-text-search-focused-filled-border'" [isTextColorAllowed]="true"></app-svg-icon>
+                            <app-svg-icon [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="brandingStyle.configuration.searchIconFocus" [isTextColorAllowed]="true"></app-svg-icon>
                         </p-inputIcon>
                         <input type="text" class="!tw-h-32-px !tw-w-288-px !tw-rounded-4-px !tw-pl-40-px !tw-pr-12-px !tw-py-12-px" (keyup)="options.filter($event)" pInputText placeholder="Search by Name / Email" formControlName="search"/>
                     </p-iconField>
diff --git a/src/app/shared/components/configuration/email-multi-select-field/email-multi-select-field.component.ts b/src/app/shared/components/configuration/email-multi-select-field/email-multi-select-field.component.ts
index 6cb145cab..8b1eee796 100644
--- a/src/app/shared/components/configuration/email-multi-select-field/email-multi-select-field.component.ts
+++ b/src/app/shared/components/configuration/email-multi-select-field/email-multi-select-field.component.ts
@@ -8,7 +8,7 @@ import { TrackingService } from 'src/app/core/services/integration/tracking.serv
 import { IntegrationsToastService } from 'src/app/core/services/common/integrations-toast.service';
 import { EmailOption } from 'src/app/core/models/intacct/intacct-configuration/advanced-settings.model';
 import { trackingAppMap } from 'src/app/core/models/misc/tracking.model';
-import { brandingConfig } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingStyle } from 'src/app/branding/branding-config';
 
 @Component({
   selector: 'app-email-multi-select-field',
@@ -56,6 +56,8 @@ export class EmailMultiSelectFieldComponent implements OnInit {
 
   readonly brandingConfig = brandingConfig;
 
+  readonly brandingStyle = brandingStyle;
+
   constructor(
     @Inject(FormBuilder) private formBuilder: FormBuilder,
     private trackingService: TrackingService,
diff --git a/src/app/shared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.html b/src/app/shared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.html
index 7c00ea4b5..65bcd4652 100644
--- a/src/app/shared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.html
+++ b/src/app/shared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.html
@@ -52,7 +52,7 @@
                         </div>
                     </ng-template>
                     <ng-template pTemplate="filtericon">
-                        <app-svg-icon [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="brandingConfig.brandId === 'fyle' ? 'tw-text-search-focused-search-icon' : 'tw-text-search-focused-filled-border'" [isTextColorAllowed]="true"></app-svg-icon>
+                        <app-svg-icon [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="brandingStyle.configuration.searchIconFocus" [isTextColorAllowed]="true"></app-svg-icon>
                     </ng-template>
                 </p-dropdown>
             </td>
diff --git a/src/app/shared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.ts b/src/app/shared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.ts
index cba6695d9..7e6eca36b 100644
--- a/src/app/shared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.ts
+++ b/src/app/shared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.ts
@@ -2,7 +2,7 @@ import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { DropdownFilterOptions } from 'primeng/dropdown';
 import { Subject, debounceTime } from 'rxjs';
-import { brandingConfig, brandingContent, brandingFeatureConfig } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingContent, brandingFeatureConfig, brandingStyle } from 'src/app/branding/branding-config';
 import { DestinationAttribute } from 'src/app/core/models/db/destination-attribute.model';
 import { ExtendedGenericMapping } from 'src/app/core/models/db/extended-generic-mapping.model';
 import { GenericMapping, MappingClass } from 'src/app/core/models/db/generic-mapping.model';
@@ -68,6 +68,8 @@ export class GenericMappingTableComponent implements OnInit {
 
   readonly brandingContent = brandingContent.mapping;
 
+  readonly brandingStyle = brandingStyle;
+
   optionSearchUpdate = new Subject<{searchTerm: string}>();
 
   @ViewChild('filterInput') filterInput!: ElementRef;
diff --git a/src/app/shared/components/input/search/search.component.html b/src/app/shared/components/input/search/search.component.html
index 1ebc03c8a..c2bf674bc 100644
--- a/src/app/shared/components/input/search/search.component.html
+++ b/src/app/shared/components/input/search/search.component.html
@@ -1,5 +1,5 @@
 <span [formGroup]="form" [class]="'tw-px-12-px custom-search-field ' + styleClasses + 'tw-h-' + height" [ngStyle]="{'border-color': !isDropdown && isSearchFocused ? 'var(--search-focused-filled-border)' : 'var(--search-default-border)'}" [ngClass]="{'tw-py-4-px': isDropdown, 'tw-py-8-px': !isDropdown, 'tw-cursor-pointer': !isSearchFocused}" (click)="onSearch()" (focus)="isSearchFocused = true" (blur)="onBlur()">
-    <app-svg-icon [isTextColorAllowed]="true" [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="brandingConfig.brandId === 'fyle' ? 'tw-text-search-focused-search-icon ' + (isSearchFocused ? '!tw-pr-8-px': '') : 'tw-text-search-focused-filled-border ' + (isSearchFocused ? '!tw-pr-8-px': '')"></app-svg-icon>
+    <app-svg-icon [isTextColorAllowed]="true" [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="brandingStyle.configuration.searchIconFocus + (isSearchFocused ? ' !tw-pr-8-px': '')"></app-svg-icon>
     <input #search [ngClass]="[isSearchFocused ? 'showInput': 'hideInput !tw-w-0']" [formControlName]="formControllerName" [class]="'tw-text-14-px tw-text-search-default-filled-text tw-w-' + width" type="text" [placeholder]="placeholder" (focus)="onFocus()" (blur)="onBlur()" />
     <app-svg-icon *ngIf="form.get(formControllerName)?.value && !isDropdown" (iconClick)="clearSearch()" [svgSource]="'cross-medium'" [c1SvgSource]="'grv-cross-filled-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="'tw-cursor-pointer tw-text-icon-muted'"></app-svg-icon>
 </span>
diff --git a/src/app/shared/components/input/search/search.component.ts b/src/app/shared/components/input/search/search.component.ts
index 22110006b..6111d9705 100644
--- a/src/app/shared/components/input/search/search.component.ts
+++ b/src/app/shared/components/input/search/search.component.ts
@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { InputText } from 'primeng/inputtext';
-import { brandingConfig } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingStyle } from 'src/app/branding/branding-config';
 
 @Component({
   selector: 'app-search',
@@ -32,6 +32,8 @@ export class SearchComponent implements OnInit {
 
   readonly brandingConfig = brandingConfig;
 
+  readonly brandingStyle = brandingStyle;
+
   @ViewChild('search') search: any;
 
   constructor() { }