Added more styling to Post Component

[nguyenhung15913]

Issue This PR Addresses

Fixes #3491

Type of Change

• [ ] Bugfix: Change which fixes an issue
• [x] New Feature: Change which adds functionality
• [ ] Documentation Update: Change which improves documentation
• [ ] UI: Change which improves UI

Description

• Added more styling to post component including title, author's name
• User avatar remains static
• Clicking author's name will redirect to author's blogs URL.

Screenshot

Steps to test the PR

• cd src/mobile
• pnpm start

Test on Gitpod

• Click the Open Gitpod badge
• On the terminal, run npm install -g pnpm && pnpm install && cd src/mobile && cp .env.development .env && pnpm start
• Once the Expo CLI finishes loading, press w to open the app on the web
• It's running on port 19006, toggle the browser mobile view to view it.

Checklist

• [ ] Quality: This PR builds and passes our npm test and works locally
• [ ] Tests: This PR includes thorough tests or an explanation of why it does not
• [ ] Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• [ ] Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[gitpod-io[bot]]

[TueeNguyen]

Can you add steps to test this PR?

[TueeNguyen]

Got this error when I tried to run locally

Starting project at D:\BackupRepos\telescope\src\mobile
Missing package "metro" in the project at: D:\BackupRepos\telescope\src\mobile
This usually means `react-native` is not installed. Please verify that dependencies in package.json include "react-native" and run `yarn` or `npm install`.
Error: Missing package "metro" in the project at: D:\BackupRepos\telescope\src\mobile
This usually means `react-native` is not installed. Please verify that dependencies in package.json include "react-native" and run `yarn` or `npm install`.
    at resolveFromProject (C:\Users\tue\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@expo\dev-server\src\metro\importMetroFromProject.ts:21:11)
    at importFromProject (C:\Users\tue\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@expo\dev-server\src\metro\importMetroFromProject.ts:27:18)
    at Object.importMetroFromProject (C:\Users\tue\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@expo\dev-server\src\metro\importMetroFromProject.ts:41:10)
    at runMetroDevServerAsync (C:\Users\tue\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@expo\dev-server\src\MetroDevServer.ts:80:17)
    at startDevServerAsync (C:\Users\tue\AppData\Roaming\npm\node_modules\expo-cli\node_modules\xdl\src\start\startDevServerAsync.ts:77:55)
    at startAsync (C:\Users\tue\AppData\Roaming\npm\node_modules\expo-cli\node_modules\xdl\src\start\startAsync.ts:69:41)

[DukeManh]

@nguyenhung15913, could you please make the Timeline horizontal padding smaller and the size of the image bigger, the width should be 90-100 % the size of the screen.

It'd be also nice if you could put the Load more button at the bottom of the timeline instead of being sticky to the screen.

[DukeManh]

@TueeNguyen, check out the instructions to test the PR with Gitpod I just added.

[TueeNguyen]

Thanks @DukeManh.

I've encountered this bug, if I click a user's name, it redirects me and the app freezes

https://user-images.githubusercontent.com/58532267/164544170-2b377434-de7d-41c4-bcf0-1530950a911f.mp4

[nguyenhung15913]

Thanks @DukeManh.

I've encountered this bug, if I click a user's name, it redirects me and the app freezes

2022-04-21.16-07-59.mp4

I tested in both mobile app and browser, I didn't have this bug. Can you try again ?

[nguyenhung15913]

Why don't we use a different font like our web version?

Do you mean the front style in general or just the text inside the blog ?

[TueeNguyen]

@nguyenhung15913 the font style in general, the font now doesn't look good

[Kevan-Y]

@nguyenhung15913 Is it ready for another review?

[cindyorangis]

Hi @nguyenhung15913,

This branch has a couple of conflicts. Please let us know if you have time to resolve the conflicts