ref(ui-components) Use new Dialog (#12363)

Convert some files to TS
Improve Dialog component

react/features/settings/components/web/LogoutDialog.js

@@ -1,48 +0,0 @@
-// @flow
-
-import React from 'react';
-
-import { Dialog } from '../../../base/dialog';
-import { translate } from '../../../base/i18n';
-import { connect } from '../../../base/redux';
-
-/**
- * The type of {@link LogoutDialog}'s React {@code Component} props.
- */
-type Props = {
-
-    /**
-     * Logout handler.
-     */
-    onLogout: Function,
-
-    /**
-     * Function to be used to translate i18n labels.
-     */
-    t: Function
-};
-
-/**
- * Implements the Logout dialog.
- *
- * @param {Object} props - The props of the component.
- * @returns {React$Element}.
- */
-function LogoutDialog(props: Props) {
-    const { onLogout, t } = props;
-
-    return (
-        <Dialog
-            hideCancelButton = { false }
-            okKey = { t('dialog.Yes') }
-            onSubmit = { onLogout }
-            titleKey = { t('dialog.logoutTitle') }
-            width = { 'small' }>
-            <div>
-                { t('dialog.logoutQuestion') }
-            </div>
-        </Dialog>
-    );
-}
-
-export default translate(connect()(LogoutDialog));

react/features/settings/components/web/LogoutDialog.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import { translate } from '../../../base/i18n/functions';
+import { connect } from '../../../base/redux/functions';
+import Dialog from '../../../base/ui/components/web/Dialog';
+
+/**
+ * The type of {@link LogoutDialog}'s React {@code Component} props.
+ */
+interface Props extends WithTranslation {
+
+    /**
+     * Logout handler.
+     */
+    onLogout: () => void;
+}
+
+/**
+ * Implements the Logout dialog.
+ *
+ * @param {Object} props - The props of the component.
+ * @returns {React$Element}.
+ */
+function LogoutDialog({ onLogout, t }: Props) {
+    return (
+        <Dialog
+            ok = {{ translationKey: 'dialog.Yes' }}
+            onSubmit = { onLogout }
+            titleKey = { t('dialog.logoutTitle') }>
+            <div>
+                { t('dialog.logoutQuestion') }
+            </div>
+        </Dialog>
+    );
+}
+
+export default translate(connect()(LogoutDialog));