refactor: wiping to bare bones again

src/App.js

@@ -1,58 +1,11 @@
 import React, { Component } from "react";
 import { css } from "emotion";
-import mq from "./util/mq";
 import Header from "./components/Header";
 import Main from "./components/Main";
 import LeftSidebar from "./components/LeftSidebar";
 import RightSidebar from "./components/RightSidebar";
 
-const appStyles = css({
-  minHeight: "100vh",
-  display: "grid",
-  gridTemplateColumns: "100%",
-  gridTemplateRows: "auto 1fr",
-  gridTemplateAreas: `
-    "header"
-    "main"
-    "sidebarLeft"
-    "sidebarRight"
-  `,
-  ...mq.medium({
-    gridTemplateColumns: "200px 1fr 200px",
-    gridTemplateRows: "auto 1fr",
-    gridTemplateAreas: `
-    "header header header"
-    "sidebarLeft main sidebarRight"
-  `,
-  }),
-  "& > header": {
-    gridArea: "header",
-    position: "sticky",
-    width: "100%",
-    top: 0,
-  },
-  "& > aside:first-of-type": {
-    gridArea: "sidebarLeft",
-  },
-  "& > main": {
-    gridArea: "main",
-  },
-  "& > aside:last-of-type": {
-    gridArea: "sidebarRight",
-  },
-  "& > *": {
-    border: "1px solid gray",
-  },
-  "& > aside": {
-    overflow: "auto",
-    ...mq.medium({
-      overflow: "visible",
-      "&:before": {
-        display: "none",
-      },
-    }),
-  },
-});
+const appStyles = css({});
 
 class App extends Component {
   render() {

src/components/Header/index.js

@@ -1,68 +1,5 @@
 import React from "react";
-import { css } from "emotion";
-import classnames from "classnames";
-import Icon from "@material-ui/core/Icon";
-import TextField from "@material-ui/core/TextField";
-import Avatar from "../avatar";
-import Switch from "@material-ui/core/Switch";
-import Box from "../Box";
-import mq from "../../util/mq";
 
-const headerStyles = css({
-  display: "flex",
-  alignItems: "center",
-  flexWrap: "wrap",
-  gridArea: "header",
-  zIndex: 100,
-  backgroundColor: "#4285f4",
-  padding: "0 16px 0 8px",
-  color: "white",
-});
-
-const searchContainerStyles = css({
-  flex: "1",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  minWidth: "100%",
-  order: 100,
-  ...mq.medium({
-    minWidth: "auto",
-    order: 0,
-  }),
-});
-
-const searchStyles = css({
-  display: "flex",
-  alignItems: "center",
-  background: "rgba(255,255,255,.25)",
-  color: "white !important",
-  maxWidth: 800,
-});
-
-const Header = () => (
-  <header className={classnames(headerStyles)}>
-    <Icon>menu</Icon>
-    <span>Inbox</span>
-    <Box height={60} className={searchContainerStyles} noBorder>
-      <Box width="100%" className={searchStyles} height={50} noBorder>
-        <Icon className={css({ marginRight: 20 })}>search</Icon>
-        <TextField
-          InputLabelProps={{
-            shrink: true,
-          }}
-          placeholder="Search"
-          fullWidth
-          margin="normal"
-        />
-      </Box>
-      <Switch checked color="primary" />
-    </Box>
-    <Icon className={css({ marginLeft: "auto" })}>chat</Icon>
-    <Icon>grid_on</Icon>
-    <Icon>notifications</Icon>
-    <Avatar />
-  </header>
-);
+const Header = () => <header>Header</header>;
 
 export default Header;

src/components/LeftSidebar/index.js

@@ -1,51 +1,5 @@
 import React from "react";
-import { css } from "emotion";
-import Icon from "@material-ui/core/Icon";
-import Box from "../Box";
 
-const leftStyles = css({
-  "& > *": {
-    display: "flex",
-    alignItems: "center",
-  },
-});
-
-const blue = css({ color: "#29B6F6" });
-const orange = css({ color: "#FFB74D" });
-const green = css({ color: "#4CAF50" });
-
-const LeftSidebar = () => (
-  <aside className={leftStyles}>
-    <Box tile noBorder>
-      <Icon className={blue}>inbox</Icon>Inbox
-    </Box>
-    <Box tile noBorder>
-      <Icon className={orange}>access_time</Icon>Snoozed
-    </Box>
-    <Box tile noBorder>
-      <Icon className={green}>done</Icon>Done
-    </Box>
-    <hr />
-    <Box tile noBorder>
-      <Icon>drafts</Icon>Drafts
-    </Box>
-    <Box tile noBorder>
-      <Icon>send</Icon>Sent
-    </Box>
-    <Box tile noBorder>
-      <Icon>star</Icon>Reminders
-    </Box>
-    <Box tile noBorder>
-      <Icon>delete</Icon>Trash
-    </Box>
-    <Box tile noBorder>
-      <Icon>warning</Icon>Spam
-    </Box>
-    <Box tile noBorder>
-      <Icon>contacts</Icon>Contacts
-    </Box>
-    <hr />
-  </aside>
-);
+const LeftSidebar = () => <aside>Left Sidebar</aside>;
 
 export default LeftSidebar;

src/components/Main/index.js

@@ -1,27 +1,5 @@
-import React, { Fragment } from "react";
-import { css } from "emotion";
-import DayHeader from "./day-header";
-import Email from "../Email";
+import React from "react";
 
-const SECTIONS = 3;
-const EMAILS = 10;
-const dates = ["Today", "Yesterday", "Last Week"];
-
-const mainStyles = css({
-  padding: 30,
-  // https://css-tricks.com/flexbox-truncated-text/
-  minWidth: 0,
-});
-
-const Main = () => (
-  <main className={mainStyles}>
-    {new Array(SECTIONS).fill(0).map((e, i) => (
-      <Fragment key={i}>
-        <DayHeader date={dates[i]} />
-        {new Array(EMAILS).fill(0).map((e, ii) => <Email key={`${i}${ii}`} />)}
-      </Fragment>
-    ))}
-  </main>
-);
+const Main = () => <main>Main</main>;
 
 export default Main;

src/components/RightSidebar/index.js

@@ -1,10 +1,5 @@
 import React from "react";
-import Tile from "./tile";
 
-const TILES = 30;
-
-const RightSidebar = () => (
-  <aside>{new Array(TILES).fill(0).map((e, i) => <Tile key={i} />)}</aside>
-);
+const RightSidebar = () => <aside>Right Sidebar</aside>;
 
 export default RightSidebar;