style improvements

- added empty state to list
- styled scrollbars
- progressbar shows time elapsed
- timers are monospace
- prevent overflow in titles

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

@@ -0,0 +1,14 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiSettings } from 'react-icons/fi';
+
+export default function SettingsIconBtn(props) {
+  return (
+    <IconButton
+      size={props.size || 'xs'}
+      icon={<FiSettings />}
+      isRound
+      variant='outline'
+      onClick={props.clickHandler}
+    />
+  );
+}

client/src/common/components/myProgressBar/MyProgressBar.jsx

@@ -2,8 +2,11 @@ import { clamp } from '../../../app/utils';
 import styles from './MyProgressBar.module.css';
 
 export default function MyProgressBar(props) {
-  const { now, complete } = props;
-  const percentComplete = clamp((now * 100) / complete - 1, 0, 100);
+  const { now, complete, showElapsed } = props;
+  const percentComplete = showElapsed
+  ? clamp((100 - (now * 100) / complete - 1), 0, 100)
+  : clamp((now * 100) / complete - 1, 0, 100)
+
 
   return (
     <div className={styles.progress}>