Apply prettier formatting

src/components/views/user-onboarding/UserOnboardingButton.tsx

@@ -42,9 +42,7 @@ export function UserOnboardingButton({ selected, minimized }: Props) {
         return null;
     }
 
-    return (
-        <UserOnboardingButtonInternal selected={selected} minimized={minimized} />
-    );
+    return <UserOnboardingButtonInternal selected={selected} minimized={minimized} />;
 }
 
 function UserOnboardingButtonInternal({ selected, minimized }: Props) {
@@ -67,23 +65,21 @@ function UserOnboardingButtonInternal({ selected, minimized }: Props) {
     return (
         <AccessibleButton
             className={classNames("mx_UserOnboardingButton", {
-                "mx_UserOnboardingButton_selected": selected,
-                "mx_UserOnboardingButton_minimized": minimized,
+                mx_UserOnboardingButton_selected: selected,
+                mx_UserOnboardingButton_minimized: minimized,
             })}
-            onClick={onClick}>
-            { !minimized && (
+            onClick={onClick}
+        >
+            {!minimized && (
                 <>
                     <div className="mx_UserOnboardingButton_content">
                         <Heading size="h4" className="mx_Heading_h4">
-                            { _t("Welcome") }
+                            {_t("Welcome")}
                         </Heading>
-                        <AccessibleButton
-                            className="mx_UserOnboardingButton_close"
-                            onClick={onDismiss}
-                        />
+                        <AccessibleButton className="mx_UserOnboardingButton_close" onClick={onDismiss} />
                     </div>
                 </>
-            ) }
+            )}
         </AccessibleButton>
     );
 }

src/components/views/user-onboarding/UserOnboardingFeedback.tsx

@@ -33,14 +33,14 @@ export function UserOnboardingFeedback() {
         <div className="mx_UserOnboardingFeedback">
             <div className="mx_UserOnboardingFeedback_content">
                 <Heading size="h4" className="mx_UserOnboardingFeedback_title">
-                    { _t("How are you finding %(brand)s so far?", {
+                    {_t("How are you finding %(brand)s so far?", {
                         brand: SdkConfig.get("brand"),
-                    }) }
+                    })}
                 </Heading>
                 <div className="mx_UserOnboardingFeedback_text">
-                    { _t("We’d appreciate any feedback on how you’re finding %(brand)s.", {
+                    {_t("We’d appreciate any feedback on how you’re finding %(brand)s.", {
                         brand: SdkConfig.get("brand"),
-                    }) }
+                    })}
                 </div>
             </div>
             <AccessibleButton
@@ -52,7 +52,7 @@ export function UserOnboardingFeedback() {
                     });
                 }}
             >
-                { _t("Feedback") }
+                {_t("Feedback")}
             </AccessibleButton>
         </div>
     );

src/components/views/user-onboarding/UserOnboardingHeader.tsx

@@ -26,7 +26,7 @@ import Heading from "../../views/typography/Heading";
 
 const onClickSendDm = (ev: ButtonEvent) => {
     PosthogTrackers.trackInteraction("WebUserOnboardingHeaderSendDm", ev);
-    defaultDispatcher.dispatch({ action: 'view_create_chat' });
+    defaultDispatcher.dispatch({ action: "view_create_chat" });
 };
 
 interface Props {
@@ -42,26 +42,34 @@ export function UserOnboardingHeader({ useCase }: Props) {
     switch (useCase) {
         case UseCase.PersonalMessaging:
             title = _t("Secure messaging for friends and family");
-            description = _t("With free end-to-end encrypted messaging, and unlimited voice and video calls, " +
-                "%(brand)s is a great way to stay in touch.", {
-                brand: SdkConfig.get("brand"),
-            });
+            description = _t(
+                "With free end-to-end encrypted messaging, and unlimited voice and video calls, " +
+                    "%(brand)s is a great way to stay in touch.",
+                {
+                    brand: SdkConfig.get("brand"),
+                },
+            );
             image = require("../../../../res/img/user-onboarding/PersonalMessaging.png");
             actionLabel = _t("Start your first chat");
             break;
         case UseCase.WorkMessaging:
             title = _t("Secure messaging for work");
-            description = _t("With free end-to-end encrypted messaging, and unlimited voice and video calls," +
-                " %(brand)s is a great way to stay in touch.", {
-                brand: SdkConfig.get("brand"),
-            });
+            description = _t(
+                "With free end-to-end encrypted messaging, and unlimited voice and video calls," +
+                    " %(brand)s is a great way to stay in touch.",
+                {
+                    brand: SdkConfig.get("brand"),
+                },
+            );
             image = require("../../../../res/img/user-onboarding/WorkMessaging.png");
             actionLabel = _t("Find your co-workers");
             break;
         case UseCase.CommunityMessaging:
             title = _t("Community ownership");
-            description = _t("Keep ownership and control of community discussion.\n" +
-                "Scale to support millions, with powerful moderation and interoperability.");
+            description = _t(
+                "Keep ownership and control of community discussion.\n" +
+                    "Scale to support millions, with powerful moderation and interoperability.",
+            );
             image = require("../../../../res/img/user-onboarding/CommunityMessaging.png");
             actionLabel = _t("Find your people");
             break;
@@ -69,10 +77,13 @@ export function UserOnboardingHeader({ useCase }: Props) {
             title = _t("Welcome to %(brand)s", {
                 brand: SdkConfig.get("brand"),
             });
-            description = _t("With free end-to-end encrypted messaging, and unlimited voice and video calls," +
-                " %(brand)s is a great way to stay in touch.", {
-                brand: SdkConfig.get("brand"),
-            });
+            description = _t(
+                "With free end-to-end encrypted messaging, and unlimited voice and video calls," +
+                    " %(brand)s is a great way to stay in touch.",
+                {
+                    brand: SdkConfig.get("brand"),
+                },
+            );
             image = require("../../../../res/img/user-onboarding/PersonalMessaging.png");
             actionLabel = _t("Start your first chat");
             break;
@@ -82,14 +93,12 @@ export function UserOnboardingHeader({ useCase }: Props) {
         <div className="mx_UserOnboardingHeader">
             <div className="mx_UserOnboardingHeader_content">
                 <Heading size="h1">
-                    { title }
+                    {title}
                     <span className="mx_UserOnboardingHeader_dot">.</span>
                 </Heading>
-                <p>
-                    { description }
-                </p>
+                <p>{description}</p>
                 <AccessibleButton onClick={onClickSendDm} kind="primary">
-                    { actionLabel }
+                    {actionLabel}
                 </AccessibleButton>
             </div>
             <img className="mx_UserOnboardingHeader_image" src={image} alt="" />

src/components/views/user-onboarding/UserOnboardingList.tsx

@@ -35,35 +35,38 @@ export function UserOnboardingList({ completedTasks, waitingTasks }: Props) {
     const waiting = waitingTasks.length;
     const total = completed + waiting;
 
-    const tasks = useMemo(() => [
-        ...completedTasks.map((it): [Task, boolean] => [it, true]),
-        ...waitingTasks.map((it): [Task, boolean] => [it, false]),
-    ], [completedTasks, waitingTasks]);
+    const tasks = useMemo(
+        () => [
+            ...completedTasks.map((it): [Task, boolean] => [it, true]),
+            ...waitingTasks.map((it): [Task, boolean] => [it, false]),
+        ],
+        [completedTasks, waitingTasks],
+    );
 
     return (
         <div className="mx_UserOnboardingList">
             <div className="mx_UserOnboardingList_header">
                 <Heading size="h3" className="mx_UserOnboardingList_title">
-                    { waiting > 0 ? _t("Only %(count)s steps to go", {
-                        count: waiting,
-                    }) : _t("You did it!") }
+                    {waiting > 0
+                        ? _t("Only %(count)s steps to go", {
+                              count: waiting,
+                          })
+                        : _t("You did it!")}
                 </Heading>
                 <div className="mx_UserOnboardingList_hint">
-                    { _t("Complete these to get the most out of %(brand)s", {
+                    {_t("Complete these to get the most out of %(brand)s", {
                         brand: SdkConfig.get("brand"),
-                    }) }
+                    })}
                 </div>
             </div>
             <div className="mx_UserOnboardingList_progress">
                 <ProgressBar value={completed} max={total} animated />
-                { waiting === 0 && (
-                    <UserOnboardingFeedback />
-                ) }
+                {waiting === 0 && <UserOnboardingFeedback />}
             </div>
             <ol className="mx_UserOnboardingList_list">
-                { tasks.map(([task, completed]) => (
+                {tasks.map(([task, completed]) => (
                     <UserOnboardingTask key={task.id} completed={completed} task={task} />
-                )) }
+                ))}
             </ol>
         </div>
     );

src/components/views/user-onboarding/UserOnboardingPage.tsx

@@ -77,10 +77,10 @@ export function UserOnboardingPage({ justRegistered = false }: Props) {
         return <EmbeddedPage className="mx_HomePage" url={pageUrl} scrollbar={true} />;
     }
 
-    return <AutoHideScrollbar className="mx_UserOnboardingPage">
-        <UserOnboardingHeader useCase={useCase} />
-        { showList && (
-            <UserOnboardingList completedTasks={completedTasks} waitingTasks={waitingTasks} />
-        ) }
-    </AutoHideScrollbar>;
+    return (
+        <AutoHideScrollbar className="mx_UserOnboardingPage">
+            <UserOnboardingHeader useCase={useCase} />
+            {showList && <UserOnboardingList completedTasks={completedTasks} waitingTasks={waitingTasks} />}
+        </AutoHideScrollbar>
+    );
 }

src/components/views/user-onboarding/UserOnboardingTask.tsx

@@ -31,9 +31,11 @@ export function UserOnboardingTask({ task, completed = false }: Props) {
     const description = typeof task.description === "function" ? task.description() : task.description;
 
     return (
-        <li className={classNames("mx_UserOnboardingTask", {
-            "mx_UserOnboardingTask_completed": completed,
-        })}>
+        <li
+            className={classNames("mx_UserOnboardingTask", {
+                mx_UserOnboardingTask_completed: completed,
+            })}
+        >
             <div
                 className="mx_UserOnboardingTask_number"
                 role="checkbox"
@@ -41,27 +43,24 @@ export function UserOnboardingTask({ task, completed = false }: Props) {
                 aria-checked={completed}
                 aria-labelledby={`mx_UserOnboardingTask_${task.id}`}
             />
-            <div
-                id={`mx_UserOnboardingTask_${task.id}`}
-                className="mx_UserOnboardingTask_content">
+            <div id={`mx_UserOnboardingTask_${task.id}`} className="mx_UserOnboardingTask_content">
                 <Heading size="h4" className="mx_UserOnboardingTask_title">
-                    { title }
+                    {title}
                 </Heading>
-                <div className="mx_UserOnboardingTask_description">
-                    { description }
-                </div>
+                <div className="mx_UserOnboardingTask_description">{description}</div>
             </div>
-            { task.action && (!task.action.hideOnComplete || !completed) && (
+            {task.action && (!task.action.hideOnComplete || !completed) && (
                 <AccessibleButton
                     element="a"
                     className="mx_UserOnboardingTask_action"
                     kind="primary_outline"
                     href={task.action.href}
                     target="_blank"
-                    onClick={task.action.onClick}>
-                    { task.action.label }
+                    onClick={task.action.onClick}
+                >
+                    {task.action.label}
                 </AccessibleButton>
-            ) }
+            )}
         </li>
     );
 }