From 9d742094cbb41dd42ce5cddbaf89e4fc2836f3a9 Mon Sep 17 00:00:00 2001
From: Nuckyz <61953774+Nuckyz@users.noreply.github.com>
Date: Wed, 5 Apr 2023 17:44:03 -0300
Subject: [PATCH] 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>
---
 .../components/HiddenChannelLockScreen.tsx               | 3 ++-
 src/plugins/showHiddenChannels/style.css                 | 9 ++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/plugins/showHiddenChannels/components/HiddenChannelLockScreen.tsx b/src/plugins/showHiddenChannels/components/HiddenChannelLockScreen.tsx
index 9050037..291a767 100644
--- a/src/plugins/showHiddenChannels/components/HiddenChannelLockScreen.tsx
+++ b/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} />
 
diff --git a/src/plugins/showHiddenChannels/style.css b/src/plugins/showHiddenChannels/style.css
index 01903ce..c90e8b7 100644
--- a/src/plugins/showHiddenChannels/style.css
+++ b/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;