Revamp CreateUrlModal

[kylerwsm]

Problem

Revamp the CreateUrlModal dialog. Apart from the different look, it is now also full-screen on small devices.

Solution

• Rather than using a Modal, CreateUrlModal now uses a Dialog, which is a MUI component built on Modal. It serves our purpose better with helpful built-in props to control full-screen and max-width.

• The EmptyState component is drafted in this PR but is not yet used by any components.

Improvements:

• Improved the embed Google Font link used in index.html to download more italic font weights. Using the previous embed link, applying italics to a normal font weight character will also bold it.

• Fixed stylings in our initial custom theme, i.e. body2 font size was larger than body1.

• Progressively converting component stylings to make use the makeStyles hook in order to use dynamic props. Also, structuring components to be single-file/single-directory components.

After Screenshots

AFTER:

Tests

Create new short urls on both the full-screen dialog on mobile view and the normal dialog on desktop view to confirm its functionality.

[yong-jie]

Regarding your draft implementation of empty state, just to check, that's the UI to show when there are currently no links to display for a given user right?

[kylerwsm]

Regarding your draft implementation of empty state, just to check, that's the UI to show when there are currently no links to display for a given user right?

Yes, you are right. But EmptyState will not be used until the table revamp.