From a3312f91fe52db4197fd181a1a28d46adfcc91ca Mon Sep 17 00:00:00 2001
From: Daniel Jacobs <danielhunterjacobs@gmail.com>
Date: Fri, 9 Feb 2024 11:31:09 -0500
Subject: [PATCH] Use class instead of inline style

---
 src/app/index.module.css | 10 ++++++++++
 src/components/logo.tsx  |  9 ++-------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/app/index.module.css b/src/app/index.module.css
index 6f1fad82..41a68c5f 100644
--- a/src/app/index.module.css
+++ b/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));
diff --git a/src/components/logo.tsx b/src/components/logo.tsx
index 74420ad1..34f36b8e 100644
--- a/src/components/logo.tsx
+++ b/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);
     }