ML commands green branding and experimental badge (#6989)

* Remove tan warning from ml commands, move to experimental green branding

* Oops

* Removed unused var

---------

Co-authored-by: Frank Noirot <frankjohnson1993@gmail.com>

src/components/CommandBar/CommandBarHeader.tsx

@@ -83,7 +83,7 @@ function CommandBarHeader({ children }: React.PropsWithChildren<object>) {
           <div className="flex flex-1 flex-wrap gap-2">
             <p
               data-command-name={selectedCommand?.name}
-              className="pr-4 flex gap-2 items-center"
+              className="pr-2 flex gap-2 items-center"
             >
               {selectedCommand &&
                 'icon' in selectedCommand &&
@@ -93,6 +93,13 @@ function CommandBarHeader({ children }: React.PropsWithChildren<object>) {
               <span data-testid="command-name">
                 {selectedCommand.displayName || selectedCommand.name}
               </span>
+              {selectedCommand.status === 'experimental' ? (
+                <span className="text-ml-black text-xs bg-ml-green rounded-full ml-2 px-2 py-1">
+                  experimental
+                </span>
+              ) : (
+                <span className="pr-2" />
+              )}
             </p>
             {Object.entries(nonHiddenArgs || {})
               .filter(([_, argConfig]) =>
@@ -124,7 +131,9 @@ function CommandBarHeader({ children }: React.PropsWithChildren<object>) {
                     key={argName}
                     className={`relative w-fit px-2 py-1 rounded-sm flex gap-2 items-center border ${
                       argName === currentArgument?.name
-                        ? 'disabled:bg-primary/10 dark:disabled:bg-primary/20 disabled:border-primary dark:disabled:border-primary disabled:text-chalkboard-100 dark:disabled:text-chalkboard-10'
+                        ? selectedCommand.status === 'experimental'
+                          ? 'disabled:bg-ml-green/10 dark:disabled:bg-ml-green/20 disabled:border-ml-green dark:disabled:border-ml-green disabled:text-chalkboard-100 dark:disabled:text-chalkboard-10'
+                          : 'disabled:bg-primary/10 dark:disabled:bg-primary/20 disabled:border-primary dark:disabled:border-primary disabled:text-chalkboard-100 dark:disabled:text-chalkboard-10'
                         : 'bg-chalkboard-20/50 dark:bg-chalkboard-80/50 border-chalkboard-20 dark:border-chalkboard-80'
                     }`}
                   >
@@ -196,7 +205,29 @@ function CommandBarHeader({ children }: React.PropsWithChildren<object>) {
                 )
               })}
           </div>
-          {isReviewing ? <ReviewingButton /> : <GatheringArgsButton />}
+          {isReviewing ? (
+            <ReviewingButton
+              bgClassName={
+                selectedCommand.status === 'experimental' ? '!bg-ml-green' : ''
+              }
+              iconClassName={
+                selectedCommand.status === 'experimental'
+                  ? '!text-ml-black'
+                  : ''
+              }
+            />
+          ) : (
+            <GatheringArgsButton
+              bgClassName={
+                selectedCommand.status === 'experimental' ? '!bg-ml-green' : ''
+              }
+              iconClassName={
+                selectedCommand.status === 'experimental'
+                  ? '!text-ml-black'
+                  : ''
+              }
+            />
+          )}
         </div>
         <div className="block w-full my-2 h-[1px] bg-chalkboard-20 dark:bg-chalkboard-80" />
         {children}
@@ -205,7 +236,8 @@ function CommandBarHeader({ children }: React.PropsWithChildren<object>) {
   )
 }
 
-function ReviewingButton() {
+type ButtonProps = { bgClassName?: string; iconClassName?: string }
+function ReviewingButton({ bgClassName, iconClassName }: ButtonProps) {
   return (
     <ActionButton
       Element="button"
@@ -216,8 +248,8 @@ function ReviewingButton() {
       data-testid="command-bar-submit"
       iconStart={{
         icon: 'checkmark',
-        bgClassName: 'p-1 rounded-sm !bg-primary hover:brightness-110',
-        iconClassName: '!text-chalkboard-10',
+        bgClassName: `p-1 rounded-sm !bg-primary hover:brightness-110 ${bgClassName}`,
+        iconClassName: `!text-chalkboard-10 ${iconClassName}`,
       }}
     >
       <span className="sr-only">Submit command</span>
@@ -225,7 +257,7 @@ function ReviewingButton() {
   )
 }
 
-function GatheringArgsButton() {
+function GatheringArgsButton({ bgClassName, iconClassName }: ButtonProps) {
   return (
     <ActionButton
       Element="button"
@@ -235,8 +267,8 @@ function GatheringArgsButton() {
       data-testid="command-bar-continue"
       iconStart={{
         icon: 'arrowRight',
-        bgClassName: 'p-1 rounded-sm !bg-primary hover:brightness-110',
-        iconClassName: '!text-chalkboard-10',
+        bgClassName: `p-1 rounded-sm !bg-primary hover:brightness-110 ${bgClassName}`,
+        iconClassName: `!text-chalkboard-10 ${iconClassName}`,
       }}
     >
       <span className="sr-only">Continue</span>

src/lib/commandBarConfigs/applicationCommandConfig.ts

@@ -10,7 +10,7 @@ import {
   kclSamplesManifestWithNoMultipleFiles,
 } from '@src/lib/kclSamples'
 import { getUniqueProjectName } from '@src/lib/desktopFS'
-import { IS_ML_EXPERIMENTAL, ML_EXPERIMENTAL_MESSAGE } from '@src/lib/constants'
+import { IS_ML_EXPERIMENTAL } from '@src/lib/constants'
 import toast from 'react-hot-toast'
 import { reportRejection } from '@src/lib/trap'
 import { relevantFileExtensions } from '@src/lang/wasmUtils'
@@ -168,7 +168,6 @@ export function createApplicationCommands({
       prompt: {
         inputType: 'text',
         required: true,
-        warningMessage: ML_EXPERIMENTAL_MESSAGE,
       },
     },
   }

src/lib/commandBarConfigs/modelingCommandConfig.ts

@@ -22,7 +22,6 @@ import {
   KCL_DEFAULT_DEGREE,
   KCL_DEFAULT_LENGTH,
   KCL_DEFAULT_TRANSFORM,
-  ML_EXPERIMENTAL_MESSAGE,
 } from '@src/lib/constants'
 import type { components } from '@src/lib/machine-api'
 import type { Selections } from '@src/lib/selections'
@@ -964,12 +963,10 @@ export const modelingMachineCommandConfig: StateMachineCommandSetConfig<
           allowCodeSelection: true,
         },
         skip: true,
-        warningMessage: ML_EXPERIMENTAL_MESSAGE,
       },
       prompt: {
         inputType: 'text',
         required: true,
-        warningMessage: ML_EXPERIMENTAL_MESSAGE,
       },
     },
   },