Feat/mac (#109)

* chore: upgrade dependencies
* feat/mac: draft pipeline
* feat/mac: use public folder for transient files
* feat/mac: set app fullscreen
* feat/mac: cmd + , toggles menu
* feat/mac: update readme
* refact: easier login process
* refact prevent style issues with safari
* refact reduce css download
* style: cleanup paginator design
* style: studio clock is responsive
* style: fix spacing style issues with safari

client/src/features/info/Info.module.scss

@@ -3,11 +3,7 @@
 
 @mixin container {
   margin-top: 1em;
-  display: flex;
-  flex-direction: column;
-  background-color: rgba(0, 0, 0, 0.05);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  border-radius: 4px;
+  @include second-container;
   padding: 8px;
 }
 
@@ -73,7 +69,7 @@
 
 .emptyLabel {
   font-size: 0.8em;
-  color: #555;
+  color: $bg-gray-700;
 }
 
 .notes {
@@ -85,26 +81,12 @@
 .if {
   font-size: 0.8em;
   color: $ontime-accent;
-  @include container-bg;
+  background-color: $bg-gray-900;
+  padding: 0 0.5em;
+  margin: 0 0.5em;
 }
 
 ul > li {
   font-size: 0.9em;
-  color: #fff;
-}
-
-.moreExpanded,
-.moreCollapsed {
-  cursor: pointer;
-  color: #fff;
-}
-
-.moreExpanded {
-  transform: scaleY(-1);
-  transition: transform 0.3s;
-}
-
-.moreCollapsed {
-  transform: scaleY(1);
-  transition: transform 0.3s;
+  color: $text-white;
 }

client/src/features/info/InfoLogger.jsx

@@ -1,7 +1,8 @@
 import React, { useContext, useEffect, useState } from 'react';
-import style from './InfoLogger.module.scss';
-import CollapseBar from "../../common/components/collapseBar/CollapseBar";
+import { HStack } from '@chakra-ui/react';
+import CollapseBar from '../../common/components/collapseBar/CollapseBar';
 import { LoggingContext } from '../../app/context/LoggingContext';
+import style from './InfoLogger.module.scss';
 
 export default function InfoLogger() {
   const { logData, clearLog } = useContext(LoggingContext);
@@ -16,6 +17,10 @@ export default function InfoLogger() {
   const [showUser, setShowUser] = useState(true);
 
   useEffect(() => {
+    if (!logData) {
+      return;
+    }
+
     const matchers = [];
     if (showUser) {
       matchers.push('USER');
@@ -36,12 +41,10 @@ export default function InfoLogger() {
       matchers.push('PLAYBACK');
     }
 
-    const d = logData.filter((d) => (
-      matchers.some((m) => d.origin === m)
-    ))
+    const d = logData.filter((d) => matchers.some((m) => d.origin === m));
 
     setData(d);
-  },[logData, showUser, showClient, showServer, showPlayback, showRx, showTx])
+  }, [logData, showUser, showClient, showServer, showPlayback, showRx, showTx]);
 
   const disableOthers = (toEnable) => {
     toEnable === 'USER' ? setShowUser(true) : setShowUser(false);
@@ -50,62 +53,75 @@ export default function InfoLogger() {
     toEnable === 'RX' ? setShowRx(true) : setShowRx(false);
     toEnable === 'TX' ? setShowTx(true) : setShowTx(false);
     toEnable === 'PLAYBACK' ? setShowPlayback(true) : setShowPlayback(false);
-  }
+  };
 
   return (
     <div className={collapsed ? style.container : style.container__expanded}>
       <CollapseBar title='Log' isCollapsed={collapsed} onClick={() => setCollapsed((c) => !c)} />
       {!collapsed && (
         <>
-          <div className={style.toggleBar}>
+          <HStack className={style.toggleBar}>
             <div
               onClick={() => setShowUser((s) => !s)}
               onAuxClick={() => disableOthers('USER')}
-              className={(showUser) ? style.active : null}>
+              className={showUser ? style.active : null}
+            >
               USER
             </div>
             <div
               onClick={() => setShowClient((s) => !s)}
               onAuxClick={() => disableOthers('CLIENT')}
-              className={(showClient) ? style.active : null}>
+              className={showClient ? style.active : null}
+            >
               CLIENT
             </div>
             <div
               onClick={() => setShowServer((s) => !s)}
               onAuxClick={() => disableOthers('SERVER')}
-              className={(showServer) ? style.active : null}>
+              className={showServer ? style.active : null}
+            >
               SERVER
             </div>
             <div
               onClick={() => setShowPlayback((s) => !s)}
               onAuxClick={() => disableOthers('PLAYBACK')}
-              className={(showPlayback) ? style.active : null}>
+              className={showPlayback ? style.active : null}
+            >
               Playback
             </div>
             <div
               onClick={() => setShowRx((s) => !s)}
               onAuxClick={() => disableOthers('RX')}
-              className={(showRx) ? style.active : null}>
+              className={showRx ? style.active : null}
+            >
               RX
             </div>
             <div
               onClick={() => setShowTx((s) => !s)}
               onAuxClick={() => disableOthers('TX')}
-              className={(showTx) ? style.active : null}>
+              className={showTx ? style.active : null}
+            >
               TX
             </div>
-            <div
-              onClick={clearLog}
-              className={style.clear}>
+            <div onClick={clearLog} className={style.clear}>
               Clear
             </div>
-          </div>
+          </HStack>
           <ul className={style.log}>
             {data.map((d) => (
-              <li key={d.id} className={d.level === 'INFO' ? style.info : d.level === 'WARN' ? style.warn : d.level === 'ERROR' ? style.error : ''}>
-                <div
-                  className={style.time}
-                >{d.time}</div>
+              <li
+                key={d.id}
+                className={
+                  d.level === 'INFO'
+                    ? style.info
+                    : d.level === 'WARN'
+                    ? style.warn
+                    : d.level === 'ERROR'
+                    ? style.error
+                    : ''
+                }
+              >
+                <div className={style.time}>{d.time}</div>
                 <div className={style.origin}>{d.origin}</div>
                 <div className={style.msg}>{d.text}</div>
               </li>

client/src/features/info/InfoLogger.module.scss

@@ -17,8 +17,11 @@
   height: 100%;
   overflow-y: scroll;
   font-size: 0.8em;
-  user-select:text;
-  @include container-bg;
+  user-select: text;
+  @include third-container;
+  padding: 0 0.5em;
+  margin: 0 0.5em;
+
 
   li {
     display: flex;
@@ -36,39 +39,33 @@
   }
 
   li.info {
-    color: #aaa;
+    color: $info-gray;
   }
   li.warn {
-    color: #dd6b20;
+    color: $warning-orange;
   }
   li.error {
-    color: #f00;
+    color: $error-red;
   }
 
-  .entry:hover {
-    color: #ddd;
+  li:hover {
+    color: $info-gray-hover;
   }
 }
 
-
 .info {
-  color: #fff;
+  color: $text-white;
 }
 
 .error {
   color: red;
 }
 
-.client {
-  color: lightblue;
-}
-
 .toggleBar {
   display: flex;
   font-size: 0.7em;
   justify-content: flex-start;
-  gap: 1em;
-  padding: 0.5em 0;
+  padding: 0.5em 8px;
   font-weight: 600;
 
   div {
@@ -85,6 +82,7 @@
   }
 
   .clear {
+    margin-left: auto;
     border: 1px solid rgba($ontime-pink, 0.5);
   }
-}
+}

client/src/features/info/InfoNif.jsx

@@ -20,10 +20,9 @@ export default function InfoNif() {
         isCollapsed={collapsed}
         onClick={() => setCollapsed((c) => !c)}
       />
-      {!collapsed && (
+      {!collapsed && (status === 'success') &&(
         <div>
-          {status === 'success' &&
-          data?.networkInterfaces.map((e) => (
+          {data?.networkInterfaces.map((e) => (
             <a
               key={e.address}
               href='#!'

client/src/features/info/InfoTitle.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
-import { Icon } from '@chakra-ui/react';
-import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
 import style from './Info.module.scss';
+import CollapseBar from '../../common/components/collapseBar/CollapseBar';
 
 export default function InfoTitle(props) {
   const [collapsed, setCollapsed] = useState(false);
@@ -15,42 +14,28 @@ export default function InfoTitle(props) {
 
   return (
     <div className={style.container}>
-      <div className={roll ? style.headerRoll : style.header}>
-        {title}
-        {collapsed && (
-          <span className={style.collapsedTitle}>{data.title}</span>
-        )}
-        <Icon
-          className={collapsed ? style.moreCollapsed : style.moreExpanded}
-          as={FiChevronUp}
-          onClick={() => setCollapsed((c) => !c)}
-        />
-      </div>
-
+      <CollapseBar
+        title={title}
+        isCollapsed={collapsed}
+        onClick={() => setCollapsed((c) => !c)}
+        roll={roll}
+      />
       {!collapsed && (
         <>
           <div className={style.labelContainer}>
-            <span className={noTitl ? style.emptyLabel : style.label}>
-              Title
-            </span>
+            <span className={noTitl ? style.emptyLabel : style.label}>Title</span>
             {data.title}
           </div>
           <div className={style.labelContainer}>
-            <span className={noPres ? style.emptyLabel : style.label}>
-              Presenter
-            </span>
+            <span className={noPres ? style.emptyLabel : style.label}>Presenter</span>
             {data.presenter}
           </div>
           <div className={style.labelContainer}>
-            <span className={noSubt ? style.emptyLabel : style.label}>
-              Subtitle
-            </span>
+            <span className={noSubt ? style.emptyLabel : style.label}>Subtitle</span>
             {data.subtitle}
           </div>
           <div className={style.notes}>
-            <span className={noNote ? style.emptyLabel : style.label}>
-              Note
-            </span>
+            <span className={noNote ? style.emptyLabel : style.label}>Note</span>
             {data.note}
           </div>
         </>