From 39a56adfb99c63114545130e39af16e3a861928e Mon Sep 17 00:00:00 2001 From: Shea Date: Sun, 28 Jun 2026 19:10:56 +0300 Subject: [PATCH] fix gradient themes Signed-off-by: Shea --- .changeset/fix-gradient-themes.md | 5 +++++ src/app/components/editor/Editor.tsx | 1 + src/app/components/user-profile/UserHero.tsx | 2 +- src/app/components/user-profile/styles.css.ts | 1 + src/app/features/room/RoomInput.tsx | 6 ++++++ src/app/features/room/RoomTimeline.css.ts | 2 ++ src/app/features/room/RoomView.tsx | 2 +- src/app/features/room/RoomViewFollowing.css.ts | 1 - src/app/pages/client/space/Space.tsx | 2 +- src/app/pages/client/space/styles.css.ts | 2 +- 10 files changed, 19 insertions(+), 5 deletions(-) create mode 100644 .changeset/fix-gradient-themes.md diff --git a/.changeset/fix-gradient-themes.md b/.changeset/fix-gradient-themes.md new file mode 100644 index 000000000..0b5dd87bd --- /dev/null +++ b/.changeset/fix-gradient-themes.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Fix codebase issues with gadient themes diff --git a/src/app/components/editor/Editor.tsx b/src/app/components/editor/Editor.tsx index e76cce520..0a61c2cad 100644 --- a/src/app/components/editor/Editor.tsx +++ b/src/app/components/editor/Editor.tsx @@ -444,6 +444,7 @@ export const CustomEditor = forwardRef( onBlur={() => { if (mobileOrTablet()) ReactEditor.focus(editor); }} + style={{ boxShadow: 'none' }} /> {(hasAfter || showResponsiveAfterInline) && ( diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx index eaf56ac9d..ebcc0b109 100644 --- a/src/app/components/user-profile/UserHero.tsx +++ b/src/app/components/user-profile/UserHero.tsx @@ -279,7 +279,7 @@ export function UserHeroName({ displayName, userId, server, customHeroCards }: U } else isSuccess.current = false; setCopied(); }} - style={{ backgroundColor: '#0000', padding: '0' }} + style={{ backgroundColor: 'transparent', padding: '0' }} onPointerEnter={() => setIsHovered(true)} onPointerLeave={() => setIsHovered(false)} before={`@${username}`} diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts index e7283d43b..9d47b7fbe 100644 --- a/src/app/components/user-profile/styles.css.ts +++ b/src/app/components/user-profile/styles.css.ts @@ -45,6 +45,7 @@ export const UserAvatarContainer = style({ top: 0, transform: 'translateY(-50%)', backgroundColor: color.Surface.Container, + borderRadius: config.borderWidth.B400, }); export const UserHeroStatusContainer = style({ position: 'relative', diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx index f3897edc1..de44c29b7 100644 --- a/src/app/features/room/RoomInput.tsx +++ b/src/app/features/room/RoomInput.tsx @@ -1611,6 +1611,7 @@ export const RoomInput = forwardRef( variant="SurfaceVariant" size="300" radii="300" + style={{ backgroundColor: 'transparent' }} title={editorOldAddFile ? 'Upload File' : 'Add'} aria-label={editorOldAddFile ? 'Upload and attach a File' : 'Add new Item'} > @@ -1628,6 +1629,7 @@ export const RoomInput = forwardRef( radii="300" title={showAudioRecorder ? 'Stop recording' : 'Record audio message'} aria-label={showAudioRecorder ? 'Stop recording' : 'Record audio message'} + style={{ backgroundColor: 'transparent' }} aria-pressed={showAudioRecorder} onClick={() => { if (mobileOrTablet() && !showAudioRecorder) return; @@ -1717,6 +1719,7 @@ export const RoomInput = forwardRef( variant="SurfaceVariant" size="300" radii="300" + style={{ backgroundColor: 'transparent' }} title="open sticker picker" aria-label="Open sticker picker" > @@ -1734,6 +1737,7 @@ export const RoomInput = forwardRef( variant="SurfaceVariant" size="300" radii="300" + style={{ backgroundColor: 'transparent' }} title="open emoji picker" aria-label="Open emoji picker" > @@ -1797,6 +1801,7 @@ export const RoomInput = forwardRef( { if (isLongPress.current) { isLongPress.current = false; @@ -1841,6 +1846,7 @@ export const RoomInput = forwardRef( title="Schedule Message" aria-label="Schedule message send" variant={scheduledTime ? 'Primary' : 'SurfaceVariant'} + style={{ backgroundColor: 'transparent' }} size="300" radii="0" className={css.SplitChevronButton} diff --git a/src/app/features/room/RoomTimeline.css.ts b/src/app/features/room/RoomTimeline.css.ts index 9903033dc..4236685e9 100644 --- a/src/app/features/room/RoomTimeline.css.ts +++ b/src/app/features/room/RoomTimeline.css.ts @@ -12,6 +12,8 @@ export const TimelineFloat = recipe({ transform: 'translateX(-50%)', zIndex: 10, minWidth: 'max-content', + overflow: 'hidden', + borderRadius: config.radii.Pill, }, ], variants: { diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx index a5329bed4..c22cce06e 100644 --- a/src/app/features/room/RoomView.tsx +++ b/src/app/features/room/RoomView.tsx @@ -195,8 +195,8 @@ export function RoomView({ eventId }: { eventId?: string }) { )} )} + {hideReads ? : } - {hideReads ? : } diff --git a/src/app/features/room/RoomViewFollowing.css.ts b/src/app/features/room/RoomViewFollowing.css.ts index 3f7bee353..7b8f2a489 100644 --- a/src/app/features/room/RoomViewFollowing.css.ts +++ b/src/app/features/room/RoomViewFollowing.css.ts @@ -16,7 +16,6 @@ export const RoomViewFollowing = recipe({ minHeight: toRem(28), padding: `0 ${config.space.S400}`, width: '100%', - backgroundColor: color.Surface.Container, color: color.Surface.OnContainer, outline: 'none', userSelect: 'none', diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx index 60aefa740..48698d921 100644 --- a/src/app/pages/client/space/Space.tsx +++ b/src/app/pages/client/space/Space.tsx @@ -334,7 +334,7 @@ function SpaceHeader({ hideText, mx }: { hideText?: boolean; mx: MatrixClient }) {composerIcon(DotsThreeOutlineVerticalIcon, { diff --git a/src/app/pages/client/space/styles.css.ts b/src/app/pages/client/space/styles.css.ts index bef019ba2..dc81e2c51 100644 --- a/src/app/pages/client/space/styles.css.ts +++ b/src/app/pages/client/space/styles.css.ts @@ -8,7 +8,7 @@ export const RoomCoverNavContainer = style({ width: '100%', zIndex: '100', top: '0', - background: 'linear-gradient(180deg, #000 0%, #0000 100%)', + background: 'linear-gradient(180deg, #000 0%, transparent 100%)', }); export const RoomCoverlessNavContainer = recipe({ base: {