Merge branch 'dev' of Sergei-Levshnia/player-project into master

src/App.js

@@ -71,16 +71,20 @@ const GreetPg = () =>
     <div className='startpage__ulwrapper'>
       <ul>
         <li>
-          <strong className='highlightYellow'>Click "MY UPLOADS" - </strong><small>To see all of your uploaded tracks.</small>
+          <strong className='highlightYellow'>Click "UPLOADS" - </strong>
+          <small>To see all of your uploaded tracks.</small>
         </li>
         <li>
-          <strong className='highlightGreen'>Click "NEW PLAYLIST" - </strong><small>To create new playlist.</small>
+          <strong className='highlightGreen'>Click "NEW PLAYLIST" - </strong>
+          <small>To create new playlist.</small>
         </li>
         <li>
-          <strong>Drag 'n' drop track to playlist area - </strong><small>To upload the track and add it to current playlist.</small>
+          <strong>Drag 'n' drop track to playlist area - </strong>
+          <small>To upload the track and add it to current playlist.</small>
         </li>
         <li>
-          <strong>Drag a track within playlist - </strong><small>To chage the order of playlist tracks.</small>
+          <strong>Drag a track within playlist - </strong>
+          <small>To chage the order of playlist tracks.</small>
         </li>
       </ul>
     </div>

src/App.scss

@@ -3,24 +3,26 @@
 @import "./styles/Playerbar.scss";
 @import "./styles/Forms.scss";
 
-body {
-  background-color: #100d23;
-  ::-webkit-scrollbar {
-    width: 12px;
+::-webkit-scrollbar {
+  width: 15px;
 
-    &-track {
-      background-color: transparent;
-      border: 1px solid rgba(105, 105, 105, 0.384);
-    }
+  &-track {
+    background-color: transparent;
+    border: 1px solid rgba(105, 105, 105, 0.384);
+  }
 
-    &-thumb {
-      background-color: #534f7459;
+  &-thumb {
+    background-color: #534f7459;
 
-      &:hover {
-        background-color: #534f74c7;
-      }
+    &:hover {
+      background-color: #534f74c7;
     }
   }
+}
+
+body {
+  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

@@ -2,8 +2,9 @@
 
 .page {
     display: flex;
-    height: 89vh;
+    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;
@@ -45,7 +46,8 @@
             display: block;
             background-color: #1e1d45;
             border-style: solid;
-            font-size: x-large;
+            @include adaptive-font(20, 20);
+            //font-size: x-large;
             padding: 1%;
             margin: 0 5%;
         }
@@ -66,7 +68,7 @@
             text-align: start;
         }
         .title {
-            @include adaptive-font(18, 13);
+            @include adaptive-font(16, 13);
             //font-size: large;
             font-weight: 700;
             text-align: start;

src/styles/Playerbar.scss

@@ -1,10 +1,12 @@
+@import './adaptivefont.scss';
 .playerbar {
     position: sticky;
     bottom: 0;
-    left: 0;
     width: 100%;
-    padding-bottom: 1%;
+    padding-bottom: 10px;
+    padding-top: -10px;
     background-color: #131341;
+    @include adaptive-font(20, 13);
 
     &__range {
         margin: 0 10px 6px 10px;
@@ -38,7 +40,8 @@
     }
 
     button {
-        font-size: large;
+        //font-size: large;
+        @include adaptive-font(20, 20);
         padding: 0.5%;
         background-color: yellow;
         border: none;

src/styles/Sidebar.scss

@@ -4,9 +4,10 @@
     background-color: #1e1d45;
     width: 30%; 
     overflow:auto;
+    overflow-x: hidden;
   
     &__link {
-      @include adaptive-font(20, 13);
+      @include adaptive-font(20, 12);
       //font-size: medium;
       display: block;
       text-decoration: none;
@@ -22,7 +23,8 @@
     }
   
     &__button {
-      font-size: medium;
+      //font-size: medium;
+      @include adaptive-font(20, 12);
       width: 100%;
       border-style: none;
       padding: 10px;
@@ -58,7 +60,8 @@
         button {
           border: none;
           background-color: transparent;
-          font-size: large;
+          @include adaptive-font(20, 15);
+          //font-size: large;
           padding: 4% 5% 2% 5%;
           margin: 0 2%;
         }
@@ -67,9 +70,8 @@
   
     &__profile {
       margin: 0 auto;
-      h3 {
-        font-size: large;
-      }
+      @include adaptive-font(25, 13);
+      
       img {
         max-width: 45%;
         //max-width: 100px;