Created by: lukejacksonn
I was inspired by the new react docs, to readdress https://github.com/facebookincubator/create-react-app/pull/1472 and give App.js some love and attention; changing as little as possible but embracing the new theme and adding a bit of responsiveness.
- Updates
.App-headerbackground-color to#282c34from reactjs.org - Moves
.App-introinto.App-headerand addedmin-height: 100vhto header - Adds
.App-linkCTA highlighted in#61daFbwhich links to reactjs.org for reference - Removes
.App-titleandTo get started,text in.App-introfor the sake of brevity - Aligns
.App-headercontents vertically and horizontally usingdisplay: flex - Optimises screen fit using
font-size: calc(10px + 2vmin)on.App-header - Increases the size of the rotating icon for dramatic effect
One concern I have about this design is that if a first time user goes to App.js and enters content below .App-header then it won't be immediately visible due to the header being 100vh. A solution to this would be setting the height of the header to 90vh and setting the background colour of .App or body to #20232a (the darker grey in the theme).
The changes, although superficial, make the first creat-react-app experience a little more magical and a little more useful. It is in keeping with the react theme and portrays a truer representation of the products build quality and underlying technologies.
I'm aware this PR is massively subjective but let me know what you think. I am more than willing to discuss/make changes if you like the general direction!


