Frontend - Restyle event header component

[minhngo3818]

This task will change the current style of the event widget. Restyling widget is separated into multiple tasks to address different parts of the event component.

This task only focuses on the event header which shows the event title, date, time, location, and an expand button (see below pictures). Here is the instruction for this task:

• create event-header.js file under directory ~/client/src/components/events/
• create a CSS file with the same name for styling if necessary
• name the component as EventHeader
• props: title, date, time, location all type string
• implement the component
• add a state handler for the expand button

To view the component,

• import it to ~/client/src/pages/events/Events.js
• replace lines 54 - 65 ( where className="event-header") with the new event header component
• pass the appropriate props.

See components EventBriefs, EventDate, and ExpandButton as references (old code)

Styling detail: Use either CSS or Tailwind

• background-color: #2A2C2E
• corner radius: 10px
• title: 32px, other text: 16px, text color is #ffffff
• width: depends on the parent component
• height: 140 - 180px
• split in half top and bottom
• top:
  • background-color: #ff9617
  • text and wrapping are describe in the white frame
  • button size: 48x48 px
  • background-color: 2A2C2E
  • chevron icon: #ff9617, estimate size: 32x32px (the icon can be imported from ~/client/scr/asset/icons/icon.jsx
• bottom:
  • time and place box: border-color-#ff9617, max-width: 200px, height: 28px

The styling instruction is just an estimation. Make sure the component look like the demo

Demo

White frame: