Checkbox for analytics opt in & settings redesign (#934)

src/home/RegisteredView.tsx

@@ -42,6 +42,8 @@ import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { Title } from "../typography/Typography";
 import { Form } from "../form/Form";
 import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
+import { useOptInAnalytics } from "../settings/useSetting";
+import { optInDescription } from "../analytics/AnalyticsOptInDescription";
 
 interface Props {
   client: MatrixClient;
@@ -52,6 +54,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
   const [callType, setCallType] = useState(CallType.Video);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error>();
+  const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
   const history = useHistory();
   const { t } = useTranslation();
   const { modalState, modalProps } = useModalTriggerState();
@@ -141,6 +144,15 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
                 {loading ? t("Loading…") : t("Go")}
               </Button>
             </FieldRow>
+            <InputField
+              id="optInAnalytics"
+              type="checkbox"
+              checked={optInAnalytics}
+              description={optInDescription()}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                setOptInAnalytics(event.target.checked)
+              }
+            />
             {error && (
               <FieldRow className={styles.fieldRow}>
                 <ErrorMessage error={error} />