Merge pull request #1937 from HSLdevcom/1935_routePath_sync_fix

Updated sync button, refresh page after syncing

Author: Divinare

src/components/navigationBar/SyncView.tsx

@@ -35,6 +35,8 @@ const SyncView = inject('alertStore')(
                     if (!response.isDbSyncing) {
                         clearInterval(newIntervalIdRef.current);
                         setIsSyncRunning(false);
+                        // Refresh the page once sync is complete
+                        location.reload();
                     }
                 }, 2000);
             }
@@ -65,22 +67,26 @@ const SyncView = inject('alertStore')(
         return (
             <>
                 <div
+                    onClick={() => setIsSyncViewVisible(true)}
                     className={s.openSyncViewButton}
                     title={`Avaa uusi ikkuna uusimpien tietojen hakuun Joresta`}
                 >
-                    <IoIosArrowDown className={s.icon} onClick={() => setIsSyncViewVisible(true)} />
+                    Päivitä
+                    <IoIosArrowDown className={s.icon} />
                 </div>
                 <div>
                     {isSyncViewVisible && (
                         <ModalContainer>
                             <div className={s.syncViewContainer}>
-                                <div>Hae uusimmat (alle 24h sisään päivitetyt) tiedot Joresta</div>
+                                <div>
+                                    Hae alle 24h sisään päivitetyt tiedot Joresta. Sivu ladataan
+                                    automaattisesti uudestaan haun jälkeen.
+                                </div>
                                 {isSyncRunning ? (
                                     <>
                                         <div className={s.loaderContainer}>
                                             <div className={s.loadingText}>
-                                                Tietojen haku käynnissä. Voit halutessasi sulkea
-                                                tämän ikkunan, haku jatkuu taustalla.
+                                                Tietoja päivitetään...
                                             </div>
                                             <Loader hasNoMargin={true} />
                                         </div>
@@ -134,6 +140,7 @@ const SyncView = inject('alertStore')(
                                 <div className={s.syncButtonContainer}>
                                     <Button
                                         isWide={true}
+                                        disabled={isSyncRunning}
                                         onClick={() => setIsSyncViewVisible(false)}
                                     >
                                         Sulje

src/components/navigationBar/syncView.scss

@@ -8,7 +8,7 @@
     margin: 15px 70px;
     padding: 10px;
     width: 350px;
-    height: 270px; // We want a static height so that it doesn't change when content changes
+    height: 290px; // We want a static height so that it doesn't change when content changes
     color: $fontColorDefault;
 
     .loaderContainer  {
@@ -42,12 +42,19 @@
 
 .openSyncViewButton {
     display: flex;
-    margin: 6px;
     cursor: pointer;
     padding: 3px;
+    text-align: center;
+    line-height: 20px;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.8rem;
+    padding: 5px;
+    margin-left: 5px;
+    letter-spacing: -0.6px;
 
     .icon {
-        font-size: 24px;
+        font-size: 20px;
     }
 }
 .openSyncViewButton:hover {