Skip to content

Commit

Permalink
refactor with emotion (#3)
Browse files Browse the repository at this point in the history
  • Loading branch information
vacas5 authored Jul 14, 2021
1 parent 1a233d4 commit 53e83bb
Show file tree
Hide file tree
Showing 15 changed files with 343 additions and 305 deletions.
112 changes: 112 additions & 0 deletions emotion/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions emotion/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -35,5 +36,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@emotion/babel-plugin": "^11.3.0"
}
}
68 changes: 0 additions & 68 deletions emotion/src/App.css

This file was deleted.

77 changes: 71 additions & 6 deletions emotion/src/App.js
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand Down
7 changes: 0 additions & 7 deletions emotion/src/components/ButtonNavList/ButtonNavList.js

This file was deleted.

15 changes: 0 additions & 15 deletions emotion/src/components/ContentWrapper/ContentWrapper.css

This file was deleted.

22 changes: 17 additions & 5 deletions emotion/src/components/ContentWrapper/ContentWrapper.js
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down
Loading

0 comments on commit 53e83bb

Please sign in to comment.