Move GitHub corner and visually-hidden class (#1336)

* Move visually-hidden class to index.html

* Replace github corner with component

* Momoize GitHubCorner

* Simplify component return

public/index.html

@@ -155,6 +155,15 @@
         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
@@ -182,34 +191,5 @@
         <span>Loading scene...</span>
       </div>
     </div>
-    <aside>
-      <!-- https://github.com/tholman/github-corners -->
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="40"
-        height="40"
-        viewBox="0 0 250 250"
-        class="github-corner rtl-mirror"
-      >
-        <a
-          href="https://github.com/excalidraw/excalidraw"
-          target="_blank"
-          aria-label="GitHub repository"
-        >
-          <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#6c6c6c" />
-          <path
-            class="octo-arm"
-            d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
-            style="transform-origin: 130px 106px;"
-            fill="#fff"
-          />
-          <path
-            class="octo-body"
-            d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
-            fill="#fff"
-          />
-        </a>
-      </svg>
-    </aside>
   </body>
 </html>

src/components/GitHubCorner.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+// https://github.com/tholman/github-corners
+export const GitHubCorner = React.memo(() => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="40"
+    height="40"
+    viewBox="0 0 250 250"
+    className="github-corner rtl-mirror"
+  >
+    <a
+      href="https://github.com/excalidraw/excalidraw"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="GitHub repository"
+    >
+      <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#6c6c6c" />
+      <path
+        className="octo-arm"
+        d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
+        style={{ transformOrigin: "130px 106px" }}
+        fill="#fff"
+      />
+      <path
+        className="octo-body"
+        d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
+        fill="#fff"
+      />
+    </a>
+  </svg>
+));

src/components/LayerUI.tsx

@@ -25,6 +25,7 @@ import { RoomDialog } from "./RoomDialog";
 import { ErrorDialog } from "./ErrorDialog";
 import { ShortcutsDialog } from "./ShortcutsDialog";
 import { LoadingMessage } from "./LoadingMessage";
+import { GitHubCorner } from "./GitHubCorner";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -194,6 +195,9 @@ export const LayerUI = React.memo(
             </Stack.Col>
           </div>
         </FixedSideContainer>
+        <aside>
+          <GitHubCorner />
+        </aside>
         <footer role="contentinfo">
           <LanguageList
             onChange={(lng) => {

src/styles.scss

@@ -379,16 +379,6 @@ button,
   }
 }
 
-.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 */
-}
-
 .zIndexButton {
   margin: 0 5px;
   padding: 5px;