small style fixes + defaults

- remove unused code in collapse atom
- stop text input from creating new line
- clean overflow
- restyle lock button
- restyle action buttons
- 10 second default on paginator
- Pip shows running timer

client/src/App.css

@@ -7,6 +7,6 @@ body,
 html,
 .App {
   margin: 0px auto;
-  overflow: hidden;
+  overflow: clip;
   height: 100vh;
 }

client/src/app/context/collapseAtom.js

@@ -58,12 +58,3 @@ export const BatchOperation = atom(null, (get, set, payload) => {
 
   localStorage.setItem(PATH, JSON.stringify(options));
 });
-
-// change collapsed in all items
-export const setAll = async (items, isCollapsed) => {
-  // clear storage
-  localStorage.removeItem(PATH);
-
-  // call batch
-  BatchOperation({ items: items, isCollapsed: isCollapsed });
-};

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

@@ -10,8 +10,9 @@ export default function LockIconBtn(props) {
         ref={ref}
         size={props.size || 'xs'}
         icon={<FiTarget />}
-        colorScheme='pink'
-        color={'pink.300'}
+        color={active ? 'pink.100' : 'pink.300'}
+        borderColor={active ? undefined : 'pink.300'}
+        backgroundColor={active ? 'pink.300' : undefined}
         variant={active ? 'solid' : 'outline'}
         onClick={clickhandler}
         _focus={{ boxShadow: 'none' }}

client/src/common/components/views/Paginator.jsx

@@ -6,7 +6,7 @@ import { useInterval } from 'app/hooks/useInterval';
 export default function Paginator(props) {
   const { events, selectedId } = props;
   const LIMIT_PER_PAGE = props.limit || 8;
-  const SCROLL_TIME = props.time * 1000 || 5000;
+  const SCROLL_TIME = props.time * 1000 || 10000;
   const SCROLL_PAST = false;
   const [numEvents, setNumEvents] = useState(0);
   const [page, setPage] = useState([]);

client/src/common/input/EditableText.jsx

@@ -33,9 +33,9 @@ export default function EditableText(props) {
       >
         <EditablePreview
           color={text === '' ? '#666' : 'inherit'}
-          maxWidth='20em'
+          maxWidth='75%'
         />
-        <EditableInput overflowX='hidden' maxWidth='20em' />
+        <EditableInput overflowX='hidden' maxWidth='75%' />
       </Editable>
     </div>
   );

client/src/features/editors/Editor.module.css

@@ -18,11 +18,12 @@
 /* 2/3 window, hide previews */
 @media (max-width: 1250px) and (min-height: 700px) {
   .mainContainer {
+    height: 100%;
     grid-template-rows: 1fr 1fr;
     grid-template-columns: 48em 1fr 1fr;
-    grid-template-areas:
+    /* grid-template-areas:
       'even play sett'
-      'even mess sett';
+      'even mess sett'; */
   }
 
   .info {
@@ -40,6 +41,11 @@
       'play';
   }
 
+  .messages,
+  .playback {
+    min-width: 31em;
+  }
+
   .editor,
   .info,
   .settings {

client/src/features/editors/list/ActionButtons.jsx

@@ -17,7 +17,7 @@ export default function ActionButtons(props) {
         aria-label='Options'
         size='xs'
         icon={<FiZap />}
-        _expanded={{ bg: 'pink.300', color: 'white' }}
+        _expanded={{ bg: 'orange.300', color: 'white' }}
         _focus={{ boxShadow: 'none' }}
         backgroundColor={'orange.200'}
         color={'orange.500'}

client/src/features/menu/MenuActionButtons.jsx

@@ -23,7 +23,7 @@ export default function MenuActionButtons(props) {
         aria-label='Options'
         size={props.size || 'xs'}
         icon={<FiZap />}
-        _expanded={{ bg: 'pink.300', color: 'white' }}
+        _expanded={{ bg: 'orange.300', color: 'white' }}
         _focus={{ boxShadow: 'none' }}
         backgroundColor={'orange.200'}
         color={'orange.500'}

client/src/features/viewers/backstage/StageManager.jsx

@@ -42,7 +42,7 @@ export default function StageManager(props) {
   // Format messages
   const showPubl = publ.text !== '' && publ.visible;
   let stageTimer = formatDisplay(Math.abs(time.running), true);
-  if (time.running < 0) stageTimer = '-' + stageTimer;
+  if (time.running < 0) stageTimer = `-${stageTimer}`;
 
   // motion
   const titleVariants = {

client/src/features/viewers/production/Pip.jsx

@@ -51,11 +51,8 @@ export default function Pip(props) {
   // Format messages
   const showInfo =
     general.backstageInfo !== '' && general.backstageInfo != null;
-
-  const stageTimer =
-    time.currentSeconds != null && !isNaN(time.currentSeconds)
-      ? formatDisplay(time.currentSeconds, true)
-      : '';
+  let stageTimer = formatDisplay(Math.abs(time.running), true);
+  if (time.running < 0) stageTimer = `-${stageTimer}`;
 
   return (
     <div className={style.container__gray}>