button styling

src/components/audio.ts

@@ -166,6 +166,10 @@ async function wrapVoiceMessage(audioEl: AudioElement) {
   const audioControlsDiv = document.createElement('div');
   audioControlsDiv.classList.add('audio-controls');
 
+  const audioTimelineDiv = document.createElement('div');
+  audioTimelineDiv.classList.add('audio-timeline');
+  audioControlsDiv.append(audioTimelineDiv);
+
   const fakeSvgContainer = svgContainer.cloneNode(true) as HTMLElement;
   fakeSvgContainer.classList.add('audio-waveform-fake');
   svgContainer.classList.add('audio-waveform-background');
@@ -176,7 +180,7 @@ async function wrapVoiceMessage(audioEl: AudioElement) {
 
   const timeDiv = document.createElement('div');
   timeDiv.classList.add('audio-time');
-  audioControlsDiv.append(waveformContainer, timeDiv);
+  audioTimelineDiv.append(waveformContainer, timeDiv);
 
   audioEl.append(audioControlsDiv);
 
@@ -195,7 +199,9 @@ async function wrapVoiceMessage(audioEl: AudioElement) {
       speechTextDiv.innerHTML = transcription.text;
     };
 
-    audioEl.append(speechRecognitionDiv, speechTextDiv);
+    audioControlsDiv.append(speechRecognitionDiv);
+    audioEl.append(speechTextDiv);
+
   }
 
   let progress = svg as any as HTMLElement;

src/scss/partials/_audio.scss

@@ -428,7 +428,7 @@
   // &.audio-48 {
     --icon-size: 3rem;
     --icon-margin: .5625rem;
-    height: var(--icon-size);
+    min-height: var(--icon-size);
 
     .audio-details {
       margin-top: 3px;
@@ -439,6 +439,28 @@
       margin-bottom: -2px;
     }
 
+    .audio-controls {
+      display: flex;
+      align-items: flex-start;
+      gap: .25em;
+      
+      .audio-to-text-button {
+        background: var(--ripple-color);
+        width: max-content;
+        margin-top: 0.3rem;
+        padding: 0.2rem;
+        padding-right: 0.3rem;
+        font-size: .8em;
+        border-radius: 0.3rem;
+      }
+
+    }
+
+    .audio-to-text {
+      margin-left: calc(var(--icon-size)*-1 - var(--icon-margin) - var(--padding));
+      margin-top: 1em;
+    }
+
     .part {
       height: 112px !important;
       width: 112px !important;

src/scss/partials/_document.scss

@@ -202,7 +202,6 @@
   padding-inline-start: var(--padding-left);
   display: flex;
   flex-direction: column;
-  justify-content: center;
   cursor: pointer;
   // position: relative;
   user-select: none;