fix the issue of wrong img art position

src/components/App copy.js

@@ -0,0 +1,67 @@
+import React from "react";
+
+import "typeface-roboto";
+import { GlobalState } from "./GlobalState";
+import { BrowserRouter as Router, Route } 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 { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
+import { pink } from "@material-ui/core/colors";
+
+import { useCheckDarkmode } from "./sections/SettingsPage";
+import { GlobalContext } from "./GlobalState";
+
+const body = document.querySelector("body");
+
+const defaultTheme = {
+  palette: {
+    primary: pink,
+    secondary: {
+      main: "#fafafa"
+    }
+  },
+  typography: {
+    useNextVariants: true
+  }
+};
+
+const darkTheme = {
+  palette: {
+    type: "dark",
+    primary: pink,
+    secondary: {
+      main: "#fafafa"
+    }
+  },
+  typography: {
+    useNextVariants: true
+  }
+};
+
+function App() {
+  const muiDarkTheme = createMuiTheme(darkTheme);
+  const muiDefaultTheme = createMuiTheme(defaultTheme);
+
+  // this works i have just transfered AppContainer contents to here
+  return (
+    <GlobalState>
+      <MuiThemeProvider
+        theme={themeSelectValue === "Dark" ? muiDarkTheme : muiDefaultTheme}
+      >
+        <Router>
+          <SimpleAppBar />
+          <CurrentSection />
+          <Route path={"/"} component={MainPlayer} />
+          <SwipeMenu />
+        </Router>
+        <SnackbarMessage />
+      </MuiThemeProvider>
+    </GlobalState>
+  );
+}
+
+export default App;

src/components/App.js

@@ -2,14 +2,16 @@ import React from "react";
 
 import "typeface-roboto";
 import { GlobalState } from "./GlobalState";
-import ThemeProvider from "./ThemeProvider";
+import AppContainer from "./AppContainer";
 
 function App() {
   return (
     <GlobalState>
-      <ThemeProvider />
+      <AppContainer />
     </GlobalState>
   );
 }
 
 export default App;
+
+// this do not works 

src/components/ThemeProvider.js → src/components/AppContainer.js

@@ -42,13 +42,13 @@ const darkTheme = {
 const muiDarkTheme = createMuiTheme(darkTheme);
 const muiDefaultTheme = createMuiTheme(defaultTheme);
 
-const ThemeProvider = () => {
+const AppContainer = () => {
   const [{ themeSelectValue }, dispatch] = useContext(GlobalContext);
 
   const { checkDarkMode } = useCheckDarkmode();
 
   useEffect(() => {
-    // checkDarkMode();
+    checkDarkMode();
   }, []);
 
   useEffect(() => {
@@ -73,4 +73,4 @@ const ThemeProvider = () => {
     </MuiThemeProvider>
   );
 };
-export default ThemeProvider;
+export default AppContainer;

src/components/darkMode.css

@@ -15,7 +15,6 @@
   background: #212121;
 }
 
-
 .dark .RelatedVideoContainer {
   background: #333;
 }
@@ -39,6 +38,9 @@
   background: #dedede12;
 }
 
+.dark .mediaPlayerContainer {
+  background: #2f2f2f;
+}
 .wholePlayer {
   background: #e91e63;
 }

src/components/player/MiniMusicStyle.css

@@ -25,7 +25,7 @@
   border-radius: 50%;
   width: 70px;
   height: 70px;
-  position: fixed;
+  position: absolute;
 }
 
 .overflow-hidden {

src/components/player/TimelineController.js

@@ -106,7 +106,7 @@ const TimelineController = ({ audioState, player, minimized }) => {
     );
   } else {
     return (
-      <div style={{ margin: "0 20px" }}>
+      <div style={{ margin: "0 auto", width: "90%" }}>
         <Grid container direction="row" justify="space-between">
           <Typography variant="body1" color="primary">
             {formatTime(currentTime)}