From 8a5ef4cb3e79fae7cdaac258d75cd1778b5d892e Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Mon, 16 Dec 2024 18:10:06 -0800
Subject: [PATCH] Update button class name so it doesn't conflict with Monaco
 (#1536)

Avoids this:

![image](https://github.com/user-attachments/assets/49b214e4-7dde-4c3a-be5d-0de7afe30dcc)
---
 frontend/app/block/block.scss        | 16 ++++++++--------
 frontend/app/element/button.scss     |  2 +-
 frontend/app/element/button.tsx      |  2 +-
 frontend/app/element/iconbutton.scss |  2 +-
 frontend/app/element/iconbutton.tsx  |  2 +-
 frontend/app/element/menubutton.scss |  2 +-
 frontend/app/modals/about.scss       |  2 +-
 frontend/app/modals/modal.scss       |  2 +-
 frontend/app/tab/tab.scss            |  2 +-
 frontend/app/tab/updatebanner.scss   |  2 +-
 10 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/frontend/app/block/block.scss b/frontend/app/block/block.scss
index 9ad0482d6..58a69c26e 100644
--- a/frontend/app/block/block.scss
+++ b/frontend/app/block/block.scss
@@ -124,9 +124,9 @@
                     opacity: 0.7;
                     flex-grow: 1;
 
-					&.flex-nogrow {
-						flex-grow: 0;
-					}
+                    &.flex-nogrow {
+                        flex-grow: 0;
+                    }
 
                     &.preview-filename {
                         direction: rtl;
@@ -166,7 +166,7 @@
                         flex: 1 2 auto;
                         overflow: hidden;
                         padding-right: 4px;
-						@include mixins.ellipsis()
+                        @include mixins.ellipsis();
                     }
 
                     .connecting-svg {
@@ -211,12 +211,12 @@
                             }
                         }
 
-                        .button {
+                        .wave-button {
                             margin-left: 3px;
                         }
 
                         // webview specific. for refresh button
-                        .iconbutton {
+                        .wave-iconbutton {
                             height: 100%;
                             width: 27px;
                             display: flex;
@@ -226,7 +226,7 @@
                     }
 
                     .menubutton {
-                        .button {
+                        .wave-button {
                             font-size: 11px;
                         }
                     }
@@ -373,7 +373,7 @@
                         }
                     }
 
-                    .button:last-child {
+                    .wave-button:last-child {
                         margin-top: 1.5px;
                     }
                 }
diff --git a/frontend/app/element/button.scss b/frontend/app/element/button.scss
index 24a327a43..f547cf991 100644
--- a/frontend/app/element/button.scss
+++ b/frontend/app/element/button.scss
@@ -3,7 +3,7 @@
 
 @use "../mixins.scss";
 
-.button {
+.wave-button {
     // override default button appearance
     border: 1px solid transparent;
     outline: 1px solid transparent;
diff --git a/frontend/app/element/button.tsx b/frontend/app/element/button.tsx
index 499bcdb8f..7cf501c86 100644
--- a/frontend/app/element/button.tsx
+++ b/frontend/app/element/button.tsx
@@ -32,7 +32,7 @@ const Button = memo(
                 <Component
                     ref={btnRef}
                     tabIndex={disabled ? -1 : 0}
-                    className={clsx("button", finalClassName)}
+                    className={clsx("wave-button", finalClassName)}
                     disabled={disabled}
                     {...props}
                 >
diff --git a/frontend/app/element/iconbutton.scss b/frontend/app/element/iconbutton.scss
index 2cb4a688b..571a0e4ab 100644
--- a/frontend/app/element/iconbutton.scss
+++ b/frontend/app/element/iconbutton.scss
@@ -1,4 +1,4 @@
-.iconbutton {
+.wave-iconbutton {
     display: flex;
     cursor: pointer;
     opacity: 0.7;
diff --git a/frontend/app/element/iconbutton.tsx b/frontend/app/element/iconbutton.tsx
index b0a5a794f..85986314e 100644
--- a/frontend/app/element/iconbutton.tsx
+++ b/frontend/app/element/iconbutton.tsx
@@ -16,7 +16,7 @@ export const IconButton = memo(
         return (
             <button
                 ref={ref}
-                className={clsx("iconbutton", className, decl.className, {
+                className={clsx("wave-iconbutton", className, decl.className, {
                     disabled: decl.disabled,
                     "no-action": decl.noAction,
                 })}
diff --git a/frontend/app/element/menubutton.scss b/frontend/app/element/menubutton.scss
index e74601aa4..bb938d3bf 100644
--- a/frontend/app/element/menubutton.scss
+++ b/frontend/app/element/menubutton.scss
@@ -2,7 +2,7 @@
     overflow: hidden;
     .menu-anchor {
         width: 100%;
-        .button {
+        .wave-button {
             width: 100%;
             div {
                 max-width: 100%;
diff --git a/frontend/app/modals/about.scss b/frontend/app/modals/about.scss
index 9d6db867d..a6d41dd0b 100644
--- a/frontend/app/modals/about.scss
+++ b/frontend/app/modals/about.scss
@@ -48,7 +48,7 @@
             align-items: flex-start;
             gap: 10px;
 
-            .button {
+            .wave-button {
                 display: flex;
                 align-items: center;
 
diff --git a/frontend/app/modals/modal.scss b/frontend/app/modals/modal.scss
index 46ebe01a6..c9f96a94a 100644
--- a/frontend/app/modals/modal.scss
+++ b/frontend/app/modals/modal.scss
@@ -65,7 +65,7 @@
         padding-top: 16px;
         border-top: 1px solid rgba(255, 255, 255, 0.1);
 
-        .button:last-child {
+        .wave-button:last-child {
             margin-left: 8px;
         }
     }
diff --git a/frontend/app/tab/tab.scss b/frontend/app/tab/tab.scss
index 537af74c7..2afac47fb 100644
--- a/frontend/app/tab/tab.scss
+++ b/frontend/app/tab/tab.scss
@@ -81,7 +81,7 @@
         }
     }
 
-    .button {
+    .wave-button {
         position: absolute;
         top: 50%;
         right: 4px;
diff --git a/frontend/app/tab/updatebanner.scss b/frontend/app/tab/updatebanner.scss
index e5e387521..9106395e9 100644
--- a/frontend/app/tab/updatebanner.scss
+++ b/frontend/app/tab/updatebanner.scss
@@ -1,4 +1,4 @@
-.button {
+.wave-button {
     color: black;
     background-color: var(--accent-color);
     flex: 0 0 fit-content;