Rework design part 1

toju-app/src/app/domains/voice-session/feature/voice-controls/voice-controls.component.html

@@ -1,7 +1,10 @@
-<div class="bg-card border-border p-4">
+<div
+  class="flex flex-col rounded-md border border-border bg-background px-3 py-2.5"
+  [style.height]="showConnectionError() ? null : 'calc(100px - 0.75rem)'"
+>
   <!-- Connection Error Banner -->
   @if (showConnectionError()) {
-    <div class="mb-3 p-2 bg-destructive/20 border border-destructive/30 rounded-lg flex items-center gap-2">
+    <div class="mb-3 flex items-center gap-2 rounded-md border border-destructive/30 bg-destructive/10 p-2">
       <span class="w-2 h-2 rounded-full bg-destructive animate-pulse"></span>
       <span class="text-xs text-destructive">{{ connectionErrorMessage() || 'Connection error' }}</span>
       <button
@@ -15,7 +18,7 @@
   }
 
   <!-- User Info -->
-  <div class="flex items-center gap-3 mb-4">
+  <div class="mb-2 flex items-center gap-3">
     <app-user-avatar
       [name]="currentUser()?.displayName || '?'"
       size="sm"
@@ -24,15 +27,15 @@
       <p class="font-medium text-sm text-foreground truncate">
         {{ currentUser()?.displayName || 'Unknown' }}
       </p>
-      <p class="text-xs text-muted-foreground">
-        @if (showConnectionError()) {
-          <span class="text-destructive">● Connection Error</span>
-        } @else if (isConnected()) {
-          <span class="text-green-500">● Connected</span>
-        } @else {
-          <span class="text-muted-foreground">● Disconnected</span>
-        }
-      </p>
+      @if (showConnectionError() || isConnected()) {
+        <p class="text-xs text-muted-foreground">
+          @if (showConnectionError()) {
+            <span class="text-destructive">Connection Error</span>
+          } @else if (isConnected()) {
+            <span class="text-green-500">Connected</span>
+          }
+        </p>
+      }
     </div>
     <div class="flex items-center gap-1">
       <app-debug-console
@@ -42,7 +45,7 @@
       <button
         type="button"
         (click)="toggleSettings()"
-        class="p-2 hover:bg-secondary rounded-lg transition-colors"
+        class="rounded-md p-2 transition-colors hover:bg-secondary"
       >
         <ng-icon
           name="lucideSettings"
@@ -53,7 +56,7 @@
   </div>
 
   <!-- Voice Controls -->
-  <div class="flex items-center justify-center gap-2">
+  <div class="mt-auto flex items-center justify-center gap-2">
     @if (isConnected()) {
       <!-- Mute Toggle -->
       <button
@@ -128,7 +131,7 @@
       <button
         type="button"
         (click)="disconnect()"
-        class="w-10 h-10 inline-flex items-center justify-center bg-destructive text-destructive-foreground rounded-full hover:bg-destructive/90 transition-colors"
+        class="inline-flex h-10 w-10 items-center justify-center rounded-md border border-destructive/20 bg-destructive/10 text-destructive transition-colors hover:bg-destructive/15"
       >
         <ng-icon
           name="lucidePhoneOff"