fix: material icons font file by aaryan610 · Pull Request #8366 · makeplane/plane

aaryan610 · 2025-12-17T14:53:05Z

Description

This PR fixes the bug where material icon font file is not being loaded.

Type of Change

Bug fix (non-breaking change which fixes an issue)

Summary by CodeRabbit

Style
- Enhanced the publish project modal with refined button styling, including updated button sizes and border treatments on the unpublished info container and link action elements.
Chores
- Optimized Material Symbols Rounded font delivery by switching to self-hosted font files.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2025-12-17T14:53:21Z

Walkthrough

The changes migrate the Material Symbols Rounded font from an external package import to a local font-face definition, and apply styling updates to the publish-project modal component using updated design tokens (replacing bg-surface colors with bg-layer variants).

Changes

Cohort / File(s)	Change Summary
Font delivery updates `packages/tailwind-config/variables.css`, `packages/tailwind-config/fonts/LICENSE.txt`	Removes the `@fontsource/material-symbols-rounded/400.css` import and replaces it with a custom `@font-face` declaration referencing a local `material-symbols-rounded-v168-latin-regular.woff2` file. Adds a license file for the font asset.
Modal UI styling `apps/web/core/components/project/publish-project/modal.tsx`	Updates design token classes: replaces `bg-surface-2` with `bg-layer-3` and `bg-layer-3-hover` across interactive elements; changes unpublished info container from `bg-layer-1` to `border border-strong`; adds `size="lg"` to the Unpublish button.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Verify the local font file path and format are correct and accessible in packages/tailwind-config/fonts/
Confirm the @font-face declaration is syntactically valid and the woff2 file exists with the expected filename
Validate that the Material Symbols Rounded font renders correctly after the migration from the fontsource package
Review modal styling changes to ensure design token replacements align with the new design system

Poem

🐰 From fontsource to local we hop,
Our symbols rounded, our styles on top,
Layer by layer, the colors align,
A font file served with each perfect line! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: material icons font file' directly matches the main change in the changeset—replacing the Material Symbols Rounded font import with an explicit font-face declaration to fix a font loading bug.
Description check	✅ Passed	The description includes a brief explanation and correctly identifies the change type as a bug fix, but lacks Test Scenarios, Screenshots, and References sections recommended by the template.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch fix/material-font

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8b0a816 and 8341fdc.

⛔ Files ignored due to path filters (1)

packages/tailwind-config/fonts/material-symbols-rounded-v168-latin-regular.woff2 is excluded by !**/*.woff2

📒 Files selected for processing (3)

apps/web/core/components/project/publish-project/modal.tsx (3 hunks)
packages/tailwind-config/fonts/LICENSE.txt (1 hunks)
packages/tailwind-config/variables.css (1 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{js,jsx,ts,tsx,json,css}

📄 CodeRabbit inference engine (AGENTS.md)

Use Prettier with Tailwind plugin for code formatting, run pnpm fix:format

Files:

packages/tailwind-config/variables.css
apps/web/core/components/project/publish-project/modal.tsx

**/*.{ts,tsx,mts,cts}

📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)

**/*.{ts,tsx,mts,cts}: Use const type parameters for more precise literal inference in TypeScript 5.0+
Use the satisfies operator to validate types without widening them
Leverage inferred type predicates to reduce the need for explicit is return types in filter/check functions
Use NoInfer<T> utility to block inference for specific type arguments when they should be determined by other arguments
Utilize narrowing in switch(true) blocks for control flow analysis (TypeScript 5.3+)
Rely on narrowing from direct boolean comparisons for type guards
Trust preserved narrowing in closures when variables aren't modified after the check (TypeScript 5.4+)
Use constant indices to narrow object/array properties (TypeScript 5.5+)
Use standard ECMAScript decorators (Stage 3) instead of legacy experimentalDecorators
Use using declarations for explicit resource management with Disposable pattern instead of manual cleanup (TypeScript 5.2+)
Use with { type: "json" } for import attributes; avoid deprecated assert syntax (TypeScript 5.3/5.8+)
Use import type explicitly when importing types to ensure they are erased during compilation, respecting verbatimModuleSyntax flag
Use .ts, .mts, .cts extensions in import type statements (TypeScript 5.2+)
Use import type { Type } from "mod" with { "resolution-mode": "import" } for specific module resolution contexts (TypeScript 5.3+)
Use new iterator methods (map, filter, etc.) if targeting modern environments (TypeScript 5.6+)
Utilize new Set methods like union, intersection, etc., when available (TypeScript 5.5+)
Use Object.groupBy / Map.groupBy standard methods for grouping instead of external libraries (TypeScript 5.4+)
Use Promise.withResolvers() for creating promises with exposed resolve/reject functions (TypeScript 5.7+)
Use copying array methods (toSorted, toSpliced, with) for immutable array operations (TypeScript 5.2+)
Avoid accessing instance fields via super in classes (TypeScript 5....

Files:

apps/web/core/components/project/publish-project/modal.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Enable TypeScript strict mode and ensure all files are fully typed

Files:

apps/web/core/components/project/publish-project/modal.tsx

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{js,jsx,ts,tsx}: Use ESLint with shared config across packages, adhering to max warnings limits per package
Use camelCase for variable and function names, PascalCase for components and types
Use try-catch with proper error types and log errors appropriately

Files:

apps/web/core/components/project/publish-project/modal.tsx

🧠 Learnings (9)

📓 Common learnings

Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.581Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use `bg-surface-1`, `bg-surface-2`, or `bg-surface-3` for top-level containers that sit directly on the canvas, such as main content areas, page sections, or primary containers