dark mode created

Sreelatha-Vallabhaneni · Sep 1, 2019 · decbd15 · decbd15
1 parent b4470ac
commit decbd15
Show file tree

Hide file tree

Showing 9 changed files with 187 additions and 37 deletions.
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,42 +1,64 @@
-import React from "react";
+import React, { useEffect, useState, useContext } from "react";
 import { BrowserRouter as Router } from "react-router-dom";
 
 import SimpleAppBar from "./header/SimpleAppBar";
 import MainPlayer from "./player/MainPlayer";
 import SwipeMenu from "./SwipeMenu";
 import CurrentSection from "./CurrentSection";
 import SnackbarMessage from "./SnackbarMessage";
-import { GlobalState } from "./GlobalState";
-
 import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
 import { pink } from "@material-ui/core/colors";
-import 'typeface-roboto';
+import "typeface-roboto";
 
-const theme = createMuiTheme({
-  palette: {
-    primary: pink,
-    secondary: {
-      main: "#fafafa"
-    }
-  },
-  typography: {
-    useNextVariants: true
-  }
-});
+import { GlobalContext } from "./GlobalState";
+
+const body = document.querySelector("body");
 
 function App() {
+  const { themeSelectValue } = useContext(GlobalContext);
+
+  const defaultTheme = {
+    palette: {
+      primary: pink,
+      secondary: {
+        main: "#fafafa"
+      }
+    },
+    typography: {
+      useNextVariants: true
+    }
+  };
+
+
+  const [theme, setTheme] = useState(defaultTheme);
+  const muiTheme = createMuiTheme(theme);
+
+  useEffect(() => {
+    if (themeSelectValue === "Dark") {
+      body.classList.add("dark");
+      setTheme(prevState => {
+        return {
+          ...prevState,
+          palette: { type: "dark", ...prevState.palette }
+        };
+      });
+    } else {
+      body.classList.remove("dark");
+      setTheme(defaultTheme);
+    }
+    console.log(theme);
+  }, [themeSelectValue]);
+
   return (
-    <GlobalState>
-      <MuiThemeProvider theme={theme}>
-        <Router>
-          <SimpleAppBar />
-          <CurrentSection />
-          <MainPlayer />
-          <SwipeMenu />
-        </Router>
-        <SnackbarMessage />
-      </MuiThemeProvider>
-    </GlobalState>
+    <MuiThemeProvider theme={muiTheme}>
+      <Router>
+        <SimpleAppBar />
+        <CurrentSection />
+        <MainPlayer />
+        <SwipeMenu />
+      </Router>
+      <SnackbarMessage />
+    </MuiThemeProvider>
   );
 }
 

diff --git a/src/components/CurrentSection.js b/src/components/CurrentSection.js
@@ -39,6 +39,7 @@ import {
 } from "../external/saveSong";
 
 import { db } from "../external/saveSong";
+import SettingsPage from "./sections/SettingsPage";
 // import the db from save song
 
 // pages
@@ -236,7 +237,8 @@ const CurrentSection = ({ history, location }) => {
             return <div>Redirecting you to play store</div>;
           }}
         />
-
+
+        <Route path="/settings" component={SettingsPage} />
         <Route path="/privacy" component={PrivacyPage} />
 
         <Route path="/feedback" component={FeedbackForm} />

diff --git a/src/components/GlobalState.js b/src/components/GlobalState.js
@@ -11,6 +11,8 @@ export const GlobalState = props => {
   const [menuOpen, setMenuOpen] = useState(false);
   const [snackbarMsg, setSnackbarMsg] = useState(false); //this will contain the message for actions
   const [currentVideoSnippet, setCurrentVideoSnippet] = useState({});
+  //this is for changing the theme
+  const [themeSelectValue, setThemeSelectValue] = useState("Default");
 
   return (
     <GlobalContext.Provider
@@ -26,7 +28,9 @@ export const GlobalState = props => {
         relatedVideos,
         setRelatedVideos,
         snackbarMsg,
-        setSnackbarMsg
+        setSnackbarMsg,
+        themeSelectValue,
+        setThemeSelectValue
       }}
     >
       {props.children}

diff --git a/src/components/RenderDatabase.js b/src/components/RenderDatabase.js
@@ -226,7 +226,7 @@ const RenderDatabase = props => {
   console.log(renderResult);
 
   const renderItem = React.forwardRef((row, ref) => (
-    <div ref={ref} style={row.style}>
+    <div ref={ref} style={{ ...row.style,  maxWidth: "1000px", left: "50%", transform: "translateX(-50%)"}}>
       {renderResult[row.index]}
       <Divider />
     </div>

diff --git a/src/components/SwipeMenu.js b/src/components/SwipeMenu.js
@@ -1,4 +1,4 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useEffect } from "react";
 
 import {
   SwipeableDrawer,
@@ -18,14 +18,16 @@ import {
   Feedback,
   Info,
   FreeBreakfast,
-  People
+  People,
+  Settings
 } from "@material-ui/icons";
 import { Link } from "react-router-dom";
 
-import gIcon from "../images/google.svg";
-import githubIcon from "../images/github.svg";
+
 
 import { GlobalContext } from "./GlobalState";
+import "./darkMode.css";
+
 
 const SwipeMenu = () => {
   const largeAvator = {
@@ -37,6 +39,8 @@ const SwipeMenu = () => {
 
   const { menuOpen, setMenuOpen } = useContext(GlobalContext);
 
+
+
   return (
     <SwipeableDrawer
       open={menuOpen}
@@ -77,6 +81,12 @@ const SwipeMenu = () => {
           className={"pinkLists"}
           onClick={() => setMenuOpen(false)}
         >
+          <ListItem button component={Link} to="/settings">
+            <ListItemIcon>
+              <Settings/>
+            </ListItemIcon>
+            <ListItemText primary="Settings" />
+          </ListItem>
           <ListItem button component={Link} to="/feedback">
             <ListItemIcon>
               <Feedback />
@@ -102,7 +112,19 @@ const SwipeMenu = () => {
             href="https://github.com/ShivamJoker/Ylight-Music-Client"
           >
             <ListItemIcon>
-              <img width="24" src={githubIcon} alt="github icon" />
+              <svg
+                width="24"
+                aria-hidden="true"
+                focusable="false"
+                data-prefix="fab"
+                data-icon="github"
+                role="img"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 496 512"
+                fill="#e91e63"
+              >
+                <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
+              </svg>
             </ListItemIcon>
             <ListItemText primary="Github" />
           </ListItem>

diff --git a/src/components/darkMode.css b/src/components/darkMode.css
@@ -0,0 +1,46 @@
+.dark {
+  background: #212121;
+  color: #fff;
+}
+
+.dark #navbar {
+  background: #333;
+}
+
+.dark div.MuiTabs-root {
+  background: #333;
+}
+
+.dark .main-player-inner {
+  background: #212121;
+}
+.dark .main-player-inner * {
+  /* color: #eceff1; */
+}
+
+.dark .RelatedVideoContainer {
+  background: #333;
+}
+
+.dark .playlistHeader,
+.dark .mainContainer {
+  background: #333;
+}
+
+.dark .MuiTab-textColorPrimary {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.dark .pinkLists > a, .dark .pinkLists svg{
+    color: #fff;
+    fill: #fff;
+
+}
+
+.dark .pinkLists > a {
+    background: #dedede12;
+}
+
+.wholePlayer {
+    background: #e91e63;
+}
diff --git a/src/components/player/MainPlayer.js b/src/components/player/MainPlayer.js
@@ -283,7 +283,7 @@ const MainPlayer = ({ location, history }) => {
     position: "fixed",
     right: 0,
     bottom: 0,
-    background: "#fff",
+
     width: "100%",
     height: "100%",
     zIndex: 1400,
@@ -293,7 +293,6 @@ const MainPlayer = ({ location, history }) => {
 
   if (playerState === "minimized") {
     playerStyle.transform = "translateY(calc(100% - 106px))";
-    playerStyle.background = "#e91e63";
     playerStyle.zIndex = 0;
     // playerStyle.bottom = "48px";
     // calculate the top height and we are subtracting 148px becz
@@ -305,6 +304,7 @@ const MainPlayer = ({ location, history }) => {
   if (playerState === "maximized") {
     // make body overflow hidden 🙈
     body.style.overflow = "hidden";
+    playerStyle.background = "#fff";
   }
 
   if (playerState === "playlist") {
@@ -434,6 +434,7 @@ const MainPlayer = ({ location, history }) => {
           <Grid
             container
             direction="column"
+            className="main-player-inner"
             style={{
               height: " calc(100vh - 46px)",
               justifyContent: "space-evenly"
@@ -552,6 +553,7 @@ const MainPlayer = ({ location, history }) => {
         ref={containerRef}
         style={playerStyle}
         onClick={expandPlayer}
+        className="wholePlayer"
       >
         {returnMaximizedPlayer()}
         {returnMinimizedPlayer()}

diff --git a/src/components/sections/SettingsPage.js b/src/components/sections/SettingsPage.js
@@ -0,0 +1,51 @@
+import React, { useContext } from "react";
+import {
+  Container,
+  FormControl,
+  Select,
+  MenuItem,
+  FormGroup,
+  FormControlLabel,
+  Box,
+  Typography
+} from "@material-ui/core";
+
+import { GlobalContext } from "../GlobalState";
+
+const SettingsPage = () => {
+  const { themeSelectValue, setThemeSelectValue } = useContext(GlobalContext);
+
+  const selectComp = (
+    <Box m={1}>
+      <Select
+        value={themeSelectValue}
+        onChange={e => setThemeSelectValue(e.target.value)}
+        displayEmpty
+        name="age"
+      >
+        <MenuItem value="Default">Default</MenuItem>
+        <MenuItem value="Dark">Dark</MenuItem>
+        <MenuItem value="Auto">Auto</MenuItem>
+      </Select>
+    </Box>
+  );
+  return (
+    <Container>
+      <br />
+      <Typography variant="h5" align="center" gutterBottom>
+        Settings
+      </Typography>
+      <FormControl component="fieldset">
+        <FormGroup row>
+          <FormControlLabel
+            labelPlacement="start"
+            label="Select Theme "
+            value="top"
+            control={selectComp}
+          />
+        </FormGroup>
+      </FormControl>
+    </Container>
+  );
+};
+export default SettingsPage;
diff --git a/src/index.js b/src/index.js
@@ -2,7 +2,8 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./components/App";
 import * as serviceWorker from "./serviceWorker";
+import { GlobalState } from "./components/GlobalState";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(<GlobalState><App /></GlobalState>, document.getElementById("root"));
 
 serviceWorker.register();