heaven/vojo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(emoji-board): hairline frame, uppercase muted group labels and a flush mono-shortcode footer

Browse source
This commit is contained in:
heaven 2026-06-03 16:53:11 +03:00
parent 8989c0d7f7
commit d92fd7ea60
2 changed files with 18 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/components/emoji-board/components/Preview.tsx
View file

@ -45,7 +45,7 @@ export function Preview({ previewAtom }: PreviewProps) {
)} )}
</Box> </Box>
)} )}
<Text size="H5" truncate> <Text size="H5" truncate style={{ fontFamily: 'var(--font-mono)' }}>
:{shortcode}: :{shortcode}:
</Text> </Text>
</Box> </Box>

30
src/app/components/emoji-board/components/styles.css.ts
View file

@ -11,9 +11,11 @@ export const Base = style({
height: toRem(450), height: toRem(450),
backgroundColor: color.Surface.Container, backgroundColor: color.Surface.Container,
color: color.Surface.OnContainer, color: color.Surface.OnContainer,
border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`, // Dawn: a faint hairline + soft shadow instead of the stock solid-bordered
// floating card.
border: `${config.borderWidth.B300} solid rgba(255, 255, 255, 0.08)`,
borderRadius: config.radii.R400, borderRadius: config.radii.R400,
boxShadow: config.shadow.E200, boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4)',
overflow: 'hidden', overflow: 'hidden',
}); });
@ -57,13 +59,11 @@ export const SidebarBtnImg = style({
*/ */
export const Preview = style({ export const Preview = style({
padding: config.space.S200, padding: `${config.space.S300} ${config.space.S400}`,
margin: config.space.S300,
marginTop: 0,
minHeight: toRem(40), minHeight: toRem(40),
borderRadius: config.radii.R400, // Dawn: a flush footer separated by a hairline, not an inset boxed card.
backgroundColor: color.SurfaceVariant.Container, borderTop: `${config.borderWidth.B300} solid rgba(255, 255, 255, 0.08)`,
color: color.SurfaceVariant.OnContainer, color: color.SurfaceVariant.OnContainer,
}); });
@ -96,14 +96,18 @@ export const EmojiGroup = style({
export const EmojiGroupLabel = style({ export const EmojiGroupLabel = style({
position: 'sticky', position: 'sticky',
top: config.space.S200, top: 0,
zIndex: 1, zIndex: 1,
margin: 'auto', // Dawn section label — uppercase, tracked, muted, left-aligned (was a centered
padding: `${config.space.S100} ${config.space.S200}`, // pill chip). Opaque board background so it covers items scrolling underneath;
borderRadius: config.radii.Pill, // muting is via the text colour (element opacity would let content show through).
backgroundColor: color.SurfaceVariant.Container, padding: `${config.space.S300} ${config.space.S200} ${config.space.S100}`,
color: color.SurfaceVariant.OnContainer, backgroundColor: color.Surface.Container,
color: 'rgba(230, 230, 233, 0.5)',
textTransform: 'uppercase',
letterSpacing: '0.06em',
fontWeight: config.fontWeight.W600,
}); });
export const EmojiGroupContent = style([ export const EmojiGroupContent = style([