updated styles(info-bar), updated component to add new Re-Sync column… (

#120)

* updated styles(info-bar), updated component to add new Re-Sync column to info-bar div

* updates to have sync button in HEADER_ACTIONS, re-adjusted styles back to flex-start

* sync label change

* updates to have button animation when on sync, revert sync label

packages/graph-explorer/src/modules/ConnectionDetail/ConnectionDetail.tsx

@@ -37,6 +37,12 @@ export type ConnectionDetailProps = {
 };
 
 const HEADER_ACTIONS = (isSync: boolean, isFileBased: boolean) => [
+  {
+    label: "Synchronize Database",
+    icon: <SyncIcon className={isSync ? "animate-spin" : ""} />,
+    value: "sync",
+    isDisabled: isSync,
+  },
   {
     label: "Export Connection",
     icon: <TrayArrowIcon />,
@@ -120,6 +126,10 @@ const ConnectionDetail = ({ isSync, onSyncChange }: ConnectionDetailProps) => {
       if (value === "export") {
         return onConfigExport();
       }
+
+      if (value === "sync") {
+        return onConfigSync();
+      }
     },
     [onConfigDelete, onConfigExport]
   );
@@ -154,14 +164,6 @@ const ConnectionDetail = ({ isSync, onSyncChange }: ConnectionDetailProps) => {
           <div className={pfx("item")}>
             <div className={pfx("tag")}>
               <div>Last Synchronization</div>
-              <IconButton
-                icon={<SyncIcon className={isSync ? "animate-spin" : ""} />}
-                tooltipText={"Synchronize Database"}
-                variant={"text"}
-                size={"small"}
-                isDisabled={isSync}
-                onPress={onConfigSync}
-              />
             </div>
             {!lastSyncFail && (
               <div className={pfx("value")}>{formatDate(lastSyncUpdate)}</div>