feat(mobile): Tab Layout, Profile Page Design, Quiz Card Component

[YavizGuldalf]

This PR includes a plethora of changes related to the mobile app. You can find a full list of changes below:

• The old Navbar component has been removed from pages in favor of a tab layout for an overall better look & feel.
• The profile pages have been implemented with mock data, including:
  • A new UserCard component used throughout the profile pages
  • View own & other's profile - See Created/Solved Quizzes, Created Forum Posts/Comments
  • Followers/Following
  • Liked/Bookmarked Quizzes/Posts/Comments
  • Edit Profile page with option to take a picture or choose from the gallery
• The quiz pages have been moved to the new tab layout
• The quiz card component found in the old quiz feed has been extracted to app/components/quizCard.tsx
• The home page has been moved to the new tab layout.
• Links found throughout the app have been adjusted to work with the new layout.

Fixes the Issues #466 and #467.

[aoengin]

As the reviewer of these two issues, I've added some comments on the code.

• Since the quiz card has been extracted and is ready for use, you can replace the placeholders in the profile with actual quiz cards.

• The Following and Followers sections need to be redesigned to include a separator between users. Adding a shadow effect to the "user cards" would also help align them with the rest of the application's design and front-end.

• The About Me section expands indefinitely when a user types, making the button and other sections unreachable after a certain point.

• The User Level on the profile is clickable. If this is unintentional, it should be fixed to be non-pressable.

• The text and background colors of the Edit Profile section should be adjusted for better visibility.

• I'm not sure if this is intentional, but when I navigate to the "Other Profile" view, the title appears as shown in the screenshot below. It should be corrected if unintended.

[YavizGuldalf]

@aoengin, I have made the changes you requested. Specifically,

• Updated the quiz card component to not use absolute positioning
• Replaced placeholders with QuizCard components in profile and other user profile pages
• Updated the design of the edit profile page
• Updated the user card with shadows and background color
• Made 'User Level' unpressable in the profile pages.
• The header in other user profile is now the name of the user instead of users/[username]

You can find screenshots of the changed pages below:

The About Me section expands indefinitely when a user types, making the button and other sections unreachable after a certain point. The edit profile page having a resizable 'About Me' input box was intentional. That page is scrollable so every item can be viewed, as you can see in the screenshots.

Can you please review these changes?

[aoengin]

Thanks for the changes.

You can change the text color to white.

That page is scrollable so every item can be viewed, as you can see in the screenshots.

It's unnecessary and does not appear professional. Please try entering an example description in the quiz creation settings.

[YavizGuldalf]

Thanks for the changes.

You can change the text color to white.

That page is scrollable so every item can be viewed, as you can see in the screenshots.

It's unnecessary and does not appear professional. Please try entering an example description in the quiz creation settings.

Okay, the 'Edit Profile' button's style has been changed to be the same as the ones in the edit profile page. Also, the 'About Me' section of the edit profile page now has a fixed height and a character limit (120 chars). I have also added a 40 char limit to the name field and fixed its height

[aoengin]

I guess it's okay to have a character limit, but why didn’t you make it the same as the description part in the quiz settings? I already suggested that.

Please try entering an example description in the quiz creation settings.

[YavizGuldalf]

I guess it's okay to have a character limit, but why didn’t you make it the same as the description part in the quiz settings? I already suggested that.

The main reason why I put a character limit was so the profile page wouldn't look weird if the user tried to enter a really really long "About Me". Without a limit they could write so many characters that it would be unreasonable to display it in their profile. Of course, 120 may not be the appropriate number for the 'About Me' section (it can be lower or higher, it's up for debate), but I think having a character limit on almost all of our inputs is good practice.

Please try entering an example description in the quiz creation settings.

I don't think I quite understand what you mean by this. The "Description" input part in the quizCreationSettings page looks like the following:

<TextInput
  style={[styles.input, styles.descriptionInput]}
  placeholder="Enter quiz description"
  value={quizDescription}
  onChangeText={setQuizDescription}
  multiline={true}
 />

...

styles = StyleSheet.create({
  input: {
    backgroundColor: '#E8E8E8',
    borderRadius: 10,
    padding: 10,
    fontSize: 16,
    marginBottom: 20,
  },
  descriptionInput: {
    height: 100, 
    textAlignVertical: 'top',
  },
...

Do you want me to use the same style props with multiline set to True?