Welcome! As part of your onboarding we have a few simple issues for you to tackle. These will help you familiarise yourself with the Notangles codebase, while also not being too difficult. Have fun!

Settings Modal (Martin + Emily)

The Task

https://trello.com/c/hl0RRgCT/68-combine-preferences-in-settings-dropdown-modal

• Currently, the only thing in the settings modal is the ability to toggle rounded corners for the class cards.

• To keep all the settings options accessible in one place, we would like to extend this to also include a dark mode and 12/24-hour time toggle.

• Your task involves adding two more options (dark mode and 12/24-hour time) in the settings modal. Each option will have their own slider to toggle the option on and off.

• This task will teach you about one way to manipulate state in React, by passing down state to child components through props.

Files to change/reference

client/src/components/Settings.tsx

Find the files where the state for dark mode and 12/24 hour time is located and use them as reference.

Stretch Goals

• In addition to adding those two options to the settings modal, we would like to implement the following settings as per the Trello ticket

  • The ability to hide/show full class slots

  • The ability to toggle compact mode

  • The ability to put all classes as unscheduled (in the box on the right) by default

Dark Mode (Omar)

https://trello.com/c/I2U25x5I/69-dark-theme-improvements

• There are some minor improvements we’d like to make to dark mode.

  • For the app to detect the user’s system preference of light/dark mode and apply the correct theme automatically

  • Adjust the course colours to make sure they look good in both light and dark mode

  • Ensure that the theme is consistently applied to all components

• This task will teach you about how styled components and Material UI is used in Notangles

Files to change/reference

client/src/App.tsx

Full Class Indication (Max + Raiyan)

https://trello.com/c/WBrcySCO/44-improve-full-class-indication

• Currently there isn’t really a good indication of whether a class is full (apart from looking at the enrolment numbers).

  • Your task involves adding an indication of a full class (could be an icon, highlighting around the border or any other way you come up with :))

• This task will teach you about how styled components and Material UI is used in Notangles

Files to change/reference

client/src/components/timetable/DroppedClasses.tsx

Make Privacy Page Pretty (Angella)

• Right now https://notangles.csesoc.unsw.edu.au/privacy is a bit barebones. Your task is to make it pretty!

  • Also, there’s currently no way to access it from Notangles, so we’ll need to add a link to it in the home page’s footer.

• This task will teach you about how to create styled links using Material UI and how to style pages with styled components.

Files to change/reference

client/src/App.tsx

client/src/components/Privacy.tsx

Update About Modal (Grace)

https://compclub.atlassian.net/jira/software/projects/NTGL/boards/3?selectedIssue=NTGL-246

Files to change/reference

client/src/components/About.tsx