4.9.7

* Added: Initial Legal page to the Control Center with information about what third-parties the client contacts during normal operations, as well as a link to our Terms of Service.
* Fixed: Coloring of Enable and Disable buttons on the `Add-ons` list.

package.json

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

src/modules/main_menu/components/addon.vue

@@ -64,7 +64,7 @@
 					</button>
 					<button
 						v-else
-						class="tw-button ffz-button--hollow ffz--button-disable tw-mg-r-1"
+						class="tw-button ffz--button-disable tw-mg-r-1"
 						@click="item.disableAddon(id)"
 					>
 						<span class="tw-button__icon tw-button__icon--left">
@@ -89,7 +89,7 @@
 				</template>
 				<template v-else>
 					<button
-						class="tw-button ffz-button--hollow ffz--button-enable tw-mg-r-1"
+						class="tw-button ffz--button-enable tw-mg-r-1"
 						@click="item.enableAddon(id)"
 					>
 						<span class="tw-button__icon tw-button__icon--left">

src/modules/main_menu/components/legal-page.vue

@@ -0,0 +1,20 @@
+<template lang="html">
+	<div class="ffz--home tw-border-t tw-pd-y-1">
+		<markdown :source="md" />
+	</div>
+</template>
+
+<script>
+
+import LEGAL_MD from '../legal.md';
+
+export default {
+	props: ['item', 'context'],
+
+	data() {
+		return {
+			md: LEGAL_MD
+		}
+	}
+}
+</script>

src/modules/main_menu/index.js

@@ -87,6 +87,12 @@ export default class MainMenu extends Module {
 			component: 'changelog'
 		});
 
+		this.settings.addUI('legal', {
+			path: 'Home > Legal @{"sort": 1000}',
+			component: 'legal-page',
+			force_seen: true
+		});
+
 		this.on('settings:added-definition', (key, definition) => {
 			this._addDefinitionToTree(key, definition);
 			this.scheduleUpdate();
@@ -400,7 +406,7 @@ export default class MainMenu extends Module {
 						tok.search_terms = terms.map(format_term).join('\n');
 
 						if ( settings_seen ) {
-							if ( ! settings_seen.includes(setting_key) ) {
+							if ( ! settings_seen.includes(setting_key) && ! tok.force_seen ) {
 								let i = tok;
 								while(i) {
 									i.unseen = (i.unseen || 0) + 1;

src/modules/main_menu/legal.md

@@ -0,0 +1,59 @@
+### Policies
+
+Please find our [Terms of Service](https://www.frankerfacez.com/terms) on our main
+website at https://www.frankerfacez.com/terms
+
+## Third-party Services
+
+### Sentry
+
+This client uses Sentry.io for automatic error reporting. When an error occurs, a report
+is automatically sent to Sentry's API with information about the error and the state of
+the client at the time to assist us with reproducing and fixing the issue. We attempt to filter personal information such as API keys from error reports before they
+are submitted to Sentry.
+
+To see an example of the submitted data or to opt-out of automatic error reporting, please
+view the settings available under `Data Management > Reporting`.
+
+### Link Information
+
+This client does not directly contact third-party APIs and websites when gathering data
+for use in rendering rich content embeds and tool-tips. No personal information is sent
+to third-party APIs or websites when gathering information.
+
+Clients request link information from our own API, sending only the exact link requested
+without any context such as the channel the client is viewing at the time. Our server
+makes requests from third-party APIs and websites on the behalf of the client and formats
+the data for clients to display.
+
+We use the APIs of the following services for scraping link information:
+
+* Discord ([Terms of Service](https://discordapp.com/terms), [Developer Terms of Service](https://discordapp.com/developers/docs/legal))
+* Gyazo ([Terms of Service](https://gyazo.com/doc/terms))
+* Imgur ([Terms of Service](https://imgur.com/tos))
+* Pretzel Rocks ([Terms of Service](https://www.pretzel.rocks/terms))
+* Splits.io
+* Strawpoll.me ([Terms of Service](https://www.curse.com/terms-of-service))
+* Twitch ([Terms of Service](https://www.twitch.tv/p/legal/terms-of-service/), [Developer Agreement](https://www.twitch.tv/p/legal/developer-agreement/))
+* Twitter ([Terms of Service](https://twitter.com/en/tos), [Developer Terms](https://developer.twitter.com/en/more/developer-terms.html))
+* xkcd
+* YouTube ([Terms of Service](https://www.youtube.com/t/terms), [Developer Terms of Service](https://developers.google.com/youtube/terms/developer-policies))
+
+In addition to scraping via APIs, our link information reads standard metadata tags from
+HTML responses to support a wide array of other websites.
+
+### Link Thumbnails
+
+Thumbnail images for links are proxied through our own servers to avoid leaking user IP
+addresses or other HTTP headers to third-party servers. We do not proxy thumbnail images
+for a specific, trusted subset of websites. Websites we do not proxy image requests for
+are as follows:
+
+* Discord
+* Gyazo
+* Imgur
+* Pretzel Rocks
+* Twitch
+* Twitter
+* xkcd
+* YouTube

styles/widgets.scss

@@ -290,15 +290,30 @@ textarea.tw-input {
 
 		@include button-colors(#7d5bbe, #9a7fcc, #eeeeee, #7d5bbe)
 	}
+}
 
+.ffz--button-enable,
+.ffz--button-disable {
+	border-color: #dad8de !important;
+	background-color: transparent !important;
+	color: #000 !important;
+
+	.tw-root--theme-dark & {
+		border-color: #424242 !important;
+		color: #dadada !important;
+	}
 }
 
 .ffz--button-enable {
-	@include button-colors(#007600, #007600, #fff, 6px);
+	&, .tw-root--theme-dark & {
+		@include button-colors(#007600, #007600, #fff, 6px);
+	}
 }
 
 .ffz--button-disable {
-	@include button-colors(#bd0f0f, #bd0f0f, #fff, 6px);
+	&, .tw-root--theme-dark & {
+		@include button-colors(#bd0f0f, #bd0f0f, #fff, 6px);
+	}
 }
 
 .ffz--example-report {