Labels in progress button and option arg section heading

src/components/CommandBar/CommandBar.tsx

@@ -146,7 +146,7 @@ export const CommandBar = () => {
           leaveTo="opacity-0 scale-95"
         >
           <WrapperComponent.Panel
-            className="relative z-50 pointer-events-auto w-full max-w-xl pt-2 mx-auto border rounded rounded-tl-none shadow-lg bg-chalkboard-10 dark:bg-chalkboard-100 dark:border-chalkboard-70"
+            className="relative z-50 pointer-events-auto w-full max-w-2xl pt-2 mx-auto border rounded rounded-tl-none shadow-lg bg-chalkboard-10 dark:bg-chalkboard-100 dark:border-chalkboard-70"
             as="div"
             data-testid="command-bar"
           >

src/components/CommandBar/CommandBarHeader.tsx

@@ -248,8 +248,9 @@ function CommandBarHeader({ children }: React.PropsWithChildren<object>) {
         </div>
         <div className="block w-full my-2 h-[1px] bg-chalkboard-20 dark:bg-chalkboard-80" />
         {isReviewing && (
-          <>
-            <div className="group px-2 mb-2 text-sm flex gap-4 items-start">
+          <div className="px-4">
+            <p className="mb-2">Optional arguments</p>
+            <div className="text-sm flex gap-4 items-start">
               <div className="flex flex-1 flex-wrap gap-2">
                 {Object.entries(nonHiddenArgs || {}).flatMap(
                   ([argName, arg], i) => {
@@ -279,18 +280,17 @@ function CommandBarHeader({ children }: React.PropsWithChildren<object>) {
                         key={argName}
                         className="text-blue border-none bg-transparent font-sm flex gap-1 items-center pl-0 pr-1"
                       >
-                        <CustomIcon name="plus" className="w-5 h-5" />
                         <span className="capitalize">
                           {arg.displayName || argName}
                         </span>
+                        <CustomIcon name="plus" className="w-5 h-5" />
                       </button>
                     )
                   }
                 )}
               </div>
             </div>
-            <div className="block w-full my-2 h-[1px] bg-chalkboard-20 dark:bg-chalkboard-80" />
-          </>
+          </div>
         )}
         {children}
       </>
@@ -312,16 +312,16 @@ function ReviewingButton({ bgClassName, iconClassName }: ButtonProps) {
       ref={buttonRef}
       type="submit"
       form="review-form"
-      className="w-fit !p-0 rounded-sm hover:shadow focus:outline-current"
+      className={`w-fit !p-0 rounded-sm hover:brightness-110 hover:shadow focus:outline-current ${bgClassName}`}
       tabIndex={0}
       data-testid="command-bar-submit"
-      iconStart={{
+      iconEnd={{
         icon: 'checkmark',
-        bgClassName: `p-1 rounded-sm hover:brightness-110 ${bgClassName}`,
+        bgClassName: `p-1 rounded-sm ${bgClassName}`,
         iconClassName: `${iconClassName}`,
       }}
     >
-      <span className="sr-only">Submit command</span>
+      <span className={`pl-2 ${iconClassName}`}>Confirm</span>
     </ActionButton>
   )
 }
@@ -332,16 +332,16 @@ function GatheringArgsButton({ bgClassName, iconClassName }: ButtonProps) {
       Element="button"
       type="submit"
       form="arg-form"
-      className="w-fit !p-0 rounded-sm hover:shadow focus:outline-current"
+      className={`w-fit !p-0 rounded-sm hover:brightness-110 hover:shadow focus:outline-current ${bgClassName}`}
       tabIndex={0}
       data-testid="command-bar-continue"
-      iconStart={{
+      iconEnd={{
         icon: 'arrowRight',
-        bgClassName: `p-1 rounded-sm hover:brightness-110 ${bgClassName}`,
+        bgClassName: `p-1 rounded-sm ${bgClassName}`,
         iconClassName: `${iconClassName}`,
       }}
     >
-      <span className="sr-only">Continue</span>
+      <span className={`pl-2 ${iconClassName}`}>Next</span>
     </ActionButton>
   )
 }

src/components/CommandBar/CommandBarReview.tsx

@@ -60,15 +60,10 @@ function CommandBarReview({ stepBack }: { stepBack: () => void }) {
   return (
     <CommandBarHeader>
       <p className="px-4 pb-2">
-        {selectedCommand?.reviewMessage ? (
-          selectedCommand.reviewMessage instanceof Function ? (
-            selectedCommand.reviewMessage(commandBarState.context)
-          ) : (
-            selectedCommand.reviewMessage
-          )
-        ) : (
-          <>Confirm {selectedCommand?.displayName || selectedCommand?.name}</>
-        )}
+        {selectedCommand?.reviewMessage &&
+          (selectedCommand.reviewMessage instanceof Function
+            ? selectedCommand.reviewMessage(commandBarState.context)
+            : selectedCommand.reviewMessage)}
       </p>
       <form
         id="review-form"