C1 qa borders #549

ashwin1111 · 2024-02-13T17:05:58Z

Summary by CodeRabbit

Style
- Enhanced visual presentation across various components, including QuickBooks Online integration pages, configuration fields, dashboard sections, and mapping interfaces, through refined border styles and color schemes for a more cohesive and aesthetically pleasing user interface.

coderabbitai · 2024-02-13T17:06:14Z

Walkthrough

The overarching modification across various components involves updating CSS classes primarily to alter border styles and colors based on certain conditions, such as loading states or specific page types. This unified effort aims to enhance the visual appeal and consistency of border treatments throughout the application, improving user experience by providing clearer visual cues and a more cohesive design language.

Changes

Files	Change Summary
`.../qbo-complete-export-log.component.html` `.../qbo-onboarding-connector.component.html` `.../qbo-advanced-settings.component.html` `.../qbo-employee-settings.component.html` `.../qbo-export-settings.component.html` `.../qbo-import-settings.component.html`	Updated CSS classes for different border styles based on loading conditions.
`.../configuration-import-field.component.html` `.../dashboard-error-section.component.html` `.../dashboard-export-section.component.html` `.../dashboard-export-summary-section.component.html`	Modified border style classes and adjusted visual styling elements.
`.../configuration-import-field.component.scss` `.../dashboard-error-section.component.scss` `.../dashboard-export-summary-section.component.scss`	Updated CSS for border color, style, and other visual enhancements.
`.../configuration-step-header.component.html` `.../generic-mapping-v2.component.html` `.../mapping-card-header.component.html` `.../paginator.component.html` `.../mapping-header-section.component.html`	Changed border color classes to `tw-border-border-tertiary` for consistency and visual appeal.

🐰✨

Through fields of code, a rabbit hopped,
With CSS in hand, border styles swapped.
From tw-border-separator to hues so bright,
The rabbit worked through day and night.
Now each element, with borders so fine,
Reflects a change, by design divine.
🌟🐾

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit-tests for this file.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit tests for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository from git and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit tests.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
The JSON schema for the configuration file is available here.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

ashwin1111 · 2024-02-13T17:07:09Z

@coderabbitai review

ashwin1111 · 2024-02-13T17:20:18Z

https://github.com/coderabbitai review

ashwin1111 · 2024-02-13T17:50:33Z

@coderabbitai review

coderabbitai

Review Status

Actionable comments generated: 11

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between e3e5a58 and 37fbe29.

Files selected for processing (18)

src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-complete-export-log/qbo-complete-export-log.component.html (1 hunks)
src/app/integrations/qbo/qbo-onboarding/qbo-onboarding-connector/qbo-onboarding-connector.component.html (1 hunks)
src/app/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.html (5 hunks)
src/app/integrations/qbo/qbo-shared/qbo-employee-settings/qbo-employee-settings.component.html (2 hunks)
src/app/integrations/qbo/qbo-shared/qbo-export-settings/qbo-export-settings.component.html (11 hunks)
src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.html (5 hunks)
src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.html (3 hunks)
src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.scss (1 hunks)
src/app/shared/components/configuration/configuration-step-header/configuration-step-header.component.html (1 hunks)
src/app/shared/components/dashboard/dashboard-error-section/dashboard-error-section.component.html (1 hunks)
src/app/shared/components/dashboard/dashboard-error-section/dashboard-error-section.component.scss (1 hunks)
src/app/shared/components/dashboard/dashboard-export-section/dashboard-export-section.component.html (1 hunks)
src/app/shared/components/dashboard/dashboard-export-summary-section/dashboard-export-summary-section.component.html (1 hunks)
src/app/shared/components/dashboard/dashboard-export-summary-section/dashboard-export-summary-section.component.scss (1 hunks)
src/app/shared/components/helper/mapping/generic-mapping-v2/generic-mapping-v2.component.html (1 hunks)
src/app/shared/components/helper/mapping/mapping-card-header/mapping-card-header.component.html (2 hunks)
src/app/shared/components/helper/paginator/paginator.component.html (2 hunks)
src/app/shared/components/qbd/mapping/mapping-header-section/mapping-header-section.component.html (2 hunks)

Additional comments: 35

src/app/shared/components/dashboard/dashboard-export-summary-section/dashboard-export-summary-section.component.scss (1)

2-2: Ensure the use of tw-border-1-px and tw-border-border-tertiary aligns with the project's design system for border styles and colors. The use of tw-p-24-px for padding and tw-flex-col tw-items-start tw-gap-4 for layout is appropriate, assuming it matches the intended design specifications.

src/app/shared/components/dashboard/dashboard-error-section/dashboard-error-section.component.scss (2)

6-6: The use of tw-border-solid tw-border-1-px tw-border-border-tertiary tw-rounded-8-px for the .inside-container class correctly applies the new border style and color. Ensure this aligns with the intended visual design.

11-11: For the .sub-text-container, the application of tw-border-solid tw-border-1-px tw-border-border-tertiary tw-rounded-8-px for border styling and background: var(--grayscale-background, #FAFCFF); for background color is appropriate. Verify the background color variable is defined and used consistently across the project.

src/app/shared/components/qbd/mapping/mapping-header-section/mapping-header-section.component.html (2)

2-2: The update from tw-border-separator to tw-border-border-tertiary for border color is consistent with the PR's objectives to enhance visual styling. Ensure all similar components receive this update for consistency.

13-13: Repeat of the previous comment applies here as well. Ensure consistency across all components.

src/app/shared/components/helper/mapping/mapping-card-header/mapping-card-header.component.html (2)

3-3: The change to tw-border-border-tertiary for the border color is consistent with the PR's objectives. Ensure this change is uniformly applied across all components for visual consistency.

14-14: Repeat of the previous comment applies here as well. Ensure consistency across all components.

src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-complete-export-log/qbo-complete-export-log.component.html (1)

5-5: The update to use tw-border-border-tertiary for the border style when not loading is consistent with the PR's objectives to enhance visual styling. Ensure this change is uniformly applied across all components for consistency.

src/app/shared/components/configuration/configuration-step-header/configuration-step-header.component.html (1)

1-1: The change to tw-border-b-border-tertiary for the bottom border color is consistent with the PR's objectives. Ensure this change is uniformly applied across all components for visual consistency.

src/app/shared/components/helper/mapping/generic-mapping-v2/generic-mapping-v2.component.html (1)

8-8: The update to use tw-border-border-tertiary for the border style is consistent with the PR's objectives to enhance visual styling. Ensure this change is uniformly applied across all components for consistency.

src/app/integrations/qbo/qbo-onboarding/qbo-onboarding-connector/qbo-onboarding-connector.component.html (1)

7-7: The change to use a different border style when not loading is consistent with the PR's objectives. Ensure this change is uniformly applied across all components for visual consistency.

src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.scss (1)

42-42: The update to tw-border-border-tertiary for the .sub-text class aligns with the PR's objectives to enhance visual styling. Ensure this change is uniformly applied across all components for consistency.

src/app/integrations/qbo/qbo-shared/qbo-employee-settings/qbo-employee-settings.component.html (1)

5-5: The change to use a different border color style when not loading is consistent with the PR's objectives. Ensure this change is uniformly applied across all components for visual consistency.

src/app/shared/components/dashboard/dashboard-export-summary-section/dashboard-export-summary-section.component.html (3)

2-2: The update to border styles and container rounding in the dashboard export summary section aligns with the PR's objectives to enhance visual styling. Ensure these changes are consistent with the design system.

6-6: The change to tw-border-border-tertiary tw-border-t-1-px for the border style is consistent with the PR's objectives. Ensure this change is uniformly applied across all components for consistency.

8-8: Repeat of the previous comment applies here as well. Ensure consistency across all components.

src/app/shared/components/helper/paginator/paginator.component.html (2)

29-29: The update to use tw-border-border-tertiary for the border style in the paginator component is consistent with the PR's objectives. Ensure this change is uniformly applied across all components for consistency.

55-55: Repeat of the previous comment applies here as well. Ensure consistency across all components.

src/app/shared/components/dashboard/dashboard-export-section/dashboard-export-section.component.html (1)

2-2: The change to use a different border style based on the isImportInProgress condition is consistent with the PR's objectives. Ensure this change is uniformly applied across all components for visual consistency.

src/app/shared/components/dashboard/dashboard-error-section/dashboard-error-section.component.html (1)

2-2: Ensure the border style changes align with the design guidelines for consistency across the application.

src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.html (4)

16-16: Ensure input elements use CSS classes that are consistent with the application's design guidelines.

22-22: Ensure input elements use CSS classes that are consistent with the application's design guidelines.

31-31: The border style changes for div elements should align with the design guidelines for consistency across the application.

117-117: Ensure input elements use CSS classes that are consistent with the application's design guidelines.

src/app/integrations/qbo/qbo-shared/qbo-export-settings/qbo-export-settings.component.html (11)

5-5: Ensure all icons used within this component adhere to the standard size of 24*24 as per additional instructions.

16-16: The class tw-bg-configuration-bg might not be consistent with the border style updates. Verify if this background class aligns with the new visual styling guidelines.

26-26: Icons within app-configuration-select-field components should be verified to maintain the standard size of 24*24.

88-88: Icons within app-configuration-select-field components should be verified to maintain the standard size of 24*24.

103-103: Icons within app-configuration-select-field components should be verified to maintain the standard size of 24*24.

118-118: Icons within app-configuration-select-field components should be verified to maintain the standard size of 24*24.

133-133: The class tw-bg-configuration-bg might not be consistent with the border style updates. Verify if this background class aligns with the new visual styling guidelines.

145-145: Icons within app-configuration-select-field components should be verified to maintain the standard size of 24*24.

236-236: Icons within app-configuration-select-field components should be verified to maintain the standard size of 24*24.

250-250: Icons within app-configuration-select-field components should be verified to maintain the standard size of 24*24.

264-264: Icons within app-configuration-select-field components should be verified to maintain the standard size of 24*24.

coderabbitai · 2024-02-13T17:54:55Z

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">


Ensure the application name is dynamically fetched from the configuration instead of hardcoding "QuickBooks Online" in the content text.

coderabbitai · 2024-02-13T17:54:55Z

src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.html

@@ -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">


The icon referenced in app-configuration-toggle-field should adhere to the standard size of 24x24.

coderabbitai · 2024-02-13T17:54:55Z

src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.html

@@ -38,7 +38,7 @@
                    </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">


The icon referenced in app-configuration-toggle-field should adhere to the standard size of 24x24.

coderabbitai · 2024-02-13T17:54:55Z

src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.html

@@ -48,7 +48,7 @@
                    </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">


The icon referenced in app-configuration-toggle-field should adhere to the standard size of 24x24.

coderabbitai · 2024-02-13T17:54:55Z

src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.html

@@ -71,7 +71,7 @@
                    </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">


The icon referenced in app-configuration-toggle-field should adhere to the standard size of 24x24.

coderabbitai · 2024-02-13T17:54:55Z

src/app/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">


Ensure the application name is dynamically fetched from the configuration instead of hardcoding "QuickBooks Online" in the content text.

coderabbitai · 2024-02-13T17:54:56Z

src/app/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.html

@@ -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">


The icon referenced in app-configuration-toggle-field should adhere to the standard size of 24x24.

coderabbitai · 2024-02-13T17:54:56Z

src/app/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.html

@@ -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">


The icon referenced in app-configuration-toggle-field should adhere to the standard size of 24x24.

coderabbitai · 2024-02-13T17:54:56Z

src/app/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.html

@@ -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">


The icon referenced in app-configuration-multi-select should adhere to the standard size of 24x24.

coderabbitai · 2024-02-13T17:54:56Z

src/app/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.html

@@ -135,7 +135,7 @@
                </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">


The icon referenced in app-configuration-toggle-field should adhere to the standard size of 24x24.

* C1: QA Fixes - 4 | Multiselect * fix bg * c1: QA Fixes - Toggle (#538) * C1 qa toast (#540) * c1: QA Fixes - Toggle * c1: Toast * c1: QA fixes | Chips (#542) * fix travelperk btn * c1: QA fixes | list views (#548) * C1 qa borders (#549) * c1: QA fixes | list views * c1: QA fixes - Border

* C1: QA Fixes - 4 | Multiselect * fix bg * c1: QA Fixes - Toggle (#538) * C1 qa toast (#540) * c1: QA Fixes - Toggle * c1: Toast * c1: QA fixes | Chips (#542) * fix travelperk btn * c1: QA fixes | list views * c1: QA fixes - Border * c1: QA fixes | list views (#548) * C1 qa borders (#549) * c1: QA fixes | list views * c1: QA fixes - Border * c1: QA fixes - Calendar * fix search * comment out stuffs * fix icon * few more

…ps | LV | Border (#531) * C1: QA Fixes - 3 * fix lint * other fixes * dropdown * dropdown with search * fix lint * C1 dropdown qa fix (#544) white labeling gC1 * C1 qa multiselect | toggle | bg | toast | chips | lv | border (#536) * C1: QA Fixes - 4 | Multiselect * fix bg * c1: QA Fixes - Toggle (#538) * C1 qa toast (#540) * c1: QA Fixes - Toggle * c1: Toast * c1: QA fixes | Chips (#542) * fix travelperk btn * c1: QA fixes | list views (#548) * C1 qa borders (#549) * c1: QA fixes | list views * c1: QA fixes - Border * c1: QA fixes - Calendar (#551) * C1: QA Fixes - 4 | Multiselect * fix bg * c1: QA Fixes - Toggle (#538) * C1 qa toast (#540) * c1: QA Fixes - Toggle * c1: Toast * c1: QA fixes | Chips (#542) * fix travelperk btn * c1: QA fixes | list views * c1: QA fixes - Border * c1: QA fixes | list views (#548) * C1 qa borders (#549) * c1: QA fixes | list views * c1: QA fixes - Border * c1: QA fixes - Calendar * fix search * comment out stuffs * fix icon * few more * fix qbd btn * fix mapping card * fix bamboo * intacct search, calendar --------- Co-authored-by: Dhaarani <[email protected]>

ashwin1111 added 2 commits February 13, 2024 22:12

c1: QA fixes | list views

dfb80a8

c1: QA fixes - Border

72b457b

Merge branch 'c1-qa-multiselect' into c1-qa-borders

37fbe29

coderabbitai bot reviewed Feb 13, 2024

View reviewed changes

ashwin1111 merged commit 2dc668f into c1-qa-multiselect Feb 13, 2024
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

C1 qa borders #549

C1 qa borders #549

ashwin1111 commented Feb 13, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Feb 13, 2024 •

edited

Loading

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

CodeRabbit Discord Community

ashwin1111 commented Feb 13, 2024

ashwin1111 commented Feb 13, 2024

ashwin1111 commented Feb 13, 2024

coderabbitai bot left a comment

coderabbitai bot Feb 13, 2024

coderabbitai bot Feb 13, 2024

coderabbitai bot Feb 13, 2024

coderabbitai bot Feb 13, 2024

coderabbitai bot Feb 13, 2024

coderabbitai bot Feb 13, 2024

coderabbitai bot Feb 13, 2024

coderabbitai bot Feb 13, 2024

coderabbitai bot Feb 13, 2024

coderabbitai bot Feb 13, 2024

C1 qa borders #549

C1 qa borders #549

Conversation

ashwin1111 commented Feb 13, 2024 • edited by coderabbitai bot Loading

Summary by CodeRabbit

coderabbitai bot commented Feb 13, 2024 • edited Loading

Walkthrough

Changes

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

CodeRabbit Discord Community

ashwin1111 commented Feb 13, 2024

ashwin1111 commented Feb 13, 2024

ashwin1111 commented Feb 13, 2024

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot Feb 13, 2024

Choose a reason for hiding this comment

coderabbitai bot Feb 13, 2024

Choose a reason for hiding this comment

coderabbitai bot Feb 13, 2024

Choose a reason for hiding this comment

coderabbitai bot Feb 13, 2024

Choose a reason for hiding this comment

coderabbitai bot Feb 13, 2024

Choose a reason for hiding this comment

coderabbitai bot Feb 13, 2024

Choose a reason for hiding this comment

coderabbitai bot Feb 13, 2024

Choose a reason for hiding this comment

coderabbitai bot Feb 13, 2024

Choose a reason for hiding this comment

coderabbitai bot Feb 13, 2024

Choose a reason for hiding this comment

coderabbitai bot Feb 13, 2024

Choose a reason for hiding this comment

ashwin1111 commented Feb 13, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Feb 13, 2024 •

edited

Loading

CodeRabbit Configration File (`.coderabbit.yaml`)