fixed automation page

Signed-off-by: RAWx18 <rawx18.dev@gmail.com>

Author: RAWx18

README.md

@@ -4,7 +4,7 @@ VUE_APP_BACKEND_URL=/api
 VUE_APP_WEBSOCKETS_URL=ws://localhost:8080
 VUE_APP_FRONTEND_HOST=localhost:8081
 VUE_APP_FRONTEND_PROTOCOL=http
-VUE_APP_GITHUB_INSTALLATION_URL=https://github.com/apps/gitmesh-test/installations/new
+VUE_APP_GITHUB_INSTALLATION_URL=https://github.com/apps/gitmesh-ce/installations/new # Community Edition GitHub App Installation
 VUE_APP_DISCORD_INSTALLATION_URL=
 VUE_APP_CUBEJS_URL=http://localhost:4000
 VUE_APP_CONVERSATIONS_PUBLIC_URL=http://localhost:3000

frontend/.env.dist.local

@@ -8,7 +8,7 @@
     <template #header>
       <div>
         <div class="flex items-center">
-          <img :alt="typeData.name" :src="typeData.pngn" class="w-4 max-w-4">
+          <img :alt="typeData.name" :src="typeData.icon" class="w-4 max-w-4">
           <p class="pl-2 text-xs text-gray-200">
             {{ typeData.name }}
           </p>

frontend/src/modules/automation/components/automation-form.vue

@@ -50,7 +50,7 @@
             >
               <div class="flex">
                 <div class="mt-0.5">
-                  <img :alt="automationType.name" :src="automationType.pngn" class="w-4 max-w-4">
+                  <img :alt="automationType.name" :src="automationType.icon" class="w-4 max-w-4">
                 </div>
                 <div class="pl-2">
                   <h6 class="text-xs leading-5 font-medium mb-0.5 text-zinc-100">

frontend/src/modules/automation/components/automation-list.vue

@@ -16,7 +16,7 @@
                 <img
                   v-if="automationTypes[scope.row.type]"
                   :alt="automationTypes[scope.row.type].name"
-                  :src="automationTypes[scope.row.type].pngn"
+                  :src="automationTypes[scope.row.type].icon"
                   class="w-6"
                 >
               </div>

frontend/src/modules/automation/components/list/automation-list-table.vue

@@ -44,7 +44,7 @@ export const hubspotOrganizationFilters: Record<string, FilterConfig> = {
 export const hubspot: AutomationTypeConfig = {
   name: 'HubSpot',
   description: 'Send contacts or organizations to HubSpot',
-  icon: '/images/integrations/hubspot.png',
+  icon: '/images/automation/hubspot.png',
   plan: 'Scale',
   featureFlag: FeatureFlag.flags.hubspot,
   emptyScreen: {

frontend/src/modules/automation/config/automation-types/hubspot/config.ts

@@ -58,34 +58,29 @@
       title=":: SYSTEM_SYNCHRONIZATION"
       custom-class="terminal-dialog"
     >
-      <template #content>
-        <div class="px-8 py-10 text-zinc-300 font-mono text-xs relative overflow-hidden">
-          <div class="absolute top-0 right-0 p-2 opacity-10">
-            <i class="ri-github-fill text-6xl"></i>
-          </div>
+    <template #content>
+      <div class="p-8 max-w-xs mx-auto space-y-6">
+        <div class="flex items-center gap-3">
+          <i class="ri-github-fill text-2xl"></i>
+          <span class="font-medium">GitHub Integration</span>
+        </div>
 
-          <div class="flex flex-col items-center gap-6 text-center relative z-10">
-            <div class="relative">
-              <i class="ri-broadcast-line text-4xl text-orange-500 animate-pulse"></i>
-              <div class="absolute -bottom-1 -right-1 w-3 h-3 bg-zinc-950 flex items-center justify-center border border-zinc-800">
-                <div class="w-1.5 h-1.5 bg-emerald-500 animate-ping"></div>
-              </div>
-            </div>
-
-            <div class="space-y-3">
-              <p class="uppercase tracking-[0.2em] font-bold text-white">
-                Synchronizing GitHub_Protocol
-              </p>
-              <div class="h-[1px] w-12 bg-zinc-800 mx-auto"></div>
-              <p class="text-zinc-500 text-[10px] leading-relaxed uppercase">
-                Establishing handshake...<br />
-                Configuring repository access permissions...<br />
-                <span class="text-orange-500">Status: TRANSMITTING_DATA</span>
-              </p>
-            </div>
+        <div class="space-y-3 text-xs">
+          <div class="flex items-center gap-3 text-emerald-500">
+            <i class="ri-checkbox-circle-fill"></i>
+            <span>Handshake established</span>
+          </div>
+          <div class="flex items-center gap-3 text-zinc-400">
+            <div class="w-3 h-3 border-2 border-zinc-300 border-t-zinc-600 rounded-full animate-spin"></div>
+            <span>Configuring access...</span>
+          </div>
+          <div class="flex items-center gap-3 text-zinc-300">
+            <i class="ri-checkbox-blank-circle-line"></i>
+            <span>Finalizing sync</span>
           </div>
         </div>
-      </template>
+      </div>
+    </template>
     </app-dialog>
   </div>
 </template>

frontend/src/modules/onboard/components/onboard-sync-data-step.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-start gap-3 w-full p-6 bg-gray-50 rounded-b-lg"
+    class="flex items-start gap-3 w-full p-6 bg-black rounded-b-lg"
   >
     <div
       class="rounded-full bg-purple-100 flex items-center justify-center min-h-8 min-w-[2rem]"
@@ -10,7 +10,7 @@
       />
     </div>
     <div>
-      <div class="text-black text-sm">
+      <div class="text-white bg-black text-sm">
         Insight
       </div>
       <div class="mt-1 text-gray-300 text-xs">