refactor with emotion

emotion/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.4.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
@@ -35,5 +36,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@emotion/babel-plugin": "^11.3.0"
   }
 }

emotion/src/App.js

@@ -1,13 +1,78 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react/macro";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import Form from "./components/Form/Form";
 import Success from "./components/Success/Success";
-import "./App.css";
+
+const app = css`
+  position: relative;
+  background-color: #f6f6f6;
+  overflow: hidden;
+  padding: 24px;
+  z-index: 1;
+
+  &::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    height: 320px;
+    background-color: #e37f3e;
+    width: 600px;
+    border-top-right-radius: 150px;
+    border-bottom-right-radius: 150px;
+    transform: rotate(-40deg) translate(-208px, -120px);
+  }
+
+  @media (min-width: 768px) {
+    padding: 24px 48px;
+  }
+
+  @media (min-width: 1024px) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    max-width: 960px;
+    margin: 0 auto;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+  }
+`;
+
+const appHeader = css`
+  @media (min-width: 1024px) {
+    flex-shrink: 0;
+    flex-basis: 100%;
+  }
+`;
+
+const footer = css`
+  font-size: 14px;
+  margin-top: 24px;
+
+  @media (min-width: 1024px) {
+    flex-grow: 1;
+    margin-left: 48px;
+  }
+
+  address {
+    font-style: normal;
+    margin-bottom: 24px;
+  }
+`;
+
+const footerTitle = css`
+  text-transform: uppercase;
+  margin: 0 0 8px;
+  font-size: 14px;
+`;
 
 function App() {
   return (
     <Router>
-      <div className="App">
-        <header className="App-header">
+      <div css={app}>
+        <header css={appHeader}>
           <h1 className="page-header">Let's connect</h1>
           <p className="page-subtitle">Who are you looking to connect with?</p>
         </header>
@@ -24,14 +89,14 @@ function App() {
             </h2>
           </Route>
         </Switch>
-        <footer className="App-footer">
-          <h2 className="footer-title">headquarters</h2>
+        <footer css={footer}>
+          <h2 css={footerTitle}>headquarters</h2>
           <address>
             500 Sansome St. #200
             <br />
             San Francisco, CA 94111
           </address>
-          <h2 className="footer-title">phone</h2>
+          <h2 css={footerTitle}>phone</h2>
           <address>888.987.8337</address>
         </footer>
       </div>

emotion/src/components/ContentWrapper/ContentWrapper.js

@@ -1,16 +1,28 @@
-import React from "react";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react/macro";
 import PropTypes from "prop-types";
-import "./ContentWrapper.css";
 
 ContentWrapper.propTypes = {
   className: PropTypes.string,
 };
 
+const wrapper = css`
+  background: white;
+  margin: 24px -24px 0;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+  min-height: 400px;
+
+  @media (min-width: 768px) {
+    border-radius: 4px;
+    overflow: hidden;
+    width: 680px;
+    margin: 24px auto;
+  }
+`;
+
 function ContentWrapper({ className, children }) {
   return (
-    <main
-      className={className ? `content-wrapper ${className}` : "content-wrapper"}
-    >
+    <main css={wrapper} className={className ? className : ""}>
       {children}
     </main>
   );