From 3101c61584a3b072ac40dba4a77e15371b01f175 Mon Sep 17 00:00:00 2001
From: nocnico <nicolas@syntaxdev.de>
Date: Mon, 17 Mar 2025 20:29:40 +0100
Subject: [PATCH] fixed ui

---
 .../(dispatch)/_components/navbar/Navbar.tsx  | 32 +++++---------
 .../_components/navbar/_components/Audio.tsx  | 44 ++++++++++++-------
 2 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/apps/dispatch/app/(dispatch)/_components/navbar/Navbar.tsx b/apps/dispatch/app/(dispatch)/_components/navbar/Navbar.tsx
index b0e4ce03..4029a064 100644
--- a/apps/dispatch/app/(dispatch)/_components/navbar/Navbar.tsx
+++ b/apps/dispatch/app/(dispatch)/_components/navbar/Navbar.tsx
@@ -5,6 +5,7 @@ import { Connection } from "./_components/Connection";
 import { ThemeSwap } from "./_components/ThemeSwap";
 import { Audio } from "./_components/Audio";
 import { useState } from "react";
+import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
 
 export default function Navbar() {
 	const [isDark, setIsDark] = useState(false);
@@ -26,31 +27,18 @@ export default function Navbar() {
 			<div className="flex gap-2">
 				<Audio />
 			</div>
-			<div className="flex gap-6">
-				<ThemeSwap isDark={isDark} toggleTheme={toggleTheme} />
+			<div className="flex gap-5 items-center">
 				<div className="flex items-center">
 					<Connection />
 				</div>
-				<div className="dropdown dropdown-end">
-					<div tabIndex={0} role="button" className="btn btn-ghost">
-						...
-					</div>
-					<ul
-						tabIndex={0}
-						className="menu menu-sm dropdown-content bg-base-100 box z-1 mt-3 w-52 p-2 shadow"
-					>
-						<li>
-							<a className="justify-between">Profil</a>
-						</li>
-						<li>
-							<a>Einstellungen</a>
-						</li>
-						<li>
-							<Link href={"/logout"}>
-								<p>Logout</p>
-							</Link>
-						</li>
-					</ul>
+				<ThemeSwap isDark={isDark} toggleTheme={toggleTheme} />
+				<div className="flex items-center">
+					<button className="btn btn-ghost">
+						<ExternalLinkIcon className="w-4 h-4" /> HUB
+					</button>
+					<button className="btn btn-ghost">
+						<ExitIcon className="w-4 h-4" />
+					</button>
 				</div>
 			</div>
 		</div>
diff --git a/apps/dispatch/app/(dispatch)/_components/navbar/_components/Audio.tsx b/apps/dispatch/app/(dispatch)/_components/navbar/_components/Audio.tsx
index 583887bc..22d3337b 100644
--- a/apps/dispatch/app/(dispatch)/_components/navbar/_components/Audio.tsx
+++ b/apps/dispatch/app/(dispatch)/_components/navbar/_components/Audio.tsx
@@ -3,7 +3,6 @@
 import { useEffect, useState } from "react";
 import { useConnectionStore } from "_store/connectionStore";
 import {
-	Circle,
 	Disc,
 	Mic,
 	PlugZap,
@@ -50,7 +49,7 @@ export const Audio = () => {
 
 	return (
 		<>
-			<div className="bg-base-200 rounded-box flex items-center gap-2 p-3">
+			<div className="bg-base-200 rounded-box flex items-center gap-2 p-1">
 				<button
 					onClick={() => {
 						if (state === "connected") toggleTalking();
@@ -65,30 +64,38 @@ export const Audio = () => {
 							"bg-yellow-500 hover:bg-yellow-500 cursor-default",
 					)}
 				>
-					{state === "connected" && <Mic />}
-					{state === "disconnected" && <WifiOff />}
-					{state === "connecting" && <PlugZap />}
+					{state === "connected" && <Mic className="w-5 h-5" />}
+					{state === "disconnected" && <WifiOff className="w-5 h-5" />}
+					{state === "connecting" && <PlugZap className="w-5 h-5" />}
 				</button>
 
 				{state === "connected" && (
-					<details className="dropdown">
+					<details className="dropdown relative z-[1050]">
 						<summary className="dropdown btn btn-ghost flex items-center gap-1">
-							{connectionQuality === ConnectionQuality.Excellent && <Signal />}
-							{connectionQuality === ConnectionQuality.Good && <SignalMedium />}
-							{connectionQuality === ConnectionQuality.Poor && <SignalLow />}
-							{connectionQuality === ConnectionQuality.Lost && <ZapOff />}
-							{connectionQuality === ConnectionQuality.Unknown && (
-								<ShieldQuestion />
+							{connectionQuality === ConnectionQuality.Excellent && (
+								<Signal className="w-5 h-5" />
 							)}
-							<div className="badge badge-soft badge-success">
+							{connectionQuality === ConnectionQuality.Good && (
+								<SignalMedium className="w-5 h-5" />
+							)}
+							{connectionQuality === ConnectionQuality.Poor && (
+								<SignalLow className="w-5 h-5" />
+							)}
+							{connectionQuality === ConnectionQuality.Lost && (
+								<ZapOff className="w-5 h-5" />
+							)}
+							{connectionQuality === ConnectionQuality.Unknown && (
+								<ShieldQuestion className="w-5 h-5" />
+							)}
+							<div className="badge badge-sm badge-soft badge-success">
 								{remoteParticipants}
 							</div>
 						</summary>
-						<ul className="menu dropdown-content bg-base-100 rounded-box z-[99999999] w-52 p-2 shadow-sm">
+						<ul className="menu dropdown-content bg-base-200 rounded-box z-[1050] w-52 p-2 shadow-sm">
 							{ROOMS.map((r) => (
 								<li key={r}>
 									<button
-										className="btn btn-sm btn-ghost text-left"
+										className="btn btn-sm btn-ghost text-left flex items-center justify-start gap-2 relative"
 										onClick={() => {
 											if (selectedRoom === r) return;
 											setSelectedRoom(r);
@@ -96,9 +103,12 @@ export const Audio = () => {
 										}}
 									>
 										{room?.name === r && (
-											<Disc className="text-success text-sm" width={15} />
+											<Disc
+												className="text-success text-sm absolute left-2"
+												width={15}
+											/>
 										)}
-										{r}
+										<span className="flex-1 text-center">{r}</span>
 									</button>
 								</li>
 							))}