sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Add CSS cascade layers for Compound, shared components, and app/web styles (#33302)

Browse Source 
* Layer Compound and shared component CSS

* Layer app theme CSS

* Remove !important flags from ActionBarView

* Remove unnecessary !important statements from shared components

* Avoid dead code errors for *.pcss just because layer is specified after @import url

* Remove unnecessary !important styling

* Override Banner defaults in RoomStatusBarView

* Updated snaps

* Updated snaps

* Fix styling of media body in app/web

* Fix styling for Compound anchors

* Fix styling issues in app/web

* More styling fixes

* Fix a problem extracting css for HTMLExport

* Revert changes

* Fix for theme styling

* Add test to improve coverage

* Prettier

* Fix styling issues

* Add data-kind attribute to avoid global styling override

* Update screenshot that now is correct

* Revert data-kind attribute

* Handle LinkPreview styling in .pcss

* Fix flaky test: Avoid racing the lazy-loaded ManageEventIndexDialog

* Take care of review comments

* Updated snaps

* Updated snaps again after merge

* Remove !important from RoomStatusBar
This commit is contained in:
rbondesson
2026-04-30 11:54:49 +00:00
committed by GitHub
parent f2d355bb2c
commit b0ee6f5323
46 changed files with 350 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.module.css
+2 -2
View File
@@ -6,6 +6,6 @@
*/
.button {
border-radius: 32px !important;
background-color: var(--cpd-color-bg-subtle-primary) !important;
border-radius: 32px;
background-color: var(--cpd-color-bg-subtle-primary);
}
packages/shared-components/src/room-list/RoomListHeaderView/menu/OptionMenuView.module.css
+1 -1
View File
@@ -7,5 +7,5 @@
.title {
/* For first title, there is already enough space at the top */
margin-top: 0 !important;
margin-top: 0;
}
packages/shared-components/src/room-list/RoomListSearchView/RoomListSearchView.module.css
+2 -3
View File
@@ -16,9 +16,8 @@
.search {
/* The search button should take all the remaining space */
flex: 1;
/* !important is needed to override compound button in EW */
font: var(--cpd-font-body-md-regular) !important;
color: var(--cpd-color-text-secondary) !important;
font: var(--cpd-font-body-md-regular);
color: var(--cpd-color-text-secondary);
min-width: 0;
svg {
packages/shared-components/src/room/RoomStatusBar/RoomStatusBarView.module.css
+8 -8
View File
@@ -7,18 +7,18 @@
.container {
color: var(--cpd-color-text-primary);
svg {
/* Ensure button icons are primary too */
color: var(--cpd-color-text-primary) !important;
}
}
.secondaryAction svg {
color: var(--cpd-color-text-secondary) !important;
.container svg {
color: var(--cpd-color-text-primary);
}
.primaryAction svg {
color: var(--cpd-color-text-on-solid-primary) !important;
.secondaryAction.secondaryAction[data-kind="secondary"] > svg {
color: var(--cpd-color-text-secondary);
}
.primaryAction.primaryAction[data-kind="primary"] > svg {
color: var(--cpd-color-text-on-solid-primary);
}
.title {
packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorContextMenuView.module.css
+5 -5
View File
@@ -6,15 +6,15 @@
*/
.picker_menu {
max-inline-size: none !important;
padding: 0 !important;
gap: 0 !important;
max-inline-size: none;
padding: 0;
gap: 0;
}
.picker_menu_item {
padding: var(--cpd-space-3x) var(--cpd-space-5x) !important;
padding: var(--cpd-space-3x) var(--cpd-space-5x);
}
.picker_separator {
margin-inline: 0 !important;
margin-inline: 0;
}
packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorDatePickerView.module.css
+6 -6
View File
@@ -6,15 +6,15 @@
*/
.picker_menu_item {
padding: var(--cpd-space-3x) var(--cpd-space-5x) !important;
padding: var(--cpd-space-3x) var(--cpd-space-5x);
}
.picker_form {
display: flex;
flex-direction: row !important;
flex-wrap: wrap !important;
padding: 0 !important;
gap: var(--cpd-space-2x) !important;
flex-direction: row;
flex-wrap: wrap;
padding: 0;
gap: var(--cpd-space-2x);
color: var(--cpd-color-text-primary);
font: var(--cpd-font-body-md-medium);
}
@@ -28,7 +28,7 @@
.picker_input_date {
font: inherit;
color-scheme: light;
padding: var(--cpd-space-2x) !important;
padding: var(--cpd-space-2x);
:global(.cpd-theme-dark) &,
:global(.cpd-theme-dark-hc) & {
packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.tsx
+9 -2
View File
@@ -25,7 +25,14 @@ export interface UrlPreviewGroupViewSnapshot {
}
export interface UrlPreviewGroupViewProps {
/**
* The view model for the component.
*/
vm: ViewModel<UrlPreviewGroupViewSnapshot> & UrlPreviewGroupViewActions;
/**
* Extra CSS classes to apply to the component.
*/
className?: string;
}
export interface UrlPreviewGroupViewActions {
@@ -42,7 +49,7 @@ export type UrlPreviewGroupViewModel = ViewModel<UrlPreviewGroupViewSnapshot, Ur
* The view lays out one or more link previews, can collapse or expand
* overflowed previews, and exposes a control to hide the group.
*/
export function UrlPreviewGroupView({ vm }: UrlPreviewGroupViewProps): JSX.Element | null {
export function UrlPreviewGroupView({ vm, className }: UrlPreviewGroupViewProps): JSX.Element | null {
const { translate: _t } = useI18n();
const { previews, totalPreviewCount, previewsLimited, overPreviewLimit, compactLayout } = useViewModel(vm);
if (previews.length === 0) {
@@ -61,7 +68,7 @@ export function UrlPreviewGroupView({ vm }: UrlPreviewGroupViewProps): JSX.Eleme
}
return (
<div className={styles.wrapper}>
<div className={classNames(className, styles.wrapper)}>
<div className={classNames(styles.previewGroup, compactLayout && styles.compactLayout)}>
{previews.map((preview) => (
<LinkPreview key={preview.link} onImageClick={() => vm.onImageClick(preview)} {...preview} />
packages/shared-components/src/room/timeline/event-tile/actions/ActionBarView/ActionBarView.module.css
+11 -11
View File
@@ -14,31 +14,31 @@
.toolbar_item {
align-items: center;
justify-content: center;
padding: 0 !important;
min-block-size: 0 !important;
padding: 0;
min-block-size: 0;
margin: 3px !important;
border-radius: 6px !important;
margin: 3px;
border-radius: 6px;
&:hover {
background-color: var(--cpd-color-bg-subtle-secondary) !important;
background-color: var(--cpd-color-bg-subtle-secondary);
z-index: 1;
}
}
.toolbar_item[data-presentation="icon"] {
block-size: 28px !important;
inline-size: 28px !important;
block-size: 28px;
inline-size: 28px;
color: var(--cpd-color-icon-secondary) !important;
color: var(--cpd-color-icon-secondary);
}
.toolbar_item[data-presentation="label"] {
padding-inline-start: var(--cpd-space-2x) !important;
padding-inline-end: var(--cpd-space-2x) !important;
padding-inline-start: var(--cpd-space-2x);
padding-inline-end: var(--cpd-space-2x);
font: var(--cpd-font-body-md-regular);
text-decoration: none !important;
text-decoration: none;
white-space: nowrap;
}
}
packages/shared-components/src/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.module.css
+2 -2
View File
@@ -6,8 +6,8 @@
*/
.audioPlayer {
padding: var(--cpd-space-4x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x) !important;
border-radius: 8px !important;
padding: var(--cpd-space-4x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x);
border-radius: 8px;
}
.mediaInfo {
packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/FileBodyView.module.css
+2 -3
View File
@@ -26,8 +26,8 @@
& button {
display: flex;
margin: 0 !important;
padding: 0 !important;
margin: 0;
padding: 0;
border: none;
width: 100%;
min-block-size: unset;
@@ -57,7 +57,6 @@
.content [data-type="download"] {
align-items: center;
color: var(--cpd-color-text-action-accent);
& iframe {
margin: 0;
packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.module.css
+1 -1
View File
@@ -6,7 +6,7 @@
*/
.content {
color: var(--cpd-color-text-secondary) !important; /* override anchor color */
color: var(--cpd-color-text-secondary); /* override anchor color */
font-size: var(--cpd-font-size-body-xs);
font-variant-numeric: tabular-nums;
display: inline-block;