From d92fd7ea60161eef734447091479f96326821742 Mon Sep 17 00:00:00 2001
From: heaven <vojochatdev@gmail.com>
Date: Wed, 3 Jun 2026 16:53:11 +0300
Subject: [PATCH] style(emoji-board): hairline frame, uppercase muted group
 labels and a flush mono-shortcode footer

---
 .../emoji-board/components/Preview.tsx        |  2 +-
 .../emoji-board/components/styles.css.ts      | 30 +++++++++++--------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/app/components/emoji-board/components/Preview.tsx b/src/app/components/emoji-board/components/Preview.tsx
index 3f5f8d3a..e17bed5e 100644
--- a/src/app/components/emoji-board/components/Preview.tsx
+++ b/src/app/components/emoji-board/components/Preview.tsx
@@ -45,7 +45,7 @@ export function Preview({ previewAtom }: PreviewProps) {
           )}
         </Box>
       )}
-      <Text size="H5" truncate>
+      <Text size="H5" truncate style={{ fontFamily: 'var(--font-mono)' }}>
         :{shortcode}:
       </Text>
     </Box>
diff --git a/src/app/components/emoji-board/components/styles.css.ts b/src/app/components/emoji-board/components/styles.css.ts
index c86a08d8..73cffaed 100644
--- a/src/app/components/emoji-board/components/styles.css.ts
+++ b/src/app/components/emoji-board/components/styles.css.ts
@@ -11,9 +11,11 @@ export const Base = style({
   height: toRem(450),
   backgroundColor: color.Surface.Container,
   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,
-  boxShadow: config.shadow.E200,
+  boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4)',
   overflow: 'hidden',
 });
 
@@ -57,13 +59,11 @@ export const SidebarBtnImg = style({
  */
 
 export const Preview = style({
-  padding: config.space.S200,
-  margin: config.space.S300,
-  marginTop: 0,
+  padding: `${config.space.S300} ${config.space.S400}`,
   minHeight: toRem(40),
 
-  borderRadius: config.radii.R400,
-  backgroundColor: color.SurfaceVariant.Container,
+  // Dawn: a flush footer separated by a hairline, not an inset boxed card.
+  borderTop: `${config.borderWidth.B300} solid rgba(255, 255, 255, 0.08)`,
   color: color.SurfaceVariant.OnContainer,
 });
 
@@ -96,14 +96,18 @@ export const EmojiGroup = style({
 
 export const EmojiGroupLabel = style({
   position: 'sticky',
-  top: config.space.S200,
+  top: 0,
   zIndex: 1,
 
-  margin: 'auto',
-  padding: `${config.space.S100} ${config.space.S200}`,
-  borderRadius: config.radii.Pill,
-  backgroundColor: color.SurfaceVariant.Container,
-  color: color.SurfaceVariant.OnContainer,
+  // Dawn section label — uppercase, tracked, muted, left-aligned (was a centered
+  // pill chip). Opaque board background so it covers items scrolling underneath;
+  // muting is via the text colour (element opacity would let content show through).
+  padding: `${config.space.S300} ${config.space.S200} ${config.space.S100}`,
+  backgroundColor: color.Surface.Container,
+  color: 'rgba(230, 230, 233, 0.5)',
+  textTransform: 'uppercase',
+  letterSpacing: '0.06em',
+  fontWeight: config.fontWeight.W600,
 });
 
 export const EmojiGroupContent = style([