refactor(Print): migrate Print component styles from SCSS to Tailwind CSS #8047#8105
refactor(Print): migrate Print component styles from SCSS to Tailwind CSS #8047#8105Deven14125 wants to merge 2 commits intowebpack:mainfrom
Conversation
Remove the Print.scss stylesheet and its import, switching the Print component to utility CSS classes instead. Replaced the sidebar-link__print class with 'flex flex-nowrap items-center' and added image classes ('h-20 mr-0.5') to preserve layout/spacing. This migrates styling to utility-first classes (e.g., Tailwind) and deletes the now-unused SCSS file.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR migrates the Print sidebar component’s styling from a dedicated SCSS file to inline Tailwind utility classes, as part of the broader SCSS → Tailwind migration across the codebase.
Changes:
- Removed
Print.scssand its import from thePrintcomponent. - Replaced the previous
.sidebar-link__printSCSS-driven layout with Tailwind flex/alignment/spacing utilities. - Added Tailwind sizing/spacing utilities to the print icon
<img>.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
src/components/Print/Print.scss |
Deletes the component-specific SCSS rules for the print sidebar link. |
src/components/Print/Print.jsx |
Removes the SCSS import and applies Tailwind classes for layout and icon spacing/sizing. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <img | ||
| className="h-20 mr-0.5" | ||
| src={icon} | ||
| width={27} | ||
| height={20} | ||
| alt="Printer Icon" |
There was a problem hiding this comment.
The Tailwind class h-20 sets height to 5rem (80px), which doesn’t match the previous SCSS height: 20px and also conflicts with the height={20} attribute. Use a 20px-equivalent utility (e.g., h-5 or an arbitrary value like h-[20px]) to avoid oversized/distorted rendering.
| <a | ||
| className="sidebar-item__title sidebar-link__print" | ||
| className="sidebar-item__title flex flex-nowrap items-center" | ||
| href={printUrl} |
There was a problem hiding this comment.
PR description mentions maintaining the existing class structure to avoid breaking global styles, but this change removes the sidebar-link__print class from the anchor. If backward compatibility is still a goal, consider keeping that class (even if styling moves to Tailwind), or update the PR description to reflect the change.
Deven14125
changed the title
|
Looks like already fixed |
Part of #8047
Description
This PR migrates the Print component styles from SCSS to Tailwind CSS.
Changes Made
Print.scssfile and its importTesting
Notes