feat: new welcome modal, refactor many things, various bug fixes, use material-ui v5 etc

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/scss/_variables.scss

@@ -16,9 +16,9 @@ $modal: (
   'tab-underline': rgba(204, 204, 204, 1),
   'tab-underline-active': rgba(0, 0, 0, 1),
   'border-radius': 12px,
-  'sidebar': #f0f0f0,
+  'sidebar': rgb(240, 240, 240),
   'tab-active': rgba(219, 219, 219, 0.72),
-  'sidebar-dark': #353b48,
+  'sidebar-dark': rgb(53, 59, 72),
   'tab-active-dark': rgba(65, 71, 84, 0.9),
   'modal-link': #5352ed,
   'modal-link-dark': #3498db

src/scss/index.scss

@@ -11,7 +11,7 @@ body {
 }
 
 * {
-  font-family: 'Lexend Deca', 'Montserrat' !important;
+  font-family: 'Lexend Deca', 'Montserrat', sans-serif !important;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   outline: none;

src/scss/modules/_buttons.scss

@@ -56,3 +56,27 @@
     color: map-get($button-colours, 'other');
   }
 }
+
+.upload {
+  width: 100%;
+  height: 100%;
+  border-radius: 20px;
+  border: none;
+  outline: none;
+  padding: 50px;
+  background: var(--sidebar);
+  color: var(--modal-text);
+  cursor: pointer;
+
+  &:hover {
+      background: var(--tab-active);
+  }
+
+  svg {
+    font-size: 4em;
+  }
+
+  span {
+    font-size: 2em;
+  }
+}