mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-04 06:20:28 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix menus congestion and improve thread reply layout (#2402)

Browse source 
* make menus more spacious

* improve threaded reply layout

* fix search filter button spacing
This commit is contained in:
Ajay Bura 2025-07-27 17:50:23 +05:30 • committed by GitHub
parent 9183fd66b2
commit d8d4714370
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
37 changed files with 82 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/app/components/BackupRestore.tsx
View file

@ -203,12 +203,8 @@ export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
escapeDeactivates: stopPropagation, escapeDeactivates: stopPropagation,
}} }}
> >
<Menu <Menu style={{ padding: config.space.S200 }}>
style={{ <Box direction="Column" gap="200">
padding: config.space.S100,
}}
>
<Box direction="Column" gap="100">
<Box direction="Column" gap="200"> <Box direction="Column" gap="200">
<InfoCard <InfoCard
variant="SurfaceVariant" variant="SurfaceVariant"

2
src/app/components/HexColorPickerPopOut.tsx
View file

@ -30,7 +30,7 @@ export function HexColorPickerPopOut({ picker, onRemove, children }: HexColorPic
> >
<Menu <Menu
style={{ style={{
padding: config.space.S100, padding: config.space.S200,
borderRadius: config.radii.R500, borderRadius: config.radii.R500,
overflow: 'initial', overflow: 'initial',
}} }}

2
src/app/components/JoinRulesSwitcher.tsx
View file

@ -109,7 +109,7 @@ export function JoinRulesSwitcher<T extends ExtendedJoinRules[]>({
}} }}
> >
<Menu> <Menu>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
{rules.map((rule) => ( {rules.map((rule) => (
<MenuItem <MenuItem
key={rule} key={rule}

2
src/app/components/ManualVerification.tsx
View file

@ -78,7 +78,7 @@ export function ManualVerificationMethodSwitcher({
}} }}
> >
<Menu> <Menu>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<MenuItem <MenuItem
size="300" size="300"
variant="Surface" variant="Surface"

2
src/app/components/MemberSortMenu.tsx
View file

@ -23,7 +23,7 @@ export function MemberSortMenu({ selected, onSelect, requestClose }: MemberSortM
escapeDeactivates: stopPropagation, escapeDeactivates: stopPropagation,
}} }}
> >
<Menu style={{ padding: config.space.S100 }}> <Menu style={{ padding: config.space.S200 }}>
{memberSortMenu.map((menuItem, index) => ( {memberSortMenu.map((menuItem, index) => (
<MenuItem <MenuItem
key={menuItem.name} key={menuItem.name}

2
src/app/components/MembershipFilterMenu.tsx
View file

@ -27,7 +27,7 @@ export function MembershipFilterMenu({
escapeDeactivates: stopPropagation, escapeDeactivates: stopPropagation,
}} }}
> >
<Menu style={{ padding: config.space.S100 }}> <Menu style={{ padding: config.space.S200 }}>
{membershipFilterMenu.map((menuItem, index) => ( {membershipFilterMenu.map((menuItem, index) => (
<MenuItem <MenuItem
key={menuItem.name} key={menuItem.name}

4
src/app/components/RoomNotificationSwitcher.tsx
View file

@ -70,7 +70,7 @@ export function RoomNotificationModeSwitcher({
return ( return (
<PopOut <PopOut
anchor={menuCords} anchor={menuCords}
offset={5} offset={8}
position="Right" position="Right"
align="Start" align="Start"
content={ content={
@ -86,7 +86,7 @@ export function RoomNotificationModeSwitcher({
}} }}
> >
<Menu> <Menu>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
{modes.map((mode) => ( {modes.map((mode) => (
<MenuItem <MenuItem
key={mode} key={mode}

2
src/app/components/editor/Toolbar.tsx
View file

@ -155,7 +155,7 @@ export function HeadingBlockButton() {
escapeDeactivates: stopPropagation, escapeDeactivates: stopPropagation,
}} }}
> >
<Menu style={{ padding: config.space.S100 }}> <Menu style={{ padding: config.space.S200 }}>
<Box gap="100"> <Box gap="100">
<TooltipProvider <TooltipProvider
tooltip={<BtnTooltip text="Heading 1" shortCode={`${modKey} + 1`} />} tooltip={<BtnTooltip text="Heading 1" shortCode={`${modKey} + 1`} />}

2
src/app/components/image-pack-view/UsageSwitcher.tsx
View file

@ -33,7 +33,7 @@ export function UsageSelector({ selected, onChange }: UsageSelectorProps) {
); );
return ( return (
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
{allUsages.map((usage) => ( {allUsages.map((usage) => (
<MenuItem <MenuItem
key={getUsageStr(usage)} key={getUsageStr(usage)}

6
src/app/components/message/Reply.css.ts
View file

@ -7,7 +7,6 @@ export const ReplyBend = style({
export const ThreadIndicator = style({ export const ThreadIndicator = style({
opacity: config.opacity.P300, opacity: config.opacity.P300,
gap: toRem(2),
selectors: { selectors: {
'button&': { 'button&': {
@ -19,11 +18,6 @@ export const ThreadIndicator = style({
}, },
}); });
export const ThreadIndicatorIcon = style({
width: toRem(14),
height: toRem(14),
});
export const Reply = style({ export const Reply = style({
marginBottom: toRem(1), marginBottom: toRem(1),
minWidth: 0, minWidth: 0,

15
src/app/components/message/Reply.tsx
View file

@ -38,9 +38,16 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>(
); );
export const ThreadIndicator = as<'div'>(({ ...props }, ref) => ( export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
<Box className={css.ThreadIndicator} alignItems="Center" {...props} ref={ref}> <Box
<Icon className={css.ThreadIndicatorIcon} src={Icons.Message} /> shrink="No"
<Text size="T200">Threaded reply</Text> className={css.ThreadIndicator}
alignItems="Center"
gap="100"
{...props}
ref={ref}
>
<Icon size="50" src={Icons.Thread} />
<Text size="L400">Thread</Text>
</Box> </Box>
)); ));
@ -97,7 +104,7 @@ export const Reply = as<'div', ReplyProps>(
const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody; const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;
return ( return (
<Box direction="Column" alignItems="Start" {...props} ref={ref}> <Box direction="Row" gap="200" alignItems="Center" {...props} ref={ref}>
{threadRootId && ( {threadRootId && (
<ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} /> <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
)} )}

5
src/app/components/power/PowerSelector.tsx
View file

@ -16,13 +16,14 @@ export const PowerSelector = forwardRef<HTMLDivElement, PowerSelectorProps>(
ref={ref} ref={ref}
style={{ style={{
maxHeight: '75vh', maxHeight: '75vh',
maxWidth: toRem(300), maxWidth: toRem(200),
width: '100vw',
display: 'flex', display: 'flex',
}} }}
> >
<Box grow="Yes"> <Box grow="Yes">
<Scroll size="0" hideTrack visibility="Hover"> <Scroll size="0" hideTrack visibility="Hover">
<div style={{ padding: config.space.S100 }}> <div style={{ padding: config.space.S200 }}>
{getPowers(powerLevelTags).map((power) => { {getPowers(powerLevelTags).map((power) => {
const selected = value === power; const selected = value === power;
const tag = powerLevelTags[power]; const tag = powerLevelTags[power];

2
src/app/components/room-card/RoomCard.tsx
View file

@ -273,7 +273,7 @@ export const RoomCard = as<'div', RoomCardProps>(
variant="Secondary" variant="Secondary"
size="300" size="300"
disabled={joining} disabled={joining}
before={joining && <Spinner size="50" variant="Secondary" fill="Soft" />} before={joining && <Spinner size="50" variant="Secondary" fill="Solid" />}
> >
<Text size="B300" truncate> <Text size="B300" truncate>
{joining ? 'Joining' : 'Join'} {joining ? 'Joining' : 'Join'}

2
src/app/features/common-settings/general/RoomHistoryVisibility.tsx
View file

@ -119,7 +119,7 @@ export function RoomHistoryVisibility({ powerLevels }: RoomHistoryVisibilityProp
escapeDeactivates: stopPropagation, escapeDeactivates: stopPropagation,
}} }}
> >
<Menu style={{ padding: config.space.S100 }}> <Menu style={{ padding: config.space.S200 }}>
{visibilityMenu.map((visibility) => ( {visibilityMenu.map((visibility) => (
<MenuItem <MenuItem
key={visibility} key={visibility}

2
src/app/features/common-settings/permissions/Powers.tsx
View file

@ -63,7 +63,7 @@ function PeekPermissions({ powerLevels, power, permissionGroups, children }: Pee
> >
<Box grow="Yes" tabIndex={0}> <Box grow="Yes" tabIndex={0}>
<Scroll size="0" hideTrack visibility="Hover"> <Scroll size="0" hideTrack visibility="Hover">
<Box style={{ padding: config.space.S200 }} direction="Column" gap="400"> <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
{permissionGroups.map((group, groupIndex) => ( {permissionGroups.map((group, groupIndex) => (
<Box key={groupIndex} direction="Column" gap="100"> <Box key={groupIndex} direction="Column" gap="100">
<Text size="L400">{group.name}</Text> <Text size="L400">{group.name}</Text>

6
src/app/features/lobby/HierarchyItemMenu.tsx
View file

@ -234,9 +234,9 @@ export function HierarchyItemMenu({
escapeDeactivates: stopPropagation, escapeDeactivates: stopPropagation,
}} }}
> >
<Menu style={{ maxWidth: toRem(150), width: '100vw' }}> <Menu style={{ minWidth: toRem(200) }}>
{joined && ( {joined && (
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
{onTogglePin && ( {onTogglePin && (
<MenuItem <MenuItem
size="300" size="300"
@ -296,7 +296,7 @@ export function HierarchyItemMenu({
<Line size="300" variant="Surface" direction="Horizontal" /> <Line size="300" variant="Surface" direction="Horizontal" />
)} )}
{canEditChild && ( {canEditChild && (
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<SuggestMenuItem item={item} requestClose={handleRequestClose} /> <SuggestMenuItem item={item} requestClose={handleRequestClose} />
<RemoveMenuItem item={item} requestClose={handleRequestClose} /> <RemoveMenuItem item={item} requestClose={handleRequestClose} />
</Box> </Box>

6
src/app/features/lobby/LobbyHeader.tsx
View file

@ -60,8 +60,8 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
}; };
return ( return (
<Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}> <Menu ref={ref} style={{ minWidth: toRem(200) }}>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<MenuItem <MenuItem
onClick={handleInvite} onClick={handleInvite}
variant="Primary" variant="Primary"
@ -87,7 +87,7 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
</MenuItem> </MenuItem>
</Box> </Box>
<Line variant="Surface" size="300" /> <Line variant="Surface" size="300" />
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<UseStateProvider initial={false}> <UseStateProvider initial={false}>
{(promptLeave, setPromptLeave) => ( {(promptLeave, setPromptLeave) => (
<> <>

4
src/app/features/lobby/SpaceItem.tsx
View file

@ -271,7 +271,7 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
escapeDeactivates: stopPropagation, escapeDeactivates: stopPropagation,
}} }}
> >
<Menu style={{ padding: config.space.S100 }}> <Menu style={{ padding: config.space.S200 }}>
<MenuItem <MenuItem
size="300" size="300"
radii="300" radii="300"
@ -333,7 +333,7 @@ function AddSpaceButton({ item }: { item: HierarchyItem }) {
escapeDeactivates: stopPropagation, escapeDeactivates: stopPropagation,
}} }}
> >
<Menu style={{ padding: config.space.S100 }}> <Menu style={{ padding: config.space.S200 }}>
<MenuItem <MenuItem
size="300" size="300"
radii="300" radii="300"

5
src/app/features/message-search/SearchFilters.tsx
View file

@ -74,8 +74,7 @@ function OrderButton({ order, onChange }: OrderButtonProps) {
<Header size="300" variant="Surface" style={{ padding: `0 ${config.space.S300}` }}> <Header size="300" variant="Surface" style={{ padding: `0 ${config.space.S300}` }}>
<Text size="L400">Sort by</Text> <Text size="L400">Sort by</Text>
</Header> </Header>
<Line variant="Surface" size="300" /> <div style={{ padding: config.space.S200, paddingTop: 0 }}>
<div style={{ padding: config.space.S100 }}>
<MenuItem <MenuItem
onClick={() => setOrder()} onClick={() => setOrder()}
variant="Surface" variant="Surface"
@ -291,7 +290,7 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto
</Box> </Box>
</Scroll> </Scroll>
<Line variant="Surface" size="300" /> <Line variant="Surface" size="300" />
<Box shrink="No" direction="Column" gap="100" style={{ padding: config.space.S200 }}> <Box shrink="No" direction="Column" gap="200" style={{ padding: config.space.S200 }}>
<Button size="300" variant="Secondary" radii="300" onClick={handleSave}> <Button size="300" variant="Secondary" radii="300" onClick={handleSave}>
{localSelected && localSelected.length > 0 ? ( {localSelected && localSelected.length > 0 ? (
<Text size="B300">Save ({localSelected.length})</Text> <Text size="B300">Save ({localSelected.length})</Text>

8
src/app/features/room-nav/RoomNavItem.tsx
View file

@ -89,8 +89,8 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
}; };
return ( return (
<Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}> <Menu ref={ref} style={{ minWidth: toRem(200) }}>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<MenuItem <MenuItem
onClick={handleMarkAsRead} onClick={handleMarkAsRead}
size="300" size="300"
@ -125,7 +125,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
</RoomNotificationModeSwitcher> </RoomNotificationModeSwitcher>
</Box> </Box>
<Line variant="Surface" size="300" /> <Line variant="Surface" size="300" />
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<MenuItem <MenuItem
onClick={handleInvite} onClick={handleInvite}
variant="Primary" variant="Primary"
@ -161,7 +161,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
</MenuItem> </MenuItem>
</Box> </Box>
<Line variant="Surface" size="300" /> <Line variant="Surface" size="300" />
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<UseStateProvider initial={false}> <UseStateProvider initial={false}>
{(promptLeave, setPromptLeave) => ( {(promptLeave, setPromptLeave) => (
<> <>

2
src/app/features/room/RoomInput.tsx
View file

@ -543,7 +543,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
> >
<Icon src={Icons.Cross} size="50" /> <Icon src={Icons.Cross} size="50" />
</IconButton> </IconButton>
<Box direction="Column"> <Box direction="Row" gap="200" alignItems="Center">
{replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />} {replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
<ReplyLayout <ReplyLayout
userColor={replyUsernameColor} userColor={replyUsernameColor}

8
src/app/features/room/RoomViewHeader.tsx
View file

@ -108,8 +108,8 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
}; };
return ( return (
<Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}> <Menu ref={ref} style={{ minWidth: toRem(200) }}>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<MenuItem <MenuItem
onClick={handleMarkAsRead} onClick={handleMarkAsRead}
size="300" size="300"
@ -144,7 +144,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
</RoomNotificationModeSwitcher> </RoomNotificationModeSwitcher>
</Box> </Box>
<Line variant="Surface" size="300" /> <Line variant="Surface" size="300" />
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<MenuItem <MenuItem
onClick={handleInvite} onClick={handleInvite}
variant="Primary" variant="Primary"
@ -207,7 +207,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
</UseStateProvider> </UseStateProvider>
</Box> </Box>
<Line variant="Surface" size="300" /> <Line variant="Surface" size="300" />
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<UseStateProvider initial={false}> <UseStateProvider initial={false}>
{(promptLeave, setPromptLeave) => ( {(promptLeave, setPromptLeave) => (
<> <>

10
src/app/features/room/message/Message.tsx
View file

@ -22,6 +22,7 @@ import {
as, as,
color, color,
config, config,
toRem,
} from 'folds'; } from 'folds';
import React, { import React, {
FormEventHandler, FormEventHandler,
@ -94,10 +95,10 @@ export const MessageQuickReactions = as<'div', MessageQuickReactionsProps>(
return ( return (
<> <>
<Box <Box
style={{ padding: config.space.S200 }} style={{ padding: config.space.S300 }}
alignItems="Center" alignItems="Center"
justifyContent="Center" justifyContent="Center"
gap="200" gap="300"
{...props} {...props}
ref={ref} ref={ref}
> >
@ -972,7 +973,7 @@ export const Message = as<'div', MessageProps>(
escapeDeactivates: stopPropagation, escapeDeactivates: stopPropagation,
}} }}
> >
<Menu> <Menu style={{ minWidth: toRem(200) }}>
{canSendReaction && ( {canSendReaction && (
<MessageQuickReactions <MessageQuickReactions
onReaction={(key, shortcode) => { onReaction={(key, shortcode) => {
@ -1169,6 +1170,7 @@ export const Event = as<'div', EventProps>(
hideReadReceipts, hideReadReceipts,
showDeveloperTools, showDeveloperTools,
children, children,
style,
...props ...props
}, },
ref ref
@ -1235,7 +1237,7 @@ export const Event = as<'div', EventProps>(
escapeDeactivates: stopPropagation, escapeDeactivates: stopPropagation,
}} }}
> >
<Menu {...props} ref={ref}> <Menu style={{ minWidth: toRem(200), ...style }} {...props} ref={ref}>
<Box direction="Column" gap="100" className={css.MessageMenuGroup}> <Box direction="Column" gap="100" className={css.MessageMenuGroup}>
{!hideReadReceipts && ( {!hideReadReceipts && (
<MessageReadReceiptItem <MessageReadReceiptItem

2
src/app/features/room/message/styles.css.ts
View file

@ -30,7 +30,7 @@ export const MessageQuickReaction = style({
}); });
export const MessageMenuGroup = style({ export const MessageMenuGroup = style({
padding: config.space.S100, padding: config.space.S200,
}); });
export const MessageMenuItemText = style({ export const MessageMenuItemText = style({

2
src/app/features/settings/devices/Verification.tsx
View file

@ -315,7 +315,7 @@ export function DeviceVerificationOptions() {
}} }}
> >
<Menu> <Menu>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<MenuItem <MenuItem
variant="Critical" variant="Critical"
onClick={handleReset} onClick={handleReset}

6
src/app/features/settings/general/General.tsx
View file

@ -60,7 +60,7 @@ type ThemeSelectorProps = {
const ThemeSelector = as<'div', ThemeSelectorProps>( const ThemeSelector = as<'div', ThemeSelectorProps>(
({ themeNames, themes, selected, onSelect, ...props }, ref) => ( ({ themeNames, themes, selected, onSelect, ...props }, ref) => (
<Menu {...props} ref={ref}> <Menu {...props} ref={ref}>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
{themes.map((theme) => ( {themes.map((theme) => (
<MenuItem <MenuItem
key={theme.id} key={theme.id}
@ -781,7 +781,7 @@ function SelectMessageLayout() {
}} }}
> >
<Menu> <Menu>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
{messageLayoutItems.map((item) => ( {messageLayoutItems.map((item) => (
<MenuItem <MenuItem
key={item.layout} key={item.layout}
@ -850,7 +850,7 @@ function SelectMessageSpacing() {
}} }}
> >
<Menu> <Menu>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
{messageSpacingItems.map((item) => ( {messageSpacingItems.map((item) => (
<MenuItem <MenuItem
key={item.spacing} key={item.spacing}

2
src/app/features/settings/notifications/NotificationModeSwitcher.tsx
View file

@ -92,7 +92,7 @@ export function NotificationModeSwitcher({ pushRule, onChange }: NotificationMod
}} }}
> >
<Menu> <Menu>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
{modes.map((mode) => ( {modes.map((mode) => (
<MenuItem <MenuItem
key={mode} key={mode}

4
src/app/pages/auth/ServerPicker.tsx
View file

@ -108,10 +108,10 @@ export function ServerPicker({
}} }}
> >
<Menu> <Menu>
<Header size="300" style={{ padding: `0 ${config.space.S200}` }}> <Header size="400" style={{ padding: `0 ${config.space.S300}` }}>
<Text size="L400">Homeserver List</Text> <Text size="L400">Homeserver List</Text>
</Header> </Header>
<div style={{ padding: config.space.S100, paddingTop: 0 }}> <div style={{ padding: config.space.S200, paddingTop: 0 }}>
{serverList?.map((serverName) => ( {serverList?.map((serverName) => (
<MenuItem <MenuItem
key={serverName} key={serverName}

4
src/app/pages/auth/login/PasswordLoginForm.tsx
View file

@ -59,11 +59,11 @@ function UsernameHint({ server }: { server: string }) {
}} }}
> >
<Menu> <Menu>
<Header size="300" style={{ padding: `0 ${config.space.S200}` }}> <Header size="400" style={{ padding: `0 ${config.space.S400}` }}>
<Text size="L400">Hint</Text> <Text size="L400">Hint</Text>
</Header> </Header>
<Box <Box
style={{ padding: config.space.S200, paddingTop: 0 }} style={{ padding: config.space.S400, paddingTop: 0 }}
direction="Column" direction="Column"
tabIndex={0} tabIndex={0}
gap="100" gap="100"

2
src/app/pages/client/ClientRoot.tsx
View file

@ -91,7 +91,7 @@ function ClientRootOptions({ mx }: { mx?: MatrixClient }) {
}} }}
> >
<Menu> <Menu>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
{mx && ( {mx && (
<MenuItem onClick={() => clearCacheAndReload(mx)} size="300" radii="300"> <MenuItem onClick={() => clearCacheAndReload(mx)} size="300" radii="300">
<Text as="span" size="T300" truncate> <Text as="span" size="T300" truncate>

4
src/app/pages/client/direct/Direct.tsx
View file

@ -67,8 +67,8 @@ const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }
}; };
return ( return (
<Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}> <Menu ref={ref} style={{ minWidth: toRem(200) }}>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<MenuItem <MenuItem
onClick={handleMarkAsRead} onClick={handleMarkAsRead}
size="300" size="300"

6
src/app/pages/client/explore/Server.tsx
View file

@ -193,7 +193,7 @@ function ThirdPartyProtocolsSelector({
<Box <Box
direction="Column" direction="Column"
gap="100" gap="100"
style={{ padding: config.space.S100, minWidth: toRem(100) }} style={{ padding: config.space.S200, minWidth: toRem(100) }}
> >
<Text style={{ padding: config.space.S100 }} size="L400" truncate> <Text style={{ padding: config.space.S100 }} size="L400" truncate>
Protocols Protocols
@ -313,11 +313,11 @@ function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
step={1} step={1}
outlined outlined
type="number" type="number"
radii="400" radii="300"
aria-label="Per Page Item Limit" aria-label="Per Page Item Limit"
/> />
</Box> </Box>
<Button type="submit" size="300" variant="Primary" radii="400"> <Button type="submit" size="300" variant="Primary" radii="300">
<Text size="B300">Change Limit</Text> <Text size="B300">Change Limit</Text>
</Button> </Button>
</Box> </Box>

4
src/app/pages/client/home/Home.tsx
View file

@ -75,8 +75,8 @@ const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, re
}; };
return ( return (
<Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}> <Menu ref={ref} style={{ minWidth: toRem(200) }}>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<MenuItem <MenuItem
onClick={handleMarkAsRead} onClick={handleMarkAsRead}
size="300" size="300"

4
src/app/pages/client/sidebar/DirectTab.tsx
View file

@ -42,8 +42,8 @@ const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }
}; };
return ( return (
<Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}> <Menu ref={ref} style={{ minWidth: toRem(200) }}>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<MenuItem <MenuItem
onClick={handleMarkAsRead} onClick={handleMarkAsRead}
size="300" size="300"

4
src/app/pages/client/sidebar/HomeTab.tsx
View file

@ -43,8 +43,8 @@ const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, re
}; };
return ( return (
<Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}> <Menu ref={ref} style={{ minWidth: toRem(200) }}>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<MenuItem <MenuItem
onClick={handleMarkAsRead} onClick={handleMarkAsRead}
size="300" size="300"

6
src/app/pages/client/sidebar/SpaceTabs.tsx
View file

@ -142,8 +142,8 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
}; };
return ( return (
<Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}> <Menu ref={ref} style={{ minWidth: toRem(200) }}>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<MenuItem <MenuItem
onClick={handleMarkAsRead} onClick={handleMarkAsRead}
size="300" size="300"
@ -169,7 +169,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
)} )}
</Box> </Box>
<Line variant="Surface" size="300" /> <Line variant="Surface" size="300" />
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<MenuItem <MenuItem
onClick={handleInvite} onClick={handleInvite}
variant="Primary" variant="Primary"

8
src/app/pages/client/space/Space.tsx
View file

@ -127,8 +127,8 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
}; };
return ( return (
<Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}> <Menu ref={ref} style={{ minWidth: toRem(200) }}>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<MenuItem <MenuItem
onClick={handleMarkAsRead} onClick={handleMarkAsRead}
size="300" size="300"
@ -142,7 +142,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
</MenuItem> </MenuItem>
</Box> </Box>
<Line variant="Surface" size="300" /> <Line variant="Surface" size="300" />
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<MenuItem <MenuItem
onClick={handleInvite} onClick={handleInvite}
variant="Primary" variant="Primary"
@ -190,7 +190,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
)} )}
</Box> </Box>
<Line variant="Surface" size="300" /> <Line variant="Surface" size="300" />
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
<UseStateProvider initial={false}> <UseStateProvider initial={false}>
{(promptLeave, setPromptLeave) => ( {(promptLeave, setPromptLeave) => (
<> <>