From 30a64a1b5a0e01c565771c605dd4d5a97a5da7c1 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 26 Jul 2021 12:41:36 +0530
Subject: [PATCH] Gray out and hide some options during export

---
 res/css/views/dialogs/_ExportDialog.scss      | 30 +++++++++++++++++--
 src/components/views/dialogs/ExportDialog.tsx |  6 ++--
 src/i18n/strings/en_EN.json                   |  1 +
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss
index 03b7b2a8d3..d01f258d62 100644
--- a/res/css/views/dialogs/_ExportDialog.scss
+++ b/res/css/views/dialogs/_ExportDialog.scss
@@ -9,8 +9,32 @@
         margin-bottom: 12px;
     }
 
-    &.mx_ExportDialog_Exporting .mx_ExportDialog_options {
-        pointer-events: none;
+    &.mx_ExportDialog_Exporting {
+        .mx_ExportDialog_options {
+            pointer-events: none;
+        }
+
+        .mx_RadioButton input[type="radio"]:checked + div > div {
+            background: gray;
+        }
+
+        .mx_Field_valid.mx_Field label,
+        .mx_Field_valid.mx_Field:focus-within label {
+            color: unset;
+        }
+
+        .mx_Field_valid.mx_Field,
+        .mx_Field_valid.mx_Field:focus-within {
+            border-color: unset;
+        }
+
+        .mx_Checkbox
+            input[type="checkbox"]:checked
+            + label
+            > .mx_Checkbox_background {
+            background: gray;
+            border-color: gray;
+        }
     }
 
     .mx_ExportDialog_progress {
@@ -26,7 +50,7 @@
             width: 24px;
             height: 24px;
             & .mx_ExportDialog_spinner_path {
-                stroke: #0dbd8b;
+                stroke: $accent-color;
                 stroke-linecap: round;
                 animation: mx_dash 1.5s ease-in-out infinite;
             }
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 8dd6eb92fd..82ea111ed4 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -284,18 +284,18 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
         // Display export settings
         return (
             <BaseDialog
-                title={_t("Export Chat")}
+                title={isExporting ? _t("Exporting your data") : _t("Export Chat")}
                 className={`mx_ExportDialog ${isExporting && "mx_ExportDialog_Exporting"}`}
                 contentId="mx_Dialog_content"
                 hasCancel={true}
                 onFinished={onFinished}
                 fixedWidth={true}
             >
-                <p>
+                { !isExporting ? <p>
                     { _t(
                         "Select from the options below to export chats from your timeline",
                     ) }
-                </p>
+                </p> : null}
 
                 <span className="mx_ExportDialog_subheading">
                     { _t("Format") }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 46926ee798..a55576921c 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2300,6 +2300,7 @@
     "Your messages were successfully exported": "Your messages were successfully exported",
     "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
     "Stop": "Stop",
+    "Exporting your data": "Exporting your data",
     "Export Chat": "Export Chat",
     "Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
     "Format": "Format",