rename container class to excalidraw and move css from index.html to app.css (#1729)

Moved the css from index.html to app.css so it can be included in upstream app as well

public/app.css

@@ -0,0 +1,28 @@
+.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap; /* added line */
+}
+
+.LoadingMessage {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.LoadingMessage span {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 5px;
+  padding: 0.8em 1.2em;
+  font-size: 1.3em;
+}

public/index.html

@@ -61,6 +61,8 @@
     <meta name="twitter:image" content="https://excalidraw.com/og-image.png" />
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" href="fonts.css" type="text/css" />
+    <link rel="stylesheet" href="app.css" type="text/css" />
+
     <link
       rel="preload"
       href="FG_Virgil.woff2"
@@ -88,35 +90,6 @@
       style="--pwacompat-splash-font: 24px Virgil;"
     />
 
-    <style>
-      .LoadingMessage {
-        position: fixed;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 999;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        pointer-events: none;
-      }
-      .LoadingMessage span {
-        background-color: rgba(255, 255, 255, 0.8);
-        border-radius: 5px;
-        padding: 0.8em 1.2em;
-        font-size: 1.3em;
-      }
-      .visually-hidden {
-        position: absolute !important;
-        height: 1px;
-        width: 1px;
-        overflow: hidden;
-        clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-        clip: rect(1px, 1px, 1px, 1px);
-        white-space: nowrap; /* added line */
-      }
-    </style>
     <script
       async
       src="https://www.googletagmanager.com/gtag/js?id=UA-387204-13"

src/components/App.tsx

@@ -209,7 +209,7 @@ class App extends React.Component<any, AppState> {
     const canvasHeight = canvasDOMHeight * canvasScale;
 
     return (
-      <div className="container">
+      <div className="excalidraw">
         <LayerUI
           canvas={this.canvas}
           appState={this.state}

src/css/styles.scss

@@ -51,7 +51,7 @@ canvas {
   image-rendering: -moz-crisp-edges; // FF
 }
 
-.container {
+.excalidraw {
   display: flex;
   position: fixed;
   top: 0;