🚨 Fix SCSS Lint issues - Change @import to @use

[balajis-qb]

Description

This PR updates SCSS files to replace deprecated @import statements with @use. The @use rule improves modularity, enhances namspace management, and aligns with modern SCSS standards.

Changes

• Replaced @import statements with @use
• Updated variable and mixin references as needed to accommodate @use namespaces.

Contribution checklist

• I have followed the contributing guidelines.
• I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.89%. Comparing base (e479fc3) to head (7196d4b).
Report is 4 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5242   +/-   ##
=======================================
  Coverage   96.89%   96.89%           
=======================================
  Files          29       29           
  Lines        3381     3381           
  Branches     1415     1418    +3     
=======================================
  Hits         3276     3276           
  Misses        103      103           
  Partials        2        2           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

---

🚨 Try these New Features:

• Flaky Tests Detection - Detect and resolve failed and flaky tests
• JS Bundle Analysis - Avoid shipping oversized bundles

[pullrequest]

✅ This pull request was sent to the PullRequest network for review. Expert reviewers are now being matched to your request based on the code's requirements. Stay tuned!

What to expect from this code review:

• Comments posted to any areas of potential concern or improvement.
• Detailed feedback or actions needed to resolve issues that are found.
• Turnaround times vary, but we aim to be swift.

---

@balajis-qb you can click here to see the review status or cancel the code review job.

[pullrequest]

PullRequest Breakdown

Reviewable lines of change

+ 25
- 18

98% SCSS
2% JSON

Type of change

Fix - These changes are likely to be fixing a bug or issue.

[martijnrusschen]

if this is fixing a lint issue, why is the linter currently not failing? Do we need to adjust the rules to make sure this behavior doesn't get used anymore?

[pullrequest]

Looks good to me, this seems like a pretty straightforward fix.

Ryan Lester <@buu700>

---

Reviewed with ❤️ by PullRequest

[balajis-qb]

if this is fixing a lint issue, why is the linter currently not failing? Do we need to adjust the rules to make sure this behavior doesn't get used anymore?

Hi @martijnrusschen,
Actually we got a warning while building the app.

I updated the .stylelintrc config to also check for no-import rule in scss. If needed, we can also run lint as a part of our pre-commit hook. Currently we're just running prettier as a part of pre-commit and running lint only in the GitHub workflow.

[martijnrusschen]

ok great. It seems there's a merge conflict, can you take a look

[balajis-qb]

Resolved the conflicts