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}>

client/src/common/input/EditableTimer.module.css

@@ -13,7 +13,7 @@
 }
 
 .delayedEditable {
-  border: 1px solid #d69e2e88;
+  border: 1px solid #d69e2e55;
 }
 
 .delayValue {
@@ -22,6 +22,5 @@
   padding: 0.3em 0;
   text-align: center;
   align-self: flex-start;
-  border: 1px solid #d69e2e88;
-  background-color: #d69e2e22;
+  background-color: #d69e2e55;
 }

client/src/common/state/Empty.jsx

@@ -0,0 +1,12 @@
+import { ReactComponent as Emptyimage } from '../../assets/images/empty.svg';
+import style from './Empty.module.css';
+
+export default function Empty(props) {
+  const { text } = props;
+  return (
+    <div className={style.emptyContainer}>
+      <Emptyimage className={style.empty} />
+      <span className={style.text}>{text}</span>
+    </div>
+  );
+}

client/src/common/state/Empty.module.css

@@ -0,0 +1,16 @@
+.emptyContainer {
+  text-align: center;
+  color: rgba(0, 0, 0, 0.17);
+  font-weight: 600;
+  font-size: 2em;
+  width: 100%;
+}
+.empty {
+  width: 100%;
+  margin: auto 0;
+  opacity: 0.3;
+}
+
+.text {
+  text-align: center;
+}