add "reset to default" color option for ColorPicker (#8643)

* add reset to default color option

* Do not show reset button in DOM if resetDefaultValue is undefined

* handle edge case: if invalid hexcode is set for resetDefaultValue

* Do not show the reset button if the color is already set to the default value

* Remove data-testid from Button

---------

Co-authored-by: Praneeth Bhogaraju <praneeth.bhogaraju@ni.com>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>

apps/web/pages/settings/my-account/appearance.tsx

@@ -146,6 +146,7 @@ const AppearanceView = () => {
               <p className="text-default mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
               <ColorPicker
                 defaultValue={user.brandColor}
+                resetDefaultValue="#292929"
                 onChange={(value) => {
                   if (!checkWCAGContrastColor("#ffffff", value)) {
                     setLightModeError(true);
@@ -167,6 +168,7 @@ const AppearanceView = () => {
               <p className="text-default mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
               <ColorPicker
                 defaultValue={user.darkBrandColor}
+                resetDefaultValue="#fafafa"
                 onChange={(value) => {
                   if (!checkWCAGContrastColor("#101010", value)) {
                     setDarkModeError(true);

packages/features/ee/teams/pages/team-appearance-view.tsx

@@ -151,6 +151,7 @@ const ProfileView = () => {
                   <p className="text-emphasis mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
                   <ColorPicker
                     defaultValue={team.brandColor}
+                    resetDefaultValue="#292929"
                     onChange={(value) => form.setValue("brandColor", value, { shouldDirty: true })}
                   />
                 </div>
@@ -165,6 +166,7 @@ const ProfileView = () => {
                   <p className="text-emphasis mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
                   <ColorPicker
                     defaultValue={team.darkBrandColor}
+                    resetDefaultValue="#fafafa"
                     onChange={(value) => form.setValue("darkBrandColor", value, { shouldDirty: true })}
                   />
                 </div>

packages/ui/components/form/color-picker/colorpicker.tsx

@@ -4,6 +4,8 @@ import { HexColorInput, HexColorPicker } from "react-colorful";
 
 import cx from "@calcom/lib/classNames";
 import { fallBackHex, isValidHexCode } from "@calcom/lib/getBrandColours";
+import { Button } from "@calcom/ui";
+import { RotateCcw } from "@calcom/ui/components/icon";
 
 export type ColorPickerProps = {
   defaultValue: string;
@@ -11,12 +13,18 @@ export type ColorPickerProps = {
   container?: HTMLElement;
   popoverAlign?: React.ComponentProps<typeof Popover.Content>["align"];
   className?: string;
+  resetDefaultValue?: string;
 };
 
 const ColorPicker = (props: ColorPickerProps) => {
   const init = !isValidHexCode(props.defaultValue)
     ? fallBackHex(props.defaultValue, false)
     : props.defaultValue;
+  const resetDefaultValue =
+    props.resetDefaultValue &&
+    (!isValidHexCode(props.resetDefaultValue)
+      ? fallBackHex(props.resetDefaultValue, false)
+      : props.resetDefaultValue);
   const [color, setColor] = useState(init);
 
   return (
@@ -57,6 +65,22 @@ const ColorPicker = (props: ColorPickerProps) => {
         }}
         type="text"
       />
+      {resetDefaultValue && color != resetDefaultValue && (
+        <div className="px-1">
+          <Button
+            color={resetDefaultValue == "#292929" ? "primary" : "secondary"}
+            target="_blank"
+            variant="icon"
+            rel="noreferrer"
+            StartIcon={RotateCcw}
+            tooltip="Reset to default"
+            onClick={() => {
+              setColor(fallBackHex(resetDefaultValue, false));
+              props.onChange(resetDefaultValue);
+            }}
+          />
+        </div>
+      )}
     </div>
   );
 };