Gradient Theme - Moonlight

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
+2 -2
View File
@@ -39,9 +39,9 @@ export function AuthRouteThemeManager({ children }: { children: ReactNode }) {
document.body.classList.add(...activeTheme.classNames);
if (monochromeMode) {
document.body.style.filter = 'grayscale(1)';
document.body.style.setProperty('filter', 'grayscale(1)');
} else {
document.body.style.filter = '';
document.body.style.removeProperty('filter');
}
}, [activeTheme, monochromeMode]);
+3 -1
View File
@@ -2,10 +2,12 @@ import React from 'react';
import { Box, Button, Icon, Icons, Text, config, toRem } from 'folds';
import { Page, PageHero, PageHeroSection } from '../../components/page';
import CinnySVG from '../../../../public/res/svg/cinny.svg';
import { useTheme } from '../../hooks/useTheme';
export function WelcomePage() {
const theme = useTheme();
return (
<Page>
<Page transparent={theme.flat}>
<Box
grow="Yes"
style={{ padding: config.space.S400, paddingBottom: config.space.S700 }}
+3 -1
View File
@@ -9,12 +9,14 @@ import {
} from '../../../components/page';
import { CreateSpaceForm } from '../../../features/create-space';
import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
import { useTheme } from '../../../hooks/useTheme';
export function Create() {
const { navigateSpace } = useRoomNavigate();
const theme = useTheme();
return (
<Page>
<Page transparent={theme.flat}>
<Box grow="Yes">
<Scroll hideTrack visibility="Hover">
<PageContent>
+6 -1
View File
@@ -107,7 +107,12 @@ function DirectHeader() {
</Text>
</Box>
<Box>
<IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
<IconButton
aria-pressed={!!menuAnchor}
variant="Background"
fill="None"
onClick={handleOpenMenu}
>
<Icon src={Icons.VerticalDots} size="200" />
</IconButton>
</Box>
+3 -1
View File
@@ -17,10 +17,12 @@ import {
} from '../../../components/page';
import { BackRouteHandler } from '../../../components/BackRouteHandler';
import { CreateChat } from '../../../features/create-chat';
import { useTheme } from '../../../hooks/useTheme';
export function DirectCreate() {
const mx = useMatrixClient();
const screenSize = useScreenSizeContext();
const theme = useTheme();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
@@ -38,7 +40,7 @@ export function DirectCreate() {
}, [mx, navigate, directs, userId]);
return (
<Page>
<Page transparent={theme.flat}>
{screenSize === ScreenSize.Mobile && (
<PageHeader balance outlined={false}>
<Box grow="Yes" alignItems="Center" gap="200">
+3 -1
View File
@@ -18,8 +18,10 @@ import * as css from './style.css';
import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
import { BackRouteHandler } from '../../../components/BackRouteHandler';
import { useTheme } from '../../../hooks/useTheme';
export function FeaturedRooms() {
const theme = useTheme();
const { featuredCommunities } = useClientConfig();
const { rooms, spaces } = featuredCommunities ?? {};
const allRooms = useAtomValue(allRoomsAtom);
@@ -27,7 +29,7 @@ export function FeaturedRooms() {
const { navigateSpace, navigateRoom } = useRoomNavigate();
return (
<Page>
<Page transparent={theme.flat}>
{screenSize === ScreenSize.Mobile && (
<PageHeader>
<Box shrink="No">
+3 -1
View File
@@ -45,6 +45,7 @@ import { getMxIdServer } from '../../../utils/matrix';
import { stopPropagation } from '../../../utils/keyboard';
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
import { BackRouteHandler } from '../../../components/BackRouteHandler';
import { useTheme } from '../../../hooks/useTheme';
const useServerSearchParams = (searchParams: URLSearchParams): ExploreServerPathSearchParams =>
useMemo(
@@ -343,6 +344,7 @@ function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
export function PublicRooms() {
const { server } = useParams();
const mx = useMatrixClient();
const theme = useTheme();
const userId = mx.getUserId();
const userServer = userId && getMxIdServer(userId);
const allRooms = useAtomValue(allRoomsAtom);
@@ -469,7 +471,7 @@ export function PublicRooms() {
};
return (
<Page>
<Page transparent={theme.flat}>
<PageHeader balance>
{isSearch ? (
<>
+3 -1
View File
@@ -12,14 +12,16 @@ import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
import { BackRouteHandler } from '../../../components/BackRouteHandler';
import { CreateRoomForm } from '../../../features/create-room';
import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
import { useTheme } from '../../../hooks/useTheme';
export function HomeCreateRoom() {
const screenSize = useScreenSizeContext();
const theme = useTheme();
const { navigateRoom } = useRoomNavigate();
return (
<Page>
<Page transparent={theme.flat}>
{screenSize === ScreenSize.Mobile && (
<PageHeader balance outlined={false}>
<Box grow="Yes" alignItems="Center" gap="200">
+6 -1
View File
@@ -121,7 +121,12 @@ function HomeHeader() {
</Text>
</Box>
<Box>
<IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
<IconButton
aria-pressed={!!menuAnchor}
variant="Background"
fill="None"
onClick={handleOpenMenu}
>
<Icon src={Icons.VerticalDots} size="200" />
</IconButton>
</Box>
+3 -1
View File
@@ -5,14 +5,16 @@ import { MessageSearch } from '../../../features/message-search';
import { useHomeRooms } from './useHomeRooms';
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
import { BackRouteHandler } from '../../../components/BackRouteHandler';
import { useTheme } from '../../../hooks/useTheme';
export function HomeSearch() {
const scrollRef = useRef<HTMLDivElement>(null);
const rooms = useHomeRooms();
const screenSize = useScreenSizeContext();
const theme = useTheme();
return (
<Page>
<Page transparent={theme.flat}>
<PageHeader balance>
<Box grow="Yes" alignItems="Center" gap="200">
<Box grow="Yes" basis="No">
+3 -1
View File
@@ -67,6 +67,7 @@ import { useIgnoredUsers } from '../../../hooks/useIgnoredUsers';
import { useReportRoomSupported } from '../../../hooks/useReportRoomSupported';
import { useSetting } from '../../../state/hooks/settings';
import { settingsAtom } from '../../../state/settings';
import { useTheme } from '../../../hooks/useTheme';
const COMPACT_CARD_WIDTH = 548;
@@ -693,6 +694,7 @@ function SpamInvites({
export function Invites() {
const mx = useMatrixClient();
const theme = useTheme();
const useAuthentication = useMediaAuthentication();
const { navigateRoom, navigateSpace } = useRoomNavigate();
const allRooms = useAtomValue(allRoomsAtom);
@@ -746,7 +748,7 @@ export function Invites() {
};
return (
<Page>
<Page transparent={theme.flat}>
<PageHeader balance>
<Box grow="Yes" gap="200">
<Box grow="Yes" basis="No">
+2 -1
View File
@@ -563,6 +563,7 @@ const DEFAULT_REFRESH_MS = 7000;
export function Notifications() {
const mx = useMatrixClient();
const theme = useTheme();
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
@@ -635,7 +636,7 @@ export function Notifications() {
}, [timelineState, notificationTimeline, lastVItemIndex, loadTimeline]);
return (
<Page>
<Page transparent={theme.flat}>
<PageHeader balance>
<Box grow="Yes" gap="200">
<Box grow="Yes" basis="No">
+3 -1
View File
@@ -11,9 +11,11 @@ import { roomToParentsAtom } from '../../../state/room/roomToParents';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
import { BackRouteHandler } from '../../../components/BackRouteHandler';
import { useTheme } from '../../../hooks/useTheme';
export function SpaceSearch() {
const mx = useMatrixClient();
const theme = useTheme();
const scrollRef = useRef<HTMLDivElement>(null);
const space = useSpace();
const screenSize = useScreenSizeContext();
@@ -27,7 +29,7 @@ export function SpaceSearch() {
);
return (
<Page>
<Page transparent={theme.flat}>
<PageHeader balance>
<Box grow="Yes" alignItems="Center" gap="200">
<Box grow="Yes" basis="No">
+6 -1
View File
@@ -273,7 +273,12 @@ function SpaceHeader() {
{joinRules?.join_rule !== JoinRule.Public && <Icon src={Icons.Lock} size="50" />}
</Box>
<Box shrink="No">
<IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
<IconButton
aria-pressed={!!menuAnchor}
variant="Background"
fill="None"
onClick={handleOpenMenu}
>
<Icon src={Icons.VerticalDots} size="200" />
</IconButton>
</Box>