From 8a7fa7abd78384288fedd9b864a3e2b2b0322af4 Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Sat, 11 Oct 2025 00:43:29 +0100
Subject: [PATCH] WIP beta badge for cloud

---
 packages/design-system/src/css/style.css |  3 +++
 src/components/topbar/CloudBar.vue       | 24 ++++++++++++++++++++++++
 src/components/topbar/TopMenubar.vue     |  4 +++-
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 src/components/topbar/CloudBar.vue

diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index fcadf31de..0d72105c0 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -114,6 +114,9 @@
   --color-bypass: #6a246a;
   --color-error: #962a2a;
 
+  /* Comfy menu colors */
+  --color-comfy-menu-secondary: var(--comfy-menu-secondary-bg);
+
   --color-blue-selection: rgb(from var(--color-blue-100) r g b / 0.3);
   --color-node-hover-100: rgb(from var(--color-charcoal-100) r g b/ 0.15);
   --color-node-hover-200: rgb(from var(--color-charcoal-100) r g b/ 0.1);
diff --git a/src/components/topbar/CloudBar.vue b/src/components/topbar/CloudBar.vue
new file mode 100644
index 000000000..e65a2d312
--- /dev/null
+++ b/src/components/topbar/CloudBar.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="flex flex-col justify-center bg-comfy-menu-secondary">
+    <div class="flex gap-2 px-3">
+      <div class="justify-center flex-col flex">
+        <div
+          class="rounded-4xl text-black bg-white gap-2.5 px-1 py-0.5 text-[9px] font-semibold"
+        >
+          BETA
+        </div>
+      </div>
+
+      <div
+        class="rounded-8 font-abcrom font-extrabold text-slate-100 text-[14px]"
+      >
+        Comfy Cloud
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+<style>
+@import '../../platform/onboarding/cloud/assets/css/fonts.css';
+</style>
diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index e7e049b35..cc2c438e4 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -2,10 +2,11 @@
   <div>
     <div
       v-show="showTopMenu && workflowTabsPosition === 'Topbar'"
-      class="w-full flex content-end z-1001 h-[38px]"
+      class="w-full flex content-end z-1001 h-9.5"
       style="background: var(--border-color)"
     >
       <WorkflowTabs />
+      <CloudBar />
     </div>
     <div
       v-show="showTopMenu"
@@ -43,6 +44,7 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { electronAPI, isElectron, isNativeWindow } from '@/utils/envUtil'
+import CloudBar from './CloudBar.vue'
 
 const workspaceState = useWorkspaceStore()
 const settingStore = useSettingStore()