From 2a32c7b70e5eeb5bdde65ebb8be69ff4635c9355 Mon Sep 17 00:00:00 2001 From: devanshu singla <56247443+devanshusingla@users.noreply.github.com> Date: Fri, 8 May 2020 00:32:32 +0530 Subject: [PATCH] Add dark mode --- src/App.js | 30 +- src/Mainframe.js | 2 +- src/components/CommentReplies/style.css | 0 src/components/CommentsContainer/style.css | 0 src/components/MaximisedPost/index.js | 65 +-- src/components/MinimizedPost/index.js | 1 - src/components/MinimizedPost/style.css | 0 src/components/Topbar/index.js | 40 +- src/components/Topbar/style.css | 0 src/components/comment/index.js | 66 +-- src/components/comment/style.css | 4 - src/components/sidebar/index.js | 42 +- src/components/sidebar/style.css | 1 - src/screens/createPost/index.js | 211 +++++---- src/screens/index.js | 12 +- src/screens/login/index.js | 72 +-- src/screens/profile/index.js | 481 ++++++++++----------- src/screens/profile/style.css | 3 - yarn.lock | 30 ++ 19 files changed, 578 insertions(+), 482 deletions(-) delete mode 100644 src/components/CommentReplies/style.css delete mode 100644 src/components/CommentsContainer/style.css delete mode 100644 src/components/MinimizedPost/style.css delete mode 100644 src/components/Topbar/style.css delete mode 100644 src/screens/profile/style.css diff --git a/src/App.js b/src/App.js index e8309d2..2178682 100644 --- 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 ( - - - - - - + + + + + + + + ); } diff --git a/src/Mainframe.js b/src/Mainframe.js index 6c72133..17f077e 100644 --- a/src/Mainframe.js +++ b/src/Mainframe.js @@ -9,7 +9,7 @@ function Mainframe(props) { - +

404: page not found

} /> ); diff --git a/src/components/CommentReplies/style.css b/src/components/CommentReplies/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/CommentsContainer/style.css b/src/components/CommentsContainer/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/MaximisedPost/index.js b/src/components/MaximisedPost/index.js index e720526..e0c6580 100644 --- a/src/components/MaximisedPost/index.js +++ b/src/components/MaximisedPost/index.js @@ -6,29 +6,31 @@ 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(); @@ -36,19 +38,22 @@ export default function MaximisedPost(props) { return ( P } - title={props.postTitle} - subheader={props.postAuthor} - style={{ - textAlign: "left", - backgroundColor: "#1565c0", - color: "white", - }} + title={ + + {props.postTitle} + + } + subheader={ + + {props.postAuthor} + + } + className={classes.header} /> ({ - 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) { - + - {props.title} + + {props.title} + - + diff --git a/src/components/Topbar/style.css b/src/components/Topbar/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/comment/index.js b/src/components/comment/index.js index cb2a3f5..e46585c 100644 --- 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 ( {/* Comment Header */} -
- } - title={ - - {props.author} - - } - subheader={{props.date}} - /> -
+ } + title={ + + {props.author} + + } + subheader={{props.date}} + className={classes.header} + /> {/* Comment Body */} { + 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 ( - ); } @@ -52,10 +81,13 @@ function StreamsList(props) { } function Sidebar(props) { + const classes = useStyles(); return (