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>
This commit is contained in:
Nuckyz 2023-04-05 17:44:03 -03:00 committed by GitHub
parent 38f3aac98d
commit 9d742094cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 6 deletions

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

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