Rework design part 1

2026-04-01 19:31:00 +02:00
parent fed270d28d
commit 65b9419869
15 changed files with 324 additions and 222 deletions
--- a/toju-app/src/app/domains/voice-session/feature/floating-voice-controls/floating-voice-controls.component.html
+++ b/toju-app/src/app/domains/voice-session/feature/floating-voice-controls/floating-voice-controls.component.html
@@ -1,12 +1,11 @@
@if (showFloatingControls()) {
-  <!-- Centered relative to rooms-side-panel (w-80 = 320px, so right-40 = 160px from right edge = center) -->
-  <div class="fixed bottom-4 right-40 translate-x-1/2 z-50 bg-card border border-border rounded-xl shadow-lg">
-    <div class="p-2 flex items-center gap-2">
+  <div class="fixed bottom-4 right-4 z-50 border border-border bg-card shadow-lg">
+    <div class="flex items-center gap-2 p-2">
      <!-- Back to server button -->
      <button
        (click)="navigateToServer()"
        type="button"
-        class="flex items-center gap-1.5 px-2 py-1 bg-primary/10 hover:bg-primary/20 text-primary rounded-lg transition-colors"
+        class="flex items-center gap-1.5 rounded-md bg-secondary px-2 py-1 text-foreground transition-colors hover:bg-secondary/80"
        title="Back to {{ voiceSession()?.serverName }}"
      >
        <ng-icon
@@ -20,7 +19,7 @@
            alt=""
          />
        } @else {
-          <div class="w-5 h-5 rounded bg-primary/20 flex items-center justify-center text-[10px] font-semibold">
+          <div class="flex h-5 w-5 items-center justify-center rounded-sm bg-muted text-[10px] font-semibold">
            {{ voiceSession()?.serverName?.charAt(0)?.toUpperCase() || '?' }}
          </div>
        }
@@ -33,7 +32,7 @@
      </div>

      <!-- Divider -->
-      <div class="w-px h-6 bg-border"></div>
+      <div class="h-6 w-px bg-border"></div>

      <!-- Voice controls -->
      <div class="flex items-center gap-1">
@@ -81,7 +80,7 @@
        <button
          (click)="disconnect()"
          type="button"
-          class="w-7 h-7 inline-flex items-center justify-center bg-destructive text-destructive-foreground rounded-lg hover:bg-destructive/90 transition-colors"
+          class="inline-flex h-7 w-7 items-center justify-center rounded-md border border-destructive/20 bg-destructive/10 text-destructive transition-colors hover:bg-destructive/15"
          title="Disconnect"
        >
          <ng-icon
--- a/toju-app/src/app/domains/voice-session/feature/floating-voice-controls/floating-voice-controls.component.ts
+++ b/toju-app/src/app/domains/voice-session/feature/floating-voice-controls/floating-voice-controls.component.ts
@@ -219,57 +219,57 @@ export class FloatingVoiceControlsComponent implements OnInit {

  /** Return the CSS classes for the compact control button based on active state. */
  getCompactButtonClass(isActive: boolean): string {
-    const base = 'w-7 h-7 inline-flex items-center justify-center rounded-lg transition-colors';
+    const base = 'inline-flex h-7 w-7 items-center justify-center rounded-md border transition-colors';

    if (isActive) {
-      return base + ' bg-destructive/20 text-destructive hover:bg-destructive/30';
+      return base + ' border-destructive/30 bg-destructive/10 text-destructive hover:bg-destructive/15';
    }

-    return base + ' bg-secondary text-foreground hover:bg-secondary/80';
+    return base + ' border-border bg-card text-foreground hover:bg-secondary/70';
  }

  /** Return the CSS classes for the compact screen-share button. */
  getCompactScreenShareClass(): string {
-    const base = 'w-7 h-7 inline-flex items-center justify-center rounded-lg transition-colors';
+    const base = 'inline-flex h-7 w-7 items-center justify-center rounded-md border transition-colors';

    if (this.isScreenSharing()) {
-      return base + ' bg-primary/20 text-primary hover:bg-primary/30';
+      return base + ' border-primary/20 bg-primary/10 text-primary hover:bg-primary/15';
    }

-    return base + ' bg-secondary text-foreground hover:bg-secondary/80';
+    return base + ' border-border bg-card text-foreground hover:bg-secondary/70';
  }

  /** Return the CSS classes for the mute toggle button. */
  getMuteButtonClass(): string {
-    const base = 'w-10 h-10 inline-flex items-center justify-center rounded-full transition-colors';
+    const base = 'inline-flex h-10 w-10 items-center justify-center rounded-md border transition-colors';

    if (this.isMuted()) {
-      return base + ' bg-destructive/20 text-destructive hover:bg-destructive/30';
+      return base + ' border-destructive/30 bg-destructive/10 text-destructive hover:bg-destructive/15';
    }

-    return base + ' bg-secondary text-foreground hover:bg-secondary/80';
+    return base + ' border-border bg-card text-foreground hover:bg-secondary/70';
  }

  /** Return the CSS classes for the deafen toggle button. */
  getDeafenButtonClass(): string {
-    const base = 'w-10 h-10 inline-flex items-center justify-center rounded-full transition-colors';
+    const base = 'inline-flex h-10 w-10 items-center justify-center rounded-md border transition-colors';

    if (this.isDeafened()) {
-      return base + ' bg-destructive/20 text-destructive hover:bg-destructive/30';
+      return base + ' border-destructive/30 bg-destructive/10 text-destructive hover:bg-destructive/15';
    }

-    return base + ' bg-secondary text-foreground hover:bg-secondary/80';
+    return base + ' border-border bg-card text-foreground hover:bg-secondary/70';
  }

  /** Return the CSS classes for the screen-share toggle button. */
  getScreenShareButtonClass(): string {
-    const base = 'w-10 h-10 inline-flex items-center justify-center rounded-full transition-colors';
+    const base = 'inline-flex h-10 w-10 items-center justify-center rounded-md border transition-colors';

    if (this.isScreenSharing()) {
-      return base + ' bg-primary/20 text-primary hover:bg-primary/30';
+      return base + ' border-primary/20 bg-primary/10 text-primary hover:bg-primary/15';
    }

-    return base + ' bg-secondary text-foreground hover:bg-secondary/80';
+    return base + ' border-border bg-card text-foreground hover:bg-secondary/70';
  }

  private syncScreenShareSettings(): void {
--- a/toju-app/src/app/domains/voice-session/feature/voice-controls/voice-controls.component.html
+++ b/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"
--- a/toju-app/src/app/domains/voice-session/feature/voice-controls/voice-controls.component.ts
+++ b/toju-app/src/app/domains/voice-session/feature/voice-controls/voice-controls.component.ts
@@ -585,45 +585,45 @@ export class VoiceControlsComponent implements OnInit, OnDestroy {

  getMuteButtonClass(): string {
    const base =
-      'w-10 h-10 inline-flex items-center justify-center rounded-full transition-colors disabled:opacity-50 disabled:cursor-not-allowed';
+      'inline-flex h-10 w-10 items-center justify-center rounded-md border transition-colors disabled:cursor-not-allowed disabled:opacity-50';

    if (this.isMuted()) {
-      return `${base} bg-destructive/20 text-destructive hover:bg-destructive/30`;
+      return `${base} border-destructive/30 bg-destructive/10 text-destructive hover:bg-destructive/15`;
    }

-    return `${base} bg-secondary text-foreground hover:bg-secondary/80`;
+    return `${base} border-border bg-card text-foreground hover:bg-secondary/70`;
  }

  getDeafenButtonClass(): string {
    const base =
-      'w-10 h-10 inline-flex items-center justify-center rounded-full transition-colors disabled:opacity-50 disabled:cursor-not-allowed';
+      'inline-flex h-10 w-10 items-center justify-center rounded-md border transition-colors disabled:cursor-not-allowed disabled:opacity-50';

    if (this.isDeafened()) {
-      return `${base} bg-destructive/20 text-destructive hover:bg-destructive/30`;
+      return `${base} border-destructive/30 bg-destructive/10 text-destructive hover:bg-destructive/15`;
    }

-    return `${base} bg-secondary text-foreground hover:bg-secondary/80`;
+    return `${base} border-border bg-card text-foreground hover:bg-secondary/70`;
  }

  getCameraButtonClass(): string {
    const base =
-      'w-10 h-10 inline-flex items-center justify-center rounded-full transition-colors disabled:opacity-50 disabled:cursor-not-allowed';
+      'inline-flex h-10 w-10 items-center justify-center rounded-md border transition-colors disabled:cursor-not-allowed disabled:opacity-50';

    if (this.isCameraEnabled()) {
-      return `${base} bg-primary/20 text-primary hover:bg-primary/30`;
+      return `${base} border-primary/20 bg-primary/10 text-primary hover:bg-primary/15`;
    }

-    return `${base} bg-secondary text-foreground hover:bg-secondary/80`;
+    return `${base} border-border bg-card text-foreground hover:bg-secondary/70`;
  }

  getScreenShareButtonClass(): string {
    const base =
-      'w-10 h-10 inline-flex items-center justify-center rounded-full transition-colors disabled:opacity-50 disabled:cursor-not-allowed';
+      'inline-flex h-10 w-10 items-center justify-center rounded-md border transition-colors disabled:cursor-not-allowed disabled:opacity-50';

    if (this.isScreenSharing()) {
-      return `${base} bg-primary/20 text-primary hover:bg-primary/30`;
+      return `${base} border-primary/20 bg-primary/10 text-primary hover:bg-primary/15`;
    }

-    return `${base} bg-secondary text-foreground hover:bg-secondary/80`;
+    return `${base} border-border bg-card text-foreground hover:bg-secondary/70`;
  }
 }