Started conversion of functional components

- Intermediate step to rename app.tsx to App.tsx
- Converted About to class component.
- Separated semantic of track overlays and popups (like About).

Author: mike-lischke

src/app.css src/App1.csssrc/app.css renamed to src/App1.css

@@ -3,14 +3,20 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-:root {
-    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    width: 100vw;
+    height: 100vh;
+
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
     line-height: 1.5;
     font-weight: 400;
 
     color-scheme: light dark;
-    color: rgba(255, 255, 255, 0.87);
-    background-color: #242424;
 
     font-synthesis: none;
     text-rendering: optimizeLegibility;
@@ -28,17 +34,6 @@ a:hover {
     color: #535bf2;
 }
 
-body {
-    margin: 0;
-    width: 100vw;
-    height: 100vh;
-}
-
-h1 {
-    font-size: 3.2em;
-    line-height: 1.1;
-}
-
 button {
     border-radius: 8px;
     border: 1px solid transparent;

src/app.tsx src/App1.tsxsrc/app.tsx renamed to src/App1.tsx

@@ -21,7 +21,7 @@ export class App extends ComponentBase {
         return (
             <ErrorBoundary>
                 <div id="wrapper">
-                    <div id="welcome" class="welcome">
+                    <div>
                         <img src={logo} style="height:80pt;" />
                         <h1>Welcome to Banda Animada de Samba Chemnitz!</h1>
                         <div id="loading-message-wrapper">