Difference between revisions of "QA checklist"

Revision as of 09:08, 3 June 2022

Visual checks

Colour Scheme

"Background Light": the background colour used for the Top Header and other default backgrounds

"Background Dark": the background colour (typically a slightly darker hue of the "Background Light" used for the Navigational Header and other navigational backgrounds, e.g. the top part of the User Profile screen, to visually divide them from the main background.

Main page / lobby

Nav bar

Header & navigational section is visible in the top consisting of two sections: Top Header (above) and Nav Header (below) which visually occupy under 20% of the screen height and 100% of the screen width.
Top Header uses "Background Light" colour.
Nav Header uses "Background Dark" colour
Top Header displays the App Title (aligned to the left), Balance Box and Menu icon (both aligned to the right).
Nav Header displays the Rooms Tabs. By default these are "Official", "Private" and "Groups", with "Official" being selected by default.

Body

Body displays the list of Room Cells corresponding to the currently selected Tab.

Room Cell

Displays the Room Icon (aligned to the left). If not defined, displays first 2 letters of the room name.
Displays the Room Name (goes after the room icon, taking most of the middle space remaining between the Room Icon on the left and the Members Icon & Members Counter on the right). The font is smaller here so that there is space left under the Room Name to display the Latest Message.
Displays the Members Icon & Members Counter (both aligned to the right). Members Counter displays the number of users that are subscribed to the room.
Displays the Latest Message under the Room Name. Latest Message is shown in a font size slightly smaller than the Room Name, and the less intensive colour. Last Message includes: "<First name> <Last name>: <Message body excerpt>" (all aligned to the left) and the Last Message Timestamp (smaller font, HH:MM format, aligned to the right and displayed under the Members Icon & Members Counter). In case the Latest Message is not retrieved from the room yet, the following should be written in its place: "Tap to view and join the conversation."

Bottom / overlay UI

In the bottom right, an overlay "Manage Chats" icon is displayed.

@@ Line 25: / Line 25: @@
 # Displays the Room Name (goes after the room icon, taking most of the middle space remaining between the Room Icon on the left and the Members Icon & Members Counter on the right). The font is smaller here so that there is space left under the Room Name to display the Latest Message.
 # Displays the Members Icon & Members Counter (both aligned to the right). Members Counter displays the number of users that are subscribed to the room.
-# Displays the Latest Message under the Room Name. Latest Message is shown in a font size slightly smaller than the Room Name, and the less intensive colour. Last Message includes: "<First name> <Last name>: <Message body excerpt>" (all aligned to the left) and the Last Message Timestamp (smaller font, HH:MM format, aligned to the right and displayed under the Members Icon & Members Counter).
+# Displays the '''Latest Message''' under the Room Name. Latest Message is shown in a font size slightly smaller than the Room Name, and the less intensive colour. Last Message includes: "<First name> <Last name>: <Message body excerpt>" (all aligned to the left) and the Last Message Timestamp (smaller font, HH:MM format, aligned to the right and displayed under the Members Icon & Members Counter). In case the Latest Message is not retrieved from the room yet, the following should be written in its place: "Tap to view and join the conversation."
 '''Bottom / overlay UI'''
 # In the bottom right, an overlay "Manage Chats" icon is displayed.