From 60973f6dc5a3d9c9090fb493a126223e6e60d2c0 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Mon, 8 Jun 2020 16:06:35 +0530
Subject: [PATCH] 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         | 28 ++++++++++++++++++++++++++++
 public/index.html      | 31 ++-----------------------------
 src/components/App.tsx |  2 +-
 src/css/styles.scss    |  2 +-
 4 files changed, 32 insertions(+), 31 deletions(-)
 create mode 100644 public/app.css

diff --git a/public/app.css b/public/app.css
new file mode 100644
index 00000000..929a453c
--- /dev/null
+++ b/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;
+}
diff --git a/public/index.html b/public/index.html
index ff4a0caf..d8557e47 100644
--- a/public/index.html
+++ b/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"
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 00c8a444..37c8f1c4 100644
--- a/src/components/App.tsx
+++ b/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}
diff --git a/src/css/styles.scss b/src/css/styles.scss
index 60a02bcd..a68db059 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -51,7 +51,7 @@ canvas {
   image-rendering: -moz-crisp-edges; // FF
 }
 
-.container {
+.excalidraw {
   display: flex;
   position: fixed;
   top: 0;