Fix gradient theme base issues

.changeset/fix-gradient-themes.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix codebase issues with gadient themes

src/app/components/editor/Editor.tsx

@@ -444,6 +444,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
                 onBlur={() => {
                   if (mobileOrTablet()) ReactEditor.focus(editor);
                 }}
+                style={{ boxShadow: 'none' }}
               />
             </Scroll>
             {(hasAfter || showResponsiveAfterInline) && (

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}`}

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',

src/app/features/room/RoomInput.tsx

@@ -1611,6 +1611,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                 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<HTMLDivElement, RoomInputProps>(
                 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<HTMLDivElement, RoomInputProps>(
                         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<HTMLDivElement, RoomInputProps>(
                       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<HTMLDivElement, RoomInputProps>(
                 <IconButton
                   title="Send Message"
                   aria-label="Send your composed Message"
+                  style={{ backgroundColor: 'transparent' }}
                   onClick={() => {
                     if (isLongPress.current) {
                       isLongPress.current = false;
@@ -1841,6 +1846,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                     title="Schedule Message"
                     aria-label="Schedule message send"
                     variant={scheduledTime ? 'Primary' : 'SurfaceVariant'}
+                    style={{ backgroundColor: 'transparent' }}
                     size="300"
                     radii="0"
                     className={css.SplitChevronButton}

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: {

src/app/features/room/RoomView.tsx

@@ -195,8 +195,8 @@ export function RoomView({ eventId }: { eventId?: string }) {
                     )}
                   </>
                 )}
+                {hideReads ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
               </div>
-              {hideReads ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
             </Box>
           </SwipeableChatWrapper>
         </Page>

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',

src/app/pages/client/space/Space.tsx

@@ -334,7 +334,7 @@ function SpaceHeader({ hideText, mx }: { hideText?: boolean; mx: MatrixClient })
                   <IconButton
                     aria-pressed={!!menuAnchor}
                     variant="Background"
-                    style={hasBanner ? { backgroundColor: '#0000', color: '#fff' } : {}}
+                    style={hasBanner ? { backgroundColor: 'transparent', color: '#fff' } : {}}
                     onClick={handleOpenMenu}
                   >
                     {composerIcon(DotsThreeOutlineVerticalIcon, {

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: {