diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx index fb89bb916..bd769b425 100644 --- a/src/app/components/user-profile/UserRoomProfile.tsx +++ b/src/app/components/user-profile/UserRoomProfile.tsx @@ -1,4 +1,4 @@ -import { Box, Button, config, Icon, IconButton, Icons, Spinner, Text, toRem } from 'folds'; +import { Box, Button, color, config, Icon, IconButton, Icons, Spinner, Text, toRem } from 'folds'; import React, { useCallback, useEffect, useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { VerificationRequest } from 'matrix-js-sdk/lib/crypto-api'; @@ -197,7 +197,7 @@ function UserDeviceSessions({ userId }: UserDeviceSessionsProps) { style={{ paddingTop: config.space.S100, paddingBottom: config.space.S100, - borderTop: `${toRem(1)} solid var(--border-surface-variant)`, + borderTop: `${toRem(1)} solid ${color.SurfaceVariant.ContainerLine}`, }} > diff --git a/src/app/features/call-status/styles.css.ts b/src/app/features/call-status/styles.css.ts index dd32bc3d4..88e0b71e5 100644 --- a/src/app/features/call-status/styles.css.ts +++ b/src/app/features/call-status/styles.css.ts @@ -1,4 +1,4 @@ -import { style } from '@vanilla-extract/css'; +import { keyframes, style } from '@vanilla-extract/css'; import { color, config, toRem } from 'folds'; export const LiveChipText = style({ @@ -16,6 +16,19 @@ export const ControlDivider = style({ height: toRem(16), }); -export const SpeakerAvatarOutline = style({ - boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Success.Main}`, +const speakerPulse = keyframes({ + '0%': { boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Success.Main}` }, + '50%': { boxShadow: `0 0 0 ${toRem(4)} ${color.Success.ContainerActive}` }, + '100%': { boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Success.Main}` }, +}); + +export const SpeakerAvatarOutline = style({ + '@media': { + '(prefers-reduced-motion: no-preference)': { + animation: `${speakerPulse} 1200ms ease-in-out infinite`, + }, + '(prefers-reduced-motion: reduce)': { + boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Success.Main}`, + }, + }, }); diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx index f16663428..3b452dff4 100644 --- a/src/app/features/room/RoomView.tsx +++ b/src/app/features/room/RoomView.tsx @@ -1,4 +1,5 @@ import React, { useCallback, useMemo, useRef } from 'react'; +import { ErrorBoundary } from 'react-error-boundary'; import { Box, Text, config } from 'folds'; import { EventType } from 'matrix-js-sdk'; import { ReactEditor } from 'slate-react'; @@ -109,13 +110,31 @@ export function RoomView({ eventId }: { eventId?: string }) { return ( - + + Timeline unavailable + + An error occurred while rendering messages. Try refreshing the page. + + + } + > + + @@ -129,13 +148,27 @@ export function RoomView({ eventId }: { eventId?: string }) { ) : ( <> {canMessage && ( - + + + Message composer encountered an error. Try refreshing. + + + } + > + + )} {!canMessage && (