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%;