C1 qa borders (#549)

* c1: QA fixes | list views * c1: QA fixes - Border
fylein · Feb 13, 2024 · 2dc668f · 2dc668f
1 parent e3e5a58
commit 2dc668f
Show file tree

Hide file tree

Showing 18 changed files with 47 additions and 50 deletions.
diff --git a/...bo/qbo-main/qbo-export-log/qbo-complete-export-log/qbo-complete-export-log.component.html b/...bo/qbo-main/qbo-export-log/qbo-complete-export-log/qbo-complete-export-log.component.html
@@ -2,7 +2,7 @@
     <app-loader></app-loader>
 </div>
 
-<div *ngIf="!isLoading" class="tw-rounded-8-px tw-shadow-app-card tw-bg-white tw-border-1-px tw-border-separator">
+<div *ngIf="!isLoading" class="tw-rounded-8-px tw-shadow-app-card tw-bg-white tw-border-1-px tw-border-border-tertiary">
     <div>
         <app-export-log-filter *ngIf="totalCount > 0 || selectedDateFilter"
             [exportLogForm]="exportLogForm"

diff --git a/...tions/qbo/qbo-onboarding/qbo-onboarding-connector/qbo-onboarding-connector.component.html b/...tions/qbo/qbo-onboarding/qbo-onboarding-connector/qbo-onboarding-connector.component.html
@@ -4,7 +4,7 @@
         <div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-pt-80-px">
             <app-loader></app-loader>
         </div>
-        <div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-24-px">
+        <div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-24-px">
             <div>
                 <app-configuration-step-header
                     [headerText]="'Connect to QuickBooks Online'"

diff --git a/...pp/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.html b/...pp/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
     <app-loader></app-loader>
 </div>
-<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6">
+<div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6">
     <div>
         <app-configuration-step-header
             [headerText]="'Advanced Settings'"
@@ -21,7 +21,7 @@
                 </app-configuration-step-sub-header>
             </div>
             <div class="tw-mb-16-px">
-                <div class="tw-rounded-12-px tw-border-separator tw-border tw-bg-white tw-mb-16-px">
+                <div class="tw-rounded-12-px tw-border-border-tertiary tw-border tw-bg-white tw-mb-16-px">
                     <app-configuration-toggle-field
                         [form]="advancedSettingForm"
                         [label]="'Schedule automatic export'" 
@@ -53,7 +53,7 @@
                     [subLabel]="'Based on your preference, you can choose whether you want to create any new records in QuickBooks Online from ' + brandingConfig.brandName + '. (when there is no employee record found, or when the accounting period is closed)'">
                 </app-configuration-step-sub-header>
             </div>
-            <div class="tw-rounded-12-px tw-border-separator tw-border tw-bg-white tw-mb-16-px">
+            <div class="tw-rounded-12-px tw-border-border-tertiary tw-border tw-bg-white tw-mb-16-px">
                 <app-configuration-toggle-field
                     [form]="advancedSettingForm"
                     [iconPath]="'calendar'"
@@ -115,7 +115,7 @@
                     [subLabel]="'In this section, you can customize the data that you\'d like to export from ' + brandingConfig.brandName + ' to QuickBooks Online You can choose what data points need to be exported and what shouldn\'t be.'">
                 </app-configuration-step-sub-header>
             </div>
-            <div class="tw-rounded-12-px tw-border-separator tw-border tw-bg-white tw-mb-16-px">
+            <div class="tw-rounded-12-px tw-border-border-tertiary tw-border tw-bg-white tw-mb-16-px">
                 <app-configuration-multi-select
                     [form]="advancedSettingForm"
                     [isFieldMandatory]="false"
@@ -135,7 +135,7 @@ <h4 class="tw-mb-12-px">Preview of the Description Field</h4>
                 </div>
             </div>
 
-            <div class="tw-rounded-12-px tw-border-separator tw-border tw-bg-white tw-mb-16-px">
+            <div class="tw-rounded-12-px tw-border-border-tertiary tw-border tw-bg-white tw-mb-16-px">
                 <app-configuration-toggle-field
                     [form]="advancedSettingForm"
                     [label]="'Skip export of specific expenses from ' + brandingConfig.brandName + ' to QuickBooks Online'" 

diff --git a/...pp/integrations/qbo/qbo-shared/qbo-employee-settings/qbo-employee-settings.component.html b/...pp/integrations/qbo/qbo-shared/qbo-employee-settings/qbo-employee-settings.component.html
@@ -2,7 +2,7 @@
     <div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-pt-80-px">
         <app-loader></app-loader>
     </div>
-    <div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6">
+    <div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6">
         <div>
             <app-configuration-step-header
                 [headerText]="'Map Employees'"
@@ -13,7 +13,7 @@
         <form [formGroup]="employeeSettingForm">
             <div class="tw-p-24-px">
                 <div class="tw-mb-16-px">
-                    <div class="tw-mt-16-px tw-bg-white tw-border tw-border-solid tw-border-separator tw-rounded-12-px">
+                    <div class="tw-mt-16-px tw-bg-white tw-border tw-border-solid tw-border-border-tertiary tw-rounded-12-px">
                         <app-configuration-select-field
                             [form]="employeeSettingForm"
                             [isFieldMandatory]="true"

diff --git a/src/app/integrations/qbo/qbo-shared/qbo-export-settings/qbo-export-settings.component.html b/src/app/integrations/qbo/qbo-shared/qbo-export-settings/qbo-export-settings.component.html
@@ -2,7 +2,7 @@
     <div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-pt-80-px">
         <app-loader></app-loader>
     </div>
-    <div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6">
+    <div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6">
         <div>
             <app-configuration-step-header
                 [headerText]="'Export Settings'"
@@ -13,7 +13,7 @@
         <form [formGroup]="exportSettingForm">
             <div class="tw-p-24-px">
                 <div *ngIf="brandingFeatureConfig.featureFlags.exportSettings.reimbursableExpenses" class="tw-mb-16-px">
-                    <div class="tw-rounded-lg tw-border-separator tw-border tw-bg-configuration-bg">
+                    <div class="tw-rounded-lg tw-border-border-tertiary tw-border tw-bg-configuration-bg">
                         <app-configuration-toggle-field
                             [form]="exportSettingForm"
                             [label]="'Export Reimbursable Expenses'"
@@ -23,7 +23,7 @@
                     </div>
                     <div *ngIf="exportSettingForm.value?.reimbursableExpense">
                         <div
-                            class="tw-mt-16-px tw-bg-white tw-border tw-border-solid tw-border-separator tw-rounded-12-px">
+                            class="tw-mt-16-px tw-bg-white tw-border tw-border-solid tw-border-border-tertiary tw-rounded-12-px">
                             <app-configuration-select-field
                                 [form]="exportSettingForm"
                                 [isFieldMandatory]="true"
@@ -85,7 +85,7 @@
                             </div>
                         </div>
                         <div *ngIf="exportSettingForm.value.reimbursableExportType"
-                            class="tw-mt-16-px tw-bg-white tw-border tw-border-solid tw-border-separator tw-rounded-12-px">
+                            class="tw-mt-16-px tw-bg-white tw-border tw-border-solid tw-border-border-tertiary tw-rounded-12-px">
                             <app-configuration-select-field
                                 [form]="exportSettingForm"
                                 [isFieldMandatory]="true"
@@ -100,7 +100,7 @@
                         </div>
 
                         <div *ngIf="exportSettingForm.value.reimbursableExportType"
-                            class="tw-mt-16-px tw-bg-white tw-border tw-border-solid tw-border-separator tw-rounded-12-px">
+                            class="tw-mt-16-px tw-bg-white tw-border tw-border-solid tw-border-border-tertiary tw-rounded-12-px">
                             <app-configuration-select-field
                                 [form]="exportSettingForm"
                                 [isFieldMandatory]="true"
@@ -115,7 +115,7 @@
                         </div>
 
                         <div *ngIf="exportSettingForm.value.reimbursableExportType"
-                            class="tw-mt-16-px tw-bg-white tw-border tw-border-solid tw-border-separator tw-rounded-12-px">
+                            class="tw-mt-16-px tw-bg-white tw-border tw-border-solid tw-border-border-tertiary tw-rounded-12-px">
                             <app-configuration-select-field
                                 [form]="exportSettingForm"
                                 [isFieldMandatory]="true"
@@ -130,7 +130,7 @@
                     </div>
                 </div>
 
-                <div class="tw-rounded-lg tw-border-separator tw-border tw-bg-configuration-bg">
+                <div class="tw-rounded-lg tw-border-border-tertiary tw-border tw-bg-configuration-bg">
                     <app-configuration-toggle-field
                         [form]="exportSettingForm"
                         [label]="'Export Corporate Card Expenses'"
@@ -142,7 +142,7 @@
                 </div>
 
                 <div *ngIf="exportSettingForm.value?.creditCardExpense">
-                    <div class="tw-mt-16-px tw-bg-white tw-border tw-border-solid tw-border-separator tw-rounded-12-px">
+                    <div class="tw-mt-16-px tw-bg-white tw-border tw-border-solid tw-border-border-tertiary tw-rounded-12-px">
                         <app-configuration-select-field
                             [form]="exportSettingForm"
                             [isFieldMandatory]="true"
@@ -233,7 +233,7 @@
                         </div>
                     </div>
 
-                    <div *ngIf="exportSettingForm.value.creditCardExportType" class="tw-mt-16-px tw-bg-white tw-border tw-border-solid tw-border-separator tw-rounded-12-px">
+                    <div *ngIf="exportSettingForm.value.creditCardExportType" class="tw-mt-16-px tw-bg-white tw-border tw-border-solid tw-border-border-tertiary tw-rounded-12-px">
                         <app-configuration-select-field
                             [form]="exportSettingForm"
                             [isFieldMandatory]="true"
@@ -247,7 +247,7 @@
                         </app-configuration-select-field>
                     </div>
 
-                    <div *ngIf="exportSettingForm.value.creditCardExportType" class="tw-mt-16-px tw-bg-white tw-border tw-border-solid tw-border-separator tw-rounded-12-px">
+                    <div *ngIf="exportSettingForm.value.creditCardExportType" class="tw-mt-16-px tw-bg-white tw-border tw-border-solid tw-border-border-tertiary tw-rounded-12-px">
                         <app-configuration-select-field
                             [form]="exportSettingForm"
                             [isFieldMandatory]="true"
@@ -261,7 +261,7 @@
                         </app-configuration-select-field>
                     </div>
 
-                    <div *ngIf="exportSettingForm.value.creditCardExportType" class="tw-mt-16-px tw-bg-white tw-border tw-border-solid tw-border-separator tw-rounded-12-px">
+                    <div *ngIf="exportSettingForm.value.creditCardExportType" class="tw-mt-16-px tw-bg-white tw-border tw-border-solid tw-border-border-tertiary tw-rounded-12-px">
                         <app-configuration-select-field
                             [form]="exportSettingForm"
                             [isFieldMandatory]="true"

diff --git a/src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.html b/src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
     <app-loader></app-loader>
 </div>
-<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6">
+<div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6">
     <div>
         <app-configuration-step-header [headerText]="'Import Settings'"
             [contentText]="'In this section, you can choose the fields required to be imported from QuickBooks Online to ' + brandingConfig.brandName + '. '"
@@ -12,7 +12,7 @@
     <div>
         <form [formGroup]="importSettingForm">
             <div class="tw-p-24-px">
-                <div class="tw-rounded-lg tw-border-separator tw-border">
+                <div class="tw-rounded-lg tw-border-border-tertiary tw-border">
                     <app-configuration-toggle-field
                         [form]="importSettingForm"
                         [label]="'Import the Chart of Accounts as Categories in ' + brandingConfig.brandName"
@@ -38,7 +38,7 @@ <h5 class="lg:tw-w-3/5 md:tw-w-1/2 tw-text-slightly-normal-text-color tw-text-14
                     </div>
                 </div>
 
-                <div class="tw-rounded-lg tw-border-separator tw-border tw-mt-24-px" *ngIf="workspaceGeneralSettings.reimbursable_expenses_object !== QBOReimbursableExpensesObject.JOURNAL_ENTRY && workspaceGeneralSettings.corporate_credit_card_expenses_object !== QBOCorporateCreditCardExpensesObject.JOURNAL_ENTRY">
+                <div class="tw-rounded-lg tw-border-border-tertiary tw-border tw-mt-24-px" *ngIf="workspaceGeneralSettings.reimbursable_expenses_object !== QBOReimbursableExpensesObject.JOURNAL_ENTRY && workspaceGeneralSettings.corporate_credit_card_expenses_object !== QBOCorporateCreditCardExpensesObject.JOURNAL_ENTRY">
                     <app-configuration-toggle-field
                       [form]="importSettingForm"
                       [label]="'Import Products/Services from QuickBooks Online'"
@@ -48,7 +48,7 @@ <h5 class="lg:tw-w-3/5 md:tw-w-1/2 tw-text-slightly-normal-text-color tw-text-14
                     </app-configuration-toggle-field>
                 </div>
 
-                <div class="tw-rounded-lg tw-border-separator tw-border tw-mt-24-px" *ngIf="isTaxGroupSyncAllowed && brandingFeatureConfig.featureFlags.importSettings.tax">
+                <div class="tw-rounded-lg tw-border-border-tertiary tw-border tw-mt-24-px" *ngIf="isTaxGroupSyncAllowed && brandingFeatureConfig.featureFlags.importSettings.tax">
                     <app-configuration-toggle-field
                       [form]="importSettingForm"
                       [label]="'Import Tax from QuickBooks Online'"
@@ -71,7 +71,7 @@ <h5 class="lg:tw-w-3/5 md:tw-w-1/2 tw-text-slightly-normal-text-color tw-text-14
                     </app-configuration-select-field>
                   </div>
 
-                  <div class="tw-rounded-lg tw-border-separator tw-border tw-mt-24-px" *ngIf="isImportMerchantsAllowed">
+                  <div class="tw-rounded-lg tw-border-border-tertiary tw-border tw-mt-24-px" *ngIf="isImportMerchantsAllowed">
                     <app-configuration-toggle-field
                         [form]="importSettingForm"
                         [label]="'Import Vendors from QuickBooks Online'"

diff --git a/...onents/configuration/configuration-import-field/configuration-import-field.component.html b/...onents/configuration/configuration-import-field/configuration-import-field.component.html
@@ -13,13 +13,13 @@
         <div *ngFor="let defaultField of defaultImportFields">
             <div class="tw-flex tw-pt-18-px">
                 <div>
-                    <input type="text" class="tw-text-14-px tw-text-text-secondary !tw-font-500 tw-w-300-px !tw-px-14-px !tw-py-10-px tw-border tw-border-solid !tw-border-separator tw-rounded-4-px" value="{{ defaultField.destination_field | snakeCaseToSpaceCase | titlecase }}" disabled>
+                    <input type="text" class="tw-text-14-px tw-text-text-secondary !tw-font-500 tw-w-300-px !tw-px-14-px !tw-py-10-px tw-border tw-border-solid !tw-border-border-tertiary tw-rounded-4-px" value="{{ defaultField.destination_field | snakeCaseToSpaceCase | titlecase }}" disabled>
                 </div>
                 <div class="tw-pt-18-px">
                     <app-svg-icon [isTextColorAllowed]="true" [svgSource]="'arrow-line'" [height]="'30px'" [width]="'100px'" [styleClasses]="'!tw-ml-0 tw-text-box-color tw-self-center'"></app-svg-icon>
                 </div>
                 <div class="tw-w-30-vw">
-                    <input type="text" class="tw-text-14-px tw-text-text-secondary !tw-font-500 tw-w-300-px !tw-px-14-px !tw-py-10-px tw-border tw-border-solid !tw-border-separator tw-rounded-4-px" value="{{ defaultField.source_field | snakeCaseToSpaceCase | titlecase }}" disabled>
+                    <input type="text" class="tw-text-14-px tw-text-text-secondary !tw-font-500 tw-w-300-px !tw-px-14-px !tw-py-10-px tw-border tw-border-solid !tw-border-border-tertiary tw-rounded-4-px" value="{{ defaultField.source_field | snakeCaseToSpaceCase | titlecase }}" disabled>
                 </div>
                 <div class="input-toggle-section tw-w-10-vw tw-pt-10-px">
                     <p-inputSwitch [formControlName]="defaultField.formController"></p-inputSwitch>
@@ -28,7 +28,7 @@
         </div>
     </div>
     <div formArrayName="expenseFields" [ngClass]="[isDestinationFixedImport ? '' : 'tw-pl-24-px tw-mt-18px']">
-        <div *ngFor="let expenseField of expenseFieldsGetter.controls; let i = index" [formGroupName]="i" [ngClass]="{'tw-mt-24-px tw-pb-24-px': isDestinationFixedImport, 'tw-rounded-lg tw-border-separator tw-border': isDestinationFixedImport && !isCloneSettingView, 'tw-pr-24-px': isCloneSettingView}">
+        <div *ngFor="let expenseField of expenseFieldsGetter.controls; let i = index" [formGroupName]="i" [ngClass]="{'tw-mt-24-px tw-pb-24-px': isDestinationFixedImport, 'tw-rounded-lg tw-border-border-tertiary tw-border': isDestinationFixedImport && !isCloneSettingView, 'tw-pr-24-px': isCloneSettingView}">
             <div class="tw-mt-18-px" [ngClass]="{'tw-bg-configuration-bg tw-rounded-8-px tw-py-16-px tw-w-fit tw-pr-24-px': expenseField.value.source_field === 'PROJECT' && expenseField.value.import_to_fyle && expenseField.value.destination_field === dependentDestinationValue, 'tw-pl-24-px': !isDestinationFixedImport}">
             <div *ngIf="isDestinationFixedImport">
                 <div [ngClass]="!isCloneSettingView ? 'tw-p-24-px': 'tw-pl-24-px'" class="tw-flex tw-justify-between">
@@ -114,7 +114,7 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px tw-pt-8
                         </div>
                         <div>
                             <p class="tw-pl-16-px tw-mb-8-px tw-text-14-px tw-text-sub-text-color !tw-font-400">Dependent Field <app-mandatory-field></app-mandatory-field> </p>
-                            <input type="text" [ngClass]="[i ? 'tw-w-240-px' : 'tw-w-260-px']" class="tw-text-14-px tw-text-text-secondary !tw-ml-20-px !tw-font-500 !tw-h-38-px !tw-px-14-px !tw-py-10-px tw-border tw-border-solid !tw-border-separator tw-rounded-4-px" value="{{dependentField.source_field}}" disabled>
+                            <input type="text" [ngClass]="[i ? 'tw-w-240-px' : 'tw-w-260-px']" class="tw-text-14-px tw-text-text-secondary !tw-ml-20-px !tw-font-500 !tw-h-38-px !tw-px-14-px !tw-py-10-px tw-border tw-border-solid !tw-border-border-tertiary tw-rounded-4-px" value="{{dependentField.source_field}}" disabled>
                         </div>
                         <div class="tw-pt-44-px">
                             <app-svg-icon [isTextColorAllowed]="true" [svgSource]="'arrow-line'" [height]="'10px'" [width]="'100px'" [styleClasses]="'tw-text-box-color'"></app-svg-icon>

diff --git a/...onents/configuration/configuration-import-field/configuration-import-field.component.scss b/...onents/configuration/configuration-import-field/configuration-import-field.component.scss
@@ -39,7 +39,7 @@
   }
 
   .sub-text {
-    @apply tw-rounded-8-px tw-border tw-border-separator tw-bg-configuration-bg tw-p-24-px tw-items-start tw-flex-col tw-gap-4;
+    @apply tw-rounded-8-px tw-border tw-border-border-tertiary tw-bg-configuration-bg tw-p-24-px tw-items-start tw-flex-col tw-gap-4;
   }
 
   .sub-text-note {

diff --git a/...mponents/configuration/configuration-step-header/configuration-step-header.component.html b/...mponents/configuration/configuration-step-header/configuration-step-header.component.html
@@ -1,4 +1,4 @@
-<div class="tw-p-24-px tw-border-b tw-border-b-gray-200">
+<div class="tw-p-24-px tw-border-b tw-border-b-border-tertiary">
     <div class="tw-flex tw-items-center tw-justify-between">
         <div>
           <h3 class="tw-text-text-primary tw-font-500">

diff --git a/...hared/components/dashboard/dashboard-error-section/dashboard-error-section.component.html b/...hared/components/dashboard/dashboard-error-section/dashboard-error-section.component.html
@@ -1,9 +1,9 @@
 <div class="tw-py-24-px tw-px-120-px">
-    <div *ngIf="errors" class="tw-mt-24-px tw-shadow-app-card tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-separator">
+    <div *ngIf="errors" class="tw-mt-24-px tw-shadow-app-card tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-border-tertiary">
         <div class="tw-flex tw-justify-between tw-items-center tw-p-24-px">
                 <h4 class="tw-text-text-primary !tw-font-500 !tw-text-18-px">Errors</h4>
         </div>
-        <div class="tw-border-separator tw-border-t-1-px tw-pb-24-px">
+        <div class="tw-border-border-tertiary tw-border-t-1-px tw-pb-24-px">
             <div class="tw-mt-10-px tw-rounded-6-px tw-bg-white">
                 <div *ngIf="errors.EMPLOYEE_MAPPING?.length || groupedErrorStat.EMPLOYEE_MAPPING || errors.CATEGORY_MAPPING.length || groupedErrorStat.CATEGORY_MAPPING" class="tw-pl-24-px tw-pr-24-px tw-pt-24-px">
                     <div class="container">