4.8.2

Fixed: The Add Action menu for Chat Actions being too tall to fit within the FFZ Control Center at some resolutions.
Fixed: Styling for various hover-able UI elements.
Fixed: User Context Chat Actions set to show/hide based upon a message's deleted state not properly doing so.
Fixed: The FFZ emote menu appearing too tall at times.
Fixed: Remove debug logging.
Changed: The `Delete All` button in the Chat Actions editors will now not immediately clear all actions, but rather show another button asking the user to confirm.
Changed: Add a page rule for dashboard pop-out chat so that profiles can be made for it.
Changed: Update `CHAT_TYPES` from Twitch.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.8.1",
+  "version": "4.8.2",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "license": "Apache-2.0",
   "scripts": {

src/modules/chat/actions/index.jsx

@@ -284,7 +284,7 @@ export default class Actions extends Module {
 				reason_elements.push(<li class="tw-full-width tw-relative">
 					<a
 						href="#"
-						class="tw-block tw-full-width tw-interactable tw-interactable--inverted tw-interactive tw-pd-05"
+						class="tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive tw-pd-05"
 						onClick={click_fn(text)}
 					>
 						{text}
@@ -301,7 +301,7 @@ export default class Actions extends Module {
 				reason_elements.push(<li class="tw-full-width tw-relative">
 					<a
 						href="#"
-						class="tw-block tw-full-width tw-interactable tw-interactable--inverted tw-interactive tw-pd-05"
+						class="tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive tw-pd-05"
 						onClick={click_fn(rule)}
 					>
 						{rule}
@@ -546,7 +546,8 @@ export default class Actions extends Module {
 				if ( ! def || disp.disabled ||
 					(disp.mod_icons != null && disp.mod_icons !== !!mod_icons) ||
 					(disp.mod != null && disp.mod !== (current_level > msg_level)) ||
-					(disp.staff != null && disp.staff !== (u ? !!u.staff : false)) )
+					(disp.staff != null && disp.staff !== (u ? !!u.staff : false)) ||
+					(disp.deleted != null && disp.deleted !== !!msg.deleted) )
 					continue;
 
 				const has_color = def.colored && ap.color,
@@ -561,7 +562,7 @@ export default class Actions extends Module {
 					data-tooltip-type="action"
 					data-action={data.action}
 					data-options={data.options ? JSON.stringify(data.options) : null}
-					onClick={handle_click}
+					onClick={handle_click} // eslint-disable-line react/jsx-no-bind
 					onContextMenu={this.handleContext}
 				>
 					<span class="tw-button__text">

src/modules/main_menu/components/addon-list.vue

@@ -6,7 +6,7 @@
 			</h4>
 
 			<button
-				class="tw-button tw-button--hollow tw-mg-t-05"
+				class="tw-button ffz-button--hollow tw-c-text-overlay tw-mg-t-05"
 				@click="item.refresh()"
 			>
 				<span class="tw-button__icon tw-button__icon--left">
@@ -65,13 +65,12 @@
 								@keydown.enter="addUnlisted"
 							>
 							<button
-								class="tw-mg-l-05 tw-button tw-tooltip-wrapper"
+								class="tw-mg-l-05 tw-button"
 								@click="addUnlisted"
 							>
-								<span class="tw-button__text ffz-i-plus" />
+								<span class="tw-button__text ffz-i-plus">
-								<div class="tw-tooltip">
 									{{ t('setting.add', 'Add') }}
-								</div>
+								</span>
 							</button>
 						</div>
 					</div>

src/modules/main_menu/components/addon.vue

@@ -50,7 +50,7 @@
 					<button
 						v-if="external"
 						disabled
-						class="tw-button tw-button--hollow tw-button--disabled tw-tooltip-wrapper tw-mg-r-1"
+						class="tw-button ffz-button--hollow tw-button--disabled tw-tooltip-wrapper tw-mg-r-1"
 					>
 						<span class="tw-button__icon tw-button__icon--left">
 							<figure class="ffz-i-trash" />
@@ -64,7 +64,7 @@
 					</button>
 					<button
 						v-else
-						class="tw-button tw-button--hollow ffz--button-disable tw-mg-r-1"
+						class="tw-button ffz-button--hollow ffz--button-disable tw-mg-r-1"
 						@click="item.disableAddon(id)"
 					>
 						<span class="tw-button__icon tw-button__icon--left">
@@ -76,7 +76,7 @@
 					</button>
 					<button
 						v-if="addon.settings"
-						class="tw-button tw-button--hollow tw-mg-r-1"
+						class="tw-button ffz-button--hollow tw-mg-r-1"
 						@click="openSettings()"
 					>
 						<span class="tw-button__icon tw-button__icon--left">
@@ -89,7 +89,7 @@
 				</template>
 				<template v-else>
 					<button
-						class="tw-button tw-button--hollow ffz--button-enable tw-mg-r-1"
+						class="tw-button ffz-button--hollow ffz--button-enable tw-mg-r-1"
 						@click="item.enableAddon(id)"
 					>
 						<span class="tw-button__icon tw-button__icon--left">
@@ -104,7 +104,7 @@
 					v-if="addon.website"
 					:href="addon.website"
 					:title="addon.website"
-					class="tw-button tw-button--hollow tw-mg-r-1"
+					class="tw-button ffz-button--hollow tw-mg-r-1"
 					target="_blank"
 					rel="noopener"
 				>

src/modules/main_menu/components/badge-visibility.vue

@@ -12,7 +12,7 @@
 			<button
 				:disabled="! has_value"
 				:class="{'tw-button--disabled': ! has_value}"
-				class="tw-mg-l-05 tw-button tw-button--hollow tw-tooltip-wrapper"
+				class="tw-mg-l-05 tw-button ffz-button--hollow tw-tooltip-wrapper"
 				@click="clear"
 			>
 				<span class="tw-button__icon tw-button__icon--left">
@@ -66,7 +66,7 @@
 								/>
 							</section>
 							<button
-								class="tw-mg-t-05 tw-button tw-button--hollow tw-tooltip-wrapper"
+								class="tw-mg-t-05 tw-button ffz-button--hollow tw-tooltip-wrapper"
 								@click="reset(i.id)"
 							>
 								<span class="tw-button__text">Reset</span>

src/modules/main_menu/components/chat-actions.vue

@@ -110,6 +110,7 @@
 				{{ t('setting.actions.drag', 'Drag actions to re-order them.') }}
 			</div>
 			<div
+				v-if="! maybe_clear"
 				v-on-clickaway="closeAdd"
 				class="tw-relative"
 			>
@@ -130,7 +131,7 @@
 					dir="down-right"
 					size="sm"
 				>
-					<simplebar classes="language-select-menu__balloon">
+					<simplebar classes="ffz-mh-30">
 						<div class="tw-pd-y-1">
 							<template v-for="(preset, idx) in presets">
 								<div
@@ -142,7 +143,7 @@
 									v-else
 									:key="idx"
 									:disabled="preset.disabled"
-									class="tw-interactable tw-interactable--inverted tw-full-width"
+									class="tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive tw-full-width"
 									@click="add(preset.value)"
 								>
 									<div class="tw-flex tw-align-items-center tw-pd-y-05 tw-pd-x-1">
@@ -158,9 +159,9 @@
 				</balloon>
 			</div>
 			<button
-				v-if="val.length"
+				v-if="! maybe_clear && val.length"
 				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip-wrapper"
-				@click="clear"
+				@click="maybe_clear = true"
 			>
 				<span class="tw-button__text ffz-i-trash">
 					{{ t('setting.delete-all', 'Delete All') }}
@@ -169,6 +170,27 @@
 					{{ t('setting.actions.delete-all', "Delete all of this profile's actions.") }}
 				</span>
 			</button>
+			<button
+				v-if="maybe_clear"
+				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip-wrapper"
+				@click="doClear"
+			>
+				<span class="tw-button__text ffz-i-trash">
+					{{ t('setting.delete-all', 'Delete All') }}
+				</span>
+				<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					{{ t('setting.actions.delete-all', "Delete all of this profile's actions.") }}
+				</span>
+			</button>
+			<button
+				v-if="maybe_clear"
+				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip-wrapper"
+				@click="maybe_clear = false"
+			>
+				<span class="tw-button__text ffz-i-cancel">
+					{{ t('setting.cancel', 'Cancel') }}
+				</span>
+			</button>
 			<button
 				v-if="! val.length && has_default"
 				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip-wrapper"
@@ -224,6 +246,7 @@ export default {
 			is_deleted: false,
 			show_all: false,
 
+			maybe_clear: false,
 			add_open: false,
 		}
 	},
@@ -414,6 +437,11 @@ export default {
 	},
 
 	methods: {
+		doClear() {
+			this.maybe_clear = false;
+			this.clear();
+		},
+
 		closeAdd() {
 			this.add_open = false;
 		},

src/modules/main_menu/components/color-picker.vue

@@ -28,7 +28,7 @@
 		</div>
 		<div v-else class="tw-relative">
 			<button
-				class="tw-button tw-button--hollow ffz-color-preview"
+				class="tw-button tw-button--text ffz-color-preview"
 				@click="togglePicker"
 				@contextmenu.prevent="maybeResetColor"
 			>

src/modules/main_menu/components/filter-editor.vue

@@ -40,7 +40,7 @@
 		</div>
 		<button
 			v-else-if="canAddRule"
-			class="tw-button tw-button--hollow tw-mg-y-1 tw-full-width"
+			class="tw-button ffz-button--hollow tw-mg-y-1 tw-full-width"
 			@click="adding = true"
 		>
 			<span class="tw-button__text ffz-i-plus">

src/modules/main_menu/components/main-menu.vue

@@ -64,7 +64,7 @@
 					<simplebar classes="ffz-vertical-nav__items tw-full-width tw-flex-grow-1">
 						<header v-if="has_unseen" class="tw-border-b tw-pd-1">
 							<button
-								class="tw-button tw-button--hollow tw-full-width"
+								class="tw-button ffz-button--hollow tw-full-width"
 								@click="allRead"
 							>
 								<span class="tw-button__text">

src/modules/main_menu/components/profile-manager.vue

@@ -66,7 +66,7 @@
 				<button
 					v-for="(profile, idx) in import_profiles"
 					:key="idx"
-					class="tw-block tw-full-width tw-mg-y-05 tw-mg-r-1 tw-pd-05 tw-button tw-button--hollow tw-tooltip-wrapper"
+					class="tw-block tw-full-width tw-mg-y-05 tw-mg-r-1 tw-pd-05 tw-button ffz-button--hollow tw-c-text-overlay tw-tooltip-wrapper"
 					@click="importProfile(profile)"
 				>
 					<span class="tw-button__text tw-c-text-overlay">
@@ -95,7 +95,7 @@
 				</h4>
 
 				<button
-					class="tw-block tw-full-width tw-mg-y-05 tw-mg-r-1 tw-pd-05 tw-button tw-button--hollow"
+					class="tw-block tw-full-width tw-mg-y-05 tw-mg-r-1 tw-pd-05 tw-button ffz-button--hollow tw-c-text-overlay"
 					@click="confirmImport(true)"
 				>
 					<span class="tw-button__text tw-c-text-overlay ffz-i-ok">
@@ -104,7 +104,7 @@
 				</button>
 
 				<button
-					class="tw-block tw-full-width tw-mg-y-05 tw-mg-r-1 tw-pd-05 tw-button tw-button--hollow"
+					class="tw-block tw-full-width tw-mg-y-05 tw-mg-r-1 tw-pd-05 tw-button ffz-button--hollow tw-c-text-overlay"
 					@click="confirmImport(false)"
 				>
 					<span class="tw-button__text tw-c-text-overlay ffz-i-cancel">

src/modules/metadata.jsx

@@ -359,7 +359,7 @@ export default class Metadata extends Module {
 					let btn, popup;
 					let cls = maybe_call(def.button, this, data);
 					if ( typeof cls !== 'string' )
-						cls = `tw-button--${cls ? 'hollow' : 'text'}`;
+						cls = cls ? 'ffz-button--hollow' : 'tw-button--text';
 
 					if ( typeof icon === 'string' )
 						icon = (<span class="tw-button__icon tw-button__icon--left"><figure class={icon} /></span>);
@@ -572,7 +572,7 @@ export default class Metadata extends Module {
 				if ( btn ) {
 					let cls = maybe_call(def.button, this, data);
 					if ( typeof cls !== 'string' )
-						cls = `tw-button--${cls ? 'hollow' : 'text'}`;
+						cls = cls ? 'ffz-button--hollow' : 'tw-button--text';
 
 					if ( btn._class !== cls ) {
 						btn._class = cls;
@@ -661,7 +661,7 @@ export default class Metadata extends Module {
 					let btn, popup;
 					let cls = maybe_call(def.button, this, data);
 					if ( typeof cls !== 'string' )
-						cls = `tw-button--${cls ? 'hollow' : 'text'}`;
+						cls = cls ? 'ffz-button--hollow' : 'tw-button--text';
 
 					const fix = cls === 'tw-button--text';
 
@@ -674,7 +674,7 @@ export default class Metadata extends Module {
 							data-key={key}
 							tip_content={tooltip}
 						>
-							{btn = (<button class={`tw-button ${cls}`}>
+							{btn = (<button class={`tw-button ${cls} ffz-has-stat-arrow`}>
 								{icon}
 								{stat = (<span class="ffz-stat-text tw-button__text" />)}
 							</button>)}

src/settings/providers.js

@@ -171,6 +171,12 @@ export class LocalStorageProvider extends SettingsProvider {
 	}
 
 	set(key, value) {
+		if ( value === undefined ) {
+			if ( this.has(key) )
+				this.delete(key);
+			return;
+		}
+
 		this._cached.set(key, value);
 		localStorage.setItem(this.prefix + key, JSON.stringify(value));
 		this.broadcast({type: 'set', key});

src/sites/twitch-twilight/index.js

@@ -173,6 +173,7 @@ Twilight.KNOWN_MODULES = {
 Twilight.CHAT_ROUTES = [
 	'collection',
 	'popout',
+	'dash-chat',
 	'video',
 	'user-video',
 	'user-clip',
@@ -193,6 +194,7 @@ Twilight.ROUTE_NAMES = {
 	'dir-all': 'Browse Live Channels',
 	'dash': 'Dashboard',
 	'popout': 'Popout Chat',
+	'dash-chat': 'Dashboard Popout Chat',
 	'user-video': 'Channel Video'
 };
 
@@ -215,6 +217,7 @@ Twilight.ROUTES = {
 	//'dash-automod': '/:userName/dashboard/settings/automod',
 	'event': '/event/:eventName',
 	'popout': '/popout/:userName/chat',
+	'dash-chat': '/popout/:userName/dashboard/live/chat',
 	'video': '/videos/:videoID',
 	'user-video': '/:userName/video/:videoID',
 	'user-videos': '/:userName/videos/:filter?',

src/sites/twitch-twilight/modules/chat/emote_menu.jsx

@@ -388,7 +388,7 @@ export default class EmoteMenu extends Module {
 				return (<button
 					key={data.code}
 					data-tone={tone}
-					class="tw-interactive tw-block tw-full-width tw-interactable tw-interactable--inverted tw-pd-y-05 tw-pd-x-2"
+					class="tw-interactive tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive tw-pd-y-05 tw-pd-x-2"
 					onClick={this.clickTone}
 				>
 					{this.renderEmoji(data)}
@@ -432,7 +432,7 @@ export default class EmoteMenu extends Module {
 
 				return (<div ref={this.saveRef} class="ffz--emoji-tone-picker tw-relative tw-mg-l-1">
 					<button
-						class="tw-interactive tw-button tw-button--dropmenu tw-button--hollow"
+						class="tw-interactive tw-button tw-button--dropmenu ffz-button--hollow"
 						onClick={this.onClick}
 						onMouseEnter={this.onMouseEnter}
 					>
@@ -929,6 +929,7 @@ export default class EmoteMenu extends Module {
 			}
 
 			pickTone(tone) {
+				tone = tone || null;
 				t.settings.provider.set('emoji-tone', tone);
 
 				this.setState(this.filterState(
@@ -1712,7 +1713,7 @@ export default class EmoteMenu extends Module {
 							<div class="emote-picker__tab-nav-container tw-flex tw-border-t tw-c-background-alt">
 								<div class={`emote-picker-tab-item${tab === 'fav' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
 									<button
-										class="ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--inverted tw-interactive"
+										class="ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive"
 										id="emote-picker__fav"
 										data-tab="fav"
 										data-tooltip-type="html"
@@ -1726,7 +1727,7 @@ export default class EmoteMenu extends Module {
 								</div>
 								{this.state.has_channel_tab && <div class={`emote-picker-tab-item${tab === 'channel' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
 									<button
-										class="ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--inverted tw-interactive"
+										class="ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive"
 										id="emote-picker__channel"
 										data-tab="channel"
 										data-tooltip-type="html"
@@ -1740,7 +1741,7 @@ export default class EmoteMenu extends Module {
 								</div>}
 								<div class={`emote-picker-tab-item${tab === 'all' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
 									<button
-										class="ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--inverted tw-interactive"
+										class="ffz-tooltip tw-block tw-full-width ttw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive"
 										id="emote-picker__all"
 										data-tab="all"
 										data-tooltip-type="html"
@@ -1754,7 +1755,7 @@ export default class EmoteMenu extends Module {
 								</div>
 								{this.state.has_emoji_tab && <div class={`emote-picker-tab-item${tab === 'emoji' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
 									<button
-										class="ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--inverted tw-interactive"
+										class="ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive"
 										id="emote-picker__emoji"
 										data-tab="emoji"
 										data-tooltip-type="html"
@@ -1769,7 +1770,7 @@ export default class EmoteMenu extends Module {
 								<div class="tw-flex-grow-1" />
 								{!loading && (<div class="emote-picker-tab-item tw-relative">
 									<button
-										class="ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--inverted tw-interactive"
+										class="ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive"
 										data-tooltip-type="html"
 										data-title={t.i18n.t('emote-menu.refresh', 'Refresh Data')}
 										onClick={this.clickRefresh}

src/sites/twitch-twilight/modules/chat/index.js

@@ -91,6 +91,7 @@ const CHAT_TYPES = make_enum(
 	'GiftPaidUpgrade',
 	'AnonGiftPaidUpgrade',
 	'PrimePaidUpgrade',
+	'ExtendSubscription',
 	'SubGift',
 	'AnonSubGift',
 	'Clear',

src/sites/twitch-twilight/modules/chat/settings_menu.jsx

@@ -57,7 +57,7 @@ export default class SettingsMenu extends Module {
 					this.ffzPauseClick = () => this.setState({ffzPauseMenu: ! this.state.ffzPauseMenu});
 
 				val.props.children.push(<div class="tw-full-width tw-relative">
-					<button class="tw-block tw-border-radius-medium tw-full-width tw-interactable tw-interactable--inverted tw-interactive" onClick={this.ffzSettingsClick}>
+					<button class="tw-block tw-border-radius-medium tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive" onClick={this.ffzSettingsClick}>
 						<div class="tw-align-items-center tw-flex tw-pd-05 tw-relative">
 							<div class="tw-flex-grow-1">
 								{t.i18n.t('site.menu_button', 'FrankerFaceZ Control Center')}
@@ -85,7 +85,7 @@ export default class SettingsMenu extends Module {
 
 				val.props.children.push(<div class="tw-full-width tw-relative">
 					<button
-						class="tw-block tw-border-radius-medium tw-full-width tw-interactable tw-interactable--inverted tw-interactive"
+						class="tw-block tw-border-radius-medium tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive"
 						onClick={this.ffzPauseClick}
 					>
 						<div class="tw-align-items-center tw-flex tw-pd-05 tw-relative">
@@ -98,21 +98,6 @@ export default class SettingsMenu extends Module {
 					</button>
 				</div>);
 
-				/*val.props.children.push(<div class="tw-mg-t-1">
-					<button
-						class="tw-block tw-full-width tw-interactable tw-interactable--base tw-interactive"
-						onClick={this.ffzPauseClick}
-					>
-						<div class="tw-flex tw-justify-content-between tw-pd-y-05">
-							{t.i18n.t('chat.settings.pause', 'Pause Chat')}
-							<div>
-								{reason}
-								<figure class="tw-svg ffz-i-right-dir" />
-							</div>
-						</div>
-					</button>
-				</div>)*/
-
 				return val;
 			}
 

src/sites/twitch-twilight/modules/featured-follow.vue

@@ -6,7 +6,7 @@
 			<div class="tw-flex-grow-1 tw-pd-x-2" />
 			<button
 				v-if="hasUpdate"
-				class="ffz--featured-follow-update tw-button tw-button--hollow"
+				class="ffz--featured-follow-update tw-button ffz-button--hollow"
 				@click="refresh"
 			>
 				<span class="tw-button__icon tw-button__icon--left">

src/sites/twitch-twilight/modules/host-options.vue

@@ -50,7 +50,7 @@
 				<div class="tw-flex-grow-1 tw-pd-x-2" />
 				<button
 					:class="{'tw-button--disabled': addedToHosts}"
-					class="tw-button tw-button--hollow tw-mg-x-05"
+					class="tw-button ffz-button--hollow tw-mg-x-05"
 					@click="addToAutoHosts"
 				>
 					<span class="tw-button__text">{{ t('metadata.host.add-channel', 'Add To Auto Host') }}</span>

src/sites/twitch-twilight/modules/layout.js

@@ -8,7 +8,7 @@ import Module from 'utilities/module';
 import {has} from 'utilities/object';
 
 const PORTRAIT_ROUTES = ['user', 'video', 'user-video', 'user-clip', 'user-videos', 'user-clips', 'user-collections', 'user-events', 'user-followers', 'user-following'];
-const MINIMAL_ROUTES = ['popout', 'embed-chat'];
+const MINIMAL_ROUTES = ['popout', 'embed-chat', 'dash-chat'];
 
 export default class Layout extends Module {
 	constructor(...args) {

src/sites/twitch-twilight/styles/chat.scss

@@ -181,6 +181,7 @@
     }
 
     .emote-picker__tab-content {
+        height: unset !important;
         max-height: 50rem;
     }
 

src/sites/twitch-twilight/styles/theme.scss

@@ -154,26 +154,27 @@
 			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 		}
 	}
+	.ffz-button--hollow,
 	.tw-button--hollow {
-		border-color: var(--ffz-color-8);
+		border-color: var(--ffz-color-8) !important;
-		background-color: transparent;
+		background-color: transparent !important;
-		color: var(--ffz-color-1);
+		color: var(--ffz-color-1) !important;
 		&:hover {
-			border-color: var(--ffz-color-11);
+			border-color: var(--ffz-color-11) !important;
-			background-color: var(--ffz-color-9);
+			background-color: var(--ffz-color-9) !important;
-			color: var(--ffz-color-10);
+			color: var(--ffz-color-10) !important;
 		}
 		&:focus {
-			border-color: var(--ffz-color-11);
+			border-color: var(--ffz-color-11) !important;
-			background-color: var(--ffz-color-9);
+			background-color: var(--ffz-color-9) !important;
-			color: var(--ffz-color-10);
+			color: var(--ffz-color-10) !important;
-			box-shadow: 0 0 6px 0 var(--ffz-color-5);
+			box-shadow: 0 0 6px 0 var(--ffz-color-5) !important;
 		}
 		&:active {
-			border-color: var(--ffz-color-13);
+			border-color: var(--ffz-color-13) !important;
-			background-color: var(--ffz-color-12);
+			background-color: var(--ffz-color-12) !important;
-			color: var(--ffz-color-10);
+			color: var(--ffz-color-10) !important;
-			box-shadow: 0 0 6px 0 var(--ffz-color-5);
+			box-shadow: 0 0 6px 0 var(--ffz-color-5) !important;
 		}
 	}
 	.tw-button--alert {

src/std-components/autocomplete.vue

@@ -46,7 +46,7 @@
 						:id="'ffz-autocomplete-item-' + id + '-' + idx"
 						:key="has(item, 'id') ? item.id : idx"
 						:class="{'tw-interactable--hover' : idx === index}"
-						class="tw-block tw-full-width tw-interactable tw-interactable--inverted tw-interactive"
+						class="tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive"
 						tabindex="-1"
 						data-selectable="true"
 						@mouseenter="index = idx"

src/std-components/icon-picker.vue

@@ -48,7 +48,7 @@
 							:aria-checked="val === i[0]"
 							:class="{'tw-interactable--selected': val === i[0]}"
 							:data-title="i[1]"
-							class="ffz-tooltip ffz-icon tw-interactable tw-interactable--inverted"
+							class="ffz-tooltip ffz-icon tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive"
 							role="radio"
 							tabindex="0"
 							@keydown.space.stop.prevent=""

src/utilities/tooltip.js

@@ -412,7 +412,6 @@ export function makeReference(x, y, height=0, width=0) {
 		clientHeight: height
 	};
 
-	console.log('makeReference', out);
 	return out;
 }
 

src/utilities/twitch-data.js

@@ -57,7 +57,8 @@ export default class TwitchData extends Module {
 	constructor(...args) {
 		super(...args);
 
-		this.inject('site');
+		this.site = this.parent;
+
 		this.inject('site.apollo');
 		this.inject('site.web_munch');
 

styles/widgets.scss

@@ -256,14 +256,14 @@ textarea.tw-input {
 	}
 }
 
-@mixin button-colors($color, $text, $shadow) {
+@mixin button-colors($color, $border, $text, $shadow) {
-	&:hover, &:focus {
+	&:hover, &:focus, &:active {
 		background: $color !important;
-		border-color: $color !important;
+		border-color: $border !important;
 		color: $text !important;
 	}
 
-	&:focus {
+	&:focus, &:active {
 		box-shadow: 0 0 $shadow $color !important;
 	}
 }
@@ -273,12 +273,28 @@ textarea.tw-input {
 	color: #fff !important;
 }
 
+.ffz-button--hollow {
+	border-color: #dad8de !important;
+	background-color: transparent !important;
+	color: #000 !important;
+
+	@include button-colors(#6441a4, #9a7fcc, #fff, #7d5bbc);
+
+	.tw-root--theme-dark & {
+		border-color: #424242 !important;
+		color: #dadada !important;
+
+		@include button-colors(#7d5bbe, #9a7fcc, #eeeeee, #7d5bbe)
+	}
+
+}
+
 .ffz--button-enable {
-	@include button-colors(#007600, #fff, 6px);
+	@include button-colors(#007600, #007600, #fff, 6px);
 }
 
 .ffz--button-disable {
-	@include button-colors(#bd0f0f, #fff, 6px);
+	@include button-colors(#bd0f0f, #bd0f0f, #fff, 6px);
 }
 
 .ffz--example-report {
@@ -299,4 +315,9 @@ textarea.tw-input {
 	position: absolute;
 	top: 1rem;
 	right: 3rem;
+}
+
+
+.ffz-mh-30 {
+	max-height: 30rem;
 }

styles/widgets/profile-selector.scss

@@ -59,7 +59,7 @@
 	&:hover {
 		background: rgba(100, 65, 164, .05);
 
-		.tw-theme-dark & {
+		.tw-root--theme-dark & {
 			background: rgba(100, 65, 164, .2);
 		}
 	}