refactor: prepare for tailwind v4 #11500
Conversation
WalkthroughThis pull request eliminates the use of Tailwind CSS utility classes by removing all instances of the Changes
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (17)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for koda-canary ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Deploying koda-art-prod with
|
| Latest commit: |
de4935a
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://cd27e95e.kodaart-production.pages.dev |
| Branch Preview URL: | https://refactor--prepare-for-tailwi.kodaart-production.pages.dev |
preschian
requested review from
vikiival,
Jarsen136 and
hassnian
and removed request for
a team
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (21)
assets/styles/pages/create.scss (1)
9-16: Border Property Ordering in.form-addons
The explicit conversion to standard CSS properties is clear, but note thatborder-left: none;is declared before the shorthandborder: 1px solid var(--card-border-color);. Because the shorthand resets all four sides, the intended removal of the left border may be negated. If your intent is to remove the left border, consider placing theborder-left: none;declaration after the fullborderproperty..form-addons { text-align: center; line-height: 3rem; height: 3rem; width: 4rem; - border-left: none; - border: 1px solid var(--card-border-color); + border: 1px solid var(--card-border-color); + border-left: none; }assets/styles/components/_carousel.scss (1)
57-62: Explicit.dotStyling in Carousel
The.dotclass now clearly defines its dimensions, cursor, margin, padding, and border properties. This makes the styling self-contained and easier to adjust. Ensure these values are in line with the design system across the application.assets/styles/components/_carousel-arrows.scss (1)
90-93: Consistent Styling for Small-Size Arrows
The explicit properties added for the.arrow-small-size .arrowclass (position, transform, cursor, top) mirror the main arrow styles. This consistency is good; consider whether a shared mixin could further reduce duplication if similar styling is used elsewhere.assets/styles/components/_search.scss (8)
6-12: Explicit Properties in.search-bar-collection-searchReplaced Tailwind utility classes with direct CSS values (e.g.
z-index,position,height, etc.). The values seem intentional and clear. Please verify that these explicit measurements (such asheight: 1.5remand positional offsets) align with the design specifications.
15-17: Explicit Sizing for Inner<span>in.search-bar-collection-searchThe
<span>now directly definesheight,padding, andborder-radius. These clear declarations improve maintainability compared to utility classes. Double-check that theborder-radius: 4remproduces the intended fully rounded appearance.
23-28: Direct Positioning in.search-bar-bgThe conversion from utility classes to explicit CSS (with properties like
position: absolute, full width/height, and preciseleft/topoffsets) is well executed. Ensure the slight offset values (0.25rem) are consistent with the overall spacing logic.
33-38: Clear Declaration in.search-bar-keyboard-iconThe explicit styles—such as
z-index: 2, absolute positioning, and pixel-based dimensions—effectively replace the Tailwind classes. Confirm that the mix ofpx(e.g.height: 23px) andremunits elsewhere meets the project's design consistency.
53-53: Setz-indexfor.gallery-searchAssigning
z-index: 1directly is straightforward. This clear declaration helps control stacking context without relying on a utility class.
64-69: Explicit Input Styling in.gallery-search inputThe input now uses explicit values for
height,padding, andborder-radius. While the values are clear, note that the padding is specified in pixels (42px,50px), whereas other dimensions userem. Consider whether consistent unit usage (e.g. converting padding torem) could enhance scalability.
119-119: Cursor Declaration in.link-itemThe change to
cursor: pointer;replaces the Tailwind cursor utility. This explicit declaration is clear and improves the code’s self-documentation.
171-171: Enabling Pointer Interaction for.search-historyAdding
cursor: pointer;for.search-historyitems reinforces the interactive intent. This explicit style aligns well with the refactoring objective.assets/styles/layouts/_main-navigation.scss (10)
68-72: Refined Fullpage Navbar Item StylingExplicitly setting
position: fixed,height: 100vh,width: 100%, andz-index: 100for the&--fullpageclass replaces the previous utility classes effectively. Verify that these values ensure the full-page overlay behaves as intended on all devices.
105-111: Explicit Button Styles for Connect WalletThe
.button-connect-walletnow clearly defines properties such aswidth,height,display,text-transform,margin, andborder-radius. This improves clarity over prior utility abstractions. Confirm that the fixed dimensions (e.g.height: 67px) align with responsive design expectations.
153-153: Directz-indexSetting on.navbarReplacing a Tailwind utility class with
z-index: 999 !important;provides a clear stacking order for the navbar. Ensure this highz-indexdoes not inadvertently overlap other elements.
183-188: Navbar Item Styling AdjustmentsThe explicit declarations for
text-transform: capitalize,font-weight: normal,cursor: pointer, andborder-radius: 0 !importanton.navbar-itemremove ambiguity from utility classes. These changes improve readability; however, double-check that resetting the border-radius does not conflict with any desired rounded corners elsewhere in the design.
241-242: Avatar Icon Border RadiusSpecifying
border-radius: 24.5px;directly for&__avatar-iconis clear and intentional. Just verify that this value produces the expected circular appearance across different screen resolutions.
246-246: Button Border Radius CorrectionRemoving border radius on buttons with
border-radius: 0;in.button.is-bordered-lightis a straightforward change. Ensure consistency with similar buttons throughout the codebase.
258-259: Explicit Cursor for Navbar Menu ItemDeclaring
cursor: pointer;in.menu-itemreinforces interactivity. This replacement of the Tailwind cursor utility is clear.
274-275: Disabled Menu Item InteractionThe change
cursor: not-allowed;for.menu-item.is-disabledclearly communicates the disabled state. This explicit declaration improves accessibility cues.
282-289: Fixed Stack Container StylingThe explicit properties for
.fixed-stack—includingbox-sizing: border-box,position: fixed, full width, precisez-index,overflow: hidden,border-radius: 0, and positioning—make the intent unmistakable. This robust declaration helps isolate the element, though please verify that these fixed styles do not limit future flexibility in layout adjustments.
312-314: Cancel Button Styling RefinementsThe clear definition for
.cancel-btnwithcursor: pointer,text-transform: capitalize, andborder: nonereplaces Tailwind utilities and improves readability. This explicit style is well aligned with the refactoring goals.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (17)
assets/styles/abstracts/_animations.scss(1 hunks)assets/styles/components/_card.scss(1 hunks)assets/styles/components/_carousel-arrows.scss(2 hunks)assets/styles/components/_carousel.scss(1 hunks)assets/styles/components/_collection-card.scss(4 hunks)assets/styles/components/_connect-wallet.scss(3 hunks)assets/styles/components/_gallery-item.scss(2 hunks)assets/styles/components/_keyboard-shortcut.scss(1 hunks)assets/styles/components/_modal.scss(1 hunks)assets/styles/components/_nft-card.scss(3 hunks)assets/styles/components/_search.scss(5 hunks)assets/styles/components/_tippy.scss(1 hunks)assets/styles/components/_toast.scss(1 hunks)assets/styles/global.scss(4 hunks)assets/styles/layouts/_footer.scss(5 hunks)assets/styles/layouts/_main-navigation.scss(8 hunks)assets/styles/pages/create.scss(1 hunks)
🔇 Additional comments (24)
assets/styles/components/_card.scss (1)
8-9: Explicit Styling for Bordered Card
Replacing the Tailwind utility classes with explicit CSS properties (border-radius: 0.25rem;andbox-shadow: none;) improves clarity and maintainability. Ensure that this explicit definition is consistent with similar components (e.g., where!importantmay have been used) if there’s an intentional override.assets/styles/abstracts/_animations.scss (1)
97-100: Clear Removal of @apply in.dotsClass
Switching from@apply text-center inline-block;to explicit declarations (text-align: center;anddisplay: inline-block;) enhances readability and avoids potential conflicts with Tailwind v4.assets/styles/components/_modal.scss (1)
1-3: Explicit z-index Declaration for Active Modal
Replacing@apply z-[998]withz-index: 998;results in clearer and more maintainable styling. Verify that this hardcoded value fits with the overall modal stacking strategy in the project.assets/styles/components/_gallery-item.scss (2)
3-3: Consistent Avatar Styling
Replacing the utility class for a rounded avatar withborder-radius: 50%;is a clean, explicit declaration that better communicates the intended design.
63-63: Explicit Cursor Styling for Tooltip
Usingcursor: pointer;directly in.buy-tooltip areinforces the interactive behavior without relying on utility classes.assets/styles/components/_toast.scss (1)
7-12: Refined Snackbar Styling
Replacing the Tailwind@applydirective with explicit CSS properties (display: inline-flex;,align-items: center;,justify-content: space-around;,min-height: 3em;,pointer-events: auto;, andmargin: 0.5em 0;) makes the styling more transparent and maintainable.assets/styles/components/_keyboard-shortcut.scss (1)
6-13: Refined Explicit CSS for Keyboard Shortcut
Replacing the@applydirective with explicit CSS properties (e.g.,display: inline-block;,font-weight: bold;,line-height: 1;, etc.) improves clarity and control over the styling. The changes are succinct and align with the overall refactoring approach.assets/styles/components/_tippy.scss (1)
4-6: Explicit Styling for Tippy Tooltip
The removal of the@applydirective in favor of explicit declarations (display: inline-block;,text-align: left;, andpadding: 0;) is straightforward and consistent with the broader refactoring effort.assets/styles/components/_nft-card.scss (3)
2-5: Clear Refactoring of.nft-cardStyling
Converting from Tailwind utility classes to explicit properties forposition,height,background-color, andborderenhances readability and maintainability. The property values look appropriate for establishing the card’s layout.
33-37: Ensuring Correct Stacking for Hover Elements
Addingz-index: 10;to the.show-on-hoverand.show-alwayselements ensures they appear above other content when visible. Verify that this stacking order meshes well with other components within the card to avoid any unintended overlap issues.
62-66: Explicit Positioning for.card-icon
The updated explicit declarations (position: absolute;,z-index: 1;,right: 1rem;, andtop: 1rem;) improve clarity. Double-check that thez-indexvalue aligns with the desired visual stacking relative to other elements (e.g., hover indicators) within the card.assets/styles/components/_carousel-arrows.scss (1)
7-10: Explicit CSS Declarations for Arrow Base Styles
Replacing the Tailwind@applydirectives with explicit CSS properties improves clarity. The new declarations (position, transform, cursor, top) are clear and align well with the intended design.assets/styles/components/_collection-card.scss (4)
3-4: Direct Replacement of Utility Classes for Box-Shadow and Border Radius
Removing@applyforshadow-noneandrounded-nonein favor ofbox-shadow: none;andborder-radius: 0;is straightforward and improves maintainability.
15-17: Cursor Style for Interactive State
Explicitly definingcursor: pointer;for non-loading states enhances the component’s interactivity clarity. Ensure that this behavior is consistent with other interactive components in the codebase.
57-64: Pseudo-Element Styling with Explicit Properties
The replacement of@applyin the pseudo-elements with properties such ascontent,position,width,height,z-index,left, andtopis well executed. This explicit declaration improves the readability of the CSS.
73-80: Detailed Text Styling in the&__nameClass
Replacing the utility class with properties for text-overflow, font-weight, font-size, overflow, white-space, and padding clarifies the intent and simplifies future adjustments.assets/styles/components/_connect-wallet.scss (1)
64-68: Explicit Button Styling in Wallet Menu Items
Using explicit CSS for the button within.wallet-menu-item(width, font-size, border-radius, border, and transition) is a clean replacement for the previous@applyusage. This approach increases style clarity; please verify that these settings harmonize with the rest of the UI's button styles.assets/styles/global.scss (2)
29-35: Clear Definition of Body and Anchor Styles
The conversion from@apply text-text-colorto directly usingcolor: var(--text-color);(and similarly for anchors with hover state) improves transparency. This explicit styling makes it easier to see how colors are applied throughout the app.
100-103: Explicit Ellipsis Styling for Text Overflow
The.is-ellipsisclass now explicitly declaresoverflow,white-space, andtext-overflow, which removes ambiguity that stems from utility classes. This change aids in understanding and future modifications.assets/styles/layouts/_footer.scss (5)
12-14: Simplified Container Styling
Replacing Tailwind’s@applyforz-[1]andgap-[30px]withz-index: 1;andgap: 30px;in the.containerclass is clean and easy to follow. This refactor directly communicates the intended layout behavior.
32-34: Clear Styling for Inner Footer Elements
The.footer-container-innerblock now explicitly definesz-index,position, andgap, which improves clarity over previous utility class usage. The use of explicit properties here benefits future maintenance and potential debugging.
81-85: Responsive Social Icons List Styling
The converted styles for the&-socials-list—includingcursor,display,flex-wrap, andgap—offer a clear and maintainable approach compared to the previous@applyusage. Ensure these values align with the overall design responsiveness.
104-109: Custom Substack Widget Flex Layout
The replacement of the@applydirective with explicit flex properties (display, flex-direction, flex-wrap, height, border-radius) in the#custom-substack-embed .custom-substack-widgetblock is effective. This approach makes the component’s layout intentions obvious.
119-126: Detailed Input Styling within the Substack Widget
The explicit definition of font weight, font size, line height, padding, and border-radius for inputs within the custom substack widget increases clarity. This change ensures that input elements are styled precisely as desired without reliance on Tailwind’s abstraction.
|
Thank you for your contribution to the Koda - Generative Art Marketplace.
👇 __ Let's make a quick check before the contribution.
PR Type
Context
Summary by CodeRabbit