style: small presentation tweaks

apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss

@@ -38,6 +38,12 @@
   gap: $element-inner-spacing;
 }
 
+.noHover {
+  &:hover {
+    background-color: inherit;
+  }
+}
+
 .title {
   font-size: $inner-section-text-size;
   display: block;

apps/client/src/features/modals/Modal.module.scss

@@ -107,6 +107,16 @@ $el-padding-with-compensation: 24px; // 16 + 8
   color: $error-red;
 }
 
+.success {
+  @include subsection;
+  color: $action-blue;
+}
+
+.feedbackSection {
+  justify-content: flex-start;
+
+}
+
 .buttonSection {
   margin-top: $section-spacing;
   display: flex;
@@ -117,6 +127,10 @@ $el-padding-with-compensation: 24px; // 16 + 8
   flex-grow: 1;
 }
 
+.vSpacer {
+  height: 2rem;
+}
+
 .shiftRight {
   align-self: flex-end;
 }
@@ -135,6 +149,12 @@ $el-padding-with-compensation: 24px; // 16 + 8
   grid-template-columns: auto 1fr;
 }
 
+.twoEqualColumn {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
 .padBottom {
   padding-bottom: $element-spacing;
 }

apps/client/src/features/modals/upload-modal/preview/PreviewExcel.tsx

@@ -15,9 +15,10 @@ export default function PreviewExcel(props: PreviewExcelProps) {
   const { rundown, project, userFields } = props;
 
   return (
-    <div className={style.columnSection}>
+    <div className={`${style.column} ${style.noHover}`}>
       <div className={style.title}>Review Project Data</div>
       <PreviewProjectData project={project} />
+      <div className={style.vSpacer} />
       <div className={style.title}>Review Rundown</div>
       <PreviewRundown rundown={rundown} userFields={userFields} />
     </div>

apps/client/src/features/modals/upload-modal/preview/PreviewRundown.tsx

@@ -79,37 +79,39 @@ export default function PreviewRundown({ rundown, userFields }: PreviewRundownPr
                 const skip = booleanToText(event.skip);
                 return (
                   <tr key={key}>
-                    <th>
+                    <td className={style.center}>
                       <Tag>{index + 1}</Tag>
-                    </th>
-                    <th>Event</th>
-                    <th>{event.cue}</th>
-                    <th>{event.title}</th>
-                    <th>{event.subtitle}</th>
-                    <th>{event.presenter}</th>
-                    <th>{event.note}</th>
-                    <th>{millisToString(event.timeStart)}</th>
-                    <th>{millisToString(event.timeEnd)}</th>
-                    <th>{millisToString(event.duration)}</th>
-                    <th>{isPublic && <Tag>{isPublic}</Tag>}</th>
-                    <th>{skip && <Tag>{skip}</Tag>}</th>
-                    <th style={{ ...colour }}>{event.colour}</th>
-                    <th>
+                    </td>
+                    <td className={style.center}>
+                      <Tag>Event</Tag>
+                    </td>
+                    <td className={style.nowrap}>{event.cue}</td>
+                    <td>{event.title}</td>
+                    <td>{event.subtitle}</td>
+                    <td>{event.presenter}</td>
+                    <td>{event.note}</td>
+                    <td>{millisToString(event.timeStart)}</td>
+                    <td>{millisToString(event.timeEnd)}</td>
+                    <td>{millisToString(event.duration)}</td>
+                    <td>{isPublic && <Tag>{isPublic}</Tag>}</td>
+                    <td>{skip && <Tag>{skip}</Tag>}</td>
+                    <td style={{ ...colour }}>{event.colour}</td>
+                    <td>
                       <Tag>{event.timerType}</Tag>
-                    </th>
-                    <th>
+                    </td>
+                    <td>
                       <Tag>{event.endAction}</Tag>
-                    </th>
-                    <th>{event.user0}</th>
-                    <th>{event.user1}</th>
-                    <th>{event.user2}</th>
-                    <th>{event.user3}</th>
-                    <th>{event.user4}</th>
-                    <th>{event.user5}</th>
-                    <th>{event.user6}</th>
-                    <th>{event.user7}</th>
-                    <th>{event.user8}</th>
-                    <th>{event.user9}</th>
+                    </td>
+                    <td>{event.user0}</td>
+                    <td>{event.user1}</td>
+                    <td>{event.user2}</td>
+                    <td>{event.user3}</td>
+                    <td>{event.user4}</td>
+                    <td>{event.user5}</td>
+                    <td>{event.user6}</td>
+                    <td>{event.user7}</td>
+                    <td>{event.user8}</td>
+                    <td>{event.user9}</td>
                   </tr>
                 );
               }

apps/client/src/features/modals/upload-modal/preview/PreviewTable.module.scss

@@ -42,4 +42,19 @@
   tr:nth-child(odd) {
     background-color: $gray-50;
   }
+
+  td {
+    text-align: left;
+    vertical-align: top;
+    padding: 0 0.5em;
+  }
+
+  .center {
+    text-align: center;
+  }
+
+  .nowrap {
+    white-space: nowrap;
+  }
 }
+

apps/client/src/features/modals/upload-modal/upload-entry/UploadEntry.tsx

@@ -21,10 +21,10 @@ export default function UploadEntry(props: UploadEntryProps) {
   if (errors) {
     return (
       <div className={`${style.uploadedItem} ${style.error}`}>
+        <IoClose className={style.cancelUpload} onClick={handleClear} />
         <IoWarningOutline className={style.icon} />
         <span className={style.fileTitle}>{errors}</span>
         <span className={style.fileInfo}>Please try again</span>
-        <Progress className={style.fileProgress} value={progress} />
       </div>
     );
   }

apps/client/src/features/modals/upload-modal/upload-options/ExcelFileOptions.tsx

@@ -1,10 +1,8 @@
 import { MutableRefObject } from 'react';
-import { Input } from '@chakra-ui/react';
 
-import ModalSplitInput from '../../ModalSplitInput';
+import { ExcelInputOptions } from '../UploadModal';
 
 import ImportMapTable, { type TableEntry } from './ImportMapTable';
-import { ExcelInputOptions } from '../UploadModal';
 
 import style from '../UploadModal.module.scss';
 
@@ -60,16 +58,16 @@ export default function ExcelFileOptions(props: ExcelFileOptionsProps) {
 
   return (
     <div className={style.uploadOptions}>
-      <div className={style.twoColumn}>
+      <div className={style.twoEqualColumn}>
         <ImportMapTable title='Import options' fields={worksheet} handleOnChange={updateRef} />
       </div>
 
-      <div className={style.twoColumn}>
+      <div className={style.twoEqualColumn}>
         <ImportMapTable title='Timings' fields={timings} handleOnChange={updateRef} />
         <ImportMapTable title='Options' fields={options} handleOnChange={updateRef} />
       </div>
 
-      <div className={style.twoColumn}>
+      <div className={style.twoEqualColumn}>
         <ImportMapTable title='Titles' fields={titles} handleOnChange={updateRef} />
         <ImportMapTable title='User Fields' fields={userFields} handleOnChange={updateRef} />
       </div>

apps/client/src/features/modals/upload-modal/upload-options/ImportMapTable.module.scss

@@ -3,20 +3,31 @@
 
 .importTable {
   margin: 0.5rem;
-  font-size: $inner-section-text-size;
   height: fit-content;
 
   thead {
     color: $gray-500;
     text-transform: uppercase;
+    width: 10em;
   }
 
   tr:hover {
     background-color: $gray-50;
   }
+
+  tbody {
+    td {
+      max-width: fit-content;
+    }
+  }
 }
 
 .label {
   display: inline-block;
+  min-width: 6em;
+  font-size: $inner-section-text-size;
+}
+
+.input {
   width: 100%;
 }

apps/client/src/features/modals/upload-modal/upload-options/ImportMapTable.tsx

@@ -19,18 +19,18 @@ export default function ImportMapTable(props: ImportMapTableProps) {
   return (
     <table className={style.importTable}>
       <thead>
-        <tr>{title}</tr>
+        <tr>
+          <td colSpan={2}>{title}</td>
+        </tr>
       </thead>
       <tbody>
         {fields.map((field) => {
           return (
             <tr key={field.title}>
-              <td>
-                <label className={style.label} htmlFor={field.title}>
-                  {field.title}
-                </label>
+              <td className={style.label}>
+                <label htmlFor={field.title}>{field.title}</label>
               </td>
-              <td>
+              <td className={style.input}>
                 <Input
                   id={field.title}
                   size='xs'