Skip to content

refactor(Print): migrate Print component styles from SCSS to Tailwind CSS #8047 #8105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Deven14125 wants to merge 2 commits into from
Closed

refactor(Print): migrate Print component styles from SCSS to Tailwind CSS #8047 #8105

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4dcc7de
Use utility classes for Print component
Deven14125 Mar 23, 2026
50316b9
Merge branch 'main' into refactor-print-section
Deven14125 Mar 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions src/components/Print/Print.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import PropTypes from "prop-types";
import "./Print.scss";
import icon from "../../assets/icon-print.svg";
import BarIcon from "../../styles/icons/vertical-bar.svg";

Expand Down Expand Up @@ -40,14 +39,20 @@ export default function Print(props) {
fill="#175d96"
/>
<a
className="sidebar-item__title sidebar-link__print"
className="sidebar-item__title flex flex-nowrap items-center"
href={printUrl}
Comment on lines 41 to 43
Copy link

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

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

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.

Copilot uses AI. Check for mistakes.
rel="nofollow noopener noreferrer"
title="Print"
target="_blank"
>
Print Section
<img src={icon} width={27} height={20} alt="Printer Icon" />
<img
className="h-20 mr-0.5"
src={icon}
width={27}
height={20}
alt="Printer Icon"
Copy link

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

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

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.

Copilot uses AI. Check for mistakes.
/>
</a>
</div>
);
Expand Down
10 changes: 0 additions & 10 deletions src/components/Print/Print.scss
View file
Open in desktop

This file was deleted.

Loading