styles for better adaptivity added

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,25 @@
 @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: #100d23;
 
   :hover {
     transition: 0.1s;

src/styles/Page.scss

@@ -2,7 +2,7 @@
 
 .page {
     display: flex;
-    height: 89vh;
+    height: 88vh;
     overflow: none;
 
     &__window {
@@ -45,7 +45,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 +67,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,14 @@
+@import './adaptivefont.scss';
 .playerbar {
+    //position: fixed;
     position: sticky;
     bottom: 0;
-    left: 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 +42,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

@@ -6,7 +6,7 @@
     overflow:auto;
   
     &__link {
-      @include adaptive-font(20, 13);
+      @include adaptive-font(20, 12);
       //font-size: medium;
       display: block;
       text-decoration: none;
@@ -22,7 +22,8 @@
     }
   
     &__button {
-      font-size: medium;
+      //font-size: medium;
+      @include adaptive-font(20, 12);
       width: 100%;
       border-style: none;
       padding: 10px;
@@ -58,7 +59,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 +69,8 @@
   
     &__profile {
       margin: 0 auto;
-      h3 {
-        font-size: large;
-      }
+      @include adaptive-font(25, 13);
+      
       img {
         max-width: 45%;
         //max-width: 100px;