feat(editor2): UI improvements

Author: guansss

src/components/editor2/DifficultyPicker.tsx

@@ -68,7 +68,7 @@ export const DifficultyPicker: FC<DifficultyPickerProps> = ({
   }, [isValidLevel, value, onChange])
 
   return (
-    <div className="flex items-baseline">
+    <div className="flex gap-2 items-baseline">
       <DetailedSelect
         disabled={!isValidLevel}
         items={DIFFICULTIES}

src/components/editor2/EditorToolbar.tsx

@@ -289,6 +289,7 @@ const HistoryButtons = (buttonProps: ButtonProps) => {
         <Button
           {...buttonProps}
           icon="history"
+          className={clsx('tabular-nums', buttonProps.className)}
           title={t.components.editor2.EditorToolbar.undo_history}
           text={history.index + 1 + '/' + history.stack.length}
         />
@@ -331,6 +332,7 @@ const ErrorButton = (buttonProps: ButtonProps) => {
     >
       <Button
         {...buttonProps}
+        className={clsx('tabular-nums', buttonProps.className)}
         icon={allErrors.length > 0 ? 'cross-circle' : 'tick-circle'}
         intent={allErrors.length > 0 ? 'danger' : 'success'}
         title={

src/components/editor2/action/LevelMap.tsx

@@ -155,7 +155,7 @@ export const LevelMap: FC<LevelMapProps> = memo(({ className }) => {
       )}
       {(mapStatus === 'idle' || mapStatus === 'loading') && (
         <NonIdealState
-          className="absolute inset-0 bg-gray-900/50 [&_*]:!text-white"
+          className="absolute inset-0"
           icon={
             mapStatus === 'loading' ? (
               <Spinner className="[&_.bp4-spinner-head]:stroke-current" />
@@ -164,9 +164,9 @@ export const LevelMap: FC<LevelMapProps> = memo(({ className }) => {
             )
           }
           description={
-            mapStatus === 'loading'
-              ? t.common.loading
-              : t.components.editor2.LevelMap.select_level
+            mapStatus === 'idle'
+              ? t.components.editor2.LevelMap.select_level
+              : undefined
           }
         />
       )}

src/components/editor2/operator/OperatorItem.tsx

@@ -289,7 +289,7 @@ export const OperatorItem: FC<OperatorItemProps> = memo(
                   small
                   minimal
                   className={clsx(
-                    '!px-0 h-full !border-none !text-[.7rem] !leading-3 !font-normal',
+                    '!px-0 h-full !border-none !text-[.7rem] !leading-3 !font-normal !underline underline-offset-2',
                     skillUsageClasses[
                       operator.skillUsage ?? CopilotDocV1.SkillUsageType.None
                     ],

src/styles/global.css

@@ -29,7 +29,7 @@ body,
   border-radius: 3px;
 }
 
-*:focus {
+*:focus:not(:focus-visible) {
   outline: none;
 }
 
@@ -69,6 +69,12 @@ body,
       0 8px 24px #0003;
   }
 
+  &.bp4-interactive:active {
+    box-shadow:
+      0 0 3px 1px #0001,
+      0 2px 3px #0001;
+  }
+
   .dark & {
     box-shadow: 0 0px 3px #fff9;
   }