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/input/EditableText.jsx

@@ -1,8 +1,10 @@
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
+import { useState } from 'react';
 import style from './EditableText.module.css';
 
 export default function EditableText(props) {
   const { label, defaultValue, placeholder, submitHandler } = props;
+  const [text, setText] = useState(props.defaultValue || '');
 
   const handleSubmit = (submitedVal) => {
     // No need to update if it hasnt changed
@@ -11,19 +13,25 @@ export default function EditableText(props) {
     submitHandler(submitedVal);
   };
 
+  const handleChange = (val) => {
+    if (val.length < 40) setText(val);
+    console.log(val.length);
+  };
+
   return (
     <div className={style.block}>
       <span className={props.underlined ? style.titleUnderlined : style.title}>
         {label}
       </span>
       <Editable
+        onChange={(v) => handleChange(v)}
         onSubmit={(v) => handleSubmit(v)}
-        defaultValue={defaultValue}
+        value={text}
         placeholder={placeholder}
         className={style.inline}
       >
         <EditablePreview />
-        <EditableInput className={style.editable13} />
+        <EditableInput />
       </Editable>
     </div>
   );