seatch icon focus state styling

fylein · Feb 5, 2025 · 489db19 · 489db19
1 parent 6d0d821
commit 489db19
Show file tree

Hide file tree

Showing 11 changed files with 21 additions and 11 deletions.
diff --git 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
@@ -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/...ration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.html b/...ration/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/...guration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.ts b/...guration/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/...onents/configuration/configuration-select-field/configuration-select-field.component.html b/...onents/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/...components/configuration/email-multi-select-field/email-multi-select-field.component.html b/...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/...d/components/configuration/email-multi-select-field/email-multi-select-field.component.ts b/...d/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/...ared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.html b/...ared/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/...shared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.ts b/...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
@@ -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
@@ -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() { }