From 34f9e944d202da830ced1eb41ac939025e4cb5e0 Mon Sep 17 00:00:00 2001
From: Jade Herd <toxicaven@disroot.org>
Date: Wed, 25 Oct 2023 14:15:18 -0400
Subject: [PATCH] Fix: Bugs Tnixc found and hopefully the rest (#235)

---
 src/catppuccin-latte.theme.scss |  14 +--
 src/components/_buttons.scss    |  28 ++---
 src/components/_chat.scss       | 146 ++++++++++++------------
 src/components/_details.scss    |  50 +++++----
 src/components/_navbar.scss     |  10 +-
 src/components/_pages.scss      | 190 ++++++++++++++++----------------
 src/components/_popouts.scss    | 132 +++++++++++-----------
 src/components/_sidebar.scss    |   4 +-
 src/components/_variables.scss  |   2 +-
 9 files changed, 292 insertions(+), 284 deletions(-)

diff --git a/src/catppuccin-latte.theme.scss b/src/catppuccin-latte.theme.scss
index e4a9abc..97b6538 100644
--- a/src/catppuccin-latte.theme.scss
+++ b/src/catppuccin-latte.theme.scss
@@ -262,7 +262,7 @@ button[class*="emojiButtonNormal"] > div > div {
   --interactive-active: #{$text};
 
   // "spine" svgs before threads
-  svg[class|="spine"] {
+  svg[class^="spine"] {
     color: $surface2;
   }
 
@@ -308,12 +308,12 @@ nav[class*="guilds-"].theme-dark {
   @import "@catppuccin/palette/scss/mocha";
 
   // server icons
-  foreignObject > div[data-list-item-id|="guildsnav_"] {
+  foreignObject > div[data-list-item-id^="guildsnav_"] {
     background-color: lighten($base, 2%);
 
     &:hover,
     &[class*="selected"] {
-      > div[class|="childWrapper"] {
+      > div[class^="childWrapper"] {
         color: $crust;
         font-weight: 600;
       }
@@ -326,10 +326,10 @@ nav[class*="guilds-"].theme-dark {
   }
 
   // lightens folder wrapper bg
-  span[class|="expandedFolderBackground"] {
+  span[class^="expandedFolderBackground"] {
     background-color: lighten($base, 3%);
   }
-  div[class|="folder"][class*="hover-"] {
+  div[class^="folder"][class*="hover-"] {
     background-color: lighten($base, 8%);
   }
 
@@ -340,8 +340,8 @@ nav[class*="guilds-"].theme-dark {
   }
 
   // server list icons
-  div[class|="upperBadge"] {
-    > div[class|="iconBadge"] {
+  div[class^="upperBadge"] {
+    > div[class^="iconBadge"] {
       path {
         color: $base;
       }
diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss
index aeb8bb0..510595d 100644
--- a/src/components/_buttons.scss
+++ b/src/components/_buttons.scss
@@ -9,7 +9,7 @@
     color: $crust;
 
     // darken the nitro button too
-    svg[class|="premiumIcon"] {
+    svg[class^="premiumIcon"] {
       color: darken($pink, 20%);
     }
 
@@ -30,11 +30,11 @@
 }
 
 // For some reason, red buttons on click turn blue. Sure.
-button[class*="lookFilled-"][class*="colorRed_"]:active {
+button[class*="lookFilled_"][class*="colorRed_"]:active {
   background-color: $red;
 }
 
-[class*="lookOutlined-"][class*="colorPrimary_"] {
+[class*="lookOutlined_"][class*="colorPrimary_"] {
   border-color: $surface1;
 
   &:hover {
@@ -45,9 +45,9 @@ button[class*="lookFilled-"][class*="colorRed_"]:active {
 }
 
 // buttons in sidebar when in calls
-div[class|="actionButtons"] {
-  [class|="button"][class*="buttonColor_"],
-  [class|="button"] [class*="buttonColor_"] {
+div[class^="actionButtons"] {
+  [class^="button"][class*="buttonColor_"],
+  [class^="button"] [class*="buttonColor_"] {
     background-color: $surface1;
 
     &[class*="buttonActive_"] {
@@ -66,11 +66,11 @@ div[class|="actionButtons"] {
 }
 
 // lookInverted buttons should have darker brand text
-[class*="lookInverted-"][class*="colorBrand_"] {
+[class*="lookInverted_"][class*="colorBrand_"] {
   color: var(--brand-experiment-600);
 
   // darken the nitro button too
-  svg[class|="premiumIcon"] {
+  svg[class^="premiumIcon"] {
     color: darken($pink, 15%);
   }
 }
@@ -78,17 +78,17 @@ div[class|="actionButtons"] {
 // lookLink + colorPrimary should be themed
 .theme-dark,
 .theme-light {
-  [class*="lookLink-"][class*="colorPrimary_"] {
+  [class*="lookLink_"][class*="colorPrimary_"] {
     color: $text;
   }
-  [class*="lookFilled-"][class*="colorTransparent_"] {
+  [class*="lookFilled_"][class*="colorTransparent_"] {
     color: $text;
     background-color: $surface0;
   }
 }
 
 // dangerous button when hovered is colored properly
-div[class*="button-"][class*="dangerous_"]:hover {
+div[class*="button_"][class*="dangerous_"]:hover {
   color: darken($red, 10%);
 }
 
@@ -102,12 +102,12 @@ div[role="radio"][class*="selected"] {
   }
 }
 //nonspecific radio buttons
-[class*="container-"][style*="background-color: var(--green_360)"] {
+[class*="container_"][style*="background_color: var(__green_360)"] {
   --green-360: #{$green}; //vencord plugin settings
   background-color: $green !important;
 }
-[class*="container-"][style*="background-color: var(--primary_400)"],
-[class*="container-"][style*="background_color: rgb(130, 133, 143)"] {
+[class*="container_"][style*="background_color: var(__primary_400)"],
+[class*="container_"][style*="background_color: rgb(130, 133, 143)"] {
   background-color: $crust !important; //used in a lot of places
 }
 // vencord spotify plugin button theming support (uses vencord-specific classes)
diff --git a/src/components/_chat.scss b/src/components/_chat.scss
index 9704f46..bcc75a9 100644
--- a/src/components/_chat.scss
+++ b/src/components/_chat.scss
@@ -1,4 +1,4 @@
-[class|="chatContent"] {
+[class^="chatContent"] {
   div[class*="wrapperAudio_"],
   div[class*="imageWrapper_"] {
     div[class*="audioControls"],
@@ -14,28 +14,28 @@
 
   // new message ruler
   #---new-messages-bar {
-    span[class|="unreadPill"] {
+    span[class^="unreadPill"] {
       color: $crust;
     }
   }
 
   // new message bar
-  div[class|="newMessagesBar"] {
+  div[class^="newMessagesBar"] {
     button {
       color: $crust;
     }
   }
 
   // text input area
-  div[class|="channelTextArea"] {
-    div[class|="buttons"] * {
+  div[class^="channelTextArea"] {
+    div[class^="buttons"] * {
       color: var(--interactive-normal) !important;
     }
   }
 
   // reactions
-  [id|="message-reactions"] {
-    div[class|="reaction"] {
+  [id^="message-reactions"] {
+    div[class^="reaction"] {
       background-color: $surface0;
       &:hover {
         background-color: var(--brand-experiment-20a);
@@ -49,8 +49,8 @@
       0 0 0 2px $mauve,
       0 0 16px $lavender;
   }
-  div[class|="navButtonSuperReactActive"],
-  div[class|="navButtonSuperReactActive"]:hover {
+  div[class^="navButtonSuperReactActive"],
+  div[class^="navButtonSuperReactActive"]:hover {
     background: linear-gradient(270deg, $pink, $lavender 33.63%, $mauve);
     color: $crust;
   }
@@ -62,7 +62,7 @@
   button[class*="navButtonActive_"]:hover {
     color: $crust;
   }
-  div[class*="colorPremiumGradient-"][class*="focused_"] {
+  div[class*="colorPremiumGradient_"][class*="focused_"] {
     background: linear-gradient(270deg, $pink, $lavender 33.63%, $mauve);
     color: $crust !important;
   }
@@ -81,9 +81,9 @@
   }
 
   // chat header
-  div[class|="container"][class*="header_"] {
+  div[class^="container"][class*="header_"] {
     div[class*="addReactButton_"],
-    div[class|="buttons"]:not([class*="lookBlank_"]) div[class|="contents"] {
+    div[class^="buttons"]:not([class*="lookBlank_"]) div[class^="contents"] {
       background: $surface0;
       &:hover {
         background-color: var(--brand-experiment-20a);
@@ -93,15 +93,15 @@
   }
 
   // "Messages failed to load" bar
-  div[class|="messagesErrorBar"] div[class*="barButtonBase_"] {
+  div[class^="messagesErrorBar"] div[class*="barButtonBase_"] {
     color: $crust;
   }
 
   // code stuff
   // [class*="after_inlineCode_"],
   // [class*="before_inlineCode_"],
-  // [class|="syntaxBefore"],
-  // [class|="syntaxAfter"] {
+  // [class^="syntaxBefore"],
+  // [class^="syntaxAfter"] {
   //   color: $overlay0;
   // }
 
@@ -113,9 +113,9 @@
     background: $surface0;
   }
 
-  div[class|="container"] div[class|="cardWrapper"] {
+  div[class^="container"] div[class^="cardWrapper"] {
     div[class*="completed_"] {
-      svg[class|="checkmark"] {
+      svg[class^="checkmark"] {
         background-color: $green;
         color: $crust;
       }
@@ -130,7 +130,7 @@ div[style*="d1382af8d9e755bc44811b1fd92990a8.svg"] {
 }
 
 // server boost icon... again
-main[class|="chatContent"] div[id|="message-content"] svg[class|="icon"] {
+main[class^="chatContent"] div[id^="message-content"] svg[class^="icon"] {
   > path[d="M4 0L0 4V8L4 12L8 8V4L4 0ZM7 7.59L4 10.59L1 7.59V4.41L4 1.41L7 4.41V7.59Z"],
   > path[d="M2 4.83V7.17L4 9.17L6 7.17V4.83L4 2.83L2 4.83Z"] {
     color: $pink;
@@ -140,8 +140,8 @@ main[class|="chatContent"] div[id|="message-content"] svg[class|="icon"] {
 // spoiler messages
 .theme-dark,
 .theme-light {
-  span[class|="spoilerContent"],
-  div[class|="spoilerContent"] {
+  span[class^="spoilerContent"],
+  div[class^="spoilerContent"] {
     background-color: $surface0;
 
     &[class*="hidden"] {
@@ -167,14 +167,14 @@ main[class|="chatContent"] div[id|="message-content"] svg[class|="icon"] {
     }
   }
 
-  div[class|="spoilerContainer"] {
-    div[class|="spoilerWarning"] {
+  div[class^="spoilerContainer"] {
+    div[class^="spoilerWarning"] {
       color: $text;
       background-color: adjust-color($crust, $alpha: -0.3);
     }
 
     &:hover {
-      div[class|="spoilerWarning"] {
+      div[class^="spoilerWarning"] {
         color: $text;
         background-color: $crust;
       }
@@ -187,7 +187,7 @@ main[class|="chatContent"] div[id|="message-content"] svg[class|="icon"] {
 }
 
 // cooldown text
-div[class|="cooldownWrapper"] {
+div[class^="cooldownWrapper"] {
   color: var(--text-muted) !important;
 }
 
@@ -204,7 +204,7 @@ div[class*="autocomplete_"] {
   div[class*="autocompleteRowContentSecondary"] {
     background-color: transparent;
   }
-  div[class|="usageWrapper"] > div[class*="title_"] {
+  div[class^="usageWrapper"] > div[class*="title_"] {
     color: $brand !important;
   }
 
@@ -214,17 +214,17 @@ div[class*="autocomplete_"] {
 }
 
 // emoji button
-div[class|="channelTextArea"] button[class*="emojiButton_"] {
+div[class^="channelTextArea"] button[class*="emojiButton_"] {
   background: transparent !important;
 }
 
 // upload???
-[class|="uploadDropModal"] {
+[class^="uploadDropModal"] {
   &[class*="error"] {
     background-color: $red;
   }
 
-  div[class|="inner"] {
+  div[class^="inner"] {
     border-color: $crust;
 
     * {
@@ -239,14 +239,14 @@ div[class^="chat"] > div[class^="content"] > div[class^="container"] {
     background-color: $base;
   }
 
-  div[class|="grid"][class*="scrollerBase"],
-  > div[class|="chatContainer"] > div[class|="container"] {
+  div[class^="grid"][class*="scrollerBase"],
+  > div[class^="chatContainer"] > div[class^="container"] {
     background-color: $base;
   }
 
   // forum icons
-  div[class|="pinIcon"],
-  div[class|="stepStatus"] {
+  div[class^="pinIcon"],
+  div[class^="stepStatus"] {
     > svg > path {
       fill: $subtext0;
     }
@@ -264,13 +264,13 @@ div[class^="chat"] > div[class^="content"] > div[class^="container"] {
   }
 
   // discord icon
-  svg[class|="discordIcon"] {
+  svg[class^="discordIcon"] {
     background-color: $brand;
     color: $crust;
   }
 
   // new badge
-  div[class|="newBadge"] {
+  div[class^="newBadge"] {
     background-color: $lavender !important;
     color: $crust;
   }
@@ -280,7 +280,7 @@ div[class^="chat"] > div[class^="content"] > div[class^="container"] {
   }
 }
 
-div[class|="sidebar"] > section[class|="panels"] {
+div[class^="sidebar"] > section[class^="panels"] {
   svg[class*="buttonIcon_"],
   div[class*="buttonContents"] {
     fill: $text;
@@ -288,20 +288,20 @@ div[class|="sidebar"] > section[class|="panels"] {
   }
 }
 
-[data-list-id|="forum-channel-list"] {
-  div[class|="body"] > div[class|="tags"] div[class*="pill"] {
+[data-list-id^="forum-channel-list"] {
+  div[class^="body"] > div[class^="tags"] div[class*="pill"] {
     background-color: $mantle;
   }
 
   // new post button
-  button[class|="submitButton"][class*="colorBrand"] {
+  button[class^="submitButton"][class*="colorBrand"] {
     background-color: $brand;
     color: $crust;
   }
 }
 
 // Bot slash command field
-div[class|="applicationCommand"] {
+div[class^="applicationCommand"] {
   span[class*="selectedPill_"] {
     border-color: $brand !important;
   }
@@ -312,10 +312,10 @@ div[class|="applicationCommand"] {
 }
 
 // fix the sidebar on smaller servers
-div[class|="chat"]
-  > div[class|="content"]
-  main[class|="chatContent"]
-  + div[class|="container"] {
+div[class^="chat"]
+  > div[class^="content"]
+  main[class^="chatContent"]
+  + div[class^="container"] {
   background-color: var(--background-secondary);
 }
 
@@ -324,13 +324,18 @@ div[class|="chat"]
   border: 1px solid $red !important;
 }
 
+// Threads header icon
+div[class^="messagesWrapper"] ol[class^="scrollerInner"] svg[class^="icon"] {
+  color: $crust;
+}
+
 // Jump to Present bar text
 [class*="barButtonBase_"] {
   color: $crust !important;
 }
 
 // calls
-div[class|="callContainer"] {
+div[class^="callContainer"] {
   [class*="controlIcon_"] {
     color: $subtext1;
 
@@ -355,7 +360,7 @@ div[class|="callContainer"] {
     color: $text;
   }
 
-  div[class*="button-"][class*="contents_"],
+  div[class*="button_"][class*="contents_"],
   button[class*="cta_"],
   button[class*="participantsButton_"] {
     background-color: $surface0;
@@ -363,59 +368,59 @@ div[class|="callContainer"] {
   }
 
   // call quality and nitro indicator
-  div[class|="indicators"] {
-    div[class|="liveQualityIndicator"] {
+  div[class^="indicators"] {
+    div[class^="liveQualityIndicator"] {
       background-color: $red !important;
 
-      svg[class|="premiumStreamIcon"] {
+      svg[class^="premiumStreamIcon"] {
         color: $crust;
       }
     }
   }
 
-  div[class|="videoControls"] {
-    div[class|="children"] {
+  div[class^="videoControls"] {
+    div[class^="children"] {
       div[class*="playingText_"] {
         color: $subtext1;
       }
     }
 
-    div[class|="bottomControls"] {
-      button[class|="textButton"] {
+    div[class^="bottomControls"] {
+      button[class^="textButton"] {
         color: $text;
         background-color: $surface1;
       }
     }
 
-    div[class|="toolbar"] {
-      svg[class|="controlIcon"] {
+    div[class^="toolbar"] {
+      svg[class^="controlIcon"] {
         color: var(--interactive-normal);
       }
 
-      div[class|="streamQualityIndicator"] div[class|="liveQualityIndicator"] {
+      div[class^="streamQualityIndicator"] div[class^="liveQualityIndicator"] {
         background-color: $surface1 !important;
 
-        div[class|="qualityIndicator"] {
+        div[class^="qualityIndicator"] {
           color: $text;
         }
 
-        svg[class|="premiumStreamIcon"] {
+        svg[class^="premiumStreamIcon"] {
           color: $text;
         }
       }
 
-      div[class|="liveIndicator"] div[class|="live"] {
+      div[class^="liveIndicator"] div[class^="live"] {
         background-color: $red !important;
         color: $crust !important;
       }
     }
 
-    button[class*="leftTrayIcon-"][class*="buttonColor_"] {
+    button[class*="leftTrayIcon_"][class*="buttonColor_"] {
       background-color: $surface0;
       color: $text;
     }
 
-    div[class|="badge"] {
+    div[class^="badge"] {
       color: $crust;
     }
 
@@ -436,7 +441,7 @@ div[class|="callContainer"] {
           color: $text;
         }
 
-        svg[class|="raisedHandButtonIcon"] {
+        svg[class^="raisedHandButtonIcon"] {
           color: $text;
         }
       }
@@ -490,7 +495,7 @@ div[class*="chat_"] {
     background-color: $mantle;
   }
 
-  div[class*="content-"][class*="container_"] {
+  div[class*="content_"][class*="container_"] {
     background-color: $mantle;
 
     div[class*="container"] {
@@ -506,16 +511,9 @@ div[class*="chat_"] {
     }
 
     div[class*="browser"] {
-      div[class*="content"] div[class|="container"] {
+      div[class*="content"] div[class^="container"] {
         background-color: $base;
       }
-
-      div[class*="checkbox_"] {
-        border-color: $crust !important;
-        svg > path {
-          fill: $crust;
-        }
-      }
     }
 
     div[class*="scrollerContainer_"] {
@@ -591,7 +589,7 @@ div[class*="chat_"] {
 // spotify listen along invite
 [id*="message-accessories-"] > [class*="invite_"] {
   background-color: $base;
-  [class*="inFront-"][class*="header_"] {
+  [class*="inFront_"][class*="header_"] {
     color: $subtext0;
   }
   [class*="partyStatus_"] {
@@ -605,12 +603,12 @@ div[class*="chat_"] {
 }
 
 // members tab
-div[class|="chat"][class*="page-"] div[class|="content"][class*="container_"] {
+div[class^="chat"][class*="page_"] div[class^="content"][class*="container_"] {
   height: 100%;
 }
 
 // Server Guide
-div[class|="chat"] div[class|="homeContainer"] {
+div[class^="chat"] div[class^="homeContainer"] {
   height: 100%;
 }
 
@@ -623,6 +621,6 @@ div[class|="chat"] div[class|="homeContainer"] {
 }
 
 // Members sidebar
-aside[class|="membersWrap"] {
+aside[class^="membersWrap"] {
   height: 100%;
 }
diff --git a/src/components/_details.scss b/src/components/_details.scss
index fe29626..fa3ceb9 100644
--- a/src/components/_details.scss
+++ b/src/components/_details.scss
@@ -1,8 +1,8 @@
 // online
 rect[fill="#23a55a"],
 foreignObject[mask="url(#svg-mask-status-online)"] > div,
-div[class|="dotOnline"],
-i[class|="statusOnline"] {
+div[class^="dotOnline"],
+i[class^="statusOnline"] {
   fill: $green !important;
   background-color: $green !important;
 }
@@ -37,8 +37,8 @@ rect[fill="rgba(242, 63, 67, 1)"] {
 rect[fill="#82858f"],
 foreignObject[mask="url(#svg-mask-status-offline)"] > div,
 foreignObject[mask="url(#svg-mask-status-offline)"] > rect,
-div[class|="dotOffline"],
-i[class|="statusOffline"] {
+div[class^="dotOffline"],
+i[class^="statusOffline"] {
   fill: $subtext0 !important;
   background-color: $subtext0 !important;
 }
@@ -110,7 +110,7 @@ div[class*="flowerStarContainer_"] {
     svg[class*="flowerStar_"] * {
       fill: #fff;
     }
-    div[class|="childContainer"] svg * {
+    div[class^="childContainer"] svg * {
       fill: $crust;
     }
   }
@@ -122,7 +122,7 @@ div[class*="flowerStarContainer_"] {
     svg[class*="flowerStar_"] * {
       fill: $surface2;
     }
-    div[class|="childContainer"] svg * {
+    div[class^="childContainer"] svg * {
       fill: $text;
     }
   }
@@ -131,7 +131,7 @@ div[class*="flowerStarContainer_"] {
     svg[class*="flowerStar_"] * {
       fill: $pink;
     }
-    div[class|="childContainer"] svg * {
+    div[class^="childContainer"] svg * {
       fill: $crust;
     }
   }
@@ -140,7 +140,7 @@ div[class*="flowerStarContainer_"] {
     svg[class*="flowerStar_"] * {
       fill: $green;
     }
-    div[class|="childContainer"] svg * {
+    div[class^="childContainer"] svg * {
       fill: $crust;
     }
   }
@@ -149,18 +149,18 @@ div[class*="flowerStarContainer_"] {
     svg[class*="flowerStar_"] * {
       fill: $brand;
     }
-    div[class|="childContainer"] svg * {
+    div[class^="childContainer"] svg * {
       fill: $crust;
     }
   }
 }
 
 // public / verified server info pill
-div[class|="communityInfoPill"] {
+div[class^="communityInfoPill"] {
   --background-accent: #{adjust-color($base, $alpha: -0.3)};
   color: $text;
 
-  div[class|="text"] {
+  div[class^="text"] {
     font-weight: 500;
   }
 }
@@ -171,18 +171,18 @@ a[class*="socialLink_"][href*="discord"] {
 }
 
 // upload icon
-svg[class|="uploadIcon"] {
+svg[class^="uploadIcon"] {
   color: $crust;
 }
 
 // empty states. why is it colored like this
 .theme-dark,
 .theme-light {
-  h2[class|="emptyStateHeader"] {
+  h2[class^="emptyStateHeader"] {
     color: $text;
   }
 
-  p[class|="emptyStateSubtext"] {
+  p[class^="emptyStateSubtext"] {
     color: $subtext0;
   }
 }
@@ -200,31 +200,31 @@ div[class^="numberBadge"] {
 }
 
 // Channel and role badge
-div[class|="newChannel"] {
+div[class^="newChannel"] {
   color: $crust;
   background-color: $brand !important;
 }
 
 // Clyde AI Bot tag
-div[class|="botTag"] {
+div[class^="botTag"] {
   background-color: $brand;
 }
 
 // Add Friend text box border on selection should use accent
-div[class|="addFriendInputWrapper"]:focus-within {
+div[class^="addFriendInputWrapper"]:focus-within {
   border-color: $brand;
 }
 
 // spotify button on text area
-button[class|="attachButton"] {
-  svg path[class|="attachButtonPlay"] {
+button[class^="attachButton"] {
+  svg path[class^="attachButtonPlay"] {
     color: $green;
     fill: $green;
   }
 }
 
 // Forum channel pins
-div[class|="tags"] div[class|="pinIcon"] path {
+div[class^="tags"] div[class^="pinIcon"] path {
   fill: $base !important;
 }
 
@@ -238,7 +238,7 @@ div[class*="avatarSpeaking_"] {
     inset 0 0 0 3px var(--background-secondary);
 }
 
-div[class*="videoLayer_"] > div[class|="tileChild"] > div[class|="border"] {
+div[class*="videoLayer_"] > div[class^="tileChild"] > div[class^="border"] {
   &[class*="speaking_"] {
     -webkit-box-shadow:
       inset 0 0 0 2px $green,
@@ -290,3 +290,11 @@ span[class*="channelMention"]:hover,
   ):hover {
   color: $crust;
 }
+
+div[class^="checkbox"][class*="checked_"] {
+  border-color: $crust !important;
+
+  svg path {
+    fill: $crust !important;
+  }
+}
diff --git a/src/components/_navbar.scss b/src/components/_navbar.scss
index 62bd20a..a0567d8 100644
--- a/src/components/_navbar.scss
+++ b/src/components/_navbar.scss
@@ -16,10 +16,10 @@ nav[class*="guilds_"] {
   }
 
   // lightens folder wrapper bg
-  span[class|="expandedFolderBackground"] {
+  span[class^="expandedFolderBackground"] {
     background-color: lighten($base, 3%);
   }
-  div[class|="folder"][class*="hover_"] {
+  div[class^="folder"][class*="hover_"] {
     background-color: lighten($base, 8%);
   }
 
@@ -36,8 +36,8 @@ nav[class*="guilds_"] {
 }
 
 // server list icons
-div[class|="upperBadge"] {
-  > div[class|="iconBadge"] path {
+div[class^="upperBadge"] {
+  > div[class^="iconBadge"] path {
     color: $crust;
   }
 
@@ -46,6 +46,6 @@ div[class|="upperBadge"] {
   }
 }
 
-div[class|="lowerBadge"] div[class|="iconBadge"] path {
+div[class^="lowerBadge"] div[class^="iconBadge"] path {
   color: $crust;
 }
diff --git a/src/components/_pages.scss b/src/components/_pages.scss
index c0d5606..1278167 100644
--- a/src/components/_pages.scss
+++ b/src/components/_pages.scss
@@ -1,7 +1,7 @@
 // settings
-div[class|="sidebarRegion"] {
-  div[class|="serverBoostTabItem"] {
-    svg[class|="icon"] {
+div[class^="sidebarRegion"] {
+  div[class^="serverBoostTabItem"] {
+    svg[class^="icon"] {
       fill: $pink !important;
     }
 
@@ -9,13 +9,13 @@ div[class|="sidebarRegion"] {
       background-color: $brand !important;
       color: $crust !important;
 
-      svg[class|="icon"] {
+      svg[class^="icon"] {
         fill: $crust !important;
       }
     }
   }
 
-  div[class|="premiumTab"] {
+  div[class^="premiumTab"] {
     > div > svg > path {
       fill: $pink;
     }
@@ -29,7 +29,7 @@ div[class|="sidebarRegion"] {
     }
   }
 
-  div[class*="tabBarItemContainer-"] [class*="textBadge_"] {
+  div[class*="tabBarItemContainer_"] [class*="textBadge_"] {
     color: $crust;
 
     &[style*="background-color: var(--brand-500);"] {
@@ -38,24 +38,24 @@ div[class|="sidebarRegion"] {
   }
 }
 
-div[class|="contentRegion"] {
-  div[class*="noticeRegion-"] div[style="background_color: rgb(24, 25, 28);"] {
+div[class^="contentRegion"] {
+  div[class*="noticeRegion_"] div[style="background_color: rgb(24, 25, 28);"] {
     background-color: $crust !important;
   }
 
-  div[class|="streamerModeEnabledBtn"] {
+  div[class^="streamerModeEnabledBtn"] {
     background-color: $mauve;
     color: $crust;
   }
 
   // color bars with ticks
-  [class|="bar"],
-  [class|="markDash"] {
+  [class^="bar"],
+  [class^="markDash"] {
     background: $surface1;
   }
 
   [id="privacy-&-safety-tab"] {
-    div[class|="radioBar"] {
+    div[class^="radioBar"] {
       &[style*="hsl(139,"] {
         border-color: $green;
       }
@@ -79,12 +79,6 @@ div[class|="contentRegion"] {
     button[class*="colorBrandNew"] {
       background-color: $brand;
     }
-
-    div[class*="reducedMotion_"] {
-      div[class|="checkbox"] svg path {
-        fill: $crust;
-      }
-    }
   }
 
   #keybinds-tab {
@@ -97,14 +91,14 @@ div[class|="contentRegion"] {
   }
 
   #nitro-server-boost-tab {
-    circle[class|="circleProgress"] {
+    circle[class^="circleProgress"] {
       color: $pink;
     }
 
     div[class*="gemIndicatorContainer_"] {
       background-color: $base;
 
-      div[class|="tierLabel"] {
+      div[class^="tierLabel"] {
         color: $subtext1;
       }
     }
@@ -125,14 +119,14 @@ div[class|="contentRegion"] {
   }
 
   #subscriptions-tab {
-    [class|="sectionAccountCredit"],
-    [class|="subscriptionDetails"] {
+    [class^="sectionAccountCredit"],
+    [class^="subscriptionDetails"] {
       border-color: var(--background-modifier-accent);
     }
   }
 
   #library-inventory-tab {
-    div[class|="promotionIcon"] {
+    div[class^="promotionIcon"] {
       background-color: $base;
     }
   }
@@ -178,29 +172,29 @@ div[class|="contentRegion"] {
       border-color: var(--background-modifier-accent);
     }
 
-    div[class|="defaultIndicator"] {
+    div[class^="defaultIndicator"] {
       color: $text;
       background-color: $surface1;
     }
 
     div[class*="summaryInfo"],
-    [class|="paymentHeader"] {
+    [class^="paymentHeader"] {
       color: $text;
       border-color: var(--background-modifier-accent);
     }
 
-    div[class|="premiumIndicator"] {
+    div[class^="premiumIndicator"] {
       color: $crust;
     }
 
-    div[class|="paymentPane"],
+    div[class^="paymentPane"],
     div[class*="paginator_"],
     div[class*="payment_"] {
       background-color: $surface0;
       color: $text;
     }
 
-    div[class|="expandedInfo"] {
+    div[class^="expandedInfo"] {
       background-color: $surface1;
     }
 
@@ -208,7 +202,7 @@ div[class|="contentRegion"] {
       color: $subtext1;
     }
 
-    div[class|="codeRedemptionRedirect"] {
+    div[class^="codeRedemptionRedirect"] {
       background-color: $mantle;
       color: $text;
       border-color: $surface0;
@@ -216,7 +210,7 @@ div[class|="contentRegion"] {
   }
 
   [id="voice-&-video-tab"] {
-    div[class|="backgroundOptionRing"] {
+    div[class^="backgroundOptionRing"] {
       border-color: $brand;
     }
   }
@@ -242,7 +236,7 @@ div[class|="contentRegion"] {
       }
     }
 
-    input[class|="gameName"] {
+    input[class^="gameName"] {
       color: $text;
     }
 
@@ -272,8 +266,8 @@ div[class|="contentRegion"] {
   }
 
   // Voice & Audio checks
-  section[class|="inputSensitivityToggle"] {
-    div[class|="inputSensitivityBar"] {
+  section[class^="inputSensitivityToggle"] {
+    div[class^="inputSensitivityBar"] {
       background: $surface1;
 
       &[class*="speaking_"] {
@@ -288,24 +282,14 @@ div[class|="contentRegion"] {
 
   // toggles in preferencs
   // checked
-  div[class|="control"] > div[class*="checked_"],
-  div[class|="sensitivity"] div[class*="checked_"],
+  div[class^="control"] > div[class*="checked_"],
+  div[class^="sensitivity"] div[class*="checked_"],
   div[style*="background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"] {
     background-color: $green !important;
-
-    // svg[class|="slider"] {
-    //     > rect {
-    //         fill: $base;
-    //     }
-
-    //     > svg > path {
-    //         fill: $green;
-    //     }
-    // }
   }
 
   // unchecked
-  div[class|="control"] {
+  div[class^="control"] {
     > div[style*="background-color: hsl(218, calc(var(--saturation-factor, 1) * 4.6%), 46.9%)"],
     > div[style$="background-color: rgb(128, 132, 142);"] {
       background-color: $surface2 !important;
@@ -324,7 +308,7 @@ div[class|="contentRegion"] {
       background-color: $crust;
     }
 
-    div[class|="progressWithSubscriptions"] > svg > g > rect {
+    div[class^="progressWithSubscriptions"] > svg > g > rect {
       &:first-child {
         color: $crust;
       }
@@ -334,18 +318,18 @@ div[class|="contentRegion"] {
       }
     }
 
-    div[class|="tierHeaderUnlocked"],
-    div[class|="tierHeaderLocked"] {
+    div[class^="tierHeaderUnlocked"],
+    div[class^="tierHeaderLocked"] {
       background-color: $crust;
       color: $subtext0;
 
-      div[class|="tierUnlocked"] {
+      div[class^="tierUnlocked"] {
         background-image: linear-gradient(90deg, $blue, $mauve);
         color: $crust;
         font-weight: 600;
       }
 
-      svg[class|="tierIcon"] {
+      svg[class^="tierIcon"] {
         color: $pink;
       }
 
@@ -353,19 +337,19 @@ div[class|="contentRegion"] {
         color: $overlay1;
       }
 
-      svg[class|="tierLock"] {
+      svg[class^="tierLock"] {
         color: $surface2;
       }
     }
 
-    div[class|="tierBody"] {
+    div[class^="tierBody"] {
       color: $subtext1;
       background-color: $mantle;
     }
   }
 
   // active circles like the ones on server welcome screen settings
-  svg[class|="activeCircle"] {
+  svg[class^="activeCircle"] {
     color: $crust;
     background-color: $green;
   }
@@ -422,7 +406,7 @@ div[class|="contentRegion"] {
   }
 
   #family-center-tab {
-    div[class|="featureCards"] svg[class|="icon"] {
+    div[class^="featureCards"] svg[class^="icon"] {
       color: $crust;
     }
   }
@@ -433,8 +417,26 @@ div[class|="contentRegion"] {
     }
   }
 
-  @at-root .theme-light div[class|="contentRegion"] #appearance-tab {
-    div[class|="themeSelection"][class*="lightIcon"] {
+  #appearance-tab {
+    div[class^="selectionCircle"] {
+      box-shadow:
+        inset 0 0 0 2px $blue,
+        inset 0 0 0 4px var(--background-primary);
+
+      svg[class^="checkmarkCircle"] {
+        > circle {
+          fill: $crust !important;
+        }
+
+        > g > path {
+          fill: $blue !important;
+        }
+      }
+    }
+  }
+
+  @at-root .theme-light div[class^="contentRegion"] #appearance-tab {
+    div[class^="themeSelection"][class*="lightIcon"] {
       background: $surface0;
     }
   }
@@ -479,10 +481,10 @@ div[class|="contentRegion"] {
   }
 }
 
-div[class|="perksModal"] {
+div[class^="perksModal"] {
   background-color: $base;
 
-  li[class|="perk"] {
+  li[class^="perk"] {
     background-color: $mantle;
 
     svg {
@@ -490,45 +492,45 @@ div[class|="perksModal"] {
     }
   }
 
-  svg[class|="giftIcon"] {
+  svg[class^="giftIcon"] {
     color: $crust;
   }
 
-  div[class|="tierHeaderUnlocked"] {
+  div[class^="tierHeaderUnlocked"] {
     background-image: linear-gradient(90deg, $blue, $mauve);
     color: $base;
   }
 
-  div[class|="tierUnlocked"],
-  div[class|="tierMarkerBackground"] {
+  div[class^="tierUnlocked"],
+  div[class^="tierMarkerBackground"] {
     background-color: $base;
   }
 
-  div[class|="barBackground"],
-  div[class|="tierMarkerInProgress"],
-  div[class|="tierBody"] {
+  div[class^="barBackground"],
+  div[class^="tierMarkerInProgress"],
+  div[class^="tierBody"] {
     background-color: $crust !important;
   }
 
-  div[class|="tierMarkerAccomplished"] {
+  div[class^="tierMarkerAccomplished"] {
     background: $pink !important;
   }
 
-  div[class|="tierMarkerInProgress"] [class|="currentTierIcon"] {
+  div[class^="tierMarkerInProgress"] [class^="currentTierIcon"] {
     color: $pink;
   }
 
-  div[class|="barForeground"],
-  div[class|="tierMarkerAccomplished"] {
+  div[class^="barForeground"],
+  div[class^="tierMarkerAccomplished"] {
     background-color: $pink;
   }
 
-  svg[class|="currentTierIcon"] {
+  svg[class^="currentTierIcon"] {
     color: $base;
   }
 
   div[class*="tierMarkerLabelText"],
-  svg[class|="tierLock"] {
+  svg[class^="tierLock"] {
     color: var(--text-muted);
   }
 
@@ -536,7 +538,7 @@ div[class|="perksModal"] {
     color: var(--text-normal);
   }
 
-  div[class|="tierHeaderLocked"] {
+  div[class^="tierHeaderLocked"] {
     background-color: darken($crust, 5%);
     color: var(--text-muted);
   }
@@ -547,13 +549,13 @@ div[class|="perksModal"] {
 }
 
 // boost progress bar
-div[class|="sidebar"] div[class|="container"] {
-  div[class|="progressBar"] {
+div[class^="sidebar"] div[class^="container"] {
+  div[class^="progressBar"] {
     background: linear-gradient(90deg, $blue, $mauve);
   }
 
   &:hover {
-    div[class|="progressBar"] {
+    div[class^="progressBar"] {
       background: linear-gradient(
         90deg,
         hsl(221, 70%, 55.5%),
@@ -564,12 +566,12 @@ div[class|="sidebar"] div[class|="container"] {
     }
   }
 
-  div[class|="divider"] {
+  div[class^="divider"] {
     border-color: var(--background-modifier-accent);
   }
 }
 
-div[class|="pageWrapper"] {
+div[class^="pageWrapper"] {
   background: $base !important;
 
   div[class*="searchBox_"] {
@@ -584,33 +586,33 @@ div[class|="pageWrapper"] {
     }
   }
 
-  div[class*="categoryPill-"][class*="selected_"] div {
+  div[class*="categoryPill_"][class*="selected_"] div {
     color: $crust !important;
   }
 }
 
 // public server home
-div[class|="homeContainer"] {
+div[class^="homeContainer"] {
   background: $base !important;
 
-  > div[class|="homeContent"] div[class*="card_"] {
+  > div[class^="homeContent"] div[class*="card_"] {
     background: $surface0 !important;
   }
 }
 
 // the header for the public server home
-section[class|="title"] {
+section[class^="title"] {
   background: var(--background-primary) !important;
 }
 
-div[class|="categoryItem"][class*="selectedCategoryItem"],
+div[class^="categoryItem"][class*="selectedCategoryItem"],
 button[class*="lookFilled"] div[class*="addButton"] {
   // color when selected or if button
   color: $crust !important;
 }
 
 // new label
-div[class|="itemInner"] div[class|="new"] > div[class*="newText_"] {
+div[class^="itemInner"] div[class^="new"] > div[class*="newText_"] {
   color: $crust !important;
 }
 
@@ -632,12 +634,12 @@ div[class*="directoryModal_"] {
 }
 
 // student hubs
-section[class|="guildListSection"] {
-  div[class|="guildList"]:first-child {
-    div[class|="iconContainer"] {
+section[class^="guildListSection"] {
+  div[class^="guildList"]:first-child {
+    div[class^="iconContainer"] {
       background-color: $green;
 
-      > div[class|="icon"] {
+      > div[class^="icon"] {
         background-image: url("data:image/svg+xml,%3Csvg fill='none' height='24' viewBox='0 0 25 24' width='25' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23#{str-slice(inspect($crust), 2)}'%3E%3Cpath clip-rule='evenodd' d='m13.25 18v-12h-1.5v12z' fill-rule='evenodd'/%3E%3Cpath clip-rule='evenodd' d='m7 12.75c-.69036 0-1.25.5596-1.25 1.25v4h-1.5v-4c0-1.5188 1.23122-2.75 2.75-2.75h11c1.5188 0 2.75 1.2312 2.75 2.75v4h-1.5v-4c0-.6904-.5596-1.25-1.25-1.25z' fill-rule='evenodd'/%3E%3Cpath d='m12.5 7c-1.3807 0-2.5-1.11929-2.5-2.5s1.1193-2.5 2.5-2.5 2.5 1.11929 2.5 2.5-1.1193 2.5-2.5 2.5z'/%3E%3Cpath d='m20 22c-1.3807 0-2.5-1.1193-2.5-2.5s1.1193-2.5 2.5-2.5 2.5 1.1193 2.5 2.5-1.1193 2.5-2.5 2.5z'/%3E%3Cpath d='m12.5 22c-1.3807 0-2.5-1.1193-2.5-2.5s1.1193-2.5 2.5-2.5 2.5 1.1193 2.5 2.5-1.1193 2.5-2.5 2.5z'/%3E%3Cpath d='m5 22c-1.38071 0-2.5-1.1193-2.5-2.5s1.11929-2.5 2.5-2.5 2.5 1.1193 2.5 2.5-1.11929 2.5-2.5 2.5z'/%3E%3C/g%3E%3C/svg%3E");
       }
     }
@@ -653,13 +655,13 @@ path[d="M17.225 6.06504C17.3227 6.00866 17.4362 5.98608 17.548 6.00084C17.6598 6
   fill: $crust;
 }
 
-div[class|="tierPreviews"] {
-  button[class|="button"] {
+div[class^="tierPreviews"] {
+  button[class^="button"] {
     background: linear-gradient(90deg, $teal, $blue);
   }
 }
 
-div[class|="notice"] {
+div[class^="notice"] {
   div[class*="noticeText_"] {
     color: $crust;
   }
@@ -668,11 +670,11 @@ div[class|="notice"] {
     color: $crust;
   }
 
-  div[class|="closeButton"] > svg > path {
+  div[class^="closeButton"] > svg > path {
     fill: $crust;
   }
 
-  button[class|="button"] {
+  button[class^="button"] {
     border-color: $crust;
     color: $crust;
 
@@ -685,7 +687,7 @@ div[class|="notice"] {
     background-color: $mauve;
     color: $crust;
 
-    button[class|="button"]:hover {
+    button[class^="button"]:hover {
       background: darken($mauve, 10%);
       color: $mantle;
     }
diff --git a/src/components/_popouts.scss b/src/components/_popouts.scss
index 7aed66c..f01c7cf 100644
--- a/src/components/_popouts.scss
+++ b/src/components/_popouts.scss
@@ -1,4 +1,4 @@
-div[class|="layerContainer"] [role="menu"] {
+div[class^="layerContainer"] [role="menu"] {
   // make menu items readable when hovered
   --brand-experiment-560: var(--brand-experiment-25a);
   --brand-experiment-600: var(--brand-experiment);
@@ -46,13 +46,13 @@ div[class|="layerContainer"] [role="menu"] {
   }
 
   // Account switcher submenu
-  div[id|="account-switch-account"] {
+  div[id^="account-switch-account"] {
     &[class*="focused"] {
       div[class*="userMenuUsername"] div {
         color: $crust;
       }
 
-      svg[class|="activeIcon"] {
+      svg[class^="activeIcon"] {
         circle {
           fill: $blue;
         }
@@ -62,7 +62,7 @@ div[class|="layerContainer"] [role="menu"] {
       }
     }
 
-    svg[class|="activeIcon"] {
+    svg[class^="activeIcon"] {
       circle {
         fill: $crust;
       }
@@ -79,7 +79,7 @@ div[class|="layerContainer"] [role="menu"] {
   }
 
   #guild-header-popout-premium-subscribe {
-    div[class|="iconContainer"] > svg {
+    div[class^="iconContainer"] > svg {
       color: $pink;
     }
   }
@@ -94,8 +94,8 @@ div[class|="layerContainer"] [role="menu"] {
 
 .theme-dark,
 .theme-light {
-  div[class|="layerContainer"] div[id|="popout_"] > div[class*="didRender_"] {
-    &:not([class|="animatorBottom"]) > div {
+  div[class^="layerContainer"] div[id^="popout_"] > div[class*="didRender_"] {
+    &:not([class^="animatorBottom"]) > div {
       div[class*="flowerStarContainer_"] {
         svg[class*="flowerStar_"] * {
           fill: $brand;
@@ -134,21 +134,21 @@ div[class|="layerContainer"] [role="menu"] {
 }
 
 div[class*="recentMentionsPopout"] {
-  div[class|="header"] {
-    div[class|="tabBar"] {
-      div[class|="badge"],
-      div[class|="tab"][class*="active_"] {
+  div[class^="header"] {
+    div[class^="tabBar"] {
+      div[class^="badge"],
+      div[class^="tab"][class*="active_"] {
         color: $base;
       }
     }
 
-    div[class|="controls-"] {
+    div[class^="controls-"] {
       --background-secondary: #{$surface0};
       --background-primary: #{adjust-color($surface0, $alpha: -0.1)};
     }
   }
 
-  div[class|="scroller"] {
+  div[class^="scroller"] {
     [role="button"] {
       --background-tertiary: #{adjust-color($subtext0, $alpha: -0.85)};
       --background-floating: #{adjust-color($subtext0, $alpha: -0.88)};
@@ -162,13 +162,13 @@ div[class*="recentMentionsPopout"] {
 
 div[class*="rolesList"] {
   // make box lighter
-  div[class|="role"],
-  button[class|="addButton"] {
+  div[class^="role"],
+  button[class^="addButton"] {
     background-color: lighten($mantle, 4%);
   }
 
-  div[class|="role"] {
-    span[class|="roleCircle"] {
+  div[class^="role"] {
+    span[class^="roleCircle"] {
       // default roles
       &[style*="background-color: rgb(185, 187, 190)"] {
         background-color: $subtext0 !important;
@@ -186,12 +186,12 @@ div[class*="rolesList"] {
 div[class*="layerContainer"] {
   > div[class*="layer"] {
     // reaction popout
-    div[class|="reactors"] {
+    div[class^="reactors"] {
       background-color: var(--background-primary);
     }
 
     // the not selector should make it not style the user popouts
-    //div[class|="scroller"]:not(
+    //div[class^="scroller"]:not(
     //    [style*="padding-right: 4px;"],
     //    [style*="padding-right: 8px;"]
     //  ) {
@@ -224,14 +224,14 @@ section[class*="positionContainer_"] {
 }
 
 // Latte text color on gif categories
-.theme-light section[class|="positionContainer"] div[class|="categoryText"] {
+.theme-light section[class^="positionContainer"] div[class^="categoryText"] {
   color: $base;
 }
 
 #emoji-picker-tab-panel {
   // more transparent to make things more bearable
   [class*="stickerInspected_"] [class*="inspectedIndicator"],
-  [class|="emojiItem"][class*="emojiItemSelected_"] {
+  [class^="emojiItem"][class*="emojiItemSelected_"] {
     background-color: var(--brand-experiment-25a);
   }
 
@@ -247,16 +247,16 @@ section[class*="positionContainer_"] {
 }
 
 // same as transparent above, but for stickers
-[class*="stickerInspected_"] [class|="inspectedIndicator"] {
+[class*="stickerInspected_"] [class^="inspectedIndicator"] {
   background-color: var(--brand-experiment-25a);
 }
 
 .theme-light {
   //   color: $text;
 
-  > div[class|="focusLock"]
-    > div[class|="root"]
-    > div[class|="container"]
+  > div[class^="focusLock"]
+    > div[class^="root"]
+    > div[class^="container"]
     div[class*="footer"] {
     //     background-color: $mantle;
 
@@ -266,7 +266,7 @@ section[class*="positionContainer_"] {
     }
   }
 
-  > div[class|="focusLock"] > div[class|="root"] {
+  > div[class^="focusLock"] > div[class^="root"] {
     box-shadow:
       0 0 0 1px $surface0,
       0 2px 10px 0 hsla(0, calc(var(--saturation-factor, 1) * 0%), 0%, 0.1);
@@ -276,10 +276,10 @@ section[class*="positionContainer_"] {
   }
 
   // browser-only download client popout
-  div[class|="focusLock"] div[class|="downloadApps"] {
+  div[class^="focusLock"] div[class^="downloadApps"] {
     background-color: $base !important;
 
-    button[class|="modalCloseButton"],
+    button[class^="modalCloseButton"],
     h2,
     h3 {
       color: $text;
@@ -325,12 +325,12 @@ section[class*="positionContainer_"] {
   }
 }
 
-div[class|="layerContainer"] {
+div[class^="layerContainer"] {
   // right-click popups for guild, channels, and user
   #guild-header-popout,
   #guild-context,
-  div[id|="channel-context"],
-  div[id|="user-context"] {
+  div[id^="channel-context"],
+  div[id^="user-context"] {
     background: $crust;
   }
 
@@ -357,15 +357,15 @@ div[class|="layerContainer"] {
       }
     }
 
-    div[class|="focusLock"] {
+    div[class^="focusLock"] {
       // create channel (modal)
       // stream popout (modalSize)
       // edit attachment (uploadModal)
       // Join server from link (contentWrapper)
-      div[class|="modal"],
-      div[class|="modalSize"],
-      div[class|="uploadModal"],
-      div[class|="contentWrapper"] {
+      div[class^="modal"],
+      div[class^="modalSize"],
+      div[class^="uploadModal"],
+      div[class^="contentWrapper"] {
         background-color: $mantle;
         li,
         p,
@@ -394,7 +394,7 @@ div[class|="layerContainer"] {
       h4,
       h5,
       h6 {
-        &[class|="fixed"] {
+        &[class^="fixed"] {
           &:after {
             background-color: $red;
           }
@@ -427,7 +427,7 @@ div[class|="layerContainer"] {
     }
 
     // Checkbox toggles
-    div[class|="checkbox"] {
+    div[class^="checkbox"] {
       &[class*="checked_"] {
         border: none;
 
@@ -439,7 +439,7 @@ div[class|="layerContainer"] {
   }
 
   // add game
-  div[class|="addGamePopout"] {
+  div[class^="addGamePopout"] {
     background-color: $mantle;
   }
 
@@ -449,9 +449,9 @@ div[class|="layerContainer"] {
     display: none;
   }
 
-  div[class|="queryContainer"] {
+  div[class^="queryContainer"] {
     background-color: $crust !important;
-    span[class|="key"] {
+    span[class^="key"] {
       color: $text;
       background-color: $base;
     }
@@ -466,7 +466,7 @@ div[class|="layerContainer"] {
   }
 
   // when hovering active threads
-  div[class|="popout"] div[class|="row"][role="button"] {
+  div[class^="popout"] div[class^="row"][role="button"] {
     &:hover {
       color: $crust;
 
@@ -484,13 +484,13 @@ form[class*="card_"] {
 
 // user info
 div[class*="userInfoSection_"] {
-  div[class|="connectedAccountContainer"] {
+  div[class^="connectedAccountContainer"] {
     background-color: adjust-color($surface0, $alpha: -0.55) !important;
   }
 }
 
 // Warning card popouts ex. admin change username/account deletion
-div[class*="cardWarning-"] div[class*="warning_"] {
+div[class*="cardWarning_"] div[class*="warning_"] {
   color: $crust;
 }
 
@@ -499,13 +499,13 @@ div[class*="cardWarning-"] div[class*="warning_"] {
 #sticker-picker-tab-panel {
   /* --background-floating: #{$surface0};
 
-  + div[class|="slotsContainer"] {
+  + div[class^="slotsContainer"] {
     background-color: $surface0;
   }
 */
 
-  div[class|="tooltipContainer"] {
-    label[class|="label"] {
+  div[class^="tooltipContainer"] {
+    label[class^="label"] {
       &[class*="labelChecked_"] {
         background: -webkit-gradient(
           linear,
@@ -537,7 +537,7 @@ div[class*="cardWarning-"] div[class*="warning_"] {
 div[class*="keyboardShortcutsModal_"] {
   background-color: $mantle !important;
 
-  div[class|="keybindShortcut"] span[class|="key"] {
+  div[class^="keybindShortcut"] span[class^="key"] {
     color: $crust;
 
     svg g {
@@ -546,8 +546,8 @@ div[class*="keyboardShortcutsModal_"] {
   }
 }
 
-div[class|="planOptionClickableContainer"] {
-  div[class|="checkbox"] svg path {
+div[class^="planOptionClickableContainer"] {
+  div[class^="checkbox"][class*="checked"] svg path {
     fill: $crust !important;
   }
 
@@ -570,12 +570,12 @@ div[class|="planOptionClickableContainer"] {
 .react-datepicker__day--selected:after {
   background-color: $blue !important;
 }
-[class|="datePickerHint"] [class|="hintValue"] {
+[class^="datePickerHint"] [class^="hintValue"] {
   color: $crust !important;
 }
 
 div[class*="layerContainer_"] {
-  div[class|="control"] {
+  div[class^="control"] {
     div[class*="checked_"] {
       background-color: $green !important;
     }
@@ -622,41 +622,41 @@ div[class*="userProfileOuter_"] {
   div[aria-label="Early Verified Bot Developer"] {
     content: url("data:image/svg+xml,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m21.58 11.4-4.28-7.39-.35-.6h-9.91l-.35.6-4.27 7.39-.35.6.35.6 4.27 7.39.35.6h9.92l.35-.6 4.28-7.39.35-.6zm-13.07-1.03-1.63 1.63 1.63 1.63v2.73l-4.36-4.36 4.37-4.37v2.74zm3.12 6.93-2.04-.63 3.1-9.98 2.04.64zm3.86-.93v-2.73l1.63-1.64-1.63-1.63v-2.74l4.36 4.37z' fill='%23#{str-slice(inspect($blue), 2)}'/%3E%3C/svg%3E");
   }
-  div[class|="userPopoutOverlayBackground"]
-    > div[class|="scroller"]
-    > div[class|="section"]:first-child
-    > div[class|="buttonsContainer"]
+  div[class^="userPopoutOverlayBackground"]
+    > div[class^="scroller"]
+    > div[class^="section"]:first-child
+    > div[class^="buttonsContainer"]
     > button:nth-child(2) {
     background: $brand;
   }
 }
 
-[class*="layerContainer-"] [id|="slate_toolbar"] {
+[class*="layerContainer_"] [id^="slate_toolbar"] {
   background-color: var(--background-floating);
 
-  [class*="buttons-"] [class*="icon_"] {
+  [class*="buttons_"] [class*="icon_"] {
     color: $text;
   }
 }
 
-[class*="layerContainer-"] div[id="sort-and_view"] {
+[class*="layerContainer_"] div[id="sort_and_view"] {
   div[id="sort-and-view-reset-all"] [style="color: var(--text-normal);"]:hover {
     color: $crust !important;
   }
 }
 
-[class|="layerContainer"] [class|="quickswitcher"] [class*="badge_"] {
+[class^="layerContainer"] [class^="quickswitcher"] [class*="badge_"] {
   color: $crust;
 }
 
 // Clyde user popout
-div[class|="layerContainer"] div[aria-label="clyde"] {
-  div[class|="profileBadges"] div[class|="textBadge"] {
+div[class^="layerContainer"] div[aria-label="clyde"] {
+  div[class^="profileBadges"] div[class^="textBadge"] {
     background-color: $brand !important;
     color: $crust;
   }
 
-  button[class|="messageClydeButton"] {
+  button[class^="messageClydeButton"] {
     color: $text;
     background-color: $surface1;
 
@@ -667,14 +667,14 @@ div[class|="layerContainer"] div[aria-label="clyde"] {
 }
 
 // User popout edit button
-div[class|="layerContainer"] div[class|="pencilContainer"] {
-  svg[class|="editIcon"] {
+div[class^="layerContainer"] div[class^="pencilContainer"] {
+  svg[class^="editIcon"] {
     color: $text;
   }
 }
 
 // Keybinds popout
-div[class|="keyboardShortcutsModal"] span[class|="key"] {
+div[class^="keyboardShortcutsModal"] span[class^="key"] {
   color: $crust !important;
 
   svg g {
diff --git a/src/components/_sidebar.scss b/src/components/_sidebar.scss
index 45d2b5f..be2e9ac 100644
--- a/src/components/_sidebar.scss
+++ b/src/components/_sidebar.scss
@@ -1,9 +1,9 @@
 // "spine" svgs before threads
-svg[class|="spine"] {
+svg[class^="spine"] {
   color: $surface2;
 }
 
-div[class|="spineBorder"] {
+div[class^="spineBorder"] {
   background: $surface2;
 }
 
diff --git a/src/components/_variables.scss b/src/components/_variables.scss
index 87fc155..5f4a099 100644
--- a/src/components/_variables.scss
+++ b/src/components/_variables.scss
@@ -289,7 +289,7 @@ html {
     --background-floating: #{$surface0};
     --background-tertiary: #{lighten($base, 3%)};
 
-    svg[class|="activityIcon"] {
+    svg[class^="activityIcon"] {
       color: $subtext0;
     }