From f535fd3b9018b602f7efc66c53ef55a31210b55c Mon Sep 17 00:00:00 2001
From: Pranshu Aggarwal <70687348+Pranshu1902@users.noreply.github.com>
Date: Tue, 5 Sep 2023 19:41:24 +0530
Subject: [PATCH] Enhance UI of Import External Results page (#6163)

* enhance ui

* place cancel button to righ

* fix width
---
 .../ExternalResult/ExternalResultUpload.tsx   | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/Components/ExternalResult/ExternalResultUpload.tsx b/src/Components/ExternalResult/ExternalResultUpload.tsx
index 4d517f1a442..5f39cb213a4 100644
--- a/src/Components/ExternalResult/ExternalResultUpload.tsx
+++ b/src/Components/ExternalResult/ExternalResultUpload.tsx
@@ -8,6 +8,8 @@ import { externalResultUploadCsv } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
 const PageTitle = lazy(() => import("../Common/PageTitle"));
 import { useTranslation } from "react-i18next";
+import { Cancel, Submit } from "../Common/components/ButtonV2";
+import useAppHistory from "../../Common/hooks/useAppHistory";
 
 export default function ExternalResultUpload() {
   const { sample_format_external_result_import } = useConfig();
@@ -20,6 +22,7 @@ export default function ExternalResultUpload() {
     setCsvData(data);
   };
   const { t } = useTranslation();
+  const { goBack } = useAppHistory();
 
   const papaparseOptions = {
     header: true,
@@ -67,11 +70,11 @@ export default function ExternalResultUpload() {
         backUrl="/external_results"
         className="mt-4"
       />
-      <div className="mx-auto mt-6 max-w-3xl">
-        <div className="py-4">
+      <div className="mx-auto mt-6 flex max-w-3xl justify-center">
+        <div className="py-4 md:w-[500px]">
           <div className="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
             <div className="my-2 sm:col-span-2 sm:mt-0">
-              <div className="mx-auto flex max-w-lg flex-col justify-center rounded-md border-2 border-dashed border-gray-300 pb-6 pt-5 text-center">
+              <div className="mx-auto flex flex-col justify-center rounded-md border-2 border-dashed border-gray-300 pb-6 pt-5 text-center">
                 <span className="flex justify-center">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -131,14 +134,14 @@ export default function ExternalResultUpload() {
             })}
           </div>
           <div className=""></div>
-          <div className="mt-2 text-center">
-            <button
-              disabled={loading}
-              className="btn btn-primary mx-auto block"
+          <div className="mt-2 flex flex-col justify-end gap-2 text-center md:flex-row">
+            <Cancel onClick={() => goBack()} />
+            <Submit
               onClick={handleSubmit}
-            >
-              {t("save")}
-            </button>
+              disabled={loading}
+              label={t("save")}
+              data-testid="submit-button"
+            />
           </div>
         </div>
       </div>