{Initial Feature: Calendar}【Main-Issue】 Ribbon

[Ojani]

Description: Create The ribbon component for the Calendar page as shown in the image below.

Requirements:

• [x] #135

  • Add calendar icon to the right
  • Add days of the week
  • Add "Create Event button"

• [ ] #136

  • Make a variable in the CalendarPage that binds to the ribbon that is equivalent to the current chosen view for the calendar (day, week, month)
  • Make the text for the current view green
  • Make it so you can change the view variable that is binded to the ribbon by clicking on day, week, and month

• [ ] #137

  • Make a variable called 'showCreateEvent' (or something similar) in the CalendarPage that binds to the ribbon that is set to true when the 'create event' button is clicked on
  • Make a component for creating an event called CreateEventModal.svelte
  • The component shall have a fixed positioning in the middle of the screen
  • The component should have a backdrop of a different color
  • Clicking on the backdrop sets showCreateEvent to false
  • The CreateEventModal shall only appear on the CalendarPage when showCreateEvent is true
  • The modal is empty for now, with a white background
  • The backdrop is black with a opacity less than 1. (rgba(0, 0, 0, 0.5) works, for example)

Example of modal with a backdrop:

Acceptance Criteria:

• The ribbon is present in the Calendar page
• The Create Event button opens a modal to create an event
• The modal can be closed by clicking on its backdrop
• The modal is centered
• The 'Day', 'Week', and 'Month' button turn green when clicked ad the others go to the original color

[cseba11]

Issue #135 Completed