diff --git a/src/app/features/estate/EstateNavigator.tsx b/src/app/features/estate/EstateNavigator.tsx index 2cbbfe4a..b8c74f40 100644 --- a/src/app/features/estate/EstateNavigator.tsx +++ b/src/app/features/estate/EstateNavigator.tsx @@ -2,6 +2,7 @@ import React, { MouseEventHandler, ReactNode, useCallback, useMemo, useRef } fro import { useNavigate } from 'react-router-dom'; import { useAtom, useAtomValue, useSetAtom } from 'jotai'; import { Avatar, Box, Chip, Icon, IconButton, Icons, Spinner, Text, color, config } from 'folds'; +import classNames from 'classnames'; import { PageNav, PageNavContent, PageNavHeader } from '../../components/page'; import { NavButton, @@ -41,6 +42,7 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback'; import { EstateRoom, EstateTier } from './buildEstate'; import { activateEstateRoom, awaitMyJoin } from './joinEstateRoom'; import { useEstate, useEstateRootId } from './useEstate'; +import { SkyPlate } from '../scene/skyPlate.css'; import * as css from './EstateNavigator.css'; import { SkyStateControl } from '../scene/SkyStateControl'; @@ -326,7 +328,7 @@ export function EstateNavigator() { justifyContent="Center" gap="200" style={{ padding: 8 }} - className={css.Targets} + className={classNames(css.Targets, SkyPlate)} > diff --git a/src/app/features/scene/skyPlate.css.ts b/src/app/features/scene/skyPlate.css.ts index a3c0c567..e06fef8f 100644 --- a/src/app/features/scene/skyPlate.css.ts +++ b/src/app/features/scene/skyPlate.css.ts @@ -1,7 +1,9 @@ import { globalStyle, style } from '@vanilla-extract/css'; import { color, config } from 'folds'; import { MessageBase, BubbleContent } from '../../components/message/layout/layout.css'; -import { PageContent, PageNavContent } from '../../components/page/style.css'; +import { UploadBoard } from '../../components/upload-board/UploadBoard.css'; +import { ScrollTopContainer } from '../../components/scroll-top-container/style.css'; +import { PageContent, PageHeroSection, PageNavContent } from '../../components/page/style.css'; import { Editor } from '../../components/editor/Editor.css'; import { MembersDrawer } from '../room/MembersDrawer.css'; import { CallStatus } from '../call-status/styles.css'; @@ -35,6 +37,11 @@ export const plateRegions = [ `.${Editor}`, `.${MembersDrawer}`, `.${CallStatus}`, + // Floating panes: the upload board, the scroll-to-top chip. + `.${UploadBoard}`, + `.${ScrollTopContainer}`, + // The welcome page's hero. + `.${PageHeroSection}`, // The bars over the composer. `.${RoomViewTyping}`, base(RoomViewFollowing), diff --git a/src/app/features/scene/skyTheme.test.ts b/src/app/features/scene/skyTheme.test.ts index 3fd06875..c376a802 100644 --- a/src/app/features/scene/skyTheme.test.ts +++ b/src/app/features/scene/skyTheme.test.ts @@ -2,7 +2,9 @@ import { describe, expect, it } from 'vitest'; import { baked } from '../../../sky/baked'; import { AA, contrast, luminance } from '../../../sky/skyTokens.js'; import { Editor } from '../../components/editor/Editor.css'; -import { PageContent, PageNavContent } from '../../components/page/style.css'; +import { UploadBoard } from '../../components/upload-board/UploadBoard.css'; +import { ScrollTopContainer } from '../../components/scroll-top-container/style.css'; +import { PageContent, PageHeroSection, PageNavContent } from '../../components/page/style.css'; import { CallStatus } from '../call-status/styles.css'; import { MembersDrawer } from '../room/MembersDrawer.css'; import { RoomViewTyping } from '../room/RoomViewTyping.css'; @@ -101,6 +103,12 @@ describe('the plate, where text cannot rest on bare sky', () => { }); describe('regions that sit on the plate', () => { + it('plates the upload board, the scroll-to-top chip and the welcome hero', () => { + [UploadBoard, ScrollTopContainer, PageHeroSection].forEach((c) => + expect(plateRegions).toContain(`.${c}`) + ); + }); + // Every region whose text would otherwise rest on bare sky joins the one plate rule. The ink // and link of that plate are pinned above; this pins who is on it. const on = (cls: string) => expect(plateRegions).toContain(cls);