Opt into analytics by default during the beta

src/settings/SettingsModal.module.css

@@ -20,7 +20,7 @@ limitations under the License.
 }
 
 .tabContainer {
-  margin: 27px 16px;
+  padding: 27px 20px;
 }
 
 .fieldRowText {
@@ -33,5 +33,5 @@ The "Developer" item in the tab bar can be toggled.
 Without a defined width activating the developer tab makes the tab container jump to the right.
 */
 .tabLabel {
-  width: 80px;
+  min-width: 80px;
 }

src/settings/SettingsModal.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from "react";
 import { Item } from "@react-stately/collections";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 import { Modal } from "../Modal";
 import styles from "./SettingsModal.module.css";
@@ -39,8 +39,8 @@ import {
 import { FieldRow, InputField } from "../input/Input";
 import { Button } from "../button";
 import { useDownloadDebugLog } from "./submit-rageshake";
-import { Body } from "../typography/Typography";
-import { optInDescription } from "../analytics/AnalyticsOptInDescription";
+import { Body, Caption } from "../typography/Typography";
+import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 
 interface Props {
   isOpen: boolean;
@@ -71,6 +71,17 @@ export const SettingsModal = (props: Props) => {
 
   const downloadDebugLog = useDownloadDebugLog();
 
+  const optInDescription = (
+    <Caption>
+      <Trans>
+        <AnalyticsNotice />
+        <br />
+        You may withdraw consent by unchecking this box. If you are currently in
+        a call, this setting will take effect at the end of the call.
+      </Trans>
+    </Caption>
+  );
+
   return (
     <Modal
       title={t("Settings")}
@@ -187,7 +198,7 @@ export const SettingsModal = (props: Props) => {
               id="optInAnalytics"
               type="checkbox"
               checked={optInAnalytics}
-              description={optInDescription()}
+              description={optInDescription}
               onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                 setOptInAnalytics(event.target.checked)
               }

src/settings/useSetting.ts

@@ -87,9 +87,15 @@ export const useSpatialAudio = (): [boolean, (val: boolean) => void] => {
 };
 
 export const useShowInspector = () => useSetting("show-inspector", false);
-export const useOptInAnalytics = () => useSetting("opt-in-analytics", false);
+
+// null = undecided
+export const useOptInAnalytics = () =>
+  useSetting<boolean | null>("opt-in-analytics", null);
+
 export const useKeyboardShortcuts = () =>
   useSetting("keyboard-shortcuts", true);
+
 export const useNewGrid = () => useSetting("new-grid", false);
+
 export const useDeveloperSettingsTab = () =>
   useSetting("developer-settings-tab", false);