Feat/event overview UI

[misterM125]

Overview

This branch introduces the event overview screen, which will allow users to see a detailed overview of an ongoing event.
This screen will be accessed via either the park overview screen or the event timeline which will come later on in the project

features

The Screen offers a variety of feature such as:

• Seeing the details of an event (title, date, location)
• Seeing either the description or participants of the event, which can be navigated to and from thanks to a mutable scrollable screen which possesses a navigation bar allowing for the switch
• join an event via the "Join an event button at the bottom of the screen (logic has not been implemented yet)
• See a minimap displaying the location of the event

Testing

You can preview the screen by simply uncommenting the preview written at the end of EventOverview.kt class (note: as this preview is not done on the main, navigation cannot be tested, but since the only navigating feature of this screen calls the goBack function, i think it is fine to ignore it for now)

Additional notes

• User logic has not yet been implementented in the project so no particpants can be displayed as of this PR
• Design is experimental so would appreciate any feedback on design, composable spacing etc...
• kotlin version has been changed to the latest (1.9.0) for compatibility with data objects. As a consequence, compiler version has been changed to 1.5.1
• This branch waits for potential changes from arthur's branch (park event viewmodel) so DO NOT MERGE YET

[Alex720p]

Code looks good! Left a comment for the tests, I think you forgot to implement one as fullevent var is never used.
However there are a few things that I would change about the UI:

• For the top app bar where the event name is, I would center it and not have the text underlined, I think it would go better with the rest of the ui's app. I would also set the background color of the bar to MaterialTheme.colorScheme.surface to match the same style of the other screen's top app bar (as it is on figma)
• This feels empty (see picture below), I would put two of them on the same row, one below and center them to fill the space better

• I would also center the text in the details section to be more inlined with the existing UI in the app
• Put a background color behind the Details text so that we can easily see where it ends
• Change the bottom button text from 'Join an event' to 'Join this event' to remove ambiguity

[tercierp]

My review
Very good code, I will split the parts of EventOverviewScreen in order to follow the coaches' recommendations.

My opinion of the review @Alex720p

• For the top app bar where the event name is, I would center it and not have the text underlined, I think it would go better with the rest of the ui's app. I would also set the background color of the bar to MaterialTheme.colorScheme.surface to match the same style of the other screen's top app bar (as it is on figma)

The concept of using the same conventions for all parts of a project is called principles of atomic design.

• This feels empty (see picture below), I would put two of them on the same row, one below and center them to fill the space better

Since I haven't seen the design on Figma, is it an empty space left unintentionally? If not, it needs to be filled in.

• I would also center the text in the details section to be more inlined with the existing UI in the app

Center les object is a way to fill the space. I'll add an image OR center it, but not both.

• Put a background color behind the Details text so that we can easily see where it ends

It's a possibility to see if it really increases visibility, which is probably where I'm least convinced.

• Change the bottom button text from 'Join an event' to 'Join this event' to remove ambiguity

Yes, it clarifies the effect of the button.

[misterM125]

Since I haven't seen the design on Figma, is it an empty space left unintentionally? If not, it needs to be filled in.

This not intentional but the figma design is actually pretty different from the current product as the figma was a very simple skeleton of what the screen could be

Suggested changes feel very relevant though and will be applied

Center les object is a way to fill the space. I'll add an image OR center it, but not both.

I agree that centering feels a little too "artificial", I can try adding an placeholder image for now that could be changed for each event

It's a possibility to see if it really increases visibility, which is probably where I'm least convinced

Since the description is possibly scrollable if too long to fit in the screen i do think it might help to increase the tab's visibility to delimit where it ends, i'll experiment a bit to see what seems to fit best

Thank you to @Alex720p and @tercierp for the insightfull reviews!
Suggested changes will be applied shortly

[tercierp]

The changes are very good but you should check my question and my suggestion

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
70.9% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud