Merge pull request #1 from rhove/feature/add-styled-components

Added Styled-Components to Code Challenge

Author: sumitomo

README.md

@@ -24,6 +24,7 @@ The requirements for your application are as follows:
 4) Comics are sorted by date with the most recent comics first.
 5) Includes a checkbox that, when checked, sorts the comic strips by date so the least recent comics are first.
 6) When the checkbox is unchecked, the comics revert to most recent first.
+7) Styling for the page is done using using the [styled-components](https://www.styled-components.com/) library.
 
 
 ## Evaluation Criteria
@@ -34,6 +35,7 @@ The requirements for your application are as follows:
 * `npm i` downloads all dependencies.
 * `npm start` runs the application.
 * React components are organized into separate files.
+* Styling is used to enhance the page, and done so in reusable components.
 * No console errors.
 * Meets the challenge requirements.
 

package-lock.json

@@ -5,7 +5,8 @@
   "dependencies": {
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-scripts": "3.1.1"
+    "react-scripts": "3.1.1",
+    "styled-components": "^4.4.0"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -1,8 +1,13 @@
 import React from 'react';
-import './App.css';
+import GlobalStyle from './style'
 
 function App() {
-  return <p>Your code goes here!</p>;
+    return (
+    <div>
+      <GlobalStyle />
+      <p>Your code goes here!</p>
+    </div>
+  );
 }
 
 export default App;

src/App.css

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/App.js

@@ -0,0 +1,21 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+    body {
+        margin: 0;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+          'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+          sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        }
+    code {
+        font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+          monospace;
+        }      
+    p {
+        font-weight: bold;
+      }
+`;
+
+export default GlobalStyle;