refactor: box-shadow, opacity, filter and pointer-event to tailwind #1142
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR refactors CSS properties (box-shadow, opacity, filter, and pointer-events) to use Tailwind classes instead of custom CSS in the OpenCloud web components.
- Migrates
oc-box-shadow-mediumutility class toshadow-md/20Tailwind equivalents - Replaces custom opacity and filter CSS properties with Tailwind classes
- Converts pointer-events CSS properties to Tailwind utilities
- Removes associated custom CSS/SCSS styles and moves some styles to Tailwind layer utilities
Reviewed Changes
Copilot reviewed 70 out of 70 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/web-runtime/src/components/ | Updated upload info, notifications, and sidebar components to use Tailwind shadow and opacity classes |
| packages/web-pkg/src/components/ | Migrated file list components, filters, and other UI elements to Tailwind utilities |
| packages/web-app-*/src/ | Updated app-specific components to use Tailwind instead of custom CSS |
| packages/design-system/src/ | Replaced design system component styles with Tailwind equivalents and moved focus styles to layer utilities |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| &::before { | ||
| box-shadow: rgb(0 0 0 / 25%) 0px 0px 2px 1px; | ||
| border-radius: 50%; | ||
| content: ''; | ||
| transition: transform 0.25s; |
There was a problem hiding this comment.
[nitpick] The box-shadow property was removed but the &::before pseudo-element styling remains. Consider if this CSS could also be migrated to Tailwind classes for consistency with the migration effort.
There was a problem hiding this comment.
I removed this intentionally because IMO it's not good/necessary.
| #clipboard-btns.disabled { | ||
| opacity: 0.6; | ||
| button { | ||
| opacity: 1; | ||
| } | ||
| } | ||
There was a problem hiding this comment.
Removed because I don't see how the div gets a disabled class. Still looks good in UI.
| .state-trashed { | ||
| .tile-preview, | ||
| .tile-default-image > svg { | ||
| filter: grayscale(100%); | ||
| opacity: 80%; | ||
| } | ||
| } |
There was a problem hiding this comment.
This is now being handled in the ResourceTile component where it belongs.
| active: isPreviewElementActive(providerSearchResultValue.id) | ||
| }" | ||
| class="preview flex items-center py-1 px-2 text-sm min-h-10" | ||
| class="preview flex items-center py-1 px-2 text-sm min-h-10 [&.disabled]:opacity-70 [&.disabled]:grayscale-60 [&.disabled]:pointer-events-none" |
There was a problem hiding this comment.
Again I don't know how this div is supposed to get a disabled class. Couldn't really test it though, so I left it for now.
| const iconTypeClass = computed(() => { | ||
| if (unref(isDisabledSpace)) { | ||
| return 'oc-resource-icon-space-disabled' | ||
| } | ||
| if (unref(isSpace)) { | ||
| return 'oc-resource-icon-space' | ||
| } | ||
| if (unref(isFolder)) { | ||
| return 'oc-resource-icon-folder' | ||
| } | ||
| return 'oc-resource-icon-file' | ||
| }) |
There was a problem hiding this comment.
No need to set all these classes, the few Tailwind classes above are sufficient.
| &::before { | ||
| box-shadow: rgb(0 0 0 / 25%) 0px 0px 2px 1px; | ||
| border-radius: 50%; | ||
| content: ''; | ||
| transition: transform 0.25s; |
There was a problem hiding this comment.
I removed this intentionally because IMO it's not good/necessary.
JammingBen
force-pushed
the
refactor/box-shadow-to-tailwind
branch
2 times, most recently
from
2b3c12f to
7c4ce8b
Compare
JammingBen
force-pushed
the
refactor/box-shadow-to-tailwind
branch
from
7c4ce8b to
afc593d
Compare
| isHighlighted(item) ? 'oc-table-highlighted' : undefined, | ||
| isDisabled(item) ? 'oc-table-disabled' : undefined | ||
| ...(isDisabled(item) | ||
| ? ['oc-table-disabled', 'opacity-70', 'pointer-events-none', 'grayscale-60'] |
There was a problem hiding this comment.
Do we need the oc-table-disabled class as selector for tests? Because you deleted the scss-class, so you could remove it here.
There was a problem hiding this comment.
A composable for the keyboard actions does something with it. I guess it skips a disabled file based on this class.
…lwind refactor: box-shadow, opacity, filter and pointer-event to tailwind
refs #937
Migration
We only have one
oc-utility class here:oc-box-shadow-medium>shadow-md/20(roughly - best to try out some values)