diff --git a/public/favicon.ico b/public/favicon.ico
index a11777c..18add62 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index 9493bee..0dc662b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -26,7 +26,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
- React App
+ Sol Journal
diff --git a/public/reactfavicon.ico b/public/reactfavicon.ico
new file mode 100644
index 0000000..a11777c
Binary files /dev/null and b/public/reactfavicon.ico differ
diff --git a/src/App.js b/src/App.js
index 9c08a2b..9cc38cd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,6 @@
import React, { Component } from "react"
import { BrowserRouter as Router, Route } from "react-router-dom"
+import { compose } from "recompose"
import styled from "@emotion/styled"
import { ThemeProvider } from "emotion-theming"
@@ -15,6 +16,7 @@ import Login from "./components/screens/Login"
import Register from "./components/screens/Register"
import { withAuthentication } from "./components/session"
+import { withFirebase } from "./components/firebase"
const RouteLayout = styled.div`
display: flex;
@@ -30,7 +32,10 @@ const RouteLayout = styled.div`
class App extends Component {
state = {
authUser: JSON.parse(localStorage.getItem("authUser")),
- selectedTheme: "LIGHT",
+ selectedTheme:
+ new Date().getHours() >= 7 && new Date().getHours() <= 21
+ ? "LIGHT"
+ : "DARK",
}
onChangeTheme = () => {
@@ -44,6 +49,19 @@ class App extends Component {
this.setState({ selectedTheme: newTheme })
}
+ saveUserSettings = newTheme => {
+ const { authUser, firebase } = this.props
+ firebase.db
+ .collection("users")
+ .doc(authUser.uid)
+ .update({
+ theme: newTheme,
+ })
+ .then(function() {
+ console.log("Updated theme settings")
+ })
+ }
+
render() {
const { selectedTheme } = this.state
@@ -74,4 +92,7 @@ class App extends Component {
}
}
-export default withAuthentication(App)
+export default compose(
+ withAuthentication,
+ withFirebase
+)(App)
diff --git a/src/components/SignOut/SignOut.js b/src/components/SignOut/SignOut.js
index c424e06..0632e57 100644
--- a/src/components/SignOut/SignOut.js
+++ b/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 }) => (
-
)
-export default withFirebase(SignOutButton)
+export default compose(
+ withTheme,
+ withFirebase
+)(SignOutButton)
diff --git a/src/components/screens/User/User.js b/src/components/screens/User/User.js
index 9756e41..1d5e512 100644
--- a/src/components/screens/User/User.js
+++ b/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 (
-
-
-
-
+
+
+
+ User: {authUser.email}
+
+
+
+ {/* Export Entries */}
+
)
}
}
-export default withFirebase(User)
+export default compose(
+ withFirebase,
+ withAuthentication
+)(User)