refractor + style tweaks

- bugfix on lower
- delay between 0-60 minutes
- action buttons in dropdown
- added button for toggling element visibility
- several css and code cleanups
- renamed settingsAPI

client/src/common/components/buttons/AddIconBtn.jsx

@@ -8,6 +8,7 @@ export default function AddIconBtn(props) {
       icon={<FiPlus />}
       colorScheme='blue'
       onClick={props.clickHandler}
+      _focus={{ boxShadow: 'none' }}
     />
   );
 }

client/src/common/components/buttons/BlockIconBtn.jsx

@@ -8,6 +8,7 @@ export default function BlockIconBtn(props) {
       icon={<FiMinusCircle />}
       colorScheme='purple'
       onClick={props.clickHandler}
+      _focus={{ boxShadow: 'none' }}
     />
   );
 }

client/src/common/components/buttons/CollapseIconBtn.jsx

@@ -9,6 +9,7 @@ export default function CollapseIconBtn(props) {
       colorScheme='orange'
       variant={props.active ? 'solid' : 'outline'}
       onClick={props.clickHandler}
+      _focus={{ boxShadow: 'none' }}
     />
   );
 }

client/src/common/components/buttons/DelayIconBtn.jsx

@@ -8,6 +8,7 @@ export default function DelayIconBtn(props) {
       icon={<FiClock />}
       colorScheme='yellow'
       onClick={props.clickHandler}
+      _focus={{ boxShadow: 'none' }}
     />
   );
 }

client/src/common/components/buttons/DeleteIconBtn.jsx

@@ -8,6 +8,7 @@ export default function DeleteIconBtn(props) {
       icon={<FiMinus />}
       colorScheme='red'
       onClick={props.clickHandler}
+      _focus={{ boxShadow: 'none' }}
     />
   );
 }

client/src/common/components/buttons/NextIconBtn.jsx

@@ -5,11 +5,12 @@ export default function NextIconBtn(props) {
   return (
     <IconButton
       icon={<FiSkipForward />}
-      colorScheme= 'whiteAlpha'
+      colorScheme='whiteAlpha'
       backgroundColor='#ffffff05'
-      variant= 'outline'
+      variant='outline'
       onClick={props.clickHandler}
       width={90}
+      _focus={{ boxShadow: 'none' }}
     />
   );
 }

client/src/common/components/buttons/PauseIconBtn.jsx

@@ -8,7 +8,8 @@ export default function PauseIconBtn(props) {
       colorScheme='orange'
       variant={props.active ? 'solid' : 'outline'}
       onClick={props.clickHandler}
-      width={90}
+      width={120}
+      _focus={{ boxShadow: 'none' }}
     />
   );
 }

client/src/common/components/buttons/PrevIconBtn.jsx

@@ -5,11 +5,12 @@ export default function PrevIconBtn(props) {
   return (
     <IconButton
       icon={<FiSkipBack />}
-      colorScheme= 'whiteAlpha'
+      colorScheme='whiteAlpha'
       backgroundColor='#ffffff05'
-      variant= 'outline'
+      variant='outline'
       onClick={props.clickHandler}
       width={90}
+      _focus={{ boxShadow: 'none' }}
     />
   );
 }

client/src/common/components/buttons/ReloadIconBtn.jsx

@@ -0,0 +1,16 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiRefreshCcw } from 'react-icons/fi';
+
+export default function ReloadIconButton(props) {
+  return (
+    <IconButton
+      icon={<FiRefreshCcw />}
+      colorScheme='whiteAlpha'
+      backgroundColor='#ffffff05'
+      variant='outline'
+      onClick={props.clickHandler}
+      width={90}
+      _focus={{ boxShadow: 'none' }}
+    />
+  );
+}

client/src/common/components/buttons/RollIconBtn.jsx

@@ -8,7 +8,9 @@ export default function RollIconBtn(props) {
       colorScheme='blue'
       variant={props.active ? 'solid' : 'outline'}
       onClick={props.clickHandler}
-      width={90}
+      width={120}
+      disabled
+      _focus={{ boxShadow: 'none' }}
     />
   );
 }

client/src/common/components/buttons/SettingsIconBtn.jsx

@@ -9,6 +9,7 @@ export default function SettingsIconBtn(props) {
       isRound
       variant='outline'
       onClick={props.clickHandler}
+      _focus={{ boxShadow: 'none' }}
     />
   );
 }

client/src/common/components/buttons/StartIconBtn.jsx

@@ -8,7 +8,8 @@ export default function StartIconBtn(props) {
       colorScheme='green'
       variant={props.active ? 'solid' : 'outline'}
       onClick={props.clickHandler}
-      width={90}
+      width={120}
+      _focus={{ boxShadow: 'none' }}
     />
   );
 }

client/src/common/components/buttons/UnloadIconBtn.jsx

@@ -0,0 +1,16 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiCornerLeftUp } from 'react-icons/fi';
+
+export default function UnloadIconBtn(props) {
+  return (
+    <IconButton
+      icon={<FiCornerLeftUp />}
+      colorScheme='whiteAlpha'
+      backgroundColor='#ffffff05'
+      variant='outline'
+      onClick={props.clickHandler}
+      width={90}
+      _focus={{ boxShadow: 'none' }}
+    />
+  );
+}

client/src/common/components/buttons/VisibleIconBtn.jsx

@@ -9,6 +9,7 @@ export default function VisibleIconBtn(props) {
       colorScheme='blue'
       variant={props.active ? 'solid' : 'outline'}
       onClick={props.clickHandler}
+      _focus={{ boxShadow: 'none' }}
     />
   );
 }