rae

Rezatachi · Apr 4, 2021 · 112ee9f · 112ee9f
1 parent 70fc9e2
commit 112ee9f
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 13 deletions.
diff --git a/src/App.js b/src/App.js
@@ -5,7 +5,7 @@ import chillhop from "./data";
 import Nav from "./components/nav";
 import Library from "./components/library";
 import BaseSec from "./components/footer";
-import { ColorModeSwitcher } from "./components/ColorModeSwitcher";
+
 //imported libraries
 import "./styles/app.scss";
 function App() {
@@ -49,17 +49,15 @@ function App() {
     let currentIndex = songs.findIndex((song) => song.id === currentSong.id);
     await setCurrentSong(songs[(currentIndex + 1) % songs.length]);
 
-    if (setisRandom) {
+    if (isRandom) {
       await setCurrentSong(songs[Math.floor(Math.random() * songs.length)]);
-      console.log("success");
     }
     if (isPlaying) audioRef.current.play();
     return;
   };
 
   return (
     <div className={`App ${libraryStatus ? "library-active" : ""}`}>
-      <ColorModeSwitcher />
       <Nav libraryStatus={libraryStatus} setlibraryStatus={setlibraryStatus} />
       <div>
         <Song currentSong={currentSong} isPlaying={isPlaying} />

diff --git a/src/components/ColorModeSwitcher.js b/src/components/ColorModeSwitcher.js
@@ -14,9 +14,7 @@ export const ColorModeSwitcher = (props) => {
       aria-label={`Switch to ${text} mode`}
       variant="ghost"
       color="current"
-      position="fixed"
-      top="5"
-      left="50%"
+      max-width="320px"
       zIndex="3"
       onClick={toggleColorMode}
       icon={<SwitchIcon />}

diff --git a/src/components/nav.js b/src/components/nav.js
@@ -1,12 +1,13 @@
 import React from "react";
 import { Button } from "@chakra-ui/react";
 import { Text } from "@chakra-ui/react";
-
+import { ColorModeSwitcher } from "./ColorModeSwitcher";
 const Nav = ({ libraryStatus, setlibraryStatus }) => {
   return (
     <nav>
-      <Text fontSize="3xl" fontWeight="extrabold">
+      <Text fontSize="3xl" fontWeight="light">
         Fidelity
+        <ColorModeSwitcher />
       </Text>
 
       <div className="btn">
@@ -15,7 +16,7 @@ const Nav = ({ libraryStatus, setlibraryStatus }) => {
           size="lg"
           onClick={() => setlibraryStatus(!libraryStatus)}
         >
-          <Text fontSize="2xl" fontWeight="bold">
+          <Text fontSize="2xl" fontWeight="light">
             Library
           </Text>
         </Button>

diff --git a/src/components/player.js b/src/components/player.js
@@ -80,10 +80,9 @@ const Player = ({
       await setCurrentSong(songs[(currentIndex + 1) % songs.length]);
       activeLibraryHandler(songs[(currentIndex + 1) % songs.length]);
       audioRef.current.loop = false;
-      console.log(audioRef.current.loop);
     }
     if (direction === "random") {
-      setisRandom(true);
+      setisRandom(!isRandom);
       toast({
         title: "Shuffle enabled",
         description: "The next song will be shuffled.",
@@ -107,7 +106,7 @@ const Player = ({
 
     if (direction === "loop") {
       audioRef.current.loop = true;
-      console.log(audioRef.current.loop);
+
       toast({
         title: "Loop enabled",
         description: "The song will be repeated.",