UI updates

.env

@@ -1 +1 @@
-REACT_APP_CURRENT_VERSION=v1.3.0
+REACT_APP_CURRENT_VERSION=v1.3.1

src/appshell/AppShell.js

@@ -16,8 +16,11 @@ import { TransferModal } from 'component/transfer/TransferBox'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faFileUpload } from '@fortawesome/free-solid-svg-icons'
 import { ReleaseNotesModal } from 'component/releasenotes'
+import {DarkModeSwitcher} from "../component/darkmode";
+import {useDispatch, useSelector} from "react-redux";
+import {SaveDarkMode} from "../store/action/DarkMode";
 
-const drawerWidth = 240
+const drawerWidth = 200
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -52,7 +55,6 @@ const useStyles = makeStyles((theme) => ({
     content: {
         flexGrow: 1,
         padding: theme.spacing(4),
-        backgroundColor: theme.palette.secondary.main,
         height: '100vh',
     },
     link: {
@@ -72,6 +74,9 @@ export default ({ children }) => {
     const [mobileOpen, setMobileOpen] = React.useState(false)
     const [transferSaveOpen, setTransferSaveOpen] = React.useState(false)
 
+    const dispatch = useDispatch()
+    const darkModeEnabled = useSelector(state => state.darkMode)
+
     const handleDrawerToggle = () => {
         setMobileOpen(!mobileOpen)
     }
@@ -100,6 +105,11 @@ export default ({ children }) => {
                         <ListItemText primary="About" />
                     </ListItem>
                 </Link>
+                <ListItem>
+                    <DarkModeSwitcher state={darkModeEnabled} onClick={() => {
+                        dispatch(SaveDarkMode(!darkModeEnabled))
+                    }}/>
+                </ListItem>
                 <ListItem>
                     <Typography variant="subtitle2">
                         {process.env.REACT_APP_CURRENT_VERSION}

src/component/darkmode/DarkMode.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Switch from "@material-ui/core/Switch";
+import {makeStyles} from "@material-ui/core/styles";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faMoon, faSun} from "@fortawesome/free-solid-svg-icons";
+
+const useStyles = makeStyles({
+    switchHolder: {
+        display: "flex",
+        alignItems: "center"
+    }
+})
+
+const DarkModeSwitcher = ({onClick, state}) => {
+    const classes = useStyles()
+    return (
+        <div className={classes.switchHolder}>
+            <FontAwesomeIcon icon={faSun}/>
+            <Switch defaultChecked={state} onClick={onClick}/>
+            <FontAwesomeIcon icon={faMoon}/>
+        </div>
+    )
+}
+
+DarkModeSwitcher.propTypes = {
+    onClick: PropTypes.func,
+    state: PropTypes.bool
+}
+
+export default DarkModeSwitcher

src/component/darkmode/index.js

@@ -0,0 +1,3 @@
+import DarkModeSwitcher from "./DarkMode";
+
+export { DarkModeSwitcher }

src/component/releasenotes/Releases.js

@@ -22,5 +22,11 @@ export const Releases = {
             about One Nice Thing please feel free to send an email from the About 
             or Statistics page!
         </Typography>
+    ),
+    'v1.3.1': (
+        <Typography variant="body1">
+            With release 1.3.1 we've made just a few changes to the UI to make
+            One Nice Thing more usable on mobile devices, as well as adding a dark mode!
+        </Typography>
     )
 }

src/index.js

@@ -5,21 +5,20 @@ import * as serviceWorker from './serviceWorker'
 import { BrowserRouter } from 'react-router-dom'
 import { Provider } from 'react-redux'
 import { PersistGate } from 'redux-persist/integration/react'
-import { ThemeProvider } from '@material-ui/core/styles'
 import App from 'App'
 import Store from 'store/Store'
-import { Theme } from 'theme'
+import CustomThemeProvider from 'theme'
 
 const { store, persistor } = Store()
 
 ReactDOM.render(
     <Provider store={store}>
         <PersistGate loading={null} persistor={persistor}>
-            <ThemeProvider theme={Theme}>
+            <CustomThemeProvider>
                 <BrowserRouter>
                     <App />
                 </BrowserRouter>
-            </ThemeProvider>
+            </CustomThemeProvider>
         </PersistGate>
     </Provider>,
     document.getElementById('root')

src/page/home/Home.js

@@ -7,13 +7,18 @@ import Paper from '@material-ui/core/Paper'
 import { makeStyles } from '@material-ui/core/styles'
 import { SaveNoteList } from 'store/action/NoteList'
 import { findCurrentStreak } from 'util/notelist/NoteListUtil'
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faChevronCircleUp, faChevronCircleDown} from "@fortawesome/free-solid-svg-icons";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
     intro: {
         padding: '1.5rem 1rem',
         margin: '0 auto',
         textAlign: 'center',
     },
+    hide: {
+        display: 'none',
+    },
     inputPaper: {
         padding: '.5rem',
         margin: '2rem auto',
@@ -22,6 +27,11 @@ const useStyles = makeStyles({
     input: {
         width: '85%',
         marginBottom: '1rem',
+        '& .MuiFormLabel-root': {
+            [theme.breakpoints.down('sm')]: {
+                fontSize: '.75rem',
+            },
+        },
     },
     save: {
         marginBottom: '1rem',
@@ -42,7 +52,7 @@ const useStyles = makeStyles({
     dateHeader: {
         marginTop: '1.5rem',
     },
-})
+}))
 
 const dateTimeFormatter = new Intl.DateTimeFormat('en-US')
 
@@ -59,7 +69,7 @@ const Home = () => {
     const classes = useStyles()
 
     //Set up note, either as from the existing list, or as a new note entirely
-    const noteList = useSelector((state) => state.noteList)
+    const noteList = useSelector((state) => state.noteList, [])
     let currentNote
     if (noteList.length === 0) {
         currentNote = { text: null, date: dateTimeFormatter.format(new Date()) }
@@ -82,13 +92,17 @@ const Home = () => {
 
     const currentStreak = findCurrentStreak(noteList)
 
+    //Display/Hide Welcome box
+    const [showWelcome, setShowWelcome] = useState(false)
+
     return (
         <div>
             <Paper elevation={2} className={classes.intro}>
                 <Typography variant="h4" gutterBottom>
                     Welcome to One Nice Thing
                 </Typography>
-                <Typography variant="body1">
+                <FontAwesomeIcon icon={showWelcome ? faChevronCircleUp : faChevronCircleDown} onClick={() => setShowWelcome(!showWelcome)}/>
+                <Typography variant="body1" className={showWelcome ? '' : classes.hide}>
                     Here are the rules: Every day stop in and put one good thing
                     that happened to you here. You can change it up until
                     midnight, after which it's locked in the past, immutable.
@@ -129,7 +143,7 @@ const Home = () => {
                         setTimeout(() => setShowSaved(false), 2500)
                     }}
                 >
-                    Save :)
+                    Save
                 </Button>
                 <Typography
                     variant="h6"

src/store/Reducers.js

@@ -1,12 +1,14 @@
 import { combineReducers } from 'redux'
 import NoteListReducer from 'store/reducer/NoteList'
 import { ReleaseNotesViewedReducer } from 'store/reducer/ReleaseNotes'
+import { DarkModeReducer } from 'store/reducer/DarkMode'
 import { REPLACE_ROOT } from 'store/action/Root'
 
 const appReducer = combineReducers({
     base: () => ({}),
     noteList: NoteListReducer,
     releaseNotesViewed: ReleaseNotesViewedReducer,
+    darkMode: DarkModeReducer
 })
 
 const rootReducer = (state, action) => {

src/store/action/DarkMode.js

@@ -0,0 +1,6 @@
+export const SAVE_DARK_MODE = 'SAVE_DARK_MODE'
+
+export const SaveDarkMode = (enabled) => ({
+    type: SAVE_DARK_MODE,
+    enabled,
+})

src/store/reducer/DarkMode.js

@@ -0,0 +1,10 @@
+import { SAVE_DARK_MODE } from 'store/action/DarkMode'
+
+export const DarkModeReducer = (state = true, action) => {
+    switch (action.type) {
+        case SAVE_DARK_MODE:
+            return action.enabled
+        default:
+            return state
+    }
+}

src/theme/MuiTheme.js

@@ -1,12 +1,22 @@
 import { createMuiTheme } from '@material-ui/core/styles'
 
-export default createMuiTheme({
+export default (darkMode) => createMuiTheme({
     palette: {
+        type: darkMode ? 'dark' : 'light',
         primary: { main: '#1261A0', light: '#3895D3', dark: '#072F5F' },
-        secondary: { main: '#F6F8F9' },
+        secondary: { main: '#F6F8F9', light: '#F6F8F9', dark: '#424242' },
         success: { main: '#95CE47' },
         error: { main: '#9F2711' },
         warning: { main: '#F5BE69' },
         info: { main: '#3D678D' },
     },
+    breakpoints: {
+        values: {
+            xs: 0,
+            sm: 770,
+            md: 950,
+            lg: 1300,
+            xl: 1600
+        }
+    }
 })

src/theme/index.js

@@ -1,3 +1,9 @@
 import Theme from './MuiTheme'
+import React from 'react'
+import {ThemeProvider} from "@material-ui/core/styles";
+import {useSelector} from "react-redux";
 
-export { Theme }
+export default (props) => {
+    const darkMode = useSelector(state => state.darkMode)
+    return <ThemeProvider theme={ Theme(darkMode) } children={props.children}/>
+}

src/util/notelist/NoteListUtil.js

@@ -100,7 +100,7 @@ export const findWordCounts = (noteList) => {
                 .filter(word => word.length > 0)
                 .reduce((acc, cur) => {
                 const currentCount = acc[cur]
-                if (currentCount == null || currentCount == undefined) {
+                if (currentCount === null || currentCount === undefined) {
                     acc[cur] = 1
                 } else {
                     acc[cur] = currentCount + 1