Use class instead of inline style

Author: danielhjacobs

src/app/index.module.css

@@ -32,6 +32,16 @@
   width: 400px;
 }
 
+.staticLogo {
+  width: 85%;
+  height: auto;
+  margin: 0 auto;
+  display: block;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 .title {
   text-align: center;
   margin-bottom: calc(var(--mantine-spacing-xl));

src/components/logo.tsx

@@ -2,6 +2,7 @@
 
 import React from "react";
 import Script from "next/script";
+import classes from "../app/index.module.css";
 
 declare global {
   interface Window {
@@ -40,13 +41,7 @@ export default class InteractiveLogo extends React.Component<LogoProps> {
       const staticLogo = document.createElement("IMG") as HTMLImageElement;
       staticLogo.src = "/logo.svg";
       staticLogo.alt = "Ruffle Logo";
-      staticLogo.style.width = "85%";
-      staticLogo.style.height = "auto";
-      staticLogo.style.margin = "0 auto";
-      staticLogo.style.display = "block";
-      staticLogo.style.position = "relative";
-      staticLogo.style.top = "50%";
-      staticLogo.style.transform = "translateY(-50%)";
+      staticLogo.className = classes.staticLogo;
       this.container.current.textContent = "";
       this.container.current.appendChild(staticLogo);
     }