Add local time display to schedule

Author: daisylb

src/Components/App/typography.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:300|Roboto+Mono");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400|Roboto+Mono");
 body {
   font-family: var(--font-name--paragraph);
 }

src/Components/Home/Sections/Schedule.tsx

@@ -10,7 +10,7 @@ export default class Schedule extends React.Component {
       <section id="schedule" className="schedule">
         <Container size={Sizes.large}>
           <Container size={Sizes.small}>
-            <h1>Schedule (time is UTC!)</h1>
+            <h1>Schedule</h1>
           </Container>
           <ul>
             {SCHEDULE.map((schedule, index) => (

src/Components/ScheduleItem/index.css

@@ -127,6 +127,11 @@
     top: -2rem;
     left: calc(50% - 6rem);
     transform: translate(-100%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    font-size: 0.75em;
+    font-weight: 400;
 
     @media (--mobile) {
       top: -3.6rem;
@@ -136,11 +141,21 @@
     @media (--tablet) {
       top: 50%;
       left: auto;
-      right: 5rem;
+      right: 6rem;
       transform: translate(50%, -50%);
     }
   }
 
+  &--time-row {
+    display: flex;
+    align-items: baseline;
+  }
+
+  &--time-tz {
+    font-size: 0.75em;
+    margin: 0 0.75ch;
+  }
+
   &:nth-child(2n) {
     @media (--tablet) {
       .schedule-item--image {
@@ -154,9 +169,14 @@
       }
 
       .schedule-item--time {
-        left: 5rem;
+        left: 6rem;
         right: auto;
         transform: translate(-50%, -50%);
+        align-items: flex-start;
+      }
+      
+      .schedule-item--time-row {
+        flex-direction: row-reverse;
       }
     }
   }

src/Components/ScheduleItem/index.tsx

@@ -9,6 +9,15 @@ export interface ScheduleItemProps {
   speaker: Speaker | null;
 }
 
+const UTC_FMT = new Intl.DateTimeFormat(
+  "en-GB-u-hc-h23",
+  { hour: "2-digit", minute: "2-digit", timeZone: "UTC" },
+);
+const LOCAL_FMT = new Intl.DateTimeFormat(
+  "en-GB-u-hc-h23",
+  { hour: "2-digit", minute: "2-digit" },
+);
+
 export default class ScheduleItem extends React.Component<
   ScheduleItemProps,
   {}
@@ -64,6 +73,10 @@ export default class ScheduleItem extends React.Component<
 
     const SpeakerNameTag = isTalk && speaker!.social ? "a" : "p";
 
+    const [hourString, minString] = schedule.time.split(':', 2)
+    const time = new Date(Date.UTC(2020, 3, 25, parseInt(hourString), parseInt(minString)))
+    console.log(hourString, minString, time)
+
     return (
       <li className={scheduleItemClasses}>
         {isTalk && (
@@ -83,7 +96,20 @@ export default class ScheduleItem extends React.Component<
               {speaker!.name}
             </SpeakerNameTag>
           )}
-          <span className="schedule-item--time">{schedule.time}</span>
+          <span className="schedule-item--time">
+            <span className="schedule-item--time-row">
+              <span className="schedule-item--time-tz">UTC</span>
+              <span className="schedule-item--time-time">
+                {UTC_FMT.format(time)}
+              </span>
+            </span>
+            <span className="schedule-item--time-row">
+              <span className="schedule-item--time-tz">Local</span>
+              <span className="schedule-item--time-time">
+                {LOCAL_FMT.format(time)}
+              </span>
+            </span>
+          </span>
         </div>
       </li>
     );