Gradient Theme - Moonlight
This commit is contained in:
@@ -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]);
|
||||
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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 ? (
|
||||
<>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user