[FE] Make it pretty

[AnnaH3003]

Description

Our WebApp UI should now receive the finishing touches as follows:

1. Adjust button names

• The button on the left should say "Generate ticket" instead of submit, as the ticket is not really submitted here.
• The button "Start recording speech" should state "Record voice message"
• The button "Stop recording speech" should say "Stop recording voice message"
• The heading for the pop-up window for creating an account currently says "Sign Up" as does the button to do so. To not have duplicated, the button should say "Create account"

2. Change colours to match a colour scheme:
The buttons should all follow a matching colour scheme:

• "Record voice message": #0D9A0B (dark green)
• "Generate ticket": #08726F (dark turquoise)
• "Browse for file": #313131 (dark grey)
• "Submit": #08726F (dark turquoise)
• "Cancel": #0C33A0 (dark blue)
• "Create account": #0D9A0B (dark green)
• "Confirm" (when editing user data): #0D9A0B (dark green)

3. Adjust draft ticket
Currently, the ticket is rather slim, which makes it hard to read. Ideally, the generated ticket should be as broad as the previous chat messages

4. Left centering of chat messages
At the moment the messages from users are right-centred, which makes it difficult to read. These messages should also be left-centred. The message after generation of the design ticket is centred, but should also be left-centred

5. Confirming & Cancel chat message
So far, the user does not see any confirmation after submitting the ticket in the WebApp. After the draft ticket has been submitted, a chat message should appear stating: "Great, I've created your ticket! You will also receive a confirmation to the e-mail address you provided."

If the user chooses to cancel a button, the following message should be displayed: "All right, as you requested, the ticket has been cancelled "

6. Adjust font size
The chat messages should have the same font size as the text in the draft ticket.

User story

1. As a user
2. I want / need to use a visually appealing interface
3. So that I enjoy working with the WebApplication

Acceptance criteria

• the button is renamed as described above
• the colours are adjusted as written above
• the draft ticket is as broad as the other chat messages
• all chat messages are left-centered
• a chat message after submitting the ticket is printed as stated above
• the font of the chat messages is the same size as the font in the draft ticket

Definition of done (DoD)

• Work products are uploaded to the Github repository and merged to the main branch
• If necessary, the bill of materials section of the planning documents is updated
• Code/feature passes suited tests
• Code is peer-reviewed
• Help documentation (README) is updated
• Fits into our architecture, where possible

DoD general criteria

• Feature has been fully implemented
• Feature has been merged into the mainline
• All acceptance criteria were met
• Product owner approved features
• All tests are passing
• Developers agreed to release

[M-HRL]

Hint: https://tailwindcss.com/docs/adding-custom-styles