refactor logo, bottom bar and perks.js

- add new logo
- add tsconfig.json
- move logo to new component
- update bottombar
- remove props from hotkeys and progress bar
- convert perks.js -> perks.ts

src/assets/css/BottomBar/BottomBar.scss

@@ -7,46 +7,16 @@
     display: grid;
     height: 100%;
     padding-right: $small;
-
     
-
     @include phone-only {
       grid-template-columns: 1fr 9.2rem;
     }
 
-    .info {
-      display: flex;
-      padding-top: $small;
-      margin-left: $small;
-
-      .art {
-        width: 3rem;
-        height: 3rem;
-        background-image: url("../../images/null.webp");
-      }
-
-      .separator {
-        margin: 2px;
-      }
-
-      .desc {
-        width: calc(100% - 5rem);
-        margin-left: $small;
-        display: flex;
-        align-items: center;
-        margin-top: -$small;
-
-        .artists {
-          font-size: 0.8rem;
-          color: $white;
-        }
-      }
-    }
-
     .controlsx {
       width: 100%;
       overflow: hidden;
-      display: flex;
+      display: grid;
+      grid-template-columns: 12rem 1fr 12rem;
       align-items: center;
       padding: $small;
 
@@ -55,10 +25,6 @@
         align-items: center;
       }
 
-      .controls-bottom {
-        width: min-content;
-      }
-
       .progress-bottom {
         width: 100%;
 

src/assets/css/global.scss

@@ -1,4 +1,5 @@
 @import "../css/ProgressBar.scss";
+@import "mixins.scss";
 
 :root {
   --separator: #ffffff46;
@@ -20,6 +21,8 @@ body {
   image-rendering: -webkit-optimize-contrast;
 }
 
+
+
 .heading {
   font-size: 2rem;
   font-weight: bold;
@@ -39,7 +42,6 @@ a {
 }
 
 .border {
-  // border: solid 1px $gray5;
   background-color: $black;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
 }
@@ -95,11 +97,11 @@ a {
 }
 
 .l-sidebar {
-  width: 15rem;
+  width: 17rem;
   grid-area: l-sidebar;
-  padding-top: 0.5rem;
-  // border-right: solid 1px $gray3;
   background-color: $black;
+  margin: $small;
+  padding: 1rem;
 }
 
 .bottom-bar {

src/assets/css/mixins.scss

@@ -0,0 +1,5 @@
+@mixin ximage {
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}