Skip to content

migrate SplashViz component to Tailwind CSSFeature/migrate splashviz tailwind #8128

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
NandakrishnaKukatla wants to merge 6 commits into from
Closed

migrate SplashViz component to Tailwind CSSFeature/migrate splashviz tailwind #8128

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5c7361c
migrate SplashViz component to Tailwind CSS
NandakrishnaKukatla Mar 27, 2026
08ab92d
Remove styling import from SplashViz component
NandakrishnaKukatla Mar 27, 2026
12b2e9c
Delete src/components/SplashViz/SplashViz.scss
NandakrishnaKukatla Mar 27, 2026
6dfb22a
Refactor SplashViz component structure and formatting
NandakrishnaKukatla Mar 27, 2026
e223533
Formatted SplashViz according to Prettier
NandakrishnaKukatla Mar 27, 2026
8fece76
Refactor SplashViz for better layout and responsiveness
NandakrishnaKukatla Mar 27, 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
17 changes: 11 additions & 6 deletions src/components/SplashViz/SplashViz.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,17 @@
import TextRotator from "../TextRotater/TextRotater.jsx";
import HomeSVG from "./SplashVizSVG.mjs";

// Load Styling
import "./SplashViz.scss";

Check failure on line 11 in src/components/SplashViz/SplashViz.jsx

View workflow job for this annotation

GitHub Actions / Lint (ubuntu-latest, lts/*) 

Delete `⏎`
export default class SplashViz extends Component {
render() {
return (
<section className="splash-viz dark:bg-gray-900!">
<h1 className="splash-viz__heading">
<section className="splash-viz relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16 bg-[#2b3a42] dark:bg-gray-900!

Check failure on line 15 in src/components/SplashViz/SplashViz.jsx

View workflow job for this annotation

GitHub Actions / Lint (ubuntu-latest, lts/*) 

Insert `⏎·······`
Copy link

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

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

p-4 pb-16 changes the effective bottom padding compared to the removed SCSS: in SplashViz.scss, padding-bottom: 4rem; is immediately overridden by padding: 1rem; (so bottom padding ends up 1rem). If the goal is a pixel-perfect migration, this should be reconciled (either drop pb-16 to match the old output, or adjust the old intent explicitly).

Suggested change
<section className="splash-viz relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16 bg-[#2b3a42] dark:bg-gray-900!
<section className="splash-viz relative grid grid-rows-[auto_1fr] overflow-hidden p-4 bg-[#2b3a42] dark:bg-gray-900!

Copilot uses AI. Check for mistakes.
h-[clamp(35rem,calc(100vh-80px),45rem)]
max-lg:h-[clamp(30rem,calc(100vh-80px),35rem)]
max-[425px]:min-h-[clamp(40rem,calc(100vh-80px),50rem)]">

Check failure on line 18 in src/components/SplashViz/SplashViz.jsx

View workflow job for this annotation

GitHub Actions / Lint (ubuntu-latest, lts/*) 

Delete `>`
Copy link

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

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

The calc() expressions inside the Tailwind arbitrary values omit required whitespace around the - operator (e.g., calc(100vh-80px)). In CSS, calc() operators must be surrounded by spaces, otherwise the whole calc()/clamp() declaration can be dropped, breaking the height/min-height rules.

Suggested change
h-[clamp(35rem,calc(100vh-80px),45rem)]
max-lg:h-[clamp(30rem,calc(100vh-80px),35rem)]
max-[425px]:min-h-[clamp(40rem,calc(100vh-80px),50rem)]">
h-[clamp(35rem,calc(100vh - 80px),45rem)]
max-lg:h-[clamp(30rem,calc(100vh - 80px),35rem)]
max-[425px]:min-h-[clamp(40rem,calc(100vh - 80px),50rem)]">

Copilot uses AI. Check for mistakes.

Check failure on line 19 in src/components/SplashViz/SplashViz.jsx

View workflow job for this annotation

GitHub Actions / Lint (ubuntu-latest, lts/*) 

Replace `··` with `>`
<h1 className="splash-viz__heading mt-[80px] row-start-1 row-end-2 text-center font-extralight text-white

Check failure on line 20 in src/components/SplashViz/SplashViz.jsx

View workflow job for this annotation

GitHub Actions / Lint (ubuntu-latest, lts/*) 

Insert `⏎·········`
text-[2rem] lg:text-[2.5rem] lg:mt-[90px]">

Check failure on line 21 in src/components/SplashViz/SplashViz.jsx

View workflow job for this annotation

GitHub Actions / Lint (ubuntu-latest, lts/*) 

Insert `⏎········`
Copy link

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

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

The responsive breakpoint for the heading was @include break in the removed SCSS, which maps to min-width: 768px ($screens.medium). The Tailwind classes use lg: (1024px), so the larger font size / 90px top margin will apply later than before; use the md: breakpoint if you want to preserve the original behavior.

Suggested change
text-[2rem] lg:text-[2.5rem] lg:mt-[90px]">
text-[2rem] md:text-[2.5rem] md:mt-[90px]">

Copilot uses AI. Check for mistakes.
<span> bundle your</span>
<TextRotator delay={5000} repeatDelay={5000} maxWidth={110}>
<span> assets </span>
Expand All @@ -24,12 +27,14 @@
<span> styles </span>
</TextRotator>
</h1>

<div
className="splash-viz__modules"
className="splash-viz__modules absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[1200px] m-auto -translate-x-1/2 -translate-y-1/2 hidden lg:block row-start-2 row-end-3"
Copy link

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

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

The .splash-viz__modules sizing/breakpoint doesn’t match the removed SCSS: @include break shows it at min-width: 768px (Tailwind md:), and max-width was $screens.medium (768px). The new hidden lg:block max-w-[1200px] will keep it hidden until 1024px and allow it to grow much wider than before, which changes layout on tablets/desktop.

Suggested change
className="splash-viz__modules absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[1200px] m-auto -translate-x-1/2 -translate-y-1/2 hidden lg:block row-start-2 row-end-3"
className="splash-viz__modules absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[768px] m-auto -translate-x-1/2 -translate-y-1/2 hidden md:block row-start-2 row-end-3"

Copilot uses AI. Check for mistakes.
dangerouslySetInnerHTML={{ __html: HomeSVG.body }}
></div>

<Cube
className="splash-viz__cube"
className="splash-viz__cube absolute inset-0 m-auto z-[1] row-start-2 row-end-3"
depth={120}
repeatDelay={5000}
continuous
Expand Down
74 changes: 0 additions & 74 deletions src/components/SplashViz/SplashViz.scss
View file
Open in desktop

This file was deleted.

Loading