From 599880f0356df5da1ea0c769438fe7adbcc52543 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tristan=20Dani=C3=ABl=20Maat?= <tm@tlater.net>
Date: Sat, 13 Aug 2022 23:32:29 +0100
Subject: [PATCH] Clean up some style properties in react elements

---
 src/music/features/visualizer/Visualizer.tsx | 13 ++-----------
 src/music/music.scss                         |  8 ++++++--
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/music/features/visualizer/Visualizer.tsx b/src/music/features/visualizer/Visualizer.tsx
index 5c7b8c3..9e51bc0 100644
--- a/src/music/features/visualizer/Visualizer.tsx
+++ b/src/music/features/visualizer/Visualizer.tsx
@@ -127,17 +127,8 @@ function Visualizer() {
                 ref={visualizer}
                 className="is-flex-grow-1 is-clipped is-relative"
             >
-                <canvas
-                    style={{
-                        display: "block",
-                        position: "absolute",
-                        boxSizing: "border-box",
-                    }}
-                ></canvas>
-                <span
-                    className="is-bottom-left"
-                    style={{ display: "relative" }}
-                ></span>
+                <canvas className="is-block is-absolute is-border-box"></canvas>
+                <span className="is-bottom-left"></span>
             </div>
         );
     } else {
diff --git a/src/music/music.scss b/src/music/music.scss
index ab93198..d1b27ab 100644
--- a/src/music/music.scss
+++ b/src/music/music.scss
@@ -3,8 +3,12 @@ $fa-font-path: "npm:@fortawesome/fontawesome-free/webfonts";
 @import "~/node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
 @import "~/node_modules/@fortawesome/fontawesome-free/scss/solid";
 
-.is-relative {
-  position: relative !important;
+.is-border-box {
+  box-sizing: border-box !important;
+}
+
+.is-absolute {
+  position: absolute !important;
 }
 
 .is-bottom-left {