Minor tweaks to HTML and CSS.

This commit is contained in:
CJ Pais 2025-08-01 12:31:11 -07:00
parent d903f89b2e
commit 42e6250895
2 changed files with 13 additions and 6 deletions

View file

@ -1,10 +1,11 @@
.recording-overlay { .recording-overlay {
height: 40px; height: 40px;
width: min-content; /*width: min-content;*/
width: 120px;
display: flex; display: flex;
gap: 12px; gap: 12px;
align-items: center; align-items: center;
padding-left: 4px; padding-left: 6px;
padding-right: 24px; padding-right: 24px;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
border-radius: 24px; border-radius: 24px;
@ -35,7 +36,7 @@
opacity: 0.6; opacity: 0.6;
} }
50% { 50% {
height: 30px; height: 28px;
opacity: 1; opacity: 1;
} }
} }
@ -46,7 +47,7 @@
.transcribing-text { .transcribing-text {
color: #faa2ca; color: #faa2ca;
font-size: 14px; font-size: 12px;
font-weight: 600; font-weight: 600;
font-family: font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

View file

@ -44,10 +44,16 @@ const RecordingOverlay: React.FC = () => {
return ( return (
<div className={`recording-overlay ${isVisible ? "fade-in" : ""}`}> <div className={`recording-overlay ${isVisible ? "fade-in" : ""}`}>
<img width="32" height="32" src={getIconPath()} alt={getIconAlt()} /> <img
width="28"
height="28"
src={getIconPath()}
alt={getIconAlt()}
style={{}}
/>
{state === "recording" && ( {state === "recording" && (
<div className="bars-container"> <div className="bars-container">
{Array.from({ length: 8 }, (_, i) => ( {Array.from({ length: 12 }, (_, i) => (
<div <div
key={i} key={i}
className="bar" className="bar"