From 0e3664e29edfe1e5a06989426415a217365cb2a4 Mon Sep 17 00:00:00 2001
From: Cora Grant <cgrant2@mbta.com>
Date: Fri, 1 Nov 2024 11:54:17 -0400
Subject: [PATCH] refactor: rename inspector styles for consistency

The admin inspector was originally named the "viewer". It was renamed
before the feature was first merged, but some instances of the old term
were missed.
---
 assets/css/admin.scss                         |  2 +-
 .../css/admin/{viewer.scss => inspector.scss} |  8 ++++----
 assets/src/components/admin/inspector.tsx     | 20 +++++++++----------
 3 files changed, 15 insertions(+), 15 deletions(-)
 rename assets/css/admin/{viewer.scss => inspector.scss} (91%)

diff --git a/assets/css/admin.scss b/assets/css/admin.scss
index 575937d89..1e67500c2 100644
--- a/assets/css/admin.scss
+++ b/assets/css/admin.scss
@@ -1,4 +1,4 @@
-@import "admin/viewer";
+@import "admin/inspector";
 
 #app {
   font-family: sans-serif;
diff --git a/assets/css/admin/viewer.scss b/assets/css/admin/inspector.scss
similarity index 91%
rename from assets/css/admin/viewer.scss
rename to assets/css/admin/inspector.scss
index 6626c8de9..d504297f8 100644
--- a/assets/css/admin/viewer.scss
+++ b/assets/css/admin/inspector.scss
@@ -1,10 +1,10 @@
-.viewer {
+.inspector {
   display: flex;
   gap: 0.5em;
   align-items: stretch;
 }
 
-.viewer__controls {
+.inspector__controls {
   display: flex;
   flex: 0 0 24em;
   flex-direction: column;
@@ -39,7 +39,7 @@
   }
 }
 
-.viewer__modal {
+.inspector__modal {
   width: 80%;
   max-width: 1024px;
 
@@ -64,7 +64,7 @@
   }
 }
 
-.viewer__screen {
+.inspector__screen {
   flex: 1 1 auto;
 
   iframe {
diff --git a/assets/src/components/admin/inspector.tsx b/assets/src/components/admin/inspector.tsx
index 93434bdd9..aa2fb9567 100644
--- a/assets/src/components/admin/inspector.tsx
+++ b/assets/src/components/admin/inspector.tsx
@@ -75,8 +75,8 @@ const Inspector: ComponentType = () => {
   useLayoutEffect(adjustFrame, [zoom]);
 
   return (
-    <div className="viewer">
-      <div className="viewer__controls">
+    <div className="inspector">
+      <div className="inspector__controls">
         <h1>Inspector</h1>
 
         {config && (
@@ -109,7 +109,7 @@ const Inspector: ComponentType = () => {
         )}
       </div>
 
-      <div className="viewer__screen">
+      <div className="inspector__screen">
         <iframe
           name={INSPECTOR_FRAME_NAME}
           onLoad={adjustFrame}
@@ -247,9 +247,9 @@ const ConfigControls: ComponentType<{ screen: ScreenWithId }> = ({
         </button>
       </div>
 
-      <dialog className="viewer__modal" ref={dialogRef}>
+      <dialog className="inspector__modal" ref={dialogRef}>
         <button
-          className="viewer__modal__close-button"
+          className="inspector__modal__close-button"
           onClick={() => {
             dialogRef.current?.close();
             setEditableConfig(null);
@@ -433,14 +433,14 @@ const AudioControls: ComponentType<{ screen: ScreenWithId }> = ({ screen }) => {
             )}
           </div>
 
-          <dialog className="viewer__modal" ref={dialogRef}>
+          <dialog className="inspector__modal" ref={dialogRef}>
             <button
-              className="viewer__modal__close-button"
+              className="inspector__modal__close-button"
               onClick={() => setSSML(null)}
             >
               × Close
             </button>
-            <div className="viewer__modal__ssml">{ssml}</div>
+            <div className="inspector__modal__ssml">{ssml}</div>
           </dialog>
 
           {playingAt && (
@@ -478,11 +478,11 @@ const adjustScreenFrame = (
 ) => {
   if (ref.current?.contentWindow) {
     const doc = ref.current.contentWindow.document;
-    let style = doc.getElementById("viewer-injected-style");
+    let style = doc.getElementById("inspector-injected-style");
 
     if (!style) {
       style = doc.createElement("style");
-      style.id = "viewer-injected-style";
+      style.id = "inspector-injected-style";
       doc.head.appendChild(style);
     }