feat: user page

src/components/SignOut/SignOut.js

@@ -1,11 +1,33 @@
 import React from "react"
+import { compose } from "recompose"
+import styled from "@emotion/styled"
+import { withTheme } from "emotion-theming"
 
 import { withFirebase } from "../firebase"
 
+const Button = styled.button`
+  background-color: ${props => props.theme.colors.headerBackground};
+  padding: 10px 50px;
+  height: 40px;
+  border-radius: 5px;
+  border: 0px solid;
+  border-color: ${props => props.theme.colors.quarternary};
+  color: ${props => props.theme.colors.secondary};
+  font-size: 14px;
+  font-weight: 700;
+  &:hover {
+    cursor: pointer;
+    background-color: ${props => props.theme.colors.hover};
+  }
+`
+
 const SignOutButton = ({ firebase }) => (
-  <button type="button" onClick={firebase.doSignOut}>
+  <Button type="button" onClick={firebase.doSignOut}>
     Sign Out
-  </button>
+  </Button>
 )
 
-export default withFirebase(SignOutButton)
+export default compose(
+  withTheme,
+  withFirebase
+)(SignOutButton)

src/components/screens/User/User.js

@@ -1,8 +1,34 @@
 import React from "react"
+import styled from "@emotion/styled"
+import { compose } from "recompose"
 import { withFirebase } from "../../firebase"
+import { withAuthentication } from "../../session"
+
+import { SIZES } from "../../../styles/constants"
 
 import SignOut from "../../SignOut"
 
+const ProfileGrid = styled.div`
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-gap: 20px;
+`
+const ProfileSection = styled.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0;
+`
+const ProfileSectionHeader = styled.h2`
+  font-size: ${SIZES.normal};
+  color: ${props => props.theme.colors.tertiary};
+`
+const ProfileSectionText = styled.span`
+  font-size: ${SIZES.normal};
+  color: ${props => props.theme.colors.secondary};
+`
+
 class User extends React.Component {
   state = {
     name: "",
@@ -28,22 +54,22 @@ class User extends React.Component {
   }
 
   render() {
+    const { authUser } = this.props
     return (
-      <React.Fragment>
-        <SignOut />
-        <form onSubmit={this.addUser}>
-          <input
-            type="text"
-            name="name"
-            placeholder="Name"
-            onChange={this.updateInput}
-            value={this.state.name}
-          />
-          <button type="submit">Submit</button>
-        </form>
-      </React.Fragment>
+      <ProfileGrid>
+        <ProfileSection>
+          <ProfileSectionHeader>
+            User: <ProfileSectionText>{authUser.email}</ProfileSectionText>
+          </ProfileSectionHeader>
+          <SignOut />
+        </ProfileSection>
+        {/* <ProfileSection>Export Entries</ProfileSection> */}
+      </ProfileGrid>
     )
   }
 }
 
-export default withFirebase(User)
+export default compose(
+  withFirebase,
+  withAuthentication
+)(User)