Add dark mode

pclubiitk · May 7, 2020 · 2a32c7b · 2a32c7b
1 parent 5c9edf4
commit 2a32c7b
Show file tree

Hide file tree

Showing 19 changed files with 578 additions and 482 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,23 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
+import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
 
 import Mainframe from "./Mainframe";
 import Login from "./screens/login";
 
 function App() {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [isAuthenticated, setIsAuthenticated] = useState(true);
+  const [useDarkMode, setUseDarkMode] = useState(true);
+
+  const theme = useMemo(
+    () =>
+      createMuiTheme({
+        palette: {
+          type: useDarkMode ? "dark" : "light",
+        },
+      }),
+    [useDarkMode]
+  );
 
   function PrivateRoute(props) {
     return (
@@ -19,12 +31,14 @@ function App() {
   }
 
   return (
-    <BrowserRouter>
-      <Switch>
-        <Route exact path="/login" component={Login} />
-        <PrivateRoute path="/" component={Mainframe} />
-      </Switch>
-    </BrowserRouter>
+    <ThemeProvider theme={theme}>
+      <BrowserRouter>
+        <Switch>
+          <Route exact path="/login" component={Login} />
+          <PrivateRoute path="/" component={Mainframe} />
+        </Switch>
+      </BrowserRouter>
+    </ThemeProvider>
   );
 }
 

diff --git a/src/Mainframe.js b/src/Mainframe.js
@@ -9,7 +9,7 @@ function Mainframe(props) {
       <Route path="/profile" component={screens.Profile} />
       <Route path="/streams" component={screens.Streams} />
       <Route exact path="/stream/:id" component={screens.Stream} />
-      <Route path="/stream/:id/newpost" component={screens.NewPost} />
+      <Route path="/stream/:id/new" component={screens.CreatePost} />
       <Route render={() => <h1>404: page not found</h1>} />
     </Switch>
   );

diff --git a/src/components/CommentReplies/style.css b/src/components/CommentReplies/style.css
diff --git a/src/components/CommentsContainer/style.css b/src/components/CommentsContainer/style.css
diff --git a/src/components/MaximisedPost/index.js b/src/components/MaximisedPost/index.js
@@ -6,49 +6,54 @@ import CardMedia from "@material-ui/core/CardMedia";
 import CardContent from "@material-ui/core/CardContent";
 import Avatar from "@material-ui/core/Avatar";
 import Typography from "@material-ui/core/Typography";
-import { red, blue } from "@material-ui/core/colors";
+import { red, indigo, grey, blueGrey } from "@material-ui/core/colors";
 
-const useStyles = makeStyles((theme) => ({
-  card: {
-    width: "100%",
-    backgroundColor: "white",
-    textAlign: "left",
-    justifyContent: "left",
-    alignContent: "left",
-  },
-  avatar: {
-    backgroundColor: red[500],
-  },
-  title: {
-    color: "white",
-  },
-  subheader: {
-    color: "white",
-  },
-  img: {
-    height: 500,
-  },
-}));
+const useStyles = makeStyles((theme) => {
+  const dark = theme.palette.type === "dark";
+  return {
+    card: {
+      width: "100%",
+      textAlign: "left",
+      justifyContent: "left",
+      alignContent: "left",
+    },
+    avatar: {
+      backgroundColor: red[500],
+    },
+    title: { color: dark ? indigo["100"] : grey["50"] },
+    subheader: { color: dark ? indigo["300"] : grey["500"] },
+    img: {
+      height: 500,
+    },
+    header: {
+      textAlign: "left",
+      backgroundColor: dark ? indigo["900"] : indigo["700"],
+    },
+  };
+});
 
 export default function MaximisedPost(props) {
   const classes = useStyles();
 
   return (
     <Card className={classes.card}>
       <CardHeader
-        classes={{ title: classes.title, subheader: classes.subheader }}
         avatar={
           <Avatar aria-label={props.postAuthor} className={classes.avatar}>
             P
           </Avatar>
         }
-        title={props.postTitle}
-        subheader={props.postAuthor}
-        style={{
-          textAlign: "left",
-          backgroundColor: "#1565c0",
-          color: "white",
-        }}
+        title={
+          <Typography className={classes.title} variant="h5">
+            {props.postTitle}
+          </Typography>
+        }
+        subheader={
+          <Typography className={classes.subheader}>
+            {props.postAuthor}
+          </Typography>
+        }
+        className={classes.header}
       />
       <CardMedia
         className={classes.img}

diff --git a/src/components/MinimizedPost/index.js b/src/components/MinimizedPost/index.js
@@ -1,5 +1,4 @@
 import React from "react";
-import "./style.css";
 
 /* Using Material UI */
 import { Card } from "@material-ui/core";

diff --git a/src/components/MinimizedPost/style.css b/src/components/MinimizedPost/style.css
diff --git a/src/components/Topbar/index.js b/src/components/Topbar/index.js
@@ -1,5 +1,4 @@
 import React from "react";
-import "./style.css";
 
 /*using Material UI*/
 
@@ -8,16 +7,31 @@ import { AppBar } from "@material-ui/core";
 import { Toolbar } from "@material-ui/core";
 import { IconButton } from "@material-ui/core";
 import MenuIcon from "@material-ui/icons/Menu";
-import Search from "@material-ui/icons/Search";
+import SearchIcon from "@material-ui/icons/Search";
 import { Typography } from "@material-ui/core";
+import { grey, indigo } from "@material-ui/core/colors";
 
-const useStyles = makeStyles((theme) => ({
-  topbar: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-  },
-}));
+const useStyles = makeStyles((theme) => {
+  const dark = theme.palette.type === "dark";
+
+  return {
+    topbar: {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      backgroundColor: dark ? indigo["900"] : indigo["700"],
+    },
+    title: {
+      color: dark ? indigo["100"] : grey["100"],
+    },
+    menuIcon: {
+      color: dark ? indigo["300"] : grey["100"],
+    },
+    searchIcon: {
+      color: dark ? indigo["300"] : grey["100"],
+    },
+  };
+});
 
 function Topbar(props) {
   const classes = useStyles();
@@ -26,13 +40,15 @@ function Topbar(props) {
     <AppBar className={classes.topbar} position="sticky">
       <Toolbar>
         <IconButton edge="start" color="inherit" aria-label="menu">
-          <MenuIcon />
+          <MenuIcon className={classes.menuIcon} />
         </IconButton>
-        <Typography variant="h6">{props.title}</Typography>
+        <Typography variant="h5" className={classes.title}>
+          {props.title}
+        </Typography>
       </Toolbar>
       <Toolbar>
         <IconButton edge="start" color="inherit" aria-label="menu">
-          <Search />
+          <SearchIcon className={classes.searchIcon} />
         </IconButton>
       </Toolbar>
     </AppBar>

diff --git a/src/components/Topbar/style.css b/src/components/Topbar/style.css
diff --git a/src/components/comment/index.js b/src/components/comment/index.js
@@ -31,7 +31,14 @@ import Avatar from "@material-ui/core/Avatar";
 import IconButton from "@material-ui/core/IconButton";
 import Button from "@material-ui/core/Button";
 import Typography from "@material-ui/core/Typography";
-import { red, orange, purple, pink, green } from "@material-ui/core/colors";
+import {
+  red,
+  orange,
+  purple,
+  pink,
+  green,
+  grey,
+} from "@material-ui/core/colors";
 import ReplyIcon from "@material-ui/icons/Reply";
 import ThumbUpIcon from "@material-ui/icons/ThumbUp";
 import ThumbDownIcon from "@material-ui/icons/ThumbDown";
@@ -46,21 +53,27 @@ import { Toolbar } from "@material-ui/core";
 
 const spacing = 60; //It controls spacing between nested comments
 
-const useStyles = makeStyles((theme) => ({
-  main: {
-    margin: 10,
-    maxWidth: "80em", //max width of comment box
-  },
-  contentShown: { overflowWrap: "break-word" },
-  contentHidden: { marginLeft: "1em", flexShrink: "true" },
-  authorHidden: {
-    marginLeft: "0.5em",
-    fontWeight: "bold",
-    minWidth: "4em",
-    maxWidth: "6em",
-  },
-  indent: { marginLeft: spacing },
-}));
+const useStyles = makeStyles((theme) => {
+  const dark = theme.palette.type === "dark";
+  return {
+    main: {
+      margin: 10,
+      maxWidth: "80em", //max width of comment box
+    },
+    contentShown: { overflowWrap: "break-word" },
+    contentHidden: { marginLeft: "1em", flexShrink: "true" },
+    authorHidden: {
+      marginLeft: "0.5em",
+      fontWeight: "bold",
+      minWidth: "4em",
+      maxWidth: "6em",
+    },
+    indent: { marginLeft: spacing },
+    header: {
+      backgroundColor: dark ? grey["700"] : grey["300"],
+    },
+  };
+});
 
 // Generate random color for avatar
 const colorArray = [red, orange, purple, pink, green];
@@ -210,17 +223,16 @@ function MaximisedComment(props) {
   return (
     <Card className={classes.main}>
       {/* Comment Header */}
-      <div className="header">
-        <CardHeader
-          avatar={<AvatarProp {...props} />}
-          title={
-            <Typography noWrap>
-              <b>{props.author}</b>
-            </Typography>
-          }
-          subheader={<i>{props.date}</i>}
-        />
-      </div>
+      <CardHeader
+        avatar={<AvatarProp {...props} />}
+        title={
+          <Typography noWrap>
+            <b>{props.author}</b>
+          </Typography>
+        }
+        subheader={<i>{props.date}</i>}
+        className={classes.header}
+      />
       {/* Comment Body */}
       <CardContent>
         <Typography

diff --git a/src/components/comment/style.css b/src/components/comment/style.css
@@ -1,7 +1,3 @@
-.header {
-  background-color: rgb(236, 240, 241);
-}
-
 .actions {
   margin-left: auto;
 }

diff --git a/src/components/sidebar/index.js b/src/components/sidebar/index.js
@@ -7,20 +7,49 @@ import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
 import AccountCircleIcon from "@material-ui/icons/AccountCircle";
 import ChevronRightIcon from "@material-ui/icons/ChevronRight";
-import { withStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import "./style.css";
+import { Typography } from "@material-ui/core";
+import { indigo, grey, blueGrey } from "@material-ui/core/colors";
+
+const useStyles = makeStyles((theme) => {
+  const dark = theme.palette.type === "dark";
+  return {
+    profileName: {
+      color: dark ? grey["400"] : indigo["900"],
+    },
+    accountCircleIcon: {
+      color: dark ? indigo["400"] : indigo["900"],
+    },
+    appName: {
+      textAlign: "center",
+      fontSize: "28px",
+      padding: "10px",
+      backgroundColor: dark ? grey["700"] : indigo["700"],
+      color: dark ? indigo["50"] : indigo["50"],
+    },
+  };
+});
 
 const styles = {
   root: {
     minWidth: 40,
-    color: "black",
   },
 };
 function Profile(props) {
+  const classes = useStyles();
   // AccountCircleIcon can be replaced by Avatar when we add Profile Picture functionality
   return (
-    <Button color="primary" startIcon={<AccountCircleIcon />} fullWidth>
-      {props.name}
+    <Button
+      color="primary"
+      startIcon={
+        <Typography className={classes.accountCircleIcon}>
+          <AccountCircleIcon />
+        </Typography>
+      }
+      fullWidth
+    >
+      <Typography className={classes.profileName}>{props.name}</Typography>
     </Button>
   );
 }
@@ -52,10 +81,13 @@ function StreamsList(props) {
 }
 
 function Sidebar(props) {
+  const classes = useStyles();
   return (
     <nav>
       <Drawer variant="permanent" anchor="left" width="100%">
-        <div class="app-name">Campus Discuss</div>
+        <Typography variant="h4" className={classes.appName}>
+          Campus Discuss
+        </Typography>
         <div className="streams-list-wrapper">
           <StreamsList streams={props.streams} />
         </div>

diff --git a/src/components/sidebar/style.css b/src/components/sidebar/style.css
@@ -8,7 +8,6 @@
 .app-name {
   text-align: center;
   font-size: 28px;
-  background-color: rgba(45, 51, 115, 0.1);
   padding: 10px;
 }
 .streams-list {