chore: workspace active cycles improvement (#3396)

web/components/headers/workspace-active-cycle.tsx

@@ -11,7 +11,7 @@ export const WorkspaceActiveCycleHeader = observer(() => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <div>
+        <div className="flex items-center gap-2">
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
@@ -19,6 +19,15 @@ export const WorkspaceActiveCycleHeader = observer(() => {
               label="Active Cycles"
             />
           </Breadcrumbs>
+          <span
+            className="flex items-center justify-center px-3.5 py-0.5 text-xs leading-5 rounded-xl"
+            style={{
+              color: "#F59E0B",
+              backgroundColor: "#F59E0B20",
+            }}
+          >
+            Beta
+          </span>
         </div>
       </div>
       <div className="flex items-center gap-3">

web/components/workspace/sidebar-menu.tsx

@@ -75,6 +75,17 @@ export const WorkspaceSidebarMenu = observer(() => {
                 >
                   {<link.Icon className="h-4 w-4" />}
                   {!themeStore?.sidebarCollapsed && link.name}
+                  {link.name === "Active Cycles" && (
+                    <span
+                      className="flex items-center justify-center px-3.5 py-0.5 text-xs leading-4 rounded-xl"
+                      style={{
+                        color: "#F59E0B",
+                        backgroundColor: "#F59E0B20",
+                      }}
+                    >
+                      Beta
+                    </span>
+                  )}
                 </div>
               </Tooltip>
             </span>