From 4d0e1bacfa1bc22043aee887b2f1e58a8ff0b1c9 Mon Sep 17 00:00:00 2001
From: abhinav-grd <abhinavk.grd@gmail.com>
Date: Mon, 18 Oct 2021 12:05:32 +0530
Subject: [PATCH] updated thumbnail fix UI

---
 src/components/FixLargeThumbnail.tsx | 32 +++++++++++++++++++---------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/FixLargeThumbnail.tsx b/src/components/FixLargeThumbnail.tsx
index 7f3e2f2d8..c71c327f7 100644
--- a/src/components/FixLargeThumbnail.tsx
+++ b/src/components/FixLargeThumbnail.tsx
@@ -23,7 +23,7 @@ export enum FIX_STATE {
     RAN_WITH_ERROR,
 }
 function Message(props: { fixState: FIX_STATE }) {
-    let message = <></>;
+    let message = null;
     switch (props.fixState) {
         case FIX_STATE.NOT_STARTED:
             message = constants.REPLACE_THUMBNAIL_NOT_STARTED();
@@ -35,7 +35,11 @@ function Message(props: { fixState: FIX_STATE }) {
             message = constants.REPLACE_THUMBNAIL_RAN_WITH_ERROR();
             break;
     }
-    return <div style={{ marginBottom: '30px' }}>{message}</div>;
+    return message ? (
+        <div style={{ marginBottom: '30px' }}>{message}</div>
+    ) : (
+        <></>
+    );
 }
 export default function FixLargeThumbnails(props: Props) {
     const [fixState, setFixState] = useState(FIX_STATE.NOT_STARTED);
@@ -87,7 +91,12 @@ export default function FixLargeThumbnails(props: Props) {
                                 files exported
                             </span>
                         </div>
-                        <div style={{ width: '100%', marginTop: '10px' }}>
+                        <div
+                            style={{
+                                width: '100%',
+                                marginTop: '10px',
+                                marginBottom: '20px',
+                            }}>
                             <ProgressBar
                                 now={Math.round(
                                     (progressTracker.current * 100) /
@@ -111,15 +120,18 @@ export default function FixLargeThumbnails(props: Props) {
                         onClick={props.hide}>
                         {constants.CLOSE}
                     </Button>
-                    <div style={{ width: '30px' }} />
                     {(fixState === FIX_STATE.NOT_STARTED ||
                         fixState === FIX_STATE.RAN_WITH_ERROR) && (
-                        <Button
-                            block
-                            variant={'outline-success'}
-                            onClick={startFix}>
-                            {constants.UPDATE}
-                        </Button>
+                        <>
+                            <div style={{ width: '30px' }} />
+
+                            <Button
+                                block
+                                variant={'outline-success'}
+                                onClick={startFix}>
+                                {constants.UPDATE}
+                            </Button>
+                        </>
                     )}
                 </div>
             </div>