User page toolbar redesign and code improvements

[kylerwsm]

Problem

User page toolbar redesign, and code de-coupling and improvements.

Solution

• Re-designing the toolbar and its components while reusing most logic from before.
• Following the v2 design, the Download icon button will not be shown in mobile view. Also in mobile view, the Create link button will be minimised into an icon button.
• Convert huge components become single-directory components.

Improvements:

• (For components which uses app margins but are not able to make use of the ApplyAppMargins container component) App margin values are now exposed using the useAppMargins hook rather than the fetchAppMargins function from before. Doing this allows the consumer components to better manipulate the app margins.
• Table rows now follow app margins.
• Removed some redundant eslint-disable statements.
• Changed some components from using absolute path to relative path, to get better IDE refactor support.
• Combined tableTheme.js into theme.js. As a result the link row slider now follows the app theme bluish color.

Before & After Screenshots

BEFORE:

Before: Mobile view

AFTER:

After: Mobile view

Tests

• Search bar should search links.
• Add link button should open the dialog to create a new short link.
• Add link button should be minimise to an icon button on mobile displays.
• Download button (only displayed on wider displays) should download all links in shown table.
• When browser width changes, toolbar should collapse/expand gracefully.

Deploy Notes

New dependencies:

• @types/lodash : Type file for lodash

[yong-jie]

Quick query: i see that for imports there are some changes that remove paths like '~/a/b/c' to '../../' etc, is this something recommended by prettier etc? i'm seeing deeply nested components importing a really long string of ../../../../ etc when it could be ~/something etc

[kylerwsm]

Quick query: i see that for imports there are some changes that remove paths like '~/a/b/c' to '../../' etc, is this something recommended by prettier etc? i'm seeing deeply nested components importing a really long string of ../../../../ etc when it could be ~/something etc

The relative paths are not a recommendation by prettier but a preference because of better refactor support from VSCode. I also understand the benefits in using absolute paths. I can change it back to absolute paths if that is more desirable.

[yong-jie]

i've yet to test refactor for the ~ variant, but ../../ one definitely works on intelliJ, so i'm personally fine with this change

[yong-jie]

lgtm!

[kylerwsm]

Force pushing to rebase to develop branch

[yong-jie]

lgtm

[yong-jie]

This was the only change since my last review.