styles for sidebar done

src/App.scss

@@ -1,44 +1,7 @@
+body { background-color: #100d23; }
+
 .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;
 }
 
@@ -46,7 +9,9 @@ body {
   background-color: #1e1d45;
   width: 30%; 
   overflow:auto;
+
   &__link {
+    font-size: medium;
     display: block;
     text-decoration: none;
     border-left: 5px solid #05f09b;
@@ -66,15 +31,69 @@ body {
     font-size: medium;
     width: 100%;
     border-style: none;
+    padding: 10px;
 
     &:active {
       background-color: #05f09b;
       color: #0e6147;
     }
   }
+
+  &__addpanel {
+    display: flex;
+    width: 95%;
+    margin: 0 auto;
+    border: 1px solid #05f09b;
+    padding: 0.5%;
+
+    input {
+      font-size: medium;
+      outline: none;
+      background-color: transparent;
+      width: 80%;
+      color: #05f09b;
+      border-style: none;
+    }
+
+    .btnWrapper {
+      display: inline-block;
+      width: 20%;
+      border: none;
+
+      button {
+        border: none;
+        background-color: transparent;
+        font-size: large;
+        padding: 4% 5% 2% 5%;
+        margin: 0 2%;
+      }
+    }
+  }
+
+  &__profile {
+    //width: 40%;
+    margin: 0 auto;
+    //border-radius: 10%;
+    img {
+      max-width: 125px;
+      height: auto;
+      border-radius: 10%;
+      border: 2px solid #70b2e7;
+    }
+  }
 }
 
-.highlight {
+.highlightYellow {
   color: yellow;
   border-color: yellow;
 }
+
+.highlightRed {
+  color: red;
+  border-color: red;
+}
+
+.highlightGreen {
+  color: #05f09b;
+  border-color: #05f09b;
+}

src/components/Sidebar/index.js

@@ -3,14 +3,17 @@ import * as action from '../../actions'
 import { useState, useEffect, useCallback } from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { history, backendURL } from '../../App';
+import { backendURL } from '../../App';
 import { useDropzone } from 'react-dropzone'
+import { faPlus, faBan, faSignOutAlt, faUpload} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const LogoutBtn = ({ onLogout }) =>
-  <div
-    style={{ border: '1px solid black', backgroundColor: 'red', color: 'white' }}
-    onClick={() => { onLogout(); history.push('/login') }}
-  >log-out[X]</div>
+  <Link
+    to='/login'
+    className='sidebar__link highlightRed'
+    onClick={() =>  onLogout()}
+  >LOG-OUT <FontAwesomeIcon icon={faSignOutAlt}/></Link>
 
 export const LogoutBtnConnect = connect(null, { onLogout: action.actionAuthLogout })(LogoutBtn)
 
@@ -22,12 +25,9 @@ const ProfileWindow = ({ user }) => {
   }, [user, userInfo])
 
   return (
-    <section>
+    <section >
       <h3>{userInfo?.login || 'user'}</h3>
       <img
-        width={150}
-        height={'auto'}
-        style={{ border: '1px solid black', display: 'block', margin: '5% auto', marginBottom: '2px' }}
         src={userInfo?.avatar?.url ? backendURL + '/' + userInfo?.avatar?.url : ''}
         alt='avatar'
       />
@@ -43,10 +43,13 @@ const ProfileWindowDropzone = ({ onLoad }) => {
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
 
   return (
-    <div {...getRootProps()} style={isDragActive ? { border: '1px solid mediumseagreen' } : { border: '1px solid black' }}>
+    <div {...getRootProps()} 
+      className='sidebar__profile' 
+      style={isDragActive ? { backgroundColor: '#0e6147' } : { backgroundColor: 'transparent' }}
+    >
       <input {...getInputProps()} />
       <ProfileWindowConnect />
-      {isDragActive ? <small>drag here...</small> : <small>change avatar</small>}
+      {isDragActive ? <small>drop here...</small> : <small>change avatar</small>}
     </div>
   )
 }
@@ -59,7 +62,7 @@ const UserTracksBtn = ({ userId }) => {
     setId(userId)
   }, [userId])
 
-  return (<Link to={`/player/tracks/:${_id}`} className='sidebar__link highlight'>MY UPLOADS</Link>)
+  return (<Link to={`/player/tracks/:${_id}`} className='sidebar__link highlightYellow'>MY UPLOADS <FontAwesomeIcon icon={faUpload}/></Link>)
 }
 export const UserTracksBtnConnect = connect(state => ({ userId: state.promise.userData?.payload?._id || '' }))(UserTracksBtn)
 
@@ -75,24 +78,24 @@ const PlaylistAdd = ({ addPlaylist }) => {
             onClick={() => setClicked(true)}
           >NEW PLAYLIST</button>
           :
-          <div style={{ width: '95%', margin: '0 auto' }}>
+          <div className='sidebar__addpanel'>
             <input
-              style={{ width: '72%', padding: '5px' }}
-              placeholder='Playlist name'
+              placeholder='NEW PLATLIST NAME'
               value={name}
               onChange={(e) => setName(e.target.value)}
             />
+            <div className='sidebar__addpanel btnWrapper'>
+              <button
+                disabled={!name}
+                className='highlightGreen'
+                onClick={() => { addPlaylist(name); setClicked(false); setName(''); }}
+              ><FontAwesomeIcon icon={faPlus} /></button>
 
-            <button
-              disabled={!name}
-              style={{ padding: '5px', backgroundColor: 'mediumseagreen' }}
-              onClick={() => { addPlaylist(name); setClicked(false); setName(''); }}
-            >+</button>
-
-            <button
-              style={{ padding: '5px', backgroundColor: 'red' }}
-              onClick={() => { setClicked(false); setName('') }}
-            >X</button>
+              <button
+                className='highlightRed'
+                onClick={() => { setClicked(false); setName('') }}
+              ><FontAwesomeIcon icon={faBan} /></button>
+            </div>
           </div>
       }
     </div>