Dark mode

README.md

@@ -83,7 +83,7 @@ The recent decade has witnessed the birth of social media ecosystems that brings
         For *Windows* you can use -
 
         ```
-        venv/Scipts/activate.bat
+        venv\Scipts\activate.bat
         ```
 
 -   #### Environment Variables

fact-bounty-client/src/AppRouter.js

@@ -1,5 +1,6 @@
 import React, { Component, Fragment } from 'react'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
+import { connect } from 'react-redux'
 
 //components
 import NavBar from './components/NavBar'
@@ -20,24 +21,32 @@ class AppRouter extends Component {
     return (
       <Router>
         <Fragment>
-          <NavBar />
-          <Route exact path="/" component={Landing} />
-          <Route exact path="/register" component={Register} />
-          <Route exact path="/login" component={Login} />
-          <Route exact path="/forgotpassword" component={ForgotPassword} />
-          <Route
-            exact
-            path="/resetpassword/:verificationToken"
-            component={ResetPassword}
-          />
-          <Route path="/dashboard" component={Dashboard} />
-          <Route exact path="/posts" component={Posts} />
-          <Route exact path="/tweets" component={Tweets} />
-          <Route exact path="/post/:id" component={PostDetailView} />
+          <div className={this.props.dark ? 'darkmode' : ''}>
+            <NavBar />
+            <Route exact path="/" component={Landing} />
+            <Route exact path="/register" component={Register} />
+            <Route exact path="/login" component={Login} />
+            <Route exact path="/forgotpassword" component={ForgotPassword} />
+            <Route
+              exact
+              path="/resetpassword/:verificationToken"
+              component={ResetPassword}
+            />
+            <Route path="/dashboard" component={Dashboard} />
+            <Route exact path="/posts" component={Posts} />
+            <Route exact path="/tweets" component={Tweets} />
+            <Route exact path="/post/:id" component={PostDetailView} />
+          </div>
         </Fragment>
       </Router>
     )
   }
 }
+const mapStateToProps = state => {
+  return {
+    //...state,
+    dark: state.auth.dark
+  }
+}
 
-export default AppRouter
+export default connect(mapStateToProps)(AppRouter)

fact-bounty-client/src/components/ContactUsForm/ContactUsForm.jsx

@@ -39,7 +39,7 @@ class ContactUsForm extends Component {
     return (
       <div className="contact-us-form-container">
         <h1>Contact Us</h1>
-        <p>Feel free to contact us for any inquiries or feedback</p>
+        <p>Feel free to contact us for any inquiries or feedback!</p>
         <form onSubmit={this.onSubmit}>
           <input
             type="text"

fact-bounty-client/src/components/DashboardSideNav/DashboardSideNav.jsx

@@ -4,7 +4,9 @@ import './style.sass'
 
 const DashboardSideNav = () => {
   return (
+
     <div className="dashboard-side-nav-container">
+
       <ul className="links">
         <li>
           <Link className="link" to="/dashboard/twitter">

fact-bounty-client/src/components/NavBar/Links/PrivateLinks.js

@@ -95,7 +95,8 @@ PrivateLinks.propTypes = {
 }
 
 const mapStateToProps = state => ({
-  auth: state.auth
+  auth: state.auth,
+  dark: state.dark
 })
 
 export default connect(mapStateToProps)(PrivateLinks)

fact-bounty-client/src/components/NavBar/NavBar.jsx

@@ -11,10 +11,11 @@ import SwipeableDrawer from '../SwipeableDrawer'
 import PublicLinks from './Links/PublicLinks'
 import PrivateLinks from './Links/PrivateLinks'
 import Toast from '../Toast'
-import { logoutUser } from '../../redux/actions/authActions'
+import { logoutUser , toggleDarkMode } from '../../redux/actions/authActions'
 import styles from './NavBar.style'
 import factbountyLogo from '../../assets/logos/factbountyLogo.png'
 import './styles.sass'
+// import Darkmode from '../Darkmode/DarkMode'
 
 class NavBar extends Component {
   // constructor
@@ -53,7 +54,7 @@ class NavBar extends Component {
     const { drawerIsOpen, toastIsOpen } = this.state
     const { classes, auth } = this.props
     return (
-      <div className={`${classes.root} nav-bar-container`}>
+      <div className={`${classes.root}  ${auth.dark ? 'darkmode nav-bar-container' : 'nav-bar-container'}`}>
         <Toast
           isOpen={toastIsOpen}
           handleClose={this.closeToast}
@@ -63,8 +64,10 @@ class NavBar extends Component {
           isOpen={drawerIsOpen}
           toggleDrawer={this.toggleDrawer}
         />
-        <AppBar position="static" color="default" className={classes.navBar}>
+        <AppBar position="static" color="default" className={` ${classes.navBar} ${auth.dark ? 'darkmode ' : '' }`}>
+
           <Toolbar>
+
             <IconButton
               className={classes.menuButton}
               color="inherit"
@@ -79,13 +82,28 @@ class NavBar extends Component {
               </Link>
             </div>
             <div className={classes.linkButtonsContainer}>
+
+
               {auth.isAuthenticated ? (
                 <PrivateLinks handleLogout={this.handleLogout} />
               ) : (
                 <PublicLinks />
               )}
+
             </div>
+            <span>
+              <label className="switch">
+                <input
+                type="checkbox"
+                onChange={() => this.props.toggleDarkMode(auth.dark)}
+                />
+                <span className ="slider round"></span>
+              </label>
+            </span>
+            {auth.dark ? '☀' : '☾' }
+
           </Toolbar>
+
         </AppBar>
       </div>
     )
@@ -95,16 +113,18 @@ class NavBar extends Component {
 NavBar.propTypes = {
   classes: PropTypes.object.isRequired,
   auth: PropTypes.object,
-  logoutUser: PropTypes.func.isRequired
+  logoutUser: PropTypes.func.isRequired,
+  dark: PropTypes.func.isRequired,
 }
 
 const NavBarWithStyles = withStyles(styles)(NavBar)
 
 const mapStateToProps = state => ({
-  auth: state.auth
+  auth: state.auth,
+  dark: state.dark
 })
 
 export default connect(
   mapStateToProps,
-  { logoutUser }
+  { logoutUser , toggleDarkMode }
 )(NavBarWithStyles)

fact-bounty-client/src/components/NavBar/styles.sass

@@ -1,9 +1,63 @@
 .nav-bar-container
-    background-color: #ffffff !important
+    background-color: #ffffff 
     @media #{'only screen and (max-width: 960px)'}
         padding: 10px
     padding: 10px 60px 10px 60px
     .logo-container
         flex-grow: 1
         img
-            width: 200px
+            width: 200px
+
+.switch 
+  position: relative
+  display: inline-block
+  margin: 5px
+  width: 50px
+  height: 24px
+
+.switch input 
+  opacity: 0
+  width: 0
+  height: 0
+
+
+.slider 
+  position: absolute
+  cursor: pointer
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  background-color: #ccc
+  -webkit-transition: .4s
+  transition: .4s
+
+.slider:before 
+  position: absolute
+  content: ""
+  height: 16px
+  width: 16px
+  left: 4px
+  bottom: 4px
+  background-color: white
+  -webkit-transition: .4s
+  transition: .4s
+
+input:checked + .slider 
+  background-color: #2196F3
+
+input:focus + .slider 
+  box-shadow: 0 0 1px #2196F3
+
+
+input:checked + .slider:before 
+  -webkit-transform: translateX(26px)
+  -ms-transform: translateX(26px)
+  transform: translateX(26px)
+
+.slider.round 
+  border-radius: 13px
+
+
+.slider.round:before 
+  border-radius: 50%

fact-bounty-client/src/pages/Landing/Landing.jsx

@@ -89,9 +89,7 @@ class Landing extends Component {
                   Welcome to <b>Fact Bounty</b>
                 </h1>
                 <p>
-                  Fact Bounty is a crowd sourced based fact checking platform.
-                  Using Fact Bounty, you will be able to find out the truth and
-                  minimize spread of false news and roumors
+                  Fact Bounty is a crowdsourced based fact-checking platform. Using Fact Bounty, you will be able to find out the truth and minimize the spread of false news and rumors.
                 </p>
                 <Link to="/#about">
                   <Button
@@ -200,8 +198,7 @@ class Landing extends Component {
                   <label>1</label>SEARCH
                   <h3>Search News Posts</h3>
                   <p>
-                    Search for news posts in Fact Bounty and find out which
-                    posts are real and which is fake
+                    Search for news posts in Fact Bounty and find out which posts are real and which are fake.
                   </p>
                 </div>
               </div>
@@ -210,9 +207,7 @@ class Landing extends Component {
                   <label>2</label>VOTE
                   <h3>Vote News Posts</h3>
                   <p>
-                    Users can upvote, down vote or put an neutral vote to new
-                    posts listed in fact bounty, which will be used to validate
-                    the facts stated in the news
+                    Users can upvote, downvote, or put a neutral vote to new posts listed in fact bounty, which will be used to validate the facts stated in the news.
                   </p>
                 </div>
               </div>
@@ -224,8 +219,7 @@ class Landing extends Component {
                   <label>3</label>VISUALIZE
                   <h3>Visualize News Post Stats</h3>
                   <p>
-                    View charts and graphs to see in a visual representations of
-                    roumor spread and news source validity
+                    View charts and graphs to see visual representations of rumor spread and news source validity.
                   </p>
                 </div>
               </div>

fact-bounty-client/src/redux/actions/actionTypes.js

@@ -23,3 +23,4 @@ export const CONTACT_FORM_SUBMIT_FAIL = 'CONTACT_FORM_SUBMIT_FAIL'
 
 export const FETCH_TWEETS = 'FETCH_TWEETS'
 export const LOADING_TWEETS = 'LOADING_TWEETS'
+export const DARK_MODE = 'DARK_MODE'

fact-bounty-client/src/redux/actions/authActions.js

@@ -4,10 +4,18 @@ import {
   SET_CURRENT_USER,
   USER_LOADING,
   GET_ERRORS,
-  GET_SUCCESS
+  GET_SUCCESS,
+  DARK_MODE
 } from './actionTypes'
 import AuthService from '../../services/AuthService'
 
+export const toggleDarkMode = curr => {
+  return {
+    type: DARK_MODE,
+    payload: !curr
+  }
+}
+
 // Set logged in user
 export const setCurrentUser = payload => {
   return {

fact-bounty-client/src/redux/reducers/authReducers.js

@@ -1,11 +1,16 @@
-import { SET_CURRENT_USER, USER_LOADING } from '../actions/actionTypes'
+import {
+  SET_CURRENT_USER,
+  USER_LOADING,
+  DARK_MODE
+} from '../actions/actionTypes'
 
 // eslint-disable-next-line prettier/prettier
 const isEmpty = require('is-empty')
 const initialState = {
   isAuthenticated: false,
   user: {},
-  loading: false
+  loading: false,
+  dark: false
 }
 
 export default function(state = initialState, action) {
@@ -21,6 +26,11 @@ export default function(state = initialState, action) {
         ...state,
         loading: true
       }
+    case DARK_MODE:
+      return {
+        ...state,
+        dark: !state.dark
+      }
     default:
       return state
   }

fact-bounty-client/src/styles/style.sass

@@ -4,3 +4,7 @@
 @import 'variables.sass'
 @import 'fonts.sass'
 @import 'global-styles.sass'
+
+.darkmode
+  background-color:#1F1F1F !important
+  color:#D8D8D8 !important