From 0c3c2521652ef1e1ff2d9e2b97968229fbd7961e Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Wed, 26 Apr 2023 15:10:43 +0200
Subject: [PATCH] change(player): change styles for buttons

---
 .../Player/Controls/components/PlayerControls.tsx    |  4 ++--
 .../Player/Controls/components/PlayingTime.tsx       | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx b/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
index 09c98bd58..60827520b 100644
--- a/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
@@ -82,9 +82,9 @@ function PlayerControls(props: Props) {
       <div className="mx-1" />
 
 
-      <div className={'hover:bg-gray-light-shade p-2 rounded cursor-pointer'}>
+      <button className={cn(styles.speedButton, 'focus:border focus:border-blue')}>
         <PlayingTime isUniTime={isUniTime} setIsUniTime={setIsUniTime} startedAt={startedAt} />
-      </div>
+      </button>
 
       <div className="rounded ml-4 bg-active-blue border border-active-blue-border flex items-stretch">
         {/* @ts-ignore */}
diff --git a/frontend/app/components/Session_/Player/Controls/components/PlayingTime.tsx b/frontend/app/components/Session_/Player/Controls/components/PlayingTime.tsx
index ca05f9c77..0faca98b8 100644
--- a/frontend/app/components/Session_/Player/Controls/components/PlayingTime.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/PlayingTime.tsx
@@ -18,11 +18,11 @@ function PlayingTime({ isUniTime, setIsUniTime, startedAt }: Props) {
       className="cursor-pointer select-none"
       distance={20}
       render={({close}) => (
-        <div className={'flex flex-col gap-2 bg-white py-2 rounded'}>
-          <div className={'font-semibold px-4'}>Playback Time Mode</div>
+        <div className={'flex flex-col gap-2 bg-white py-2 rounded color-gray-darkest'}>
+          <div className={'font-semibold px-4 cursor-default'}>Playback Time Mode</div>
           <div className={'flex flex-col cursor-pointer hover:bg-active-blue w-full px-4'}>
-            <div className={'text-sm text-disabled-text'}>Current / Session Duration</div>
-            <div className={'flex items-center font-semibold text-center'} onClick={() => {
+            <div className={'text-sm text-disabled-text text-left'}>Current / Session Duration</div>
+            <div className={'flex items-center text-left'} onClick={() => {
               setIsUniTime(false);
               close();
             }}>
@@ -35,8 +35,8 @@ function PlayingTime({ isUniTime, setIsUniTime, startedAt }: Props) {
             setIsUniTime(true);
             close();
           }}>
-            <div className={'text-sm text-disabled-text'}>Based on your settings</div>
-            <div className={'font-semibold'}><RealReplayTimeConnected startedAt={startedAt} /></div>
+            <div className={'text-sm text-disabled-text text-left'}>Based on your settings</div>
+            <div className={'text-left'}><RealReplayTimeConnected startedAt={startedAt} /></div>
           </div>
         </div>
       )}