added sync indicator for q-apps

src/components/Apps/AppsDesktop.tsx

@@ -20,6 +20,7 @@ import { HomeIcon } from "../../assets/Icons/HomeIcon";
 import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
 import { Save } from "../Save/Save";
 import { HubsIcon } from "../../assets/Icons/HubsIcon";
+import { CoreSyncStatus } from "../CoreSyncStatus";
 
 const uid = new ShortUniqueId({ length: 8 });
 
@@ -299,7 +300,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
         height: '100vh',
         alignItems: 'center',
         display: 'flex',
-        gap: '30px'
+        gap: '25px'
        }}>
         <ButtonBase
           sx={{
@@ -356,7 +357,9 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
             />
      
         </ButtonBase>
-        <Save isDesktop />
+        <Save isDesktop disableWidth />
+        <CoreSyncStatus imageSize="30px" position="left" />
+
         {mode !== 'home' && (
                  <AppsNavBarDesktop  />
 

src/components/Apps/AppsDevMode.tsx

@@ -21,6 +21,7 @@ import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
 import { Save } from "../Save/Save";
 import { HubsIcon } from "../../assets/Icons/HubsIcon";
 import { AppsDevModeNavBar } from "./AppsDevModeNavBar";
+import { CoreSyncStatus } from "../CoreSyncStatus";
 
 const uid = new ShortUniqueId({ length: 8 });
 
@@ -191,7 +192,7 @@ export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktop
         height: '100vh',
         alignItems: 'center',
         display: 'flex',
-        gap: '30px'
+        gap: '25px'
        }}>
         <ButtonBase
           sx={{
@@ -248,7 +249,8 @@ export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktop
             />
      
         </ButtonBase>
-        <Save isDesktop />
+        <Save isDesktop disableWidth />
+        <CoreSyncStatus imageSize="30px" position="left" />
         {mode !== 'home' && (
                  <AppsDevModeNavBar  />
 

src/components/CoreSyncStatus.css

@@ -9,7 +9,7 @@
     }
 
     .tooltip .bottom {
-        min-width: 200px;
+        min-width: 225px;
         max-width: 250px;
         top: 35px;
         right: 0px;

src/components/CoreSyncStatus.tsx

@@ -4,7 +4,7 @@ import syncedMintingImg from '../assets/syncStatus/synced.png'
 import syncingImg from '../assets/syncStatus/synced.png'
 import { getBaseApiReact } from '../App';
 import './CoreSyncStatus.css'
-export const CoreSyncStatus = () => {
+export const CoreSyncStatus = ({imageSize, position}) => {
   const [nodeInfos, setNodeInfos] = useState({});
   const [coreInfos, setCoreInfos] = useState({});
   const [isUsingGateway, setIsUsingGateway] = useState(false);
@@ -68,22 +68,27 @@ export const CoreSyncStatus = () => {
       imagePath = syncingImg
     } else if (isSynchronizing && !isMintingPossible && syncPercent === 100) {
       imagePath = syncingImg;
-      message = `Synchronized (Not Minting)`
+      message = `Synchronizing ${isUsingGateway ? '' :'(Not Minting)'}`
     } else if (!isSynchronizing && !isMintingPossible && syncPercent === 100) {
       imagePath = syncedImg
-      message = `Synchronized (Not Minting)`
+      message = `Synchronized ${isUsingGateway ? '' :'(Not Minting)'}`
     } else if (isSynchronizing && isMintingPossible && syncPercent === 100) {
-      imagePath = syncedMintingImg;
-      message = `Synchronized (Minting)`
+      imagePath = syncingImg;
+      message = `Synchronizing ${isUsingGateway ? '' :'(Minting)'}`
     } else if (!isSynchronizing && isMintingPossible && syncPercent === 100) {
       imagePath = syncedMintingImg;
-      message = `Synchronized (Minting)`
+      message = `Synchronized ${isUsingGateway ? '' :'(Minting)'}`
     }
 
+    
+
     return (
       <div className="tooltip" style={{ display: 'inline' }}>
-        <span><img src={imagePath} style={{ height: 'auto', width: '24px' }} alt="sync status" /></span>
-        <div className="bottom">
+        <span><img src={imagePath} style={{ height: 'auto', width: imageSize ? imageSize : '24px' }} alt="sync status" /></span>
+        <div className="bottom" style={{
+          right: position && 'unset',
+          left: position && '0px'
+        }}>
           <h3>Core Information</h3>
           <h4 className="lineHeight">Core Version: <span style={{ color: '#03a9f4' }}>{buildVersion}</span></h4>
           <h4 className="lineHeight">{message}</h4>

src/components/Desktop/DesktopFooter.tsx

@@ -20,7 +20,7 @@ import { Save } from "../Save/Save";
 import { useRecoilState } from "recoil";
 import { enabledDevModeAtom } from "../../atoms/global";
 
-export const IconWrapper = ({ children, label, color, selected }) => {
+export const IconWrapper = ({ children, label, color, selected, disableWidth }) => {
   return (
     <Box
       sx={{
@@ -29,8 +29,8 @@ export const IconWrapper = ({ children, label, color, selected }) => {
         alignItems: "center",
         gap:  "5px",
         flexDirection: "column",
-        height: "89px",
-        width: "89px",
+        height: disableWidth ? 'auto' :  "89px",
+        width: disableWidth ? 'auto' : "89px",
         borderRadius: "50%",
         backgroundColor: selected ? "rgba(28, 29, 32, 1)" : "transparent",
       }}

src/components/Save/Save.tsx

@@ -16,7 +16,7 @@ import { getFee } from "../../background";
 import { CustomizedSnackbars } from "../Snackbar/Snackbar";
 import { SaveIcon } from "../../assets/svgs/SaveIcon";
 import { IconWrapper } from "../Desktop/DesktopFooter";
-export const Save = ({ isDesktop }) => {
+export const Save = ({ isDesktop, disableWidth }) => {
   const [pinnedApps, setPinnedApps] = useRecoilState(sortablePinnedAppsAtom);
   const [settingsQdnLastUpdated, setSettingsQdnLastUpdated] = useRecoilState(
     settingsQDNLastUpdatedAtom
@@ -160,6 +160,7 @@ export const Save = ({ isDesktop }) => {
       >
         {isDesktop ? (
           <IconWrapper
+          disableWidth={disableWidth}
             color="rgba(250, 250, 250, 0.5)"
             label="Save"
             selected={false}