WIP beta badge for cloud

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);

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>

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()