LotusGuild/cinny
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Gradient Theme - Moonlight

Browse Source
This commit is contained in:
Ajay Bura
2026-03-12 12:16:03 +05:30
parent b76ad3caaf
commit e039299e83
39 changed files with 350 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/features/call-status/CallStatus.tsx
+1 -3
View File
@@ -1,11 +1,9 @@
import React from 'react';
import { Box, Spinner } from 'folds';
import classNames from 'classnames';
import { LiveChip } from './LiveChip';
import * as css from './styles.css';
import { CallRoomName } from './CallRoomName';
import { CallControl } from './CallControl';
import { ContainerColor } from '../../styles/ContainerColor.css';
import { useCallMembers, useCallSession } from '../../hooks/useCall';
import { ScreenSize, useScreenSize } from '../../hooks/useScreenSize';
import { MemberGlance } from './MemberGlance';
@@ -33,7 +31,7 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
return (
<Box
className={classNames(css.CallStatus, ContainerColor({ variant: 'Background' }))}
className={css.CallStatus}
shrink="No"
gap="400"
alignItems={compact ? undefined : 'Center'}
src/app/features/call/CallView.tsx
+1 -6
View File
@@ -1,7 +1,6 @@
import React, { RefObject, useRef } from 'react';
import { Badge, Box, color, Header, Scroll, Text, toRem } from 'folds';
import { useCallEmbed, useCallJoined, useCallEmbedPlacementSync } from '../../hooks/useCallEmbed';
import { ContainerColor } from '../../styles/ContainerColor.css';
import { PrescreenControls } from './PrescreenControls';
import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
import { useRoom } from '../../hooks/useRoom';
@@ -138,11 +137,7 @@ export function CallView() {
const currentJoined = callEmbed?.roomId === room.roomId && callJoined;
return (
<Box
className={ContainerColor({ variant: 'Surface' })}
style={{ minWidth: toRem(280) }}
grow="Yes"
>
<Box style={{ minWidth: toRem(280) }} grow="Yes">
{!currentJoined && <CallPrescreen />}
<CallJoined joined={currentJoined} containerRef={callContainerRef} />
</Box>
src/app/features/create-room/CreateRoom.tsx
+1
View File
@@ -213,6 +213,7 @@ export function CreateRoomForm({
<Text size="L400">Options</Text>
<Box grow="Yes" justifyContent="End">
<Chip
fill="None"
radii="Pill"
before={<Icon src={advance ? Icons.ChevronTop : Icons.ChevronBottom} size="50" />}
onClick={() => setAdvance(!advance)}
src/app/features/create-space/CreateSpace.tsx
+1
View File
@@ -180,6 +180,7 @@ export function CreateSpaceForm({ defaultAccess, space, onCreate }: CreateSpaceF
<Box grow="Yes" justifyContent="End">
<Chip
radii="Pill"
fill="None"
before={<Icon src={advance ? Icons.ChevronTop : Icons.ChevronBottom} size="50" />}
onClick={() => setAdvance(!advance)}
type="button"
src/app/features/join-before-navigate/JoinBeforeNavigate.tsx
+3 -1
View File
@@ -10,6 +10,7 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
import { allRoomsAtom } from '../../state/room-list/roomList';
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
import { BackRouteHandler } from '../../components/BackRouteHandler';
import { useTheme } from '../../hooks/useTheme';
type JoinBeforeNavigateProps = { roomIdOrAlias: string; eventId?: string; viaServers?: string[] };
export function JoinBeforeNavigate({
@@ -21,6 +22,7 @@ export function JoinBeforeNavigate({
const allRooms = useAtomValue(allRoomsAtom);
const { navigateRoom, navigateSpace } = useRoomNavigate();
const screenSize = useScreenSizeContext();
const theme = useTheme();
const handleView = (roomId: string) => {
if (mx.getRoom(roomId)?.isSpaceRoom()) {
@@ -31,7 +33,7 @@ export function JoinBeforeNavigate({
};
return (
<Page>
<Page transparent={theme.flat}>
<PageHeader balance>
<Box grow="Yes" gap="200">
<Box shrink="No">
src/app/features/lobby/Lobby.tsx
+3 -1
View File
@@ -56,6 +56,7 @@ import { useGetRoom } from '../../hooks/useGetRoom';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
import { useTheme } from '../../hooks/useTheme';
const useCanDropLobbyItem = (
space: Room,
@@ -151,6 +152,7 @@ const useCanDropLobbyItem = (
export function Lobby() {
const navigate = useNavigate();
const mx = useMatrixClient();
const theme = useTheme();
const mDirects = useAtomValue(mDirectAtom);
const allRooms = useAtomValue(allRoomsAtom);
const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]);
@@ -430,7 +432,7 @@ export function Lobby() {
return (
<PowerLevelsContextProvider value={spacePowerLevels}>
<Box grow="Yes">
<Page>
<Page transparent={theme.flat}>
<LobbyHeader
showProfile={!onTop}
powerLevels={roomsPowerLevels.get(space.roomId) ?? {}}
src/app/features/lobby/SpaceItem.tsx
+4
View File
@@ -64,6 +64,7 @@ function InaccessibleSpaceProfile({ roomId, suggested }: InaccessibleSpaceProfil
as="span"
className={css.HeaderChip}
variant="Surface"
fill="None"
size="500"
before={
<Avatar size="200" radii="300">
@@ -121,6 +122,7 @@ function UnjoinedSpaceProfile({
<Chip
className={css.HeaderChip}
variant="Surface"
fill="None"
size="500"
onClick={join}
disabled={!canJoin}
@@ -187,6 +189,7 @@ function SpaceProfile({
onClick={handleClose}
className={css.HeaderChip}
variant="Surface"
fill="None"
size="500"
before={
<Avatar size="200" radii="300">
@@ -230,6 +233,7 @@ function RootSpaceProfile({ closed, categoryId, handleClose }: RootSpaceProfileP
onClick={handleClose}
className={css.HeaderChip}
variant="Surface"
fill="None"
size="500"
after={<Icon src={closed ? Icons.ChevronRight : Icons.ChevronBottom} size="50" />}
>
src/app/features/room-nav/RoomNavCategoryButton.tsx
+1
View File
@@ -9,6 +9,7 @@ export const RoomNavCategoryButton = as<'button', { closed?: boolean }>(
className={classNames(css.CategoryButton, className)}
variant="Background"
radii="Pill"
fill="None"
before={
<Icon
className={css.CategoryButtonIcon}
src/app/features/room/CallChatView.tsx
+4 -1
View File
@@ -6,9 +6,11 @@ import { Page, PageHeader } from '../../components/page';
import { callChatAtom } from '../../state/callEmbed';
import { RoomView } from './RoomView';
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
import { useTheme } from '../../hooks/useTheme';
export function CallChatView() {
const { eventId } = useParams();
const theme = useTheme();
const setChat = useSetAtom(callChatAtom);
const screenSize = useScreenSizeContext();
@@ -16,6 +18,7 @@ export function CallChatView() {
return (
<Page
transparent={theme.flat}
style={{
width: screenSize === ScreenSize.Desktop ? toRem(456) : '100%',
flexShrink: 0,
@@ -41,7 +44,7 @@ export function CallChatView() {
}
>
{(triggerRef) => (
<IconButton ref={triggerRef} variant="Surface" onClick={handleClose}>
<IconButton ref={triggerRef} variant="Surface" fill="None" onClick={handleClose}>
<Icon src={Icons.Cross} />
</IconButton>
)}
src/app/features/room/MembersDrawer.tsx
+5 -6
View File
@@ -56,7 +56,6 @@ import { MembershipFilterMenu } from '../../components/MembershipFilterMenu';
import { MemberSortMenu } from '../../components/MemberSortMenu';
import { useOpenUserRoomProfile, useUserRoomProfileState } from '../../state/hooks/userRoomProfile';
import { useSpaceOptionally } from '../../hooks/useSpace';
import { ContainerColor } from '../../styles/ContainerColor.css';
import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
import { useRoomCreators } from '../../hooks/useRoomCreators';
@@ -89,6 +88,7 @@ function MemberDrawerHeader({ room }: MemberDrawerHeaderProps) {
<IconButton
ref={triggerRef}
variant="Background"
fill="None"
onClick={() => setPeopleDrawer(false)}
>
<Icon src={Icons.Cross} />
@@ -132,6 +132,7 @@ function MemberItem({
aria-pressed={pressed}
data-user-id={member.userId}
variant="Background"
fill="None"
radii="400"
onClick={onClick}
before={
@@ -245,11 +246,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
};
return (
<Box
className={classNames(css.MembersDrawer, ContainerColor({ variant: 'Background' }))}
shrink="No"
direction="Column"
>
<Box className={classNames(css.MembersDrawer)} shrink="No" direction="Column">
<MemberDrawerHeader room={room} />
<Box className={css.MemberDrawerContentBase} grow="Yes">
<Scroll ref={scrollRef} variant="Background" size="300" visibility="Hover" hideTrack>
@@ -279,6 +276,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
)) as MouseEventHandler<HTMLButtonElement>
}
variant="Background"
fill="None"
size="400"
radii="300"
before={<Icon src={Icons.Filter} size="50" />}
@@ -311,6 +309,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
)) as MouseEventHandler<HTMLButtonElement>
}
variant="Background"
fill="None"
size="400"
radii="300"
after={<Icon src={Icons.Sort} size="50" />}
src/app/features/room/Room.tsx
+7 -4
View File
@@ -18,11 +18,14 @@ import { CallView } from '../call/CallView';
import { RoomViewHeader } from './RoomViewHeader';
import { callChatAtom } from '../../state/callEmbed';
import { CallChatView } from './CallChatView';
import { Page } from '../../components/page';
import { useTheme } from '../../hooks/useTheme';
export function Room() {
const { eventId } = useParams();
const room = useRoom();
const mx = useMatrixClient();
const theme = useTheme();
const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
@@ -49,20 +52,20 @@ export function Room() {
<PowerLevelsContextProvider value={powerLevels}>
<Box grow="Yes">
{callView && (screenSize === ScreenSize.Desktop || !chat) && (
<Box grow="Yes" direction="Column">
<Page transparent={theme.flat}>
<RoomViewHeader callView />
<Box grow="Yes">
<CallView />
</Box>
</Box>
</Page>
)}
{!callView && (
<Box grow="Yes" direction="Column">
<Page transparent={theme.flat}>
<RoomViewHeader />
<Box grow="Yes">
<RoomView eventId={eventId} />
</Box>
</Box>
</Page>
)}
{callView && chat && (
src/app/features/room/RoomView.tsx
+2 -3
View File
@@ -14,7 +14,6 @@ import { RoomViewTyping } from './RoomViewTyping';
import { RoomTombstone } from './RoomTombstone';
import { RoomInput } from './RoomInput';
import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
import { Page } from '../../components/page';
import { useKeyDown } from '../../hooks/useKeyDown';
import { editableActiveElement } from '../../utils/dom';
import { settingsAtom } from '../../state/settings';
@@ -91,7 +90,7 @@ export function RoomView({ eventId }: { eventId?: string }) {
);
return (
<Page ref={roomViewRef}>
<Box grow="Yes" direction="Column" ref={roomViewRef}>
<Box grow="Yes" direction="Column">
<RoomTimeline
key={roomId}
@@ -135,6 +134,6 @@ export function RoomView({ eventId }: { eventId?: string }) {
</div>
{hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
</Box>
</Page>
</Box>
);
}
src/app/features/room/RoomViewFollowing.css.ts
-2
View File
@@ -16,8 +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',
},
],
src/app/features/room/RoomViewHeader.tsx
+1 -5
View File
@@ -66,7 +66,6 @@ import { useRoomNavigate } from '../../hooks/useRoomNavigate';
import { useRoomCreators } from '../../hooks/useRoomCreators';
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
import { InviteUserPrompt } from '../../components/invite-user-prompt';
import { ContainerColor } from '../../styles/ContainerColor.css';
import { RoomSettingsPage } from '../../state/roomSettings';
type RoomMenuProps = {
@@ -305,10 +304,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
};
return (
<PageHeader
className={ContainerColor({ variant: 'Surface' })}
balance={screenSize === ScreenSize.Mobile}
>
<PageHeader balance={screenSize === ScreenSize.Mobile}>
<Box grow="Yes" gap="300">
{screenSize === ScreenSize.Mobile && (
<BackRouteHandler>