Pick collection color based on existing collections (#9128)

app/components/Collection/CollectionForm.tsx

@@ -1,3 +1,4 @@
+import uniq from "lodash/uniq";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -18,6 +19,7 @@ import Switch from "~/components/Switch";
 import Text from "~/components/Text";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
+import useStores from "~/hooks/useStores";
 import { EmptySelectValue } from "~/types";
 
 const IconPicker = React.lazy(() => import("~/components/IconPicker"));
@@ -30,6 +32,26 @@ export interface FormData {
   permission: CollectionPermission | undefined;
 }
 
+const useIconColor = (collection?: Collection) => {
+  const { collections } = useStores();
+  const hasMultipleCollections = collections.orderedData.length > 1;
+  const collectionColors = uniq(
+    collections.orderedData.map((c) => c.color).filter(Boolean)
+  ) as string[];
+
+  const iconColor = React.useMemo(
+    () =>
+      collection?.color ??
+      // If all the existing collections have the same color, use that color,
+      // otherwise pick a random color from the palette
+      (hasMultipleCollections && collectionColors.length === 1
+        ? collectionColors[0]
+        : randomElement(colorPalette)),
+    [collection?.color]
+  );
+  return iconColor;
+};
+
 export const CollectionForm = observer(function CollectionForm_({
   handleSubmit,
   collection,
@@ -42,11 +64,7 @@ export const CollectionForm = observer(function CollectionForm_({
 
   const [hasOpenedIconPicker, setHasOpenedIconPicker] = useBoolean(false);
 
-  const iconColor = React.useMemo(
-    () => collection?.color ?? randomElement(colorPalette),
-    [collection?.color]
-  );
-
+  const iconColor = useIconColor(collection);
   const fallbackIcon = <Icon value="collection" color={iconColor} />;
 
   const {