some styles implemented

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,4 +1,4 @@
-import './App.css';
+import './App.scss';
 import * as action from './actions'
 import * as reducer from './reducers'
 import * as Logcomp from './components/Login'
@@ -69,7 +69,7 @@ const Player = () =>
   <div>
     {/* <header><Link to="/player">Player</Link></header> */}
     <div style={{ border:'1px solid blue', display: 'flex', maxHeight: '89vh', minHeight:'30vh', overflow:'none'}}>
-      <aside style={{width: '30%', overflow:'auto'}}>
+      <aside className='sidebar' >
         <Sidebar.LogoutBtnConnect />
         <Sidebar.ProfileWindowDropzoneConnect />
         <Sidebar.UserTracksBtnConnect />

src/App.scss

@@ -0,0 +1,80 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+body {
+  background-color: #100d23;
+  color: #70b2e7;
+}
+
+.sidebar {
+  background-color: #1e1d45;
+  width: 30%; 
+  overflow:auto;
+  &__link {
+    display: block;
+    text-decoration: none;
+    border-left: 5px solid #05f09b;
+    background-color: #100d23;
+    color: #05f09b;
+    margin: 5px;
+    padding: 5px;
+
+    &:hover {
+      background-color: #323151;
+    }
+  }
+
+  &__button {
+    background-color: #0e6147;
+    color: #05f09b;
+    font-size: medium;
+    width: 100%;
+    border-style: none;
+
+    &:active {
+      background-color: #05f09b;
+      color: #0e6147;
+    }
+  }
+}
+
+.highlight {
+  color: yellow;
+  border-color: yellow;
+}

src/components/Sidebar/index.js

@@ -59,18 +59,7 @@ const UserTracksBtn = ({ userId }) => {
     setId(userId)
   }, [userId])
 
-  return (
-    <Link
-      to={`/player/tracks/:${_id}`}
-      style={{
-        display: 'block',
-        backgroundColor: 'purple',
-        color: 'white',
-        margin: '5px',
-        padding: '5px'
-      }}
-    >MY UPLOADS</Link>
-  )
+  return (<Link to={`/player/tracks/:${_id}`} className='sidebar__link highlight'>MY UPLOADS</Link>)
 }
 export const UserTracksBtnConnect = connect(state => ({ userId: state.promise.userData?.payload?._id || '' }))(UserTracksBtn)
 
@@ -82,7 +71,7 @@ const PlaylistAdd = ({ addPlaylist }) => {
       {
         !clicked ?
           <button
-            style={{ border: '1px solid black', backgroundColor: 'mediumseagreen', width: '95%', padding: '5px', margin: '5px' }}
+            className='sidebar__button'
             onClick={() => setClicked(true)}
           >NEW PLAYLIST</button>
           :
@@ -117,10 +106,7 @@ const Playlists = ({ playlists }) => {
       {
         playlists?.payload ? playlists.payload.map(item => {
           return (
-            <Link
-              style={{ display: 'block', backgroundColor:'darkcyan', color: 'cyan', margin: '5px', padding: '5px' }}
-              to={`/player/playlist/:${item._id}`}
-            >{item.name}</Link>
+            <Link className='sidebar__link' to={`/player/playlist/:${item._id}`}>{item.name}</Link>
           )
         }).reverse() : ''
       }