From 03ef3e58edf7fb7fdab7eb97df7282b16c381079 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Sun, 31 Oct 2021 13:12:22 +0100
Subject: [PATCH] style: button disable

disable playback buttons while rolling (interface only)
---
 .../src/common/components/buttons/UnloadIconBtn.jsx |  4 ++--
 client/src/features/control/PlaybackButtons.jsx     | 13 +++++++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/client/src/common/components/buttons/UnloadIconBtn.jsx b/client/src/common/components/buttons/UnloadIconBtn.jsx
index e27d5a29d..c5c5f1812 100644
--- a/client/src/common/components/buttons/UnloadIconBtn.jsx
+++ b/client/src/common/components/buttons/UnloadIconBtn.jsx
@@ -6,8 +6,8 @@ export default function UnloadIconBtn(props) {
   return (
     <IconButton
       icon={<FiXOctagon />}
-      colorScheme='whiteAlpha'
-      backgroundColor='#ffffff05'
+      colorScheme='red'
+      backgroundColor='#ff000022'
       variant='outline'
       onClick={clickhandler}
       width={90}
diff --git a/client/src/features/control/PlaybackButtons.jsx b/client/src/features/control/PlaybackButtons.jsx
index 081795df7..624aff651 100644
--- a/client/src/features/control/PlaybackButtons.jsx
+++ b/client/src/features/control/PlaybackButtons.jsx
@@ -16,17 +16,18 @@ const areEqual = (prevProps, nextProps) => {
 };
 
 const Playback = ({ playback, selectedId, playbackControl }) => {
+  const isRolling = playback === 'roll';
   return (
     <div className={style.playbackContainer}>
       <StartIconBtn
         active={playback === 'start'}
         clickhandler={() => playbackControl('start')}
-        disabled={!selectedId}
+        disabled={!selectedId || isRolling}
       />
       <PauseIconBtn
         active={playback === 'pause'}
         clickhandler={() => playbackControl('pause')}
-        disabled={!selectedId}
+        disabled={!selectedId || isRolling}
       />
       <RollIconBtn
         active={playback === 'roll'}
@@ -38,6 +39,7 @@ const Playback = ({ playback, selectedId, playbackControl }) => {
 };
 
 const Transport = ({ playback, selectedId, playbackControl }) => {
+  const isRolling = playback === 'roll';
   return (
     <div className={style.playbackContainer}>
       <PrevIconBtn
@@ -50,9 +52,12 @@ const Transport = ({ playback, selectedId, playbackControl }) => {
       />
       <ReloadIconButton
         clickhandler={() => playbackControl('reload')}
-        disabled={!selectedId}
+        disabled={!selectedId || isRolling}
+      />
+      <UnloadIconBtn
+        clickhandler={() => playbackControl('unload')}
+        disabled={!selectedId && !isRolling}
       />
-      <UnloadIconBtn clickhandler={() => playbackControl('unload')} />
     </div>
   );
 };