adds floating placeholder to select field

src/_pages/ReaderPage/chapterContent/renderChapterContent/ChapterContentComponents.tsx

@@ -149,14 +149,12 @@ export const VerseLabel = ({ verseNumber }: { verseNumber: ReactNode }) => {
 export const Quote = ({ children }: { children: ReactNode }) => {
 	const font = useAtomValue(fontAtom)
 
-	const fontFamily = font !== 'sans' ? font : 'mono'
-
 	return (
 		<span
 			data-component="Quote"
 			className={css({
 				display: 'block',
-				fontFamily,
+				fontFamily: font,
 				textAlign: 'left',
 			})}
 		>
@@ -177,7 +175,7 @@ export const FancyAside = ({ children }: { children: ReactNode }) => {
 			data-component="FancyAside"
 			className={css({
 				color: 'fg.subtle',
-				fontFamily: font === 'sans' ? 'mono' : undefined,
+				fontFamily: font,
 			})}
 		>
 			{children}

src/app/layout.tsx

@@ -33,7 +33,7 @@ export const viewport = (): Viewport => {
 		themeColor: [
 			{
 				media: '(prefers-color-scheme: light)',
-				color: isSepiaTheme ? token('colors.sepia.100') : token('colors.white'),
+				color: isSepiaTheme ? token('colors.sepia.50') : token('colors.white'),
 			},
 			{
 				media: '(prefers-color-scheme: dark)',

src/organisms/BottomToolbar/PreferencesMenu/FontField.tsx

@@ -21,14 +21,18 @@ export const FontField = () => {
 		<SelectField.Container>
 			<FontMenuRoot />
 			<SelectField.Button
+				label={
+					<FontPreview font={font} lineHeight="1">
+						Font
+					</FontPreview>
+				}
+				placeholder="Font"
 				onClick={(e) => {
 					e.stopPropagation()
 					setIsPreferencesMenuSuspended(true)
 					setTimeout(() => setShowFontMenu(true), 150)
 				}}
-			>
-				<FontPreview font={font}>Font</FontPreview>
-			</SelectField.Button>
+			/>
 		</SelectField.Container>
 	)
 }

src/organisms/BottomToolbar/PreferencesMenu/SelectField.tsx

@@ -1,6 +1,6 @@
-import { type ButtonHTMLAttributes, type DetailedHTMLProps } from 'react'
+import { type MouseEventHandler, type ReactNode } from 'react'
 import { css, cx } from 'styled-system/css'
-import { styled } from 'styled-system/jsx'
+import { Caption, Flex, styled } from 'styled-system/jsx'
 import { flex, square } from 'styled-system/patterns'
 import { button } from 'styled-system/recipes'
 
@@ -18,27 +18,48 @@ const Label = styled('label', {
 })
 
 const Button = ({
-	children,
-	...props
-}: DetailedHTMLProps<
-	ButtonHTMLAttributes<HTMLButtonElement>,
-	HTMLButtonElement
->) => (
+	label,
+	placeholder,
+	onClick,
+}: {
+	label: ReactNode
+	placeholder?: string
+	onClick?: MouseEventHandler<HTMLButtonElement>
+}) => (
 	<button
 		className={cx(
+			'group',
 			button({ size: 'md', border: true }),
 			css({
+				pos: 'relative',
 				w: 'full',
 				gap: '4',
 				justifyContent: 'space-between',
 				alignItems: 'center',
 				fontWeight: 'regular',
 				pr: '0',
+				_active: { bg: 'none' },
+				_canHover: { _hover: { bg: 'none' } },
 			}),
 		)}
-		{...props}
+		onClick={onClick}
 	>
-		{children}
+		<Flex direction="column" gap="1" py="0.5">
+			{placeholder && (
+				<Caption
+					pos="absolute"
+					top="0"
+					left="2"
+					transform="translateY(-50%)"
+					px="2"
+					bg="bg.canvas"
+					_groupHover={{ color: 'fg' }}
+				>
+					{placeholder}
+				</Caption>
+			)}
+			{label}
+		</Flex>
 		<styled.center className={square({ size: '10' })}>
 			<Icon code="&#xe409;" size={6} />
 		</styled.center>

src/organisms/BottomToolbar/PreferencesMenu/ThemeField.tsx

@@ -1,6 +1,10 @@
-import { useSetAtom } from 'jotai'
+import { useAtomValue, useSetAtom } from 'jotai'
 
-import { isPreferencesMenuSuspendedAtom, showThemeMenuAtom } from '~/state'
+import {
+	isPreferencesMenuSuspendedAtom,
+	showThemeMenuAtom,
+	themeAtom,
+} from '~/state'
 
 import { SelectField } from './SelectField'
 import { ThemeMenuRoot } from './ThemeMenu'
@@ -10,19 +14,20 @@ export const ThemeField = () => {
 	const setIsPreferencesMenuSuspended = useSetAtom(
 		isPreferencesMenuSuspendedAtom,
 	)
+	const theme = useAtomValue(themeAtom)
 
 	return (
 		<SelectField.Container>
 			<ThemeMenuRoot />
 			<SelectField.Button
+				label={theme}
+				placeholder="Theme"
 				onClick={(e) => {
 					e.stopPropagation()
 					setIsPreferencesMenuSuspended(true)
 					setTimeout(() => setShowThemeMenu(true), 150)
 				}}
-			>
-				Theme
-			</SelectField.Button>
+			/>
 		</SelectField.Container>
 	)
 }