ShowHiddenChannels: Use Discord's new overlay vars (#795)

* Fix SHC css for new Discord vars

* I'm dumb

* improvements to work with themes

---------

Co-authored-by: V <vendicated@riseup.net>

src/plugins/showHiddenChannels/components/HiddenChannelLockScreen.tsx

@@ -84,6 +84,7 @@ export function setChannelBeginHeaderComponent(component: ComponentType<any>) {
 }
 
 const ChatScrollClasses = findByPropsLazy("auto", "content", "scrollerBase");
+const ChatClasses = findByPropsLazy("chat", "content", "noChat", "chatContent");
 const TagComponent = LazyComponent(() => find(m => {
     if (typeof m !== "function") return false;
 
@@ -159,7 +160,7 @@ function HiddenChannelLockScreen({ channel }: { channel: ExtendedChannel; }) {
     }
 
     return (
-        <div className={ChatScrollClasses.auto + " " + "shc-lock-screen-outer-container"}>
+        <div className={ChatScrollClasses.auto + " " + ChatScrollClasses.customTheme + " " + ChatClasses.chatContent + " " + "shc-lock-screen-outer-container"}>
             <div className="shc-lock-screen-container">
                 <img className="shc-lock-screen-logo" src={HiddenChannelLogo} />
 

src/plugins/showHiddenChannels/style.css

@@ -1,5 +1,4 @@
 .shc-lock-screen-outer-container {
-    background-color: var(--background-primary);
     overflow: hidden scroll;
     flex: 1 1 auto;
     height: 100%;
@@ -41,14 +40,14 @@
 
 .shc-lock-screen-topic-container {
     color: var(--text-normal);
-    background-color: var(--background-secondary);
+    background: var(--bg-overlay-3, var(--background-secondary));
     border-radius: 5px;
     padding: 10px;
     max-width: 70vw;
 }
 
 .shc-lock-screen-tags-container {
-    background-color: var(--background-secondary);
+    background: var(--bg-overlay-3, var(--background-secondary));
     border-radius: 5px;
     padding: 10px;
     max-width: 70vw;
@@ -84,7 +83,7 @@
 }
 
 .shc-lock-screen-default-emoji-container > [class^="emojiContainer"] {
-    background-color: var(--background-secondary);
+    background: var(--bg-overlay-3, var(--background-secondary));
     border-radius: 8px;
     padding: 3px 4px;
     margin-left: 5px;
@@ -94,7 +93,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: var(--background-secondary);
+    background: var(--bg-overlay-3, var(--background-secondary));
     border-radius: 5px;
     padding: 10px;
     max-width: 70vw;