Better environment color picker (#282)

src-web/components/EnvironmentColorIndicator.tsx

@@ -1,6 +1,6 @@
 import type { Environment } from '@yaakapp-internal/models';
-import classNames from 'classnames';
 import { showColorPicker } from '../lib/showColorPicker';
+import { ColorIndicator } from './ColorIndicator';
 
 export function EnvironmentColorIndicator({
   environment,
@@ -11,19 +11,10 @@ export function EnvironmentColorIndicator({
 }) {
   if (environment?.color == null) return null;
 
-  const style = { backgroundColor: environment.color };
-  const className =
-    'inline-block w-[0.75em] h-[0.75em] rounded-full mr-1.5 border border-transparent';
-
-  if (clickToEdit) {
-    return (
-      <button
-        onClick={() => showColorPicker(environment)}
-        style={style}
-        className={classNames(className, 'hover:border-text')}
-      />
-    );
-  } else {
-    return <span style={style} className={className} />;
-  }
+  return (
+    <ColorIndicator
+      color={environment?.color ?? null}
+      onClick={clickToEdit ? () => showColorPicker(environment) : undefined}
+    />
+  );
 }