From 59cb212234a218f967c0fb480069e7194e0a8235 Mon Sep 17 00:00:00 2001
From: Matthias Van Parijs <matvp91@gmail.com>
Date: Fri, 20 Dec 2024 12:45:55 +0100
Subject: [PATCH] chore: Added layout of player controls

---
 packages/app/src/components/PlayerControls.tsx         | 6 ++++--
 packages/app/src/routes/(dashboard)/_layout/player.tsx | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/PlayerControls.tsx b/packages/app/src/components/PlayerControls.tsx
index c6232bf0..35a4fd7b 100644
--- a/packages/app/src/components/PlayerControls.tsx
+++ b/packages/app/src/components/PlayerControls.tsx
@@ -9,7 +9,7 @@ import type { ReactNode, RefObject } from "react";
 export function PlayerControls() {
   return (
     <div className="flex flex-col gap-4 overflow-hidden">
-      <div className="flex">
+      <div className="flex justify-center">
         <PlayButton />
       </div>
       <div className="p-3 rounded-md bg-default-100">
@@ -111,7 +111,9 @@ function Tooltip({
         "pointer-events-none absolute h-6 -top-8 -translate-x-1/2 opacity-0 transition-opacity text-xs text-white bg-black px-1 flex items-center rounded-md",
         visible && "opacity-100",
       )}
-      style={{ left: `${x * 100}%` }}
+      style={{
+        left: `${x * 100}%`,
+      }}
     >
       {children}
     </div>
diff --git a/packages/app/src/routes/(dashboard)/_layout/player.tsx b/packages/app/src/routes/(dashboard)/_layout/player.tsx
index 8beb2bf7..ef3df5aa 100644
--- a/packages/app/src/routes/(dashboard)/_layout/player.tsx
+++ b/packages/app/src/routes/(dashboard)/_layout/player.tsx
@@ -60,7 +60,7 @@ function RouteComponent() {
     <div className="h-screen p-8 flex gap-4">
       <PlayerProvider>
         <div className="grow flex flex-col gap-4">
-          <div className="bg-gray-200 rounded-lg overflow-hidden shrink-0">
+          <div className="bg-default-100 rounded-lg overflow-hidden shrink-0">
             <div className="max-w-[500px] mx-auto">
               <Player url={url} />
             </div>