style: wording and UI tweaks (#564)

* style: wording and UI tweaks

* style: prevent note overflow

* style: small wording changes

* soft blink (#569)

* chore: version bump


---------

Co-authored-by: Alex Christoffer Rasmussen <alex.christoffer@gmail.com>

apps/client/src/features/cuesheet/CuesheetWrapper.tsx

@@ -141,11 +141,7 @@ export default function CuesheetWrapper() {
     <div className={styles.tableWrapper} data-testid='cuesheet'>
       <CuesheetTableHeader handleExport={handleOpenModal} featureData={featureData} />
       <Cuesheet data={rundown} columns={columns} handleUpdate={handleUpdate} selectedId={featureData.selectedEventId} />
-      <ExportModal
-        isOpen={isModalOpen}
-        onClose={onModalClose}
-        buttonVariants={{ csv: 'ontime-filled', json: 'ontime-ghosted' }}
-      />
+      <ExportModal isOpen={isModalOpen} onClose={onModalClose} />
     </div>
   );
 }

apps/client/src/features/menu/MenuBar.tsx

@@ -151,11 +151,7 @@ const MenuBar = (props: MenuBarProps) => {
         size='sm'
       />
 
-      <ExportModal
-        onClose={onModalClose}
-        isOpen={isModalOpen}
-        buttonVariants={{ csv: 'ontime-subtle-on-light', json: 'ontime-filled' }}
-      />
+      <ExportModal onClose={onModalClose} isOpen={isModalOpen} />
 
       <div className={style.gap} />
       <TooltipActionBtn

apps/client/src/features/modals/export-modal/ExportModal.tsx

@@ -3,17 +3,14 @@ import { Button, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader,
 import styles from './ExportModal.module.scss';
 
 export type ExportType = 'csv' | 'json';
+
 interface ExportModalProps {
   isOpen: boolean;
   onClose: (type?: ExportType) => void;
-  buttonVariants: {
-    csv: string;
-    json: string;
-  };
 }
 
 export default function ExportModal(props: ExportModalProps) {
-  const { isOpen, onClose, buttonVariants } = props;
+  const { isOpen, onClose } = props;
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} motionPreset='scale' size='xl' colorScheme='blackAlpha'>
@@ -22,10 +19,10 @@ export default function ExportModal(props: ExportModalProps) {
         <ModalHeader className={styles.modalHeader}>Download options</ModalHeader>
         <ModalCloseButton />
         <ModalBody className={styles.modalBody}>
-          <Button onClick={() => onClose('csv')} variant={buttonVariants.csv} width='48%'>
-            rundown as CSV
+          <Button onClick={() => onClose('csv')} variant='ontime-subtle-on-light' width='48%'>
+            Rundown as CSV
           </Button>
-          <Button onClick={() => onClose('json')} variant={buttonVariants.json} width='48%'>
+          <Button onClick={() => onClose('json')} variant='ontime-filled' width='48%'>
             Project file
           </Button>
         </ModalBody>

apps/client/src/features/rundown/event-block/EventBlock.module.scss

@@ -175,6 +175,9 @@ $skip-opacity: 0.1;
   font-size: calc(1rem - 3px);
   color: $block-text-color;
   line-height: calc(1rem - 3px);
+
+  max-height: 2rem;
+  overflow-y: hidden;
 }
 
 

apps/client/src/features/viewers/backstage/Backstage.scss

@@ -89,7 +89,10 @@
     border-radius: 8px;
 
     &.blink {
-      animation: blink 0.5s ease-in-out 3;
+      animation-name: blink;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: 3;
+      animation-duration: 1s;
     }
   }
 
@@ -163,9 +166,12 @@
 
 @keyframes blink {
   0% {
-    background-color: var(--card-background-color-blink-override, $playback-start);
-  }
-  20% {
     background-color: var(--card-background-color-override, $viewer-card-bg-color);
   }
-}
+  50% {
+    background-color: var(--card-background-color-blink-override, $playback-start);
+  }
+  100% {
+    background-color: var(--card-background-color-override, $viewer-card-bg-color);
+  }
+}