Skip to content

Ks 023 sep 23 figma icons 2047#2206

Merged
MuhammadKhalilzadeh merged 4 commits intodevelopfrom
ks-023-Sep-23-figma-icons-2047
Sep 25, 2025
Merged

Ks 023 sep 23 figma icons 2047#2206
MuhammadKhalilzadeh merged 4 commits intodevelopfrom
ks-023-Sep-23-figma-icons-2047

Conversation

@solan117
Copy link
Copy Markdown
Contributor

@solan117 solan117 commented Sep 23, 2025

Describe your changes

refactor(icons): replace MUI Trending icons with custom SVGs

  • Replaced @mui/icons-material/TrendingUp, TrendingDown, and TrendingFlat with trendingUp.svg, trendingDown.svg, and trendingFlat.svg.
  • Updated imports and adjusted styles for integration with new SVG icons.

refactor(icons): replace MUI Edit icon with custom SVG edit icon

  • Replaced @mui/icons-material/Edit with edit.svg.
  • Updated imports and styles for seamless integration of the new SVG icon.

refactor(icons): replace MUI Speed icon with custom SVG speed icon

  • Replaced @mui/icons-material/Speed with speed.svg.
  • Updated imports and styles to integrate the new SVG icon.

Write your issue number after "Fixes "

Fixes #2047

Please ensure all items are checked off before requesting a review:

  • I deployed the code locally.
  • I have performed a self-review of my code.
  • I have included the issue # in the PR.
  • I have labelled the PR correctly.
  • The issue I am working on is assigned to me.
  • I have avoided using hardcoded values to ensure scalability and maintain consistency across the application.
  • I have ensured that font sizes, color choices, and other UI elements are referenced from the theme.
  • My pull request is focused and addresses a single, specific feature.
  • If there are UI changes, I have attached a screenshot or video to this PR.

- Replaced `@mui/icons-material/Speed` with `speed.svg`.
- Updated imports and styles to integrate the new SVG icon.
- Replaced `@mui/icons-material/Edit` with `edit.svg`.
- Updated imports and styles for seamless integration of the new SVG icon.
- Replaced `@mui/icons-material/TrendingUp`, `TrendingDown`, and `TrendingFlat` with `trendingUp.svg`, `trendingDown.svg`, and `trendingFlat.svg`.
- Updated imports and adjusted styles for integration with new SVG icons.
@solan117 solan117 added this to the 1.4 milestone Sep 23, 2025
@solan117 solan117 self-assigned this Sep 23, 2025
@solan117 solan117 added enhancement New feature or request frontend Frontend related tasks/issues labels Sep 23, 2025
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Sep 23, 2025

Walkthrough

Replaces Material UI icon imports/usage with project SVG ReactComponent icons in RiskMetricsCard, RisksCard, and Framework page; styling moved from sx/color props to inline style or retained fontSize; no behavioral or exported-API changes.

Changes

Cohort / File(s) Summary
RiskMetricsCard icon swap
Clients/src/presentation/components/Cards/RiskMetricsCard/index.tsx
Replace MUI Speed icon with SpeedGreenIcon (SVG ReactComponent); remove explicit color prop and keep fontSize styling; no logic changes.
RisksCard trend icons update
Clients/src/presentation/components/Cards/RisksCard/index.tsx
Replace MUI trend icons with TrendingUpRedIcon, TrendingDownGreenIcon, TrendingFlatGreyIcon (SVG ReactComponents); switch icon styling from sx to inline style; no behavioral changes.
Framework page Edit icon update
Clients/src/presentation/pages/Framework/index.tsx
Replace MUI Edit icon with EditIconGrey (SVG ReactComponent); move styling from sx to style; import paths updated; no logic changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Suggested reviewers

  • MuhammadKhalilzadeh

Poem

A rabbit nibbles vector bright,
Swaps filled icons for Figma light.
Tiny hops across the code,
Styles moved where props corrode.
Hooray — the UI breathes polite. 🐇✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Title Check ⚠️ Warning The title “Ks 023 sep 23 figma icons 2047” is not a clear, single sentence summarizing the primary change; it includes an internal code, date, and issue number rather than a concise description of replacing MUI icons with Figma SVG icons. Please update the title to a concise, descriptive summary such as “refactor(icons): replace MUI icons with Figma SVG icons” so that it clearly reflects the main change.
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues Check ✅ Passed The changes replace all specified MUI icons with custom Figma SVG assets and adjust styling as outlined in issue #2047, thereby fulfilling the coding requirements to use Figma icons consistently across the affected components.
Out of Scope Changes Check ✅ Passed All modifications are directly related to replacing MUI icons with Figma SVG icons as specified and there are no unrelated or extraneous code changes in the scope of this pull request.
Description Check ✅ Passed The pull request description follows the required template, including a clear summary of changes, the “Fixes #2047” reference, and a completed checklist, thereby satisfying the repository’s standards for completeness.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch ks-023-Sep-23-figma-icons-2047

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 95c2301 and 8050c47.

📒 Files selected for processing (1)
  • Clients/src/presentation/pages/Framework/index.tsx (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • Clients/src/presentation/pages/Framework/index.tsx

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

  • Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
  • Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.


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

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

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (4)
Clients/src/presentation/components/Cards/RiskMetricsCard/index.tsx (1)

54-54: Size raw SVGs with width/height instead of fontSize

fontSize typically won’t affect plain SVGs; set explicit dimensions for consistent rendering.

Apply this diff:

-        <SpeedGreenIcon style={{ fontSize: 18}} />
+        <SpeedGreenIcon style={{ width: 18, height: 18 }} aria-hidden />
Clients/src/presentation/components/Cards/RisksCard/index.tsx (3)

28-28: Set explicit size on SVG icon (font-size won’t apply reliably)

Use width/height so the icon renders as intended.

Apply this diff:

-          <TrendingFlatGreyIcon style={trendIconStable} />
+          <TrendingFlatGreyIcon style={{ ...trendIconStable, width: 14, height: 14 }} />

39-39: Set explicit size on SVG icon (font-size won’t apply reliably)

Apply this diff:

-          <TrendingUpRedIcon style={trendIconUp} />
+          <TrendingUpRedIcon style={{ ...trendIconUp, width: 14, height: 14 }} />

49-49: Set explicit size on SVG icon (font-size won’t apply reliably)

Apply this diff:

-        <TrendingDownGreenIcon style={trendIconDown} />
+        <TrendingDownGreenIcon style={{ ...trendIconDown, width: 14, height: 14 }} />
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f1e3a30 and 95c2301.

⛔ Files ignored due to path filters (5)
  • Clients/src/presentation/assets/icons/edit.svg is excluded by !**/*.svg
  • Clients/src/presentation/assets/icons/speed.svg is excluded by !**/*.svg
  • Clients/src/presentation/assets/icons/trendingDown.svg is excluded by !**/*.svg
  • Clients/src/presentation/assets/icons/trendingFlat.svg is excluded by !**/*.svg
  • Clients/src/presentation/assets/icons/trendingUp.svg is excluded by !**/*.svg
📒 Files selected for processing (3)
  • Clients/src/presentation/components/Cards/RiskMetricsCard/index.tsx (2 hunks)
  • Clients/src/presentation/components/Cards/RisksCard/index.tsx (4 hunks)
  • Clients/src/presentation/pages/Framework/index.tsx (2 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
Clients/src/presentation/components/Cards/RisksCard/index.tsx (1)
Clients/src/presentation/components/Cards/RisksCard/style.ts (3)
  • trendIconStable (56-59)
  • trendIconUp (46-49)
  • trendIconDown (51-54)
🔇 Additional comments (3)
Clients/src/presentation/components/Cards/RiskMetricsCard/index.tsx (1)

2-2: LGTM: Swapped MUI Speed for SVG ReactComponent

Import path and usage align with the PR objective.

Clients/src/presentation/pages/Framework/index.tsx (1)

19-19: LGTM: Replaced MUI Edit with SVG ReactComponent

Import looks correct and consistent with the icon refactor.

Clients/src/presentation/components/Cards/RisksCard/index.tsx (1)

2-4: LGTM: Replaced MUI trend icons with SVGs

Imports look correct and scoped to the component.

Comment thread Clients/src/presentation/pages/Framework/index.tsx
@MuhammadKhalilzadeh MuhammadKhalilzadeh merged commit 4a6fcdb into develop Sep 25, 2025
2 checks passed
@MuhammadKhalilzadeh MuhammadKhalilzadeh deleted the ks-023-Sep-23-figma-icons-2047 branch September 25, 2025 14:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request frontend Frontend related tasks/issues

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Change all MUI icons to Figma icons

2 participants