Ks 030 oct 01 figma icons 2047

[solan117]

Describe your changes

refactor(icons): replace MUI icons in PolicyDetailsModal and RichTextEditor with custom SVGs

• Replaced @mui/icons-material icons (FormatBold, FormatItalic, FormatUnderlined, FormatQuote, LooksOne, LooksTwo, Looks3, FormatListBulleted, FormatListNumbered) with respective custom SVGs.
• Updated imports for seamless integration.

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.

[coderabbitai]

Walkthrough

Replaces Material‑UI icon imports with local SVG ReactComponent icons in two UI components; no behavior, API, or toolbar action logic changed.

Changes

Cohort / File(s)	Summary
Icon source migration (MUI -> local SVG) Clients/src/presentation/components/Policies/PolicyDetailsModal.tsx, Clients/src/presentation/components/RichTextEditor/index.tsx	Replaced @mui/icons-material imports with local SVG ReactComponent imports (e.g., LooksOne/Two/Three → local SVGs; FormatBold/Italic/ListBulleted/ListNumbered → local SVGs). Toolbar wiring and formatting actions remained unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Ks 029 sep 30 figma icons 2047 #2261 — Same pattern replacing @mui/icons-material imports with local SVG ReactComponents across UI components.
• Ks 018 sep 18 figma icons 2047 #2165 — Contains overlapping edits swapping MUI icons for local SVGs in editor/toolbar components.
• Ks 027 sep 29 figma icons 2047 #2243 — Broad migration of Material‑UI icons to project SVG ReactComponents in presentation components.

Suggested reviewers

• MuhammadKhalilzadeh

Poem

I nibble through the icon stack,
swapping MUI for SVGs in a snap.
Toolbar sprites now light and small,
pixels hop — one, two, three — they all.
Happy rabbit, code aligned,
UI gleams, carrot-tuned and kind 🥕🐇

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Title Check	⚠️ Warning	The pull request title “Ks 030 oct 01 figma icons 2047” includes noise like a ticket code and date and does not clearly convey the primary change of replacing MUI icons with Figma-provided SVGs, so it is not concise or descriptive.	Rename the title to directly summarize the main change, for example: “Refactor PolicyDetailsModal and RichTextEditor to use Figma SVG icons” so it clearly conveys the purpose of the PR.
Linked Issues Check	⚠️ Warning	The PR addresses replacing MUI icons in two specific components but does not cover all pages or buttons across the VerifyWise dashboard as required by issue #2047, nor does it document adherence to the outlined Figma styling for all icon variants.	Expand the changes to replace MUI icons in all relevant dashboard pages and buttons, ensure the SVGs match the Figma-specified outline style, and update documentation or examples to demonstrate standard icon usage across the application.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Out of Scope Changes Check	✅ Passed	All modifications are limited to replacing icon imports in PolicyDetailsModal and RichTextEditor and there are no unrelated or out-of-scope changes.
Description Check	✅ Passed	The description follows the repository template with clear “Describe your changes” and “Fixes #2047” sections and a completed checklist, only missing the screenshot or video for the UI changes item; otherwise it is structured and informative.
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-030-Oct-01-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 2940dcc and c207dae.

📒 Files selected for processing (1)

• Clients/src/presentation/components/Policies/PolicyDetailsModal.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• Clients/src/presentation/components/Policies/PolicyDetailsModal.tsx

---

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

🧹 Nitpick comments (2)

Clients/src/presentation/components/RichTextEditor/index.tsx (2)

5-8: Consider centralizing shared icon imports to reduce duplication.

Both PolicyDetailsModal.tsx and RichTextEditor/index.tsx import FormatBold and FormatItalic from the same SVG sources. Consider creating a centralized icon export file (e.g., assets/icons/index.ts) to export all custom icons, reducing import duplication and improving maintainability.

Example centralized icon file (Clients/src/presentation/assets/icons/index.ts):

export { ReactComponent as FormatBold } from "./formatBold.svg";
export { ReactComponent as FormatItalic } from "./formatItalic.svg";
export { ReactComponent as FormatUnderlined } from "./formatUnderlined.svg";
export { ReactComponent as FormatQuote } from "./formatQuote.svg";
export { ReactComponent as FormatListBulleted } from "./formatListBulleted.svg";
export { ReactComponent as FormatListNumbered } from "./formatListNumbered.svg";
export { ReactComponent as LooksOne } from "./one.svg";
export { ReactComponent as LooksTwo } from "./two.svg";
export { ReactComponent as LooksThree } from "./three.svg";

Then imports would simplify to:

import { FormatBold, FormatItalic, FormatListBulleted, FormatListNumbered } from "../../assets/icons";

---

5-8: Approve SVG icon imports.
All SVG icon files exist and are imported correctly, and their usage in the toolbar is confirmed.
Optionally, consolidate these icon exports into a shared module (e.g., an icons/index.ts) to reduce duplication across components.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 94a1088 and 2940dcc.

⛔ Files ignored due to path filters (9)

• Clients/src/presentation/assets/icons/formatBold.svg is excluded by !**/*.svg
• Clients/src/presentation/assets/icons/formatItalic.svg is excluded by !**/*.svg
• Clients/src/presentation/assets/icons/formatListBulleted.svg is excluded by !**/*.svg
• Clients/src/presentation/assets/icons/formatListNumbered.svg is excluded by !**/*.svg
• Clients/src/presentation/assets/icons/formatQuote.svg is excluded by !**/*.svg
• Clients/src/presentation/assets/icons/formatUnderlined.svg is excluded by !**/*.svg
• Clients/src/presentation/assets/icons/one.svg is excluded by !**/*.svg
• Clients/src/presentation/assets/icons/three.svg is excluded by !**/*.svg
• Clients/src/presentation/assets/icons/two.svg is excluded by !**/*.svg

📒 Files selected for processing (2)

• Clients/src/presentation/components/Policies/PolicyDetailsModal.tsx (1 hunks)
• Clients/src/presentation/components/RichTextEditor/index.tsx (1 hunks)

🔇 Additional comments (1)

Clients/src/presentation/components/Policies/PolicyDetailsModal.tsx (1)

17-23: SVG icon imports verified; files exist in Clients/src/presentation/assets/icons. Proceed with visual QA or include snapshot tests to confirm each icon renders with the expected styling from Figma.