From c76b2f40e8721149bef66013963ceb05581d9519 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 21 Sep 2023 11:27:10 +0100
Subject: [PATCH] refactor: use id instead of class

---
 frontend/src/styles/nav.scss                |  6 +++---
 frontend/src/styles/z_media-queries.scss    |  6 +++---
 frontend/src/ts/test/test-logic.ts          |  2 +-
 frontend/src/ts/ui.ts                       |  2 +-
 frontend/static/email-handler.html          |  6 +++---
 frontend/static/funbox/crt.css              |  4 ++--
 frontend/static/html/header.html            |  2 +-
 frontend/static/privacy-policy.html         |  2 +-
 frontend/static/security-policy.html        |  2 +-
 frontend/static/terms-of-service.html       |  2 +-
 frontend/static/themes/aurora.css           |  2 +-
 frontend/static/themes/blueberry_dark.css   |  2 +-
 frontend/static/themes/blueberry_light.css  |  2 +-
 frontend/static/themes/camping.css          |  2 +-
 frontend/static/themes/chaos_theory.css     | 18 +++++++++---------
 frontend/static/themes/cheesecake.css       |  2 +-
 frontend/static/themes/fire.css             |  2 +-
 frontend/static/themes/fundamentals.css     |  2 +-
 frontend/static/themes/grape.css            |  2 +-
 frontend/static/themes/ishtar.css           |  2 +-
 frontend/static/themes/metropolis.css       |  2 +-
 frontend/static/themes/mr_sleeves.css       |  2 +-
 frontend/static/themes/rainbow_trail.css    |  4 ++--
 frontend/static/themes/rgb.css              |  4 ++--
 frontend/static/themes/sewing_tin_light.css |  4 ++--
 frontend/static/themes/shadow.css           |  4 ++--
 frontend/static/themes/trance.css           |  2 +-
 27 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/frontend/src/styles/nav.scss b/frontend/src/styles/nav.scss
index 167471821..9db1e8fba 100644
--- a/frontend/src/styles/nav.scss
+++ b/frontend/src/styles/nav.scss
@@ -136,7 +136,7 @@ header {
   -webkit-user-select: none;
   user-select: none;
 
-  .logo {
+  #logo {
     // margin-bottom: 0.6rem;
     cursor: pointer;
     display: grid;
@@ -269,12 +269,12 @@ header {
       fill: var(--sub-color) !important;
     }
 
-    .logo .text {
+    #logo .text {
       color: var(--sub-color) !important;
       // opacity: 0 !important;
     }
 
-    .logo .top {
+    #logo .top {
       opacity: 0 !important;
     }
 
diff --git a/frontend/src/styles/z_media-queries.scss b/frontend/src/styles/z_media-queries.scss
index 794ccce7f..39e5d4a1d 100644
--- a/frontend/src/styles/z_media-queries.scss
+++ b/frontend/src/styles/z_media-queries.scss
@@ -344,7 +344,7 @@
 
 //800px
 @media only screen and (max-width: 50rem) {
-  header .logo .text {
+  header #logo .text {
     font-size: 1.5rem;
     line-height: 1.5rem;
     margin-top: -0.1em;
@@ -691,7 +691,7 @@
   .pageAbout .section .contributors {
     grid-template-columns: 1fr 1fr;
   }
-  header .logo .bottom {
+  header #logo .bottom {
     margin-top: 0;
   }
   .pageLogin {
@@ -737,7 +737,7 @@
 //550px
 @media only screen and (max-width: 34.375rem) {
   header {
-    .logo {
+    #logo {
       grid-template-columns: auto;
       .text {
         display: none;
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 3d604537b..a846d79f2 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -1554,7 +1554,7 @@ $("#popups").on(
   }
 );
 
-$("header").on("click", "nav #startTestButton, .logo", () => {
+$("header").on("click", "nav #startTestButton, #logo", () => {
   if (ActivePage.get() === "test") restart();
 });
 
diff --git a/frontend/src/ts/ui.ts b/frontend/src/ts/ui.ts
index 9d97f2c27..54e0c6375 100644
--- a/frontend/src/ts/ui.ts
+++ b/frontend/src/ts/ui.ts
@@ -43,7 +43,7 @@ if (isLocalhost()) {
   window.onerror = function (error): void {
     Notifications.add(error.toString(), -1);
   };
-  $("header .logo .top").text("localhost");
+  $("header #logo .top").text("localhost");
   $("head title").text($("head title").text() + " (localhost)");
   $("body").append(
     `<div class="devIndicator tl">local</div><div class="devIndicator br">local</div>`
diff --git a/frontend/static/email-handler.html b/frontend/static/email-handler.html
index 381258c8e..b61180f0b 100644
--- a/frontend/static/email-handler.html
+++ b/frontend/static/email-handler.html
@@ -98,7 +98,7 @@
   <body>
     <div id="centerContent">
       <header>
-        <div class="logo">
+        <div id="logo">
           <div class="icon">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -387,7 +387,7 @@
           switch (mode) {
             case "resetPassword":
               // Display reset password handler and UI.
-              $(".logo .text span").text("Reset Password");
+              $("#logo .text span").text("Reset Password");
               document.title = "Reset Password | Monkeytype";
               showResetPassword();
               break;
@@ -396,7 +396,7 @@
               handleRecoverEmail(actionCode);
               break;
             case "verifyEmail":
-              $(".logo .text span").text("Verify Email");
+              $("#logo .text span").text("Verify Email");
               document.title = "Verify Email | Monkeytype";
               // Display email verification handler and UI.
               handleVerifyEmail(actionCode, continueUrl);
diff --git a/frontend/static/funbox/crt.css b/frontend/static/funbox/crt.css
index bebb75835..92deb6c8b 100644
--- a/frontend/static/funbox/crt.css
+++ b/frontend/static/funbox/crt.css
@@ -95,14 +95,14 @@ body.crtmode #paceCaret.banana,
 body.crtmode #paceCaret.carrot {
   box-shadow: none;
 }
-body.crtmode .logo .icon {
+body.crtmode #logo .icon {
   filter: drop-shadow(3px 0px 1px var(--crt-main-color-glow))
     drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
 }
 body.crtmode .avatars,
 body.crtmode nav .account .avatar,
 body.crtmode nav .account .levelAndBar,
-body.crtmode header.focus .logo .icon {
+body.crtmode header.focus #logo .icon {
   filter: drop-shadow(3px 0px 1px var(--crt-sub-color-glow))
     drop-shadow(-3px 0px 0px var(--crt-sub-color-glow));
 }
diff --git a/frontend/static/html/header.html b/frontend/static/html/header.html
index c9987b52a..5ebfe0bd8 100644
--- a/frontend/static/html/header.html
+++ b/frontend/static/html/header.html
@@ -1,5 +1,5 @@
 <header>
-  <a class="logo" href="/" router-link>
+  <a id="logo" href="/" router-link>
     <div class="icon">
       <svg
         xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/static/privacy-policy.html b/frontend/static/privacy-policy.html
index 3c21eb695..9cc077ec0 100644
--- a/frontend/static/privacy-policy.html
+++ b/frontend/static/privacy-policy.html
@@ -62,7 +62,7 @@
   <body>
     <div id="centerContent">
       <header>
-        <div class="logo">
+        <div id="logo">
           <div class="icon">
             <svg
               xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/static/security-policy.html b/frontend/static/security-policy.html
index f6c177958..caa83865a 100644
--- a/frontend/static/security-policy.html
+++ b/frontend/static/security-policy.html
@@ -66,7 +66,7 @@
   <body>
     <div id="centerContent">
       <header>
-        <div class="logo">
+        <div id="logo">
           <div class="icon">
             <svg
               xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/static/terms-of-service.html b/frontend/static/terms-of-service.html
index de441a7fc..1265650c3 100644
--- a/frontend/static/terms-of-service.html
+++ b/frontend/static/terms-of-service.html
@@ -62,7 +62,7 @@
   <body>
     <div id="centerContent">
       <header>
-        <div class="logo">
+        <div id="logo">
           <div class="icon">
             <svg
               xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/static/themes/aurora.css b/frontend/static/themes/aurora.css
index bb49417b6..bce1e044b 100644
--- a/frontend/static/themes/aurora.css
+++ b/frontend/static/themes/aurora.css
@@ -60,7 +60,7 @@ header .button.discord.dotHidden::after {
   animation-name: none !important;
 }
 
-.logo .bottom,
+#logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 nav .textButton:hover,
diff --git a/frontend/static/themes/blueberry_dark.css b/frontend/static/themes/blueberry_dark.css
index b89267741..346702c71 100644
--- a/frontend/static/themes/blueberry_dark.css
+++ b/frontend/static/themes/blueberry_dark.css
@@ -11,6 +11,6 @@
   --colorful-error-extra-color: #d996ac;
 }
 
-header .logo .bottom {
+header #logo .bottom {
   color: #962f7e;
 }
diff --git a/frontend/static/themes/blueberry_light.css b/frontend/static/themes/blueberry_light.css
index c9ac50851..5b5e67b93 100644
--- a/frontend/static/themes/blueberry_light.css
+++ b/frontend/static/themes/blueberry_light.css
@@ -11,6 +11,6 @@
   --colorful-error-extra-color: #d996ac;
 }
 
-header .logo .bottom {
+header #logo .bottom {
   color: #df4576;
 }
diff --git a/frontend/static/themes/camping.css b/frontend/static/themes/camping.css
index ca61410ee..d00258c20 100644
--- a/frontend/static/themes/camping.css
+++ b/frontend/static/themes/camping.css
@@ -11,6 +11,6 @@
   --colorful-error-extra-color: #7e3a39;
 }
 
-header .logo .bottom {
+header #logo .bottom {
   color: #ad4f4e;
 }
diff --git a/frontend/static/themes/chaos_theory.css b/frontend/static/themes/chaos_theory.css
index f7b9b3469..99bf438a5 100644
--- a/frontend/static/themes/chaos_theory.css
+++ b/frontend/static/themes/chaos_theory.css
@@ -12,17 +12,17 @@
   --colorful-error-extra-color: #b03c47;
 }
 
-header .logo .text {
+header #logo .text {
   -webkit-transform: rotateY(180deg);
   unicode-bidi: bidi-override;
   transition: 0.5s;
 }
 
-header .logo .top {
+header #logo .top {
   font-family: "Comic Sans MS", "Comic Sans", cursive;
 }
 
-header .logo .icon {
+header #logo .icon {
   -webkit-transform: rotateX(180deg);
   transition: 0.5s;
 }
@@ -80,16 +80,16 @@ header.focus nav:after {
   -webkit-transform: rotateY(180deg) !important;
 }
 
-header.focus .logo .text,
-header.focus .logo:before,
-header.focus .logo:after {
+header.focus #logo .text,
+header.focus #logo:before,
+header.focus #logo:after {
   -webkit-transform: rotateY(0deg);
   direction: ltr;
 }
 
-header.focus .logo .icon,
-header.focus .logo:before,
-header.focus .logo:after {
+header.focus #logo .icon,
+header.focus #logo:before,
+header.focus #logo:after {
   -webkit-transform: rotateX(0deg);
   direction: ltr;
 }
diff --git a/frontend/static/themes/cheesecake.css b/frontend/static/themes/cheesecake.css
index 9b792fc7e..b9f7c0669 100644
--- a/frontend/static/themes/cheesecake.css
+++ b/frontend/static/themes/cheesecake.css
@@ -43,6 +43,6 @@
   }
 }
 
-header > div.logo > div.icon > svg path {
+header > div#logo > div.icon > svg path {
   animation: 10s linear infinite 0.1s rgb;
 }
diff --git a/frontend/static/themes/fire.css b/frontend/static/themes/fire.css
index aa0319481..b6d6af4d7 100644
--- a/frontend/static/themes/fire.css
+++ b/frontend/static/themes/fire.css
@@ -60,7 +60,7 @@ header .button.discord.dotHidden::after {
   animation-name: none !important;
 }
 
-.logo .bottom,
+#logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 nav .textButton:hover,
diff --git a/frontend/static/themes/fundamentals.css b/frontend/static/themes/fundamentals.css
index 4d3018e77..7c960443e 100644
--- a/frontend/static/themes/fundamentals.css
+++ b/frontend/static/themes/fundamentals.css
@@ -11,6 +11,6 @@
   --colorful-error-extra-color: #413157;
 }
 
-header .logo .bottom {
+header #logo .bottom {
   color: #196378;
 }
diff --git a/frontend/static/themes/grape.css b/frontend/static/themes/grape.css
index 9c1759745..3521ee595 100644
--- a/frontend/static/themes/grape.css
+++ b/frontend/static/themes/grape.css
@@ -60,7 +60,7 @@ header .button.discord.dotHidden::after {
   animation-name: none !important;
 }
 
-.logo .bottom,
+#logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 nav .textButton:hover,
diff --git a/frontend/static/themes/ishtar.css b/frontend/static/themes/ishtar.css
index c14eb69f4..89b7b8afc 100644
--- a/frontend/static/themes/ishtar.css
+++ b/frontend/static/themes/ishtar.css
@@ -11,6 +11,6 @@
   --colorful-error-extra-color: #849224;
 }
 
-header .logo .bottom {
+header #logo .bottom {
   color: #fae1c3;
 }
diff --git a/frontend/static/themes/metropolis.css b/frontend/static/themes/metropolis.css
index eb5c771e0..8fae0ecb5 100644
--- a/frontend/static/themes/metropolis.css
+++ b/frontend/static/themes/metropolis.css
@@ -11,7 +11,7 @@
   --colorful-error-extra-color: #8f2f19;
 }
 
-header .logo .bottom {
+header #logo .bottom {
   color: #f4bc46;
 }
 
diff --git a/frontend/static/themes/mr_sleeves.css b/frontend/static/themes/mr_sleeves.css
index 4438c27b1..b1a6fc742 100644
--- a/frontend/static/themes/mr_sleeves.css
+++ b/frontend/static/themes/mr_sleeves.css
@@ -11,7 +11,7 @@
   --colorful-error-extra-color: #667c91;
 }
 
-header .logo .bottom {
+header #logo .bottom {
   color: #8fadc9;
 }
 
diff --git a/frontend/static/themes/rainbow_trail.css b/frontend/static/themes/rainbow_trail.css
index f1f09e621..c682f4421 100644
--- a/frontend/static/themes/rainbow_trail.css
+++ b/frontend/static/themes/rainbow_trail.css
@@ -9,7 +9,7 @@
   --colorful-error-color: #ff0008;
 }
 
-header .logo .text {
+header #logo .text {
   background: linear-gradient(
     90deg,
     #60b6ce,
@@ -29,7 +29,7 @@ header .logo .text {
   animation: rainbow-gradient 30s alternate ease-in-out infinite;
 }
 
-header .logo .top,
+header #logo .top,
 .account .levelAndBar .level,
 [aria-label][data-balloon-pos]::after {
   -webkit-text-fill-color: initial;
diff --git a/frontend/static/themes/rgb.css b/frontend/static/themes/rgb.css
index ddffd28b0..63ba0721b 100644
--- a/frontend/static/themes/rgb.css
+++ b/frontend/static/themes/rgb.css
@@ -90,7 +90,7 @@ header .button.discord.dotHidden::after {
   animation-name: none !important;
 }
 
-.logo .bottom,
+#logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 nav .textButton:hover,
@@ -113,6 +113,6 @@ a:hover,
   animation: rgb 5s linear infinite;
 }
 
-header .logo path {
+header #logo path {
   animation: rgb-fill 5s linear infinite;
 }
diff --git a/frontend/static/themes/sewing_tin_light.css b/frontend/static/themes/sewing_tin_light.css
index fd61ec5b3..ddf23eb71 100644
--- a/frontend/static/themes/sewing_tin_light.css
+++ b/frontend/static/themes/sewing_tin_light.css
@@ -19,7 +19,7 @@ nav .textButton:hover {
   color: #c6915e;
 }
 
-header .logo .text {
+header #logo .text {
   background-color: #ffffff; /* fallback */
   background: -webkit-linear-gradient(
     #2d2076,
@@ -36,7 +36,7 @@ header .logo .text {
   -webkit-text-fill-color: transparent;
 }
 
-header .logo .text .top {
+header #logo .text .top {
   /* prevent it from being transparent */
   -webkit-text-fill-color: #385eca;
 }
diff --git a/frontend/static/themes/shadow.css b/frontend/static/themes/shadow.css
index 0bcac9c73..c91dac9d2 100644
--- a/frontend/static/themes/shadow.css
+++ b/frontend/static/themes/shadow.css
@@ -11,11 +11,11 @@
   --colorful-error-extra-color: #d8d8d8;
 }
 
-header .logo .icon {
+header #logo .icon {
   color: #8c3230;
 }
 
-header .logo .text {
+header #logo .text {
   color: #557d8d;
 }
 
diff --git a/frontend/static/themes/trance.css b/frontend/static/themes/trance.css
index 3b8353fe7..03faebc60 100644
--- a/frontend/static/themes/trance.css
+++ b/frontend/static/themes/trance.css
@@ -48,7 +48,7 @@ header .button.discord.dotHidden::after {
   animation-name: none !important;
 }
 
-.logo .bottom,
+#logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 nav .textButton:hover,