Fix rendering of schedule tracks, use CSS classes from the old template

src/Schedule.jsx

@@ -5,6 +5,8 @@ import { Fragment } from 'react';
 import useScheduleTable from './hooks/useScheduleTable.js';
 import Event from './Event.jsx';
 import defaultSpeaker from './assets/default-speaker.png';
+import './Schedule.scss';
+import { langs } from './constants.js';
 
 export default function Schedule({
     conferenceId,
@@ -32,7 +34,10 @@ export default function Schedule({
 
     return (<>
         {isLoading && <>Loading... <progress value={loadingProgress} /></>}
-        {halls && <table border="1">
+        <div className="schedule">
+            {halls && <table style={{
+                textAlign: 'center',
+            }}>
                 <thead>
                     <tr>
                         {header.map(hall => <th key={hall.id}>{hall.name}</th>)}
@@ -51,16 +56,21 @@ export default function Schedule({
                     </tr>
                 </tfoot>
             </table>}
-        {tracks && Object.entries(tracks).filter(([, track]) =>
-            !isTrackHidden(track)
-        ).map(([trackId, track]) => <div key={trackId} style={{
-                width: '100%',
-                border: '1px solid black',
+            <div className="separator"/>
+            {tracks && <table style={{
                 textAlign: 'center',
-                margin: '4px 0',
-                padding: '4px 0',
-            }}>{track.name[lang]}
-        </div>)}
+            }}>
+                <tbody>
+                    {Object.entries(tracks).filter(([, track]) =>
+                        !isTrackHidden(track)
+                    ).map(([trackId, track]) => <tr key={trackId}>
+                        <td className={track.css_class}>{track.name[lang]}</td>
+                    </tr>)}
+                    {Object.entries(langs).map(([code, name]) => <tr key={code}>
+                        <td className={'schedule-'.concat(code)}>{name}</td>
+                    </tr>)}
+                </tbody>
+            </table>}
             {events && tracks && Object.entries(events).map(([eventId, event]) => <section key={eventId} id={'lecture-'.concat(eventId)}>
                 <p>
                     <strong>{event.title}</strong>
@@ -109,6 +119,7 @@ export default function Schedule({
                     <p>{speaker.biography}</p>
                 </div>)}
             </>}
+        </div>
     </>);
 }