From eb5a3a39663aa0b4c4e8521268be25745b137d4e Mon Sep 17 00:00:00 2001
From: Lordmau5 <mail@lordmau5.com>
Date: Thu, 26 Sep 2019 20:20:18 +0200
Subject: [PATCH] Starting point for new Twitch UI changes (#658)

Things may be broken and they WILL be broken.
But it's a starting point :)
---
 src/modules/metadata.jsx                          | 4 ++--
 src/sites/twitch-twilight/modules/channel_bar.jsx | 2 +-
 src/sites/twitch-twilight/styles/channel.scss     | 4 ++++
 src/sites/twitch-twilight/styles/menu_button.scss | 4 ++--
 src/sites/twitch-twilight/styles/theme.scss       | 2 +-
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/modules/metadata.jsx b/src/modules/metadata.jsx
index ceb1ac86..57ae1cdf 100644
--- a/src/modules/metadata.jsx
+++ b/src/modules/metadata.jsx
@@ -689,7 +689,7 @@ export default class Metadata extends Module {
 
 					if ( def.popup && def.click ) {
 						el = (<span
-							class={`ffz-stat${fix ? ' ffz-fix-padding--left' : ''}`}
+							class={`ffz-stat${fix ? ' ffz-fix-padding--left' : ''} tw-inline-flex tw-align-items-center`}
 							data-key={key}
 							tip_content={tooltip}
 						>
@@ -706,7 +706,7 @@ export default class Metadata extends Module {
 
 					} else
 						btn = popup = el = (<button
-							class={`ffz-stat${fix ? ' ffz-fix-padding' : ''} tw-button ${cls}`}
+							class={`ffz-stat${fix ? ' ffz-fix-padding' : ''} tw-button tw-inline-flex tw-align-items-center ${cls}`}
 							data-key={key}
 							tip_content={tooltip}
 						>
diff --git a/src/sites/twitch-twilight/modules/channel_bar.jsx b/src/sites/twitch-twilight/modules/channel_bar.jsx
index b1c014e7..669b70dc 100644
--- a/src/sites/twitch-twilight/modules/channel_bar.jsx
+++ b/src/sites/twitch-twilight/modules/channel_bar.jsx
@@ -105,7 +105,7 @@ export default class ChannelBar extends Module {
 
 	updateMetadata(inst, keys) {
 		const container = this.fine.getChildNode(inst),
-			metabar = container?.querySelector?.('.channel-info-bar__action-container > .tw-flex,.channel-info-bar__content-right > .tw-align-items-start > .tw-flex:last-child');
+			metabar = container?.querySelector?.('.channel-info-bar__viewers-count-wrapper > .tw-flex:last-child');
 
 		if ( ! inst._ffz_mounted || ! metabar )
 			return;
diff --git a/src/sites/twitch-twilight/styles/channel.scss b/src/sites/twitch-twilight/styles/channel.scss
index d34c19f0..72c1de93 100644
--- a/src/sites/twitch-twilight/styles/channel.scss
+++ b/src/sites/twitch-twilight/styles/channel.scss
@@ -39,6 +39,10 @@
 	.ffz-stat.tw-button--text {
 		color: inherit;
 	}
+
+	.ffz-stat {
+		margin-left: 1rem;
+	}
 }
 
 .ffz--fade-in {
diff --git a/src/sites/twitch-twilight/styles/menu_button.scss b/src/sites/twitch-twilight/styles/menu_button.scss
index 63354453..8c81530b 100644
--- a/src/sites/twitch-twilight/styles/menu_button.scss
+++ b/src/sites/twitch-twilight/styles/menu_button.scss
@@ -6,8 +6,8 @@
 	}
 
 	.ffz-menu__extra-pill {
-		bottom: -1rem;
-		right: -.3rem;
+		bottom: -0.2rem;
+		right: 5.2rem;
 		font-size: 1.2rem;
 	}
 
diff --git a/src/sites/twitch-twilight/styles/theme.scss b/src/sites/twitch-twilight/styles/theme.scss
index c61c25db..f4eb6702 100644
--- a/src/sites/twitch-twilight/styles/theme.scss
+++ b/src/sites/twitch-twilight/styles/theme.scss
@@ -1422,7 +1422,7 @@
 	.tw-c-background-top-nav {
 		background-color: var(--ffz-color-26) !important;
 	}
-	.tw-c-background-chat {
+	.chat-room, .channel-root__right-column, .tw-c-background-chat {
 		background-color: var(--ffz-color-27) !important;
 	}
 	.tw-c-background-chat-alt {