karaoke-gen 0.90.1__py3-none-any.whl → 0.96.0__py3-none-any.whl

lyrics_transcriber/frontend/src/components/LyricsSynchronizer/TimelineCanvas.tsx

@@ -23,6 +23,7 @@ interface TimelineCanvasProps {
     audioDuration: number
     zoomSeconds: number
     height?: number
+    isDarkMode?: boolean
 }
 
 // Constants for rendering
@@ -33,17 +34,25 @@ const CANVAS_PADDING = 8
 const TEXT_ABOVE_BLOCK = 14
 const RESIZE_HANDLE_SIZE = 8
 const RESIZE_HANDLE_HITAREA = 12
-// Dark theme colors matching karaoke-gen
-const PLAYHEAD_COLOR = '#f97316' // orange-500 for better visibility
-const WORD_BLOCK_COLOR = '#dc2626' // red-600 for dark mode
-const WORD_BLOCK_SELECTED_COLOR = '#b91c1c' // red-700 for dark mode
-const WORD_BLOCK_CURRENT_COLOR = '#ef4444' // red-500 for dark mode
-const WORD_TEXT_CURRENT_COLOR = '#fca5a5' // red-300 for dark mode
-const UPCOMING_WORD_BG = '#2a2a2a' // slate-700 for dark mode
-const UPCOMING_WORD_TEXT = '#e5e5e5' // slate-50 for dark mode
-const TIME_BAR_BG = '#1a1a1a' // slate-800 for dark mode
-const TIME_BAR_TEXT = '#888888' // slate-400 for dark mode
-const TIMELINE_BG = '#0f0f0f' // slate-900 for dark mode
+
+// Theme-aware colors
+const getThemeColors = (isDarkMode: boolean) => ({
+    playhead: '#f97316', // orange-500 - same for both themes
+    wordBlock: isDarkMode ? '#dc2626' : '#ef4444', // red-600 dark, red-500 light
+    wordBlockSelected: isDarkMode ? '#b91c1c' : '#dc2626', // red-700 dark, red-600 light
+    wordBlockCurrent: isDarkMode ? '#ef4444' : '#f87171', // red-500 dark, red-400 light
+    wordTextCurrent: isDarkMode ? '#fca5a5' : '#991b1b', // red-300 dark, red-800 light
+    wordText: isDarkMode ? '#f8fafc' : '#1e293b', // slate-50 dark, slate-800 light
+    upcomingWordBg: isDarkMode ? '#2a2a2a' : '#e5e7eb', // slate-700 dark, gray-200 light
+    upcomingWordText: isDarkMode ? '#e5e5e5' : '#374151', // slate-50 dark, gray-700 light
+    timeBarBg: isDarkMode ? '#1a1a1a' : '#f3f4f6', // slate-800 dark, gray-100 light
+    timeBarText: isDarkMode ? '#888888' : '#6b7280', // slate-400 dark, gray-500 light
+    timelineBg: isDarkMode ? '#0f0f0f' : '#ffffff', // slate-900 dark, white light
+    gridLine: isDarkMode ? '#64748b' : '#94a3b8', // slate-500 dark, slate-400 light
+    borderLine: isDarkMode ? '#2a2a2a' : '#cbd5e1', // slate-700 dark, slate-300 light
+    handleStroke: isDarkMode ? '#0f0f0f' : '#ffffff', // stroke around handles
+    playheadShadow: isDarkMode ? 'rgba(0,0,0,0.6)' : 'rgba(0,0,0,0.3)', // shadow behind playhead line
+})
 
 // Drag modes
 type DragMode = 'none' | 'selection' | 'resize' | 'move'
@@ -116,8 +125,11 @@ const TimelineCanvas = memo(function TimelineCanvas({
     onScrollChange,
     audioDuration,
     zoomSeconds,
-    height = 200
+    height = 200,
+    isDarkMode = true
 }: TimelineCanvasProps) {
+    // Get theme colors
+    const colors = getThemeColors(isDarkMode)
     const canvasRef = useRef<HTMLCanvasElement>(null)
     const containerRef = useRef<HTMLDivElement>(null)
     const [canvasWidth, setCanvasWidth] = useState(800)
@@ -249,11 +261,11 @@ const TimelineCanvas = memo(function TimelineCanvas({
         ctx.scale(dpr, dpr)
 
         // Clear canvas
-        ctx.fillStyle = TIMELINE_BG
+        ctx.fillStyle = colors.timelineBg
         ctx.fillRect(0, 0, canvasWidth, height)
 
         // Draw time bar background
-        ctx.fillStyle = TIME_BAR_BG
+        ctx.fillStyle = colors.timeBarBg
         ctx.fillRect(0, 0, canvasWidth, TIME_BAR_HEIGHT)
 
         // Draw time markers
@@ -261,15 +273,15 @@ const TimelineCanvas = memo(function TimelineCanvas({
         const secondsPerTick = duration > 15 ? 2 : duration > 8 ? 1 : 0.5
         const startSecond = Math.ceil(visibleStartTime / secondsPerTick) * secondsPerTick
 
-        ctx.fillStyle = TIME_BAR_TEXT
+        ctx.fillStyle = colors.timeBarText
         ctx.font = '11px system-ui, -apple-system, sans-serif'
         ctx.textAlign = 'center'
 
         for (let t = startSecond; t <= visibleEndTime; t += secondsPerTick) {
             const x = timeToX(t)
-            
+
             ctx.beginPath()
-            ctx.strokeStyle = '#64748b' // slate-500 for dark mode
+            ctx.strokeStyle = colors.gridLine
             ctx.lineWidth = 1
             ctx.moveTo(x, TIME_BAR_HEIGHT - 6)
             ctx.lineTo(x, TIME_BAR_HEIGHT)
@@ -281,7 +293,7 @@ const TimelineCanvas = memo(function TimelineCanvas({
         }
 
         ctx.beginPath()
-        ctx.strokeStyle = '#2a2a2a' // slate-700 for dark mode
+        ctx.strokeStyle = colors.borderLine
         ctx.lineWidth = 1
         ctx.moveTo(0, TIME_BAR_HEIGHT)
         ctx.lineTo(canvasWidth, TIME_BAR_HEIGHT)
@@ -305,17 +317,17 @@ const TimelineCanvas = memo(function TimelineCanvas({
 
             // Draw word block background
             if (isSelected) {
-                ctx.fillStyle = WORD_BLOCK_SELECTED_COLOR
+                ctx.fillStyle = colors.wordBlockSelected
             } else if (isCurrent) {
-                ctx.fillStyle = WORD_BLOCK_CURRENT_COLOR
+                ctx.fillStyle = colors.wordBlockCurrent
             } else {
-                ctx.fillStyle = WORD_BLOCK_COLOR
+                ctx.fillStyle = colors.wordBlock
             }
             ctx.fillRect(bounds.startX, bounds.y, bounds.blockWidth, WORD_BLOCK_HEIGHT)
 
             // Draw selection border
             if (isSelected) {
-                ctx.strokeStyle = '#f97316' // orange-500 for dark mode selection
+                ctx.strokeStyle = colors.playhead
                 ctx.lineWidth = 2
                 ctx.strokeRect(bounds.startX, bounds.y, bounds.blockWidth, WORD_BLOCK_HEIGHT)
 
@@ -325,10 +337,10 @@ const TimelineCanvas = memo(function TimelineCanvas({
                     const handleY = bounds.y + WORD_BLOCK_HEIGHT / 2
 
                     ctx.beginPath()
-                    ctx.fillStyle = '#f97316' // orange-500 for dark mode
+                    ctx.fillStyle = colors.playhead
                     ctx.arc(handleX, handleY, RESIZE_HANDLE_SIZE / 2, 0, Math.PI * 2)
                     ctx.fill()
-                    ctx.strokeStyle = '#0f0f0f' // slate-900 for dark mode
+                    ctx.strokeStyle = colors.handleStroke
                     ctx.lineWidth = 1
                     ctx.stroke()
                 }
@@ -369,7 +381,7 @@ const TimelineCanvas = memo(function TimelineCanvas({
                 
                 if (textStartX < canvasWidth - 10) {
                     const isCurrent = word.id === currentWordId
-                    ctx.fillStyle = isCurrent ? WORD_TEXT_CURRENT_COLOR : '#f8fafc' // slate-50 for dark mode
+                    ctx.fillStyle = isCurrent ? colors.wordTextCurrent : colors.wordText
                     ctx.fillText(word.text, textStartX, textY)
                     rightmostTextEnd = textStartX + textWidth
                 }
@@ -387,14 +399,14 @@ const TimelineCanvas = memo(function TimelineCanvas({
             for (let i = 0; i < Math.min(upcomingWords.length, 12); i++) {
                 const word = upcomingWords[i]
                 const textWidth = ctx.measureText(word.text).width + 10
-                
-                ctx.fillStyle = UPCOMING_WORD_BG
+
+                ctx.fillStyle = colors.upcomingWordBg
                 ctx.fillRect(offsetX, TIME_BAR_HEIGHT + CANVAS_PADDING + WORD_LEVEL_SPACING + 60, textWidth, 20)
-                
-                ctx.fillStyle = UPCOMING_WORD_TEXT
+
+                ctx.fillStyle = colors.upcomingWordText
                 ctx.textAlign = 'left'
                 ctx.fillText(word.text, offsetX + 5, TIME_BAR_HEIGHT + CANVAS_PADDING + WORD_LEVEL_SPACING + 74)
-                
+
                 offsetX += textWidth + 3
                 if (offsetX > canvasWidth - 20) break
             }
@@ -403,10 +415,10 @@ const TimelineCanvas = memo(function TimelineCanvas({
         // Draw playhead
         if (currentTime >= visibleStartTime && currentTime <= visibleEndTime) {
             const playheadX = timeToX(currentTime)
-            
+
             ctx.beginPath()
-            ctx.fillStyle = PLAYHEAD_COLOR
-            ctx.strokeStyle = '#0f0f0f' // slate-900 for dark mode
+            ctx.fillStyle = colors.playhead
+            ctx.strokeStyle = colors.handleStroke
             ctx.lineWidth = 1
             ctx.moveTo(playheadX - 6, 2)
             ctx.lineTo(playheadX + 6, 2)
@@ -416,14 +428,14 @@ const TimelineCanvas = memo(function TimelineCanvas({
             ctx.stroke()
 
             ctx.beginPath()
-            ctx.strokeStyle = PLAYHEAD_COLOR
+            ctx.strokeStyle = colors.playhead
             ctx.lineWidth = 2
             ctx.moveTo(playheadX, TIME_BAR_HEIGHT)
             ctx.lineTo(playheadX, height)
             ctx.stroke()
 
             ctx.beginPath()
-            ctx.strokeStyle = 'rgba(0,0,0,0.6)' // Darker shadow for dark mode visibility
+            ctx.strokeStyle = colors.playheadShadow
             ctx.lineWidth = 1
             ctx.moveTo(playheadX + 1, TIME_BAR_HEIGHT)
             ctx.lineTo(playheadX + 1, height)
@@ -447,7 +459,7 @@ const TimelineCanvas = memo(function TimelineCanvas({
     }, [
         canvasWidth, height, visibleStartTime, visibleEndTime, currentTime,
         words, segments, selectedWordIds, selectionRect, hoveredWordId,
-        syncWordIndex, isManualSyncing, timeToX, getWordBounds
+        syncWordIndex, isManualSyncing, timeToX, getWordBounds, colors
     ])
 
     // Animation frame
@@ -653,13 +665,15 @@ const TimelineCanvas = memo(function TimelineCanvas({
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 <Tooltip title="Scroll Left">
-                    <IconButton 
-                        size="small" 
-                        onClick={handleScrollLeft}
-                        disabled={visibleStartTime <= 0}
-                    >
-                        <ArrowBackIcon fontSize="small" />
-                    </IconButton>
+                    <span>
+                        <IconButton
+                            size="small"
+                            onClick={handleScrollLeft}
+                            disabled={visibleStartTime <= 0}
+                        >
+                            <ArrowBackIcon fontSize="small" />
+                        </IconButton>
+                    </span>
                 </Tooltip>
                 
                 <Box 
@@ -689,13 +703,15 @@ const TimelineCanvas = memo(function TimelineCanvas({
                 </Box>
                 
                 <Tooltip title="Scroll Right">
-                    <IconButton 
-                        size="small" 
-                        onClick={handleScrollRight}
-                        disabled={visibleStartTime >= audioDuration - zoomSeconds}
-                    >
-                        <ArrowForwardIcon fontSize="small" />
-                    </IconButton>
+                    <span>
+                        <IconButton
+                            size="small"
+                            onClick={handleScrollRight}
+                            disabled={visibleStartTime >= audioDuration - zoomSeconds}
+                        >
+                            <ArrowForwardIcon fontSize="small" />
+                        </IconButton>
+                    </span>
                 </Tooltip>
             </Box>
         </Box>

lyrics_transcriber/frontend/src/components/LyricsSynchronizer/index.tsx

@@ -10,7 +10,9 @@ import {
     TextField,
     Button,
     Paper,
-    Alert
+    Alert,
+    useTheme,
+    useMediaQuery
 } from '@mui/material'
 import ZoomInIcon from '@mui/icons-material/ZoomIn'
 import ZoomOutIcon from '@mui/icons-material/ZoomOut'
@@ -38,7 +40,7 @@ interface LyricsSynchronizerProps {
 }
 
 // Constants for zoom
-const MIN_ZOOM_SECONDS = 4.5   // Most zoomed in - 4.5 seconds visible
+const MIN_ZOOM_SECONDS = 2     // Most zoomed in - 2 seconds visible
 const MAX_ZOOM_SECONDS = 24    // Most zoomed out - 24 seconds visible
 const ZOOM_STEPS = 50          // Number of zoom levels
 
@@ -60,8 +62,12 @@ const LyricsSynchronizer = memo(function LyricsSynchronizer({
     onCancel,
     setModalSpacebarHandler
 }: LyricsSynchronizerProps) {
+    const theme = useTheme()
+    const isDarkMode = theme.palette.mode === 'dark'
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+
     // Working copy of segments
-    const [workingSegments, setWorkingSegments] = useState<LyricsSegment[]>(() => 
+    const [workingSegments, setWorkingSegments] = useState<LyricsSegment[]>(() =>
         cloneSegments(initialSegments)
     )
     
@@ -664,14 +670,80 @@ const LyricsSynchronizer = memo(function LyricsSynchronizer({
                 spacebarHandlerRef.current(e)
             }
         }
-        
+
         setModalSpacebarHandler(() => handler)
-        
+
         return () => {
             setModalSpacebarHandler(undefined)
         }
     }, [setModalSpacebarHandler])
 
+    // Tap handlers for mobile (simulate spacebar press/release)
+    const handleTapStart = useCallback(() => {
+        if (!isManualSyncing || isPaused) return
+        if (syncWordIndex < 0 || syncWordIndex >= allWords.length) return
+        if (isSpacebarPressed) return
+
+        setIsSpacebarPressed(true)
+        wordStartTimeRef.current = currentTimeRef.current
+        spacebarPressTimeRef.current = Date.now()
+
+        // Set start time for current word
+        const newWords = [...allWords]
+        const currentWord = newWords[syncWordIndex]
+        currentWord.start_time = currentTimeRef.current
+
+        // Handle previous word's end time
+        if (syncWordIndex > 0) {
+            const prevWord = newWords[syncWordIndex - 1]
+            if (prevWord.start_time !== null && prevWord.end_time === null) {
+                const gap = currentTimeRef.current - prevWord.start_time
+                if (gap > 1.0) {
+                    prevWord.end_time = prevWord.start_time + 0.5
+                } else {
+                    prevWord.end_time = currentTimeRef.current - 0.005
+                }
+            }
+        }
+
+        updateWords(newWords)
+    }, [isManualSyncing, isPaused, syncWordIndex, allWords, isSpacebarPressed, updateWords])
+
+    const handleTapEnd = useCallback(() => {
+        if (!isManualSyncing || isPaused) return
+        if (!isSpacebarPressed) return
+
+        setIsSpacebarPressed(false)
+
+        const pressDuration = spacebarPressTimeRef.current
+            ? Date.now() - spacebarPressTimeRef.current
+            : 0
+        const isTap = pressDuration < 200
+
+        const newWords = [...allWords]
+        const currentWord = newWords[syncWordIndex]
+
+        if (isTap) {
+            currentWord.end_time = (wordStartTimeRef.current || currentTimeRef.current) + 0.5
+        } else {
+            currentWord.end_time = currentTimeRef.current
+        }
+
+        updateWords(newWords)
+
+        // Move to next word
+        if (syncWordIndex < allWords.length - 1) {
+            setSyncWordIndex(syncWordIndex + 1)
+        } else {
+            setIsManualSyncing(false)
+            setSyncWordIndex(-1)
+            handleStopAudio()
+        }
+
+        wordStartTimeRef.current = null
+        spacebarPressTimeRef.current = null
+    }, [isManualSyncing, isPaused, isSpacebarPressed, syncWordIndex, allWords, updateWords, handleStopAudio])
+
     // Handle save
     const handleSave = useCallback(() => {
         onSave(workingSegments)
@@ -726,12 +798,14 @@ const LyricsSynchronizer = memo(function LyricsSynchronizer({
                     flexShrink: 0
                 }}
             >
-                <Paper 
-                    sx={{ 
-                        p: 1.5, 
+                <Paper
+                    sx={{
+                        p: 1.5,
                         height: '100%',
-                        bgcolor: isManualSyncing ? 'info.main' : 'grey.100',
-                        color: isManualSyncing ? 'info.contrastText' : 'text.primary',
+                        bgcolor: isManualSyncing
+                            ? 'success.main'
+                            : (isDarkMode ? 'grey.800' : 'grey.100'),
+                        color: isManualSyncing ? 'common.white' : 'text.primary',
                         display: 'flex',
                         flexDirection: 'column',
                         justifyContent: 'center',
@@ -739,34 +813,53 @@ const LyricsSynchronizer = memo(function LyricsSynchronizer({
                         boxSizing: 'border-box'
                     }}
                 >
-                    <Typography variant="body2" sx={{ fontWeight: 500, lineHeight: 1.3 }}>
+                    <Typography
+                        variant="body2"
+                        sx={{
+                            fontWeight: 500,
+                            lineHeight: 1.3,
+                            color: isManualSyncing ? 'common.white' : 'text.primary'
+                        }}
+                    >
                         {instruction.primary}
                     </Typography>
-                    <Typography variant="caption" sx={{ opacity: 0.85, display: 'block', lineHeight: 1.3 }}>
+                    <Typography
+                        variant="caption"
+                        sx={{
+                            opacity: 0.9,
+                            display: 'block',
+                            lineHeight: 1.3,
+                            color: isManualSyncing ? 'common.white' : 'text.secondary'
+                        }}
+                    >
                         {instruction.secondary}
                     </Typography>
                 </Paper>
             </Box>
 
-            {/* Controls - fixed height section */}
-            <Box sx={{ height: 88, flexShrink: 0 }}>
+            {/* Controls section */}
+            <Box sx={{ minHeight: 88, flexShrink: 0 }}>
                 <SyncControls
-                isManualSyncing={isManualSyncing}
-                isPaused={isPaused}
-                onStartSync={handleStartSync}
-                onPauseSync={handlePauseSync}
-                onResumeSync={handleResumeSync}
-                onClearSync={handleClearSync}
-                onEditLyrics={handleEditLyrics}
-                onPlay={handlePlayAudio}
-                onStop={handleStopAudio}
-                isPlaying={isPlaying}
-                hasSelectedWords={selectedWordIds.size > 0}
-                selectedWordCount={selectedWordIds.size}
-                onUnsyncFromCursor={handleUnsyncFromCursor}
-                onEditSelectedWord={handleEditSelectedWord}
-                onDeleteSelected={handleDeleteSelected}
-                canUnsyncFromCursor={canUnsyncFromCursor}
+                    isManualSyncing={isManualSyncing}
+                    isPaused={isPaused}
+                    onStartSync={handleStartSync}
+                    onPauseSync={handlePauseSync}
+                    onResumeSync={handleResumeSync}
+                    onClearSync={handleClearSync}
+                    onEditLyrics={handleEditLyrics}
+                    onPlay={handlePlayAudio}
+                    onStop={handleStopAudio}
+                    isPlaying={isPlaying}
+                    hasSelectedWords={selectedWordIds.size > 0}
+                    selectedWordCount={selectedWordIds.size}
+                    onUnsyncFromCursor={handleUnsyncFromCursor}
+                    onEditSelectedWord={handleEditSelectedWord}
+                    onDeleteSelected={handleDeleteSelected}
+                    canUnsyncFromCursor={canUnsyncFromCursor}
+                    isMobile={isMobile}
+                    onTapStart={handleTapStart}
+                    onTapEnd={handleTapEnd}
+                    isTapping={isSpacebarPressed}
             />
             </Box>
 
@@ -802,6 +895,7 @@ const LyricsSynchronizer = memo(function LyricsSynchronizer({
                     audioDuration={audioDuration}
                     zoomSeconds={zoomSeconds}
                     height={200}
+                    isDarkMode={isDarkMode}
                 />
             </Box>
 

lyrics_transcriber/frontend/src/components/ReferenceView.tsx

@@ -221,7 +221,7 @@ export default function ReferenceView({
                             width: '100%', 
                             mb: 0,
                             '&:hover': {
-                                backgroundColor: 'rgba(248, 250, 252, 0.04)' // slate-50 hover for dark mode
+                                backgroundColor: (theme) => theme.palette.action.hover
                             }
                         }}
                     >

lyrics_transcriber/frontend/src/components/TimelineEditor.tsx

@@ -16,10 +16,13 @@ interface TimelineEditorProps {
 const TimelineContainer = styled(Box)(({ theme }) => ({
     position: 'relative',
     height: '75px',
-    backgroundColor: theme.palette.grey[200],
+    backgroundColor: theme.palette.mode === 'dark'
+        ? theme.palette.background.paper  // Dark mode: use card background
+        : theme.palette.grey[100],         // Light mode: subtle gray
     borderRadius: theme.shape.borderRadius,
     margin: theme.spacing(1, 0),
     padding: theme.spacing(0, 1),
+    border: `1px solid ${theme.palette.divider}`,
 }))
 
 const TimelineRuler = styled(Box)(({ theme }) => ({
@@ -28,7 +31,7 @@ const TimelineRuler = styled(Box)(({ theme }) => ({
     left: 0,
     right: 0,
     height: '40px',
-    borderBottom: `1px solid ${theme.palette.grey[300]}`,
+    borderBottom: `1px solid ${theme.palette.divider}`,
     cursor: 'pointer',
 }))
 
@@ -37,11 +40,11 @@ const TimelineMark = styled(Box)(({ theme }) => ({
     top: '20px',
     width: '1px',
     height: '18px',
-    backgroundColor: theme.palette.grey[700],
+    backgroundColor: theme.palette.text.secondary,
     '&.subsecond': {
         top: '25px',
         height: '13px',
-        backgroundColor: theme.palette.grey[500],
+        backgroundColor: theme.palette.text.disabled,
     }
 }))
 
@@ -52,7 +55,11 @@ const TimelineLabel = styled(Box)(({ theme }) => ({
     fontSize: '0.8rem',
     color: theme.palette.text.primary,
     fontWeight: 700,
-    backgroundColor: theme.palette.grey[200],
+    backgroundColor: theme.palette.mode === 'dark'
+        ? theme.palette.background.paper
+        : theme.palette.grey[100],
+    padding: '0 4px',
+    borderRadius: '2px',
 }))
 
 const TimelineWord = styled(Box)(({ theme }) => ({

lyrics_transcriber/frontend/src/components/TimingOffsetModal.tsx

@@ -118,10 +118,10 @@ export default function TimingOffsetModal({
             </DialogContent>
             <DialogActions>
                 <Button onClick={onClose}>Cancel</Button>
-                <Button 
-                    onClick={handleApply} 
+                <Button
+                    onClick={handleApply}
                     variant="contained"
-                    color={offsetMs === 0 ? "warning" : "primary"}
+                    color="primary"
                 >
                     {offsetMs === 0 ? "Remove Offset" : "Apply Offset"}
                 </Button>

lyrics_transcriber/frontend/src/components/TranscriptionView.tsx

@@ -187,7 +187,7 @@ export default function TranscriptionView({
                             width: '100%',
                             mb: 0,
                             '&:hover': {
-                                backgroundColor: 'rgba(248, 250, 252, 0.04)' // slate-50 hover for dark mode
+                                backgroundColor: (theme) => theme.palette.action.hover
                             }
                         }}>
                             <SegmentControls>

lyrics_transcriber/frontend/src/components/WordDivider.tsx

@@ -18,7 +18,7 @@ interface WordDividerProps {
 }
 
 const buttonTextStyle = {
-    color: 'rgba(248, 250, 252, 0.8)', // slate-50 with opacity for dark mode
+    color: 'text.secondary',
     fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
     fontWeight: 400,
     fontSize: '0.7rem',
@@ -55,10 +55,12 @@ export default function WordDivider({
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-                height: '20px',
-                my: -0.5,
-                width: '50%',
-                backgroundColor: '#1a1a1a', // slate-800 for dark mode
+                height: 'auto',
+                minHeight: '20px',
+                my: 0,
+                width: '100%',
+                bgcolor: 'background.paper',
+                overflow: 'hidden',
                 ...sx
             }}
         >
@@ -66,7 +68,9 @@ export default function WordDivider({
                 display: 'flex',
                 alignItems: 'center',
                 gap: 1,
-                backgroundColor: '#1a1a1a', // slate-800 for dark mode
+                flexWrap: 'wrap',
+                justifyContent: 'center',
+                bgcolor: 'background.paper',
                 padding: '0 8px',
                 zIndex: 1
             }}>
@@ -184,4 +188,4 @@ export default function WordDivider({
             </Box>
         </Box>
     )
-} 
+}

lyrics_transcriber/frontend/src/components/shared/components/Word.tsx

@@ -41,14 +41,16 @@ export const WordComponent = React.memo(function Word({
                 borderRadius: '2px',
                 color: isCurrentlyPlaying ? '#ffffff' : 'inherit',
                 textDecoration: correction ? 'underline dotted' : 'none',
-                textDecorationColor: correction ? '#666666' : 'inherit', // slate-500 for dark mode
                 textUnderlineOffset: '2px',
                 fontSize: '0.85rem',
                 lineHeight: 1.2
             }}
             sx={{
+                textDecorationColor: correction ? 'text.disabled' : 'inherit', // Theme-aware underline color
                 '&:hover': {
-                    backgroundColor: 'rgba(248, 250, 252, 0.08)' // slate-50 hover for dark mode
+                    backgroundColor: (theme) => theme.palette.mode === 'dark'
+                        ? 'rgba(248, 250, 252, 0.08)'  // light hover for dark mode
+                        : 'rgba(30, 41, 59, 0.08)'    // dark hover for light mode
                 }
             }}
             onClick={onClick}