src/App.scss

@@ -21,7 +21,8 @@
 }
 
 body {
-  background-color: #100d23;
+  background-color: #131341;
+  //background-color: #100d23;
 
   :hover {
     transition: 0.1s;

src/components/Login/index.js

@@ -37,7 +37,7 @@ const RegisterForm = ({ onRegister, regData }) => {
                           onClick={() => {onRegister(login, password); setIsReg(true)}}
                         >Register</button>}
         <br />
-        <Link className='sidebar__link highlightYellow' to="/login">Back to log-in page</Link>
+        <Link className='forms__link highlightYellow' to="/login">Back to log-in page</Link>
       </div>
     </>
   )

src/components/Page/index.js

@@ -71,7 +71,7 @@ const Playlist = ({ player, playlist, setPlaylist, updPlaylist, setIndex }) => {
 
   return (
     <>
-      <h2 className='highlightGreen'>{playlist[0]?.name || 'Playlist'}</h2>
+      <h2 style={{fontSize:'large'}} className='highlightGreen'>{playlist[0]?.name || 'Playlist'}</h2>
       <SortableContainer onSortEnd={onSortEnd}>
         { (_tracks || []).map((track, index) => <SortableItem key={track._id} index={index} track={track} playlist={playlist[0]} />) }
       </SortableContainer>

src/styles/Forms.scss

@@ -1,5 +1,5 @@
 .forms {
-    background-color: #131341;
+    background-color: #100d23;
     width: fit-content;
     margin: 0 auto;
     padding: 2%;
@@ -12,7 +12,7 @@
         display: block;
         text-decoration: none;
         border-left: 5px solid #05f09b;
-        background-color: #100d23;
+        background-color: #1313419f;
         color: #05f09b;
         margin: 5px;
         padding: 5px;

src/styles/Page.scss

@@ -4,6 +4,7 @@
     display: flex;
     height: 88vh;
     overflow: none;
+    background-color: #100d23;
 
     &__window {
         width: 80%;
@@ -36,7 +37,7 @@
         display: flex;
         align-items: center;
         background-color: #2a3da941;
-        margin: 10px;
+        margin: 10px 10px 10px -2%;
         padding: 2% 0;
         color: #83d6f6;
         box-shadow: 0 0 5px black;

src/styles/Playerbar.scss

@@ -1,9 +1,7 @@
 @import './adaptivefont.scss';
 .playerbar {
-    //position: fixed;
     position: sticky;
     bottom: 0;
-    //left: 0;
     width: 100%;
     padding-bottom: 10px;
     padding-top: -10px;

src/styles/Sidebar.scss

@@ -4,6 +4,7 @@
     background-color: #1e1d45;
     width: 30%; 
     overflow:auto;
+    overflow-x: hidden;
   
     &__link {
       @include adaptive-font(20, 12);