feat: improve and align drop and drawer design #997
Conversation
JammingBen
force-pushed
the
feat/drop-and-drawer-design
branch
from
4b8d86d to
fe856fd
Compare
AlexAndBear
force-pushed
the
feat/drop-and-drawer-design
branch
from
11f0f20 to
984c571
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR improves and aligns the design of dropdown and drawer components by standardizing spacing, padding, and styling across various UI elements. The changes aim to create a more consistent user experience in menus, dropdowns, and navigation components.
- Standardized padding and margin for dropdown and drawer list items
- Removed component-specific styling in favor of centralized theme styling
- Updated test snapshots to reflect the new consistent styling
Reviewed Changes
Copilot reviewed 26 out of 27 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| helper.scss | Adds centralized styling for dropdown and drawer list items |
| OcDrop.vue | Removes component-specific menu item styling |
| OcBottomDrawer.vue | Updates padding and removes duplicate styling |
| UserMenu.vue | Removes icon padding and custom list styling |
| Notifications.vue | Updates overflow handling and spacing |
| ApplicationsMenu.vue | Simplifies styling with gap property |
| Multiple components | Removes component-specific styling in favor of centralized approach |
| Test snapshots | Updates to reflect new consistent styling |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
| .search-bar-filter-item { | ||
| justify-content: space-between !important; |
There was a problem hiding this comment.
Avoid using !important in CSS. Consider using more specific selectors or restructuring the CSS to achieve the desired styling without forcing precedence.
| .search-bar-filter-item { | |
| justify-content: space-between !important; | |
| .oc-location-search .search-bar-filter-item { | |
| justify-content: space-between; |
| button { | ||
| justify-content: space-between !important; |
There was a problem hiding this comment.
Avoid using !important in CSS. Consider using more specific selectors or restructuring the CSS to achieve the desired styling without forcing precedence.
| button { | |
| justify-content: space-between !important; | |
| > button { | |
| justify-content: space-between; |
| &:hover { | ||
| text-decoration: none; | ||
| } | ||
| gap: var(--oc-space-medium) !important; |
There was a problem hiding this comment.
Avoid using !important in CSS. Consider using more specific selectors or restructuring the CSS to achieve the desired styling without forcing precedence.
| .files-recipient-role-drop-btn { | ||
| justify-content: space-between !important; |
There was a problem hiding this comment.
Avoid using !important in CSS. Consider using more specific selectors or restructuring the CSS to achieve the desired styling without forcing precedence.
| .files-recipient-role-drop-btn { | |
| justify-content: space-between !important; | |
| .files-recipient-role-drop .files-recipient-role-drop-btn { | |
| justify-content: space-between; |
| .invite-form-share-role-type-item { | ||
| justify-content: space-between !important; |
There was a problem hiding this comment.
Avoid using !important in CSS. Consider using more specific selectors or restructuring the CSS to achieve the desired styling without forcing precedence.
| .invite-form-share-role-type-item { | |
| justify-content: space-between !important; | |
| #new-collaborators-form .invite-form-share-role-type-item { | |
| justify-content: space-between; |
| .action-menu-item { | ||
| padding-left: var(--oc-space-small) !important; | ||
| padding-right: var(--oc-space-small) !important; | ||
| padding: var(--oc-space-small); | ||
| gap: var(--oc-space-xsmall) !important; |
There was a problem hiding this comment.
Avoid using !important in CSS. Consider using more specific selectors or restructuring the CSS to achieve the desired styling without forcing precedence.
AlexAndBear
force-pushed
the
feat/drop-and-drawer-design
branch
from
b2e4579 to
d07357c
Compare
feat: improve and align drop and drawer design
Fixes #929