From bbb50e890a0ee493b1a0db0f0eed8a340ddc4f68 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 20 Apr 2023 15:54:58 +0200
Subject: [PATCH] change(ui) - player control icons and other changes

---
 .../Session_/Player/Controls/components/PlayerControls.tsx  | 6 +++---
 frontend/app/player-ui/SkipButton.tsx                       | 3 +--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx b/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
index 0e253f320..09c98bd58 100644
--- a/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
@@ -90,7 +90,7 @@ function PlayerControls(props: Props) {
         {/* @ts-ignore */}
         <Tooltip
           anchorClassName="h-full hover:border-active-blue-border hover:bg-active-blue-border focus:border focus:border-blue border-borderColor-transparent"
-          title={`Rewind ${currentInterval}s`}
+          title={`← Rewind ${currentInterval}s`}
           placement="top"
         >
           <button ref={arrowBackRef} className="h-full  bg-transparent">
@@ -146,7 +146,7 @@ function PlayerControls(props: Props) {
 
         <Tooltip
           anchorClassName="h-full hover:border-active-blue-border hover:bg-active-blue-border focus:border focus:border-blue  border-borderColor-transparent"
-          title={`Rewind ${currentInterval}s`}
+          title={`Forward ${currentInterval}s →`}
           placement="top"
         >
           <button ref={arrowForwardRef} className="h-full bg-transparent">
@@ -194,7 +194,7 @@ function PlayerControls(props: Props) {
           )}
         >
           <div onClick={toggleTooltip} ref={skipRef} className="cursor-pointer select-none">
-            <Tooltip disabled={showTooltip} title="Set default skip duration">
+            <Tooltip disabled={showTooltip} title="Playback speed (↑↓)">
               <button
                 ref={speedRef}
                 className={cn(styles.speedButton, 'focus:border focus:border-blue')}
diff --git a/frontend/app/player-ui/SkipButton.tsx b/frontend/app/player-ui/SkipButton.tsx
index 1206bc421..d11912467 100644
--- a/frontend/app/player-ui/SkipButton.tsx
+++ b/frontend/app/player-ui/SkipButton.tsx
@@ -15,10 +15,9 @@ export function SkipButton({ size = 18, onClick, isBackwards, customClasses }: I
     <div
       onClick={onClick}
       className={cn('py-1 px-2 hover-main cursor-pointer bg-gray-lightest', customClasses)}
-      style={{ transform: isBackwards ? 'rotate(180deg)' : '' }}
     >
       <Icon
-        name="skip-forward-fill"
+        name={ isBackwards ? "arrow-counterclockwise" : "arrow-clockwise" }
         size={size}
         color="inherit"
       />