💄 Adjust chips due to UI changes

api/events.js

@@ -55,6 +55,7 @@ const parseEvent = (event) => {
   }
 }
 
+// TODO: refactor
 const formatEventDateTime = (date = dayjs.utc(), startTime, endTime) => {
   // Date
   const UTCDate = dayjs.utc(date)
@@ -69,12 +70,8 @@ const formatEventDateTime = (date = dayjs.utc(), startTime, endTime) => {
     const UTCStartTime = UTCDate.hour(startHour).minute(startMinute)
     const PTStartTime = UTCStartTime.tz('America/Los_Angeles')
 
-    const formattedUTCStartTime = UTCStartTime.format(
-      UTCStartTime.minute() !== 0 ? 'H:mm a' : 'H a',
-    )
-    const formattedPTStartTime = PTStartTime.format(
-      UTCStartTime.minute() !== 0 ? 'H:mm a' : 'H a',
-    )
+    const formattedUTCStartTime = UTCStartTime.format('HH:mm a')
+    const formattedPTStartTime = PTStartTime.format('HH:mm a')
 
     formattedStartTime = {
       utc: formattedUTCStartTime,
@@ -91,12 +88,8 @@ const formatEventDateTime = (date = dayjs.utc(), startTime, endTime) => {
     const UTCEndTime = UTCDate.hour(endHour).minute(endMinute)
     const PTEndTime = UTCEndTime.tz('America/Los_Angeles')
 
-    const formattedUTCEndTime = UTCEndTime.format(
-      UTCEndTime.minute() !== 0 ? 'H:mm a' : 'H a',
-    )
-    const formattedPTEndTime = PTEndTime.format(
-      UTCEndTime.minute() !== 0 ? 'H:mm a' : 'H a',
-    )
+    const formattedUTCEndTime = UTCEndTime.format('HH:mm a')
+    const formattedPTEndTime = PTEndTime.format('HH:mm a')
 
     formattedEndTime = {
       utc: formattedUTCEndTime,

components/date-time-chip/DateTimeChip.jsx

@@ -1,14 +1,8 @@
 import { getLiteral } from '../../common/i18n'
 
-const DateTimeChip = ({ date, startTime, endTime }) => {
+const DateTimeChip = ({ startTime, endTime }) => {
   return (
     <div className="datetime-chip">
-      {date ? (
-        <p className="datetime-chip__date">
-          <span>{date}</span>
-        </p>
-      ) : null}
-
       {startTime ? (
         <p className="datetime-chip__time">
           {startTime.utc} - {endTime.utc}
@@ -19,16 +13,12 @@ const DateTimeChip = ({ date, startTime, endTime }) => {
       ) : null}
 
       {endTime ? (
-        <>
-          <div className="datetime-chip__divider" />
-
-          <p className="datetime-chip__time">
-            {startTime.pt} - {endTime.pt}
-            <span className="datetime-chip__timezone">
-              {getLiteral('timezone:pt')}
-            </span>
-          </p>
-        </>
+        <p className="datetime-chip__time">
+          {startTime.pt} - {endTime.pt}
+          <span className="datetime-chip__timezone">
+            {getLiteral('timezone:pt')}
+          </span>
+        </p>
       ) : null}
     </div>
   )

components/date-time-chip/date-time-chip.scss

@@ -1,28 +1,13 @@
 .datetime-chip {
-  display: inline-flex;
-
-  outline: 1px solid $white-80;
-  border-radius: 27px;
-
   @extend %subtitle-1;
 
-  &__date {
-    padding: spacing(1) spacing(1.5);
-    background: $white;
-    color: $purple;
-
-    outline: 1px solid $white;
-    border-radius: 27px;
-
-    box-sizing: border-box;
-  }
 
   &__time {
-    padding: spacing(1) spacing(1.5);
-
-    border-radius: 27px;
-
     position: relative;
+
+    &:not(:last-child) {
+      margin-bottom: spacing(1.5)
+    }
   }
 
   &__timezone {
@@ -34,21 +19,4 @@
 
     color: $white-80;
   }
-
-  &__divider {
-    width: 4px;
-    position: relative;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: calc(50% - 2px);
-
-      height: 4px;
-      width: 4px;
-      background: $white;
-
-      border-radius: 50%;
-    }
-  }
 }

components/event-detail/EventDetail.jsx

@@ -5,6 +5,7 @@ import EventTypeChip from '../event-type-chip/EventTypeChip'
 
 import IconVideo from '../../public/icons/video'
 import DateTimeChip from '../date-time-chip/DateTimeChip'
+import Chip from '../chip/Chip'
 
 // TODO: title heading for SEO (titleComponent?)
 const EventDetail = ({ event, reverseColumns, isFullPage }) => {
@@ -16,12 +17,17 @@ const EventDetail = ({ event, reverseColumns, isFullPage }) => {
   return (
     <article className={classes}>
       <div className="event-detail__info">
-        <EventTypeChip type={event.type} />
-        <DateTimeChip
-          date={event.formattedDate.date}
-          startTime={event.formattedDate.startTime}
-          endTime={event.formattedDate.endTime}
-        />
+        <div className="event-detail__meta">
+          <div className="event-detail__column">
+            <Chip label={event.formattedDate.date} />
+            <EventTypeChip type={event.type} />
+          </div>
+          <DateTimeChip
+            date={event.formattedDate.date}
+            startTime={event.formattedDate.startTime}
+            endTime={event.formattedDate.endTime}
+          />
+        </div>
         <p className="event-detail__title">{event.title}</p>
         <div
           className="event-detail__text"

components/event-detail/event-detail.scss

@@ -24,6 +24,20 @@
     }
   }
 
+  &__meta {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+
+  &__column {    
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: spacing(2);
+  }
+
   &__text {
     @extend %body-1;
     color: $white-80;

components/events-list/EventsList.jsx

@@ -7,7 +7,8 @@ import * as ROUTES from '../../common/routes'
 
 import DateTimeChip from '../date-time-chip/DateTimeChip'
 import EventTypeChip from '../event-type-chip/EventTypeChip'
-import OutlinedLink from '../outlined-link/OutlinedLink'
+import PlayLink from '../play-link/PlayLink'
+import Chip from '../chip/Chip'
 
 const EventsList = ({ events }) => {
   return (
@@ -20,7 +21,7 @@ const EventsList = ({ events }) => {
           })}
         >
           <div className="events-list__date">
-            <DateTimeChip date={event.date} />
+            <Chip label={event.formattedDate.date} />
           </div>
 
           <div className="events-list__event">
@@ -41,7 +42,7 @@ const EventsList = ({ events }) => {
               }}
             />
 
-            <OutlinedLink href={event.linkUrl}>{event.linkTitle}</OutlinedLink>
+            <PlayLink href={event.linkUrl}>{event.linkTitle}</PlayLink>
           </div>
         </div>
       ))}

components/outlined-link/OutlinedLink.jsx

@@ -1,9 +0,0 @@
-const OutlinedLink = ({ href, children }) => {
-  return (
-    <a className="outlined-link" href={href} target="_blank" rel="noreferrer">
-      <span className="outlined-link__icon"></span> {children}
-    </a>
-  )
-}
-
-export default OutlinedLink

components/play-link/PlayLink.jsx

@@ -0,0 +1,9 @@
+const PlayLink = ({ href, children }) => {
+  return (
+    <a className="play-link" href={href} target="_blank" rel="noreferrer">
+      <span className="play-link__icon"></span> {children}
+    </a>
+  )
+}
+
+export default PlayLink

components/play-link/play-link.scss

@@ -1,5 +1,6 @@
-.outlined-link {
-  padding: spacing(2);
+.play-link {
+  height: spacing(7);
+  padding-right: spacing(3);
 
   display: flex;
   align-items: center;
@@ -7,16 +8,17 @@
   column-gap: spacing(1);
 
   @extend %body-1;
-  text-decoration: underline;
 
-  border: 1px solid $white;
   border-radius: 82px;
 
+  background: $white-20;
+
   &__icon {
     position: relative;
     display: inline-block;
-    height: spacing(4);
-    width: spacing(4);
+    height: spacing(7);
+    width: spacing(7);
+    margin-right: spacing(2);
     background: #ffffff50;
 
     border-radius: 50%;

styles/styles.scss

@@ -24,4 +24,4 @@
 
 @import '../components/layout/layout';
 
-@import '../components/outlined-link/outlined-link';
+@import '../components/play-link/play-link';