WEB-722 Standardize all action buttons in the checker inbox

[JaySoni1]

Changes Made :-

-Updated SCSS to set a solid black background for Approve, Reject, and dropdown buttons in the checker inbox.

WEB-722

Before :-

After :-

Summary by CodeRabbit

• Style
  • Unified and refreshed action button styling in the checker inbox: Approve/Reject buttons updated for a cohesive look (darker background, white text), refined shadows, spacing, typography, and transitions. Visual-only change — functionality and event behavior unchanged.

[coderabbitai]

Note

.coderabbit.yaml has unrecognized properties

CodeRabbit is using all valid settings from your configuration. Unrecognized properties (listed below) have been ignored and may indicate typos or deprecated fields that can be removed.

⚠️ Parsing warnings (1)

Validation error: Unrecognized key(s) in object: 'pre_merge_checks'

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• 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/schema.v2.json

Walkthrough

Template button class names were changed and the component SCSS was refactored: two action buttons in the checker-inbox template now use new CSS classes, and consolidated/extended SCSS rules were added to standardize appearance and introduce a shared action-button style.

Changes

Cohort / File(s)

Summary

Checker Inbox Button Styling src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.html, src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.scss

In the template, the Approve and Reject buttons had their class names changed to mat-success tasks-action-btn and mat-reject tasks-action-btn. SCSS was refactored: new .tasks-action-btn utility, consolidated .mat-mdc-raised-button.mat-success and .mat-mdc-raised-button.mat-reject rules, and a new button.mat-mdc-raised-button.action-button variant with updated box-shadow, border-radius, typography, spacing, and transitions. Layout/search styles remain present.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• IOhacker
• alberto-art3ch

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Merge Conflict Detection	⚠️ Warning	❌ Merge conflicts detected (35 files): ⚔️ README.md (content) ⚔️ angular.json (content) ⚔️ docker-compose.yml (content) ⚔️ env.sample (content) ⚔️ proxy.conf.js (content) ⚔️ proxy.localhost.conf.js (content) ⚔️ src/app/clients/client-stepper/client-general-step/client-general-step.component.html (content) ⚔️ src/app/clients/client-stepper/client-general-step/client-general-step.component.scss (content) ⚔️ src/app/clients/client-stepper/client-general-step/client-general-step.component.ts (content) ⚔️ src/app/clients/clients.service.ts (content) ⚔️ src/app/clients/edit-client/edit-client.component.html (content) ⚔️ src/app/clients/edit-client/edit-client.component.scss (content) ⚔️ src/app/clients/edit-client/edit-client.component.ts (content) ⚔️ src/app/products/share-products/share-product-stepper/share-product-market-price-step/share-product-market-price-step.component.ts (content) ⚔️ src/app/shared/footer/footer.component.scss (content) ⚔️ src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.html (content) ⚔️ src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.scss (content) ⚔️ src/assets/env.js (content) ⚔️ src/assets/env.template.js (content) ⚔️ src/assets/translations/cs-CS.json (content) ⚔️ src/assets/translations/de-DE.json (content) ⚔️ src/assets/translations/en-US.json (content) ⚔️ src/assets/translations/es-CL.json (content) ⚔️ src/assets/translations/es-MX.json (content) ⚔️ src/assets/translations/fr-FR.json (content) ⚔️ src/assets/translations/it-IT.json (content) ⚔️ src/assets/translations/ko-KO.json (content) ⚔️ src/assets/translations/lt-LT.json (content) ⚔️ src/assets/translations/lv-LV.json (content) ⚔️ src/assets/translations/ne-NE.json (content) ⚔️ src/assets/translations/pt-PT.json (content) ⚔️ src/assets/translations/sw-SW.json (content) ⚔️ src/environments/environment.prod.ts (content) ⚔️ src/environments/environment.ts (content) ⚔️ src/typings.d.ts (content) These conflicts must be resolved before merging into dev.	Resolve conflicts locally and push changes to this branch.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and accurately summarizes the main change: standardizing action button styling in the checker inbox component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

⚔️ Resolve merge conflicts (beta)

• Auto-commit resolved conflicts to branch WEB-722-standardize-all-action-buttons-in-the-checker-inbox
• Post resolved changes as copyable diffs in a comment

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.scss (2)

66-72: !important on icon-button but not on raised-button — inconsistent override strategy.

Lines 66–67 use !important to override Angular Material's default icon-button colours, but the raised-button overrides at lines 77–78 rely solely on selector specificity. If the component's specificity is enough for raised buttons, it should be enough for icon buttons too (both live under .tab-container). Conversely, if !important is genuinely needed here, the raised-button rules may silently fail to apply.

Pick one strategy and apply it consistently — prefer higher specificity (e.g. adding button or the host-scoped attribute) over !important.

---

81-83: .tasks-action-btn duplicates the existing .action-button rule at line 132.

Both .tasks-action-btn (line 81) and .action-button (line 132) set only margin: 0. If both classes serve the same purpose of resetting button margins, consolidate into one class to avoid confusion.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In
`@src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.scss`:
- Around line 79-83: The CSS selectors target legacy Angular Material classes
(".mat-raised-button.mat-success" and ".mat-raised-button.mat-reject") which MDC
renders as ".mat-mdc-raised-button", so update the selectors to use the MDC
class names (e.g., ".mat-mdc-raised-button.mat-success" and
".mat-mdc-raised-button.mat-reject") so the color and background-color rules
apply to the Approve/Reject buttons; keep the same declarations (color: `#fff`;
background-color: `#111`;) and adjust any other similar selectors in
checker-inbox.component.scss that use ".mat-raised-button" to their
".mat-mdc-raised-button" equivalents.

🧹 Nitpick comments (3)

src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.scss (2)

66-67: Avoid !important — prefer increased specificity instead.

Using !important on background and color makes future overrides and theming difficult. Since you're already scoping under .tab-container button.mat-mdc-icon-button, the specificity should be sufficient without !important.

♻️ Proposed removal of `!important`

-    background: `#232323` !important;
-    color: `#fff` !important;
+    background: `#232323`;
+    color: `#fff`;

---

89-101: action-button styles are now only used by the Delete button — consider cleanup.

The Approve and Reject buttons were changed from action-button to tasks-action-btn, so this button.mat-mdc-raised-button.action-button rule now only targets the Delete button. If those enhanced shadow/font styles are intended for all three action buttons, they should target .tasks-action-btn as well, or be consolidated. If only for the Delete button, the selector name is misleading.

src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.html (1)

31-37: Inconsistent class naming across sibling action buttons.

Approve and Reject now use tasks-action-btn, while Delete (line 34) still uses action-button. Since these are all peer action buttons in the same row, using a single shared class for common styling (spacing, shadow, typography) would be cleaner and easier to maintain.

[IOhacker]

Lgtm

[JaySoni1]

@IOhacker Thank You for the review