Skip to content

Commit c79ecfb

Browse files
7w17w1
authored
Fix some small styling issues (#830)
<!-- Please read https://github.com/SableClient/Sable/blob/dev/CONTRIBUTING.md before submitting your pull request --> ### Description <!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. --> Fixes the settings menu header being misaligned, the room, dm, and home headers being the wrong size. (internal) Adds a little border and shadow to the thread drawer. #### Type of change - [x] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] This change requires a documentation update ### Checklist: - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings ### AI disclosure: - [ ] Partially AI assisted (clarify which code was AI assisted and briefly explain what it does). - [ ] Fully AI generated (explain what all the generated code does in moderate detail). <!-- Write any explanation required here, but do not generate the explanation using AI!! You must prove you understand what the code in this PR does. -->
2 parents 329e626 + 6ade93e commit c79ecfb

10 files changed

Lines changed: 138 additions & 133 deletions

File tree

‎.changeset/thread-drawer-root-separator.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
default: patch
3+
---
4+
5+
Improve thread drawer separation between the pinned root message and replies with a border.

‎src/app/components/page/Page.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,9 @@ export function PageNav({ size, children }: ClientDrawerLayoutProps & css.PageNa
4444
);
4545
}
4646

47-
export const PageNavHeader = as<'header', css.PageNavHeaderVariants>(
47+
type PageNavHeaderOwnProps = Pick<ComponentProps<typeof Header>, 'size'>;
48+
49+
export const PageNavHeader = as<'header', css.PageNavHeaderVariants & PageNavHeaderOwnProps>(
4850
({ className, outlined, ...props }, ref) => (
4951
<Header
5052
className={classNames(css.PageNavHeader({ outlined }), className)}

‎src/app/components/page/style.css.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const PageNavHeader = recipe({
4646
variants: {
4747
outlined: {
4848
true: {
49-
borderBottomWidth: 1,
49+
borderBottomWidth: config.borderWidth.B300,
5050
},
5151
},
5252
},

‎src/app/features/room/ThreadDrawer.css.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,23 @@ export const ThreadDrawerHeader = style({
2828
borderBottomWidth: config.borderWidth.B300,
2929
});
3030

31+
export const threadRootShell = style({
32+
position: 'relative',
33+
display: 'flex',
34+
flexDirection: 'column',
35+
flexShrink: 0,
36+
});
37+
38+
export const threadRootScrollShadow = style({
39+
position: 'relative',
40+
flexShrink: 0,
41+
zIndex: 1,
42+
boxShadow: config.shadow.E100,
43+
borderBottomWidth: config.borderWidth.B300,
44+
borderBottomStyle: 'solid',
45+
borderBottomColor: color.Surface.ContainerLine,
46+
});
47+
3148
export const ThreadDrawerContent = style({
3249
position: 'relative',
3350
overflow: 'hidden',

‎src/app/features/room/ThreadDrawer.tsx‎

Lines changed: 30 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,6 @@
11
import type { MouseEventHandler } from 'react';
22
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
3-
import {
4-
Box,
5-
Header,
6-
Icon,
7-
IconButton,
8-
Icons,
9-
Scroll,
10-
Spinner,
11-
Text,
12-
color,
13-
config,
14-
toRem,
15-
} from 'folds';
3+
import { Box, Header, Icon, IconButton, Icons, Scroll, Spinner, Text, config, toRem } from 'folds';
164
import type { IEvent, Room } from '$types/matrix-sdk';
175
import {
186
Direction,
@@ -807,36 +795,38 @@ export function ThreadDrawer({ room, threadRootId, onClose, overlay }: ThreadDra
807795

808796
{/* Thread root message */}
809797
{rootEvent && (
810-
<Box style={{ position: 'relative', flexShrink: 0 }}>
811-
<Scroll
812-
variant="Background"
813-
visibility="Hover"
814-
direction="Vertical"
815-
size="300"
816-
hideTrack
817-
style={{
818-
height: toRem(curHeight),
819-
flexShrink: 0,
820-
}}
821-
>
822-
<Box
823-
className={css.messageList}
824-
direction="Column"
798+
<Box className={css.threadRootShell}>
799+
<Box className={css.threadRootScrollShadow}>
800+
<Scroll
801+
variant="Background"
802+
visibility="Hover"
803+
direction="Vertical"
804+
size="300"
805+
hideTrack
825806
style={{
826-
padding: `${config.space.S200} 0 ${config.space.S100} 0`,
807+
height: toRem(curHeight),
808+
flexShrink: 0,
827809
}}
828810
>
829-
{renderMatrixEvent(
830-
rootEvent.getType(),
831-
typeof rootEvent.getStateKey() === 'string',
832-
rootEvent.getId()!,
833-
rootEvent,
834-
processedEvents.find((e) => e.id === threadRootId)?.itemIndex ?? 0,
835-
thread?.timelineSet ?? room.getUnfilteredTimelineSet(),
836-
false
837-
)}
838-
</Box>
839-
</Scroll>
811+
<Box
812+
className={css.messageList}
813+
direction="Column"
814+
style={{
815+
padding: `${config.space.S200} 0 ${config.space.S100} 0`,
816+
}}
817+
>
818+
{renderMatrixEvent(
819+
rootEvent.getType(),
820+
typeof rootEvent.getStateKey() === 'string',
821+
rootEvent.getId()!,
822+
rootEvent,
823+
processedEvents.find((e) => e.id === threadRootId)?.itemIndex ?? 0,
824+
thread?.timelineSet ?? room.getUnfilteredTimelineSet(),
825+
false
826+
)}
827+
</Box>
828+
</Scroll>
829+
</Box>
840830
<SidebarResizer
841831
setCurWidth={setCurHeight}
842832
sidebarWidth={threadRootHeight}
@@ -845,13 +835,6 @@ export function ThreadDrawer({ room, threadRootId, onClose, overlay }: ThreadDra
845835
maxValue={700}
846836
topSided
847837
/>
848-
<div
849-
style={{
850-
width: '100%',
851-
height: toRem(1),
852-
backgroundColor: color.Surface.ContainerLine,
853-
}}
854-
/>
855838
</Box>
856839
)}
857840
{/* Replies */}

‎src/app/features/settings/Settings.tsx‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -249,29 +249,31 @@ export function Settings({
249249
nav={
250250
screenSize === ScreenSize.Mobile && visibleSection !== null ? undefined : (
251251
<PageNav size="300">
252-
<PageNavHeader className={settingsHeader}>
252+
<PageNavHeader className={settingsHeader} size="600">
253253
<Box grow="Yes" gap="200">
254-
<Avatar size="200" radii="300">
255-
<UserAvatar
256-
userId={userId}
257-
src={avatarUrl}
258-
renderFallback={() => <Text size="H6">{nameInitials(displayName)}</Text>}
259-
/>
260-
</Avatar>
261-
<Text size="H4" truncate>
262-
Settings
263-
</Text>
264-
</Box>
265-
<Box shrink="No">
266-
{visibleSection === null && (
267-
<IconButton
268-
aria-label="Close settings"
269-
onClick={handleRequestClose}
270-
variant="Background"
271-
>
272-
<Icon src={Icons.Cross} />
273-
</IconButton>
274-
)}
254+
<Box grow="Yes" alignItems="Center" gap="200">
255+
<Avatar size="200" radii="300">
256+
<UserAvatar
257+
userId={userId}
258+
src={avatarUrl}
259+
renderFallback={() => <Text size="H6">{nameInitials(displayName)}</Text>}
260+
/>
261+
</Avatar>
262+
<Text size="H4" truncate>
263+
Settings
264+
</Text>
265+
</Box>
266+
<Box shrink="No">
267+
{visibleSection === null && (
268+
<IconButton
269+
aria-label="Close settings"
270+
onClick={handleRequestClose}
271+
variant="Background"
272+
>
273+
<Icon src={Icons.Cross} />
274+
</IconButton>
275+
)}
276+
</Box>
275277
</Box>
276278
</PageNavHeader>
277279
<Box grow="Yes" direction="Column">

‎src/app/pages/client/direct/Direct.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -103,25 +103,27 @@ function DirectHeader({ hideText }: { hideText?: boolean }) {
103103
};
104104
return (
105105
<>
106-
<PageNavHeader>
107-
<Box alignItems="Center" grow="Yes" gap="300" justifyContent="Center">
108-
{!hideText && (
109-
<Box grow="Yes">
106+
<PageNavHeader size="600">
107+
{hideText ? (
108+
<Box alignItems="Center" grow="Yes" justifyContent="Center">
109+
<IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
110+
<Icon src={Icons.User} size="200" filled={!!menuAnchor} />
111+
</IconButton>
112+
</Box>
113+
) : (
114+
<Box grow="Yes" gap="300">
115+
<Box grow="Yes" alignItems="Center">
110116
<Text size="H4" truncate>
111117
Direct Messages
112118
</Text>
113119
</Box>
114-
)}
115-
<Box>
116-
<IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
117-
<Icon
118-
src={hideText ? Icons.User : Icons.VerticalDots}
119-
size="200"
120-
filled={!!menuAnchor}
121-
/>
122-
</IconButton>
120+
<Box shrink="No">
121+
<IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
122+
<Icon src={Icons.VerticalDots} size="200" filled={!!menuAnchor} />
123+
</IconButton>
124+
</Box>
123125
</Box>
124-
</Box>
126+
)}
125127
</PageNavHeader>
126128
<PopOut
127129
anchor={menuAnchor}

‎src/app/pages/client/home/Home.tsx‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -113,30 +113,27 @@ function HomeHeader({ hideText }: { hideText?: boolean }) {
113113

114114
return (
115115
<>
116-
<PageNavHeader>
117-
<Box
118-
alignItems="Center"
119-
grow="Yes"
120-
gap="300"
121-
justifyContent={hideText ? 'Center' : 'Start'}
122-
>
123-
{!hideText && (
124-
<Box grow="Yes">
116+
<PageNavHeader size="600">
117+
{hideText ? (
118+
<Box alignItems="Center" grow="Yes" justifyContent="Center">
119+
<IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
120+
<Icon src={Icons.Home} size="200" filled={!!menuAnchor} />
121+
</IconButton>
122+
</Box>
123+
) : (
124+
<Box grow="Yes" gap="300">
125+
<Box grow="Yes" alignItems="Center">
125126
<Text size="H4" truncate>
126127
Home
127128
</Text>
128129
</Box>
129-
)}
130-
<Box>
131-
<IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
132-
<Icon
133-
src={hideText ? Icons.Home : Icons.VerticalDots}
134-
size="200"
135-
filled={!!menuAnchor}
136-
/>
137-
</IconButton>
130+
<Box shrink="No">
131+
<IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
132+
<Icon src={Icons.VerticalDots} size="200" filled={!!menuAnchor} />
133+
</IconButton>
134+
</Box>
138135
</Box>
139-
</Box>
136+
)}
140137
</PageNavHeader>
141138
<PopOut
142139
anchor={menuAnchor}

‎src/app/pages/client/space/Space.tsx‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -291,9 +291,9 @@ function SpaceHeader({ hideText, mx }: { hideText?: boolean; mx: MatrixClient })
291291
hasBanner ? css.RoomCoverNavContainer : css.RoomCoverlessNavContainer({ hideText })
292292
}
293293
>
294-
<PageNavHeader outlined={false}>
295-
<Box alignItems="Center" grow="Yes" gap="300" justifyContent="Center">
296-
{hideText ? (
294+
<PageNavHeader outlined={!hasBanner} size="600">
295+
{hideText ? (
296+
<Box alignItems="Center" grow="Yes" justifyContent="Center">
297297
<Avatar size={hideText ? undefined : '200'} radii="400" onClick={handleOpenMenu}>
298298
<RoomAvatar
299299
roomId={space.roomId}
@@ -307,29 +307,27 @@ function SpaceHeader({ hideText, mx }: { hideText?: boolean; mx: MatrixClient })
307307
)}
308308
/>
309309
</Avatar>
310-
) : (
311-
<>
312-
<Box grow="Yes" alignItems="Center" gap="100">
313-
<Text size="H4" truncate>
314-
{spaceName}
315-
</Text>
316-
{joinRules?.join_rule !== JoinRule.Public && (
317-
<Icon src={Icons.Lock} size="50" />
318-
)}
319-
</Box>
320-
<Box shrink="No">
321-
<IconButton
322-
aria-pressed={!!menuAnchor}
323-
variant="Background"
324-
style={hasBanner ? { backgroundColor: '#0000' } : {}}
325-
onClick={handleOpenMenu}
326-
>
327-
<Icon src={Icons.VerticalDots} size="200" />
328-
</IconButton>
329-
</Box>
330-
</>
331-
)}
332-
</Box>
310+
</Box>
311+
) : (
312+
<Box grow="Yes" gap="300">
313+
<Box grow="Yes" alignItems="Center" gap="100">
314+
<Text size="H4" truncate>
315+
{spaceName}
316+
</Text>
317+
{joinRules?.join_rule !== JoinRule.Public && <Icon src={Icons.Lock} size="50" />}
318+
</Box>
319+
<Box shrink="No">
320+
<IconButton
321+
aria-pressed={!!menuAnchor}
322+
variant="Background"
323+
style={hasBanner ? { backgroundColor: '#0000' } : {}}
324+
onClick={handleOpenMenu}
325+
>
326+
<Icon src={Icons.VerticalDots} size="200" />
327+
</IconButton>
328+
</Box>
329+
</Box>
330+
)}
333331
</PageNavHeader>
334332
{menuAnchor && (
335333
<PopOut

‎src/app/pages/client/space/styles.css.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { style } from '@vanilla-extract/css';
22
import { recipe } from '@vanilla-extract/recipes';
3-
import { color, config } from 'folds';
3+
import { config } from 'folds';
44

55
export const RoomCoverHeaderContainer = style({ width: '100%', position: 'relative' });
66
export const RoomCoverNavContainer = style({
@@ -13,7 +13,6 @@ export const RoomCoverNavContainer = style({
1313
export const RoomCoverlessNavContainer = recipe({
1414
base: {
1515
flexShrink: 0,
16-
borderBottom: `1px solid ${color.Background.ContainerLine}`,
1716
minHeight: '100%',
1817
paddingRight: 0,
1918
},
@@ -23,7 +22,7 @@ export const RoomCoverlessNavContainer = recipe({
2322
padding: `${config.space.S100} ${config.space.S200} ${config.space.S200}`,
2423
},
2524
false: {
26-
padding: `${config.space.S100} ${config.space.S200} ${config.space.S200} ${config.space.S400}`,
25+
padding: 0,
2726
},
2827
},
2928
},

0 commit comments

Comments
 (0)