From ecee0d2ea8d57c46e4ca31415d65f80df0608aaa Mon Sep 17 00:00:00 2001
From: Tanish Manku <tanish2k09.dev@gmail.com>
Date: Tue, 25 Feb 2025 18:12:41 -0800
Subject: [PATCH] Make color picker and paint menu use hex alpha picker (#426)

---
 .../src/components/ui/TextEditor/ColorPicker.tsx       | 10 +++++-----
 .../src/components/ui/ToolbarMain/PaintModeMenu.tsx    |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/realtime/src/components/ui/TextEditor/ColorPicker.tsx b/frontend/realtime/src/components/ui/TextEditor/ColorPicker.tsx
index 74c0cff399..ac7abf3067 100644
--- a/frontend/realtime/src/components/ui/TextEditor/ColorPicker.tsx
+++ b/frontend/realtime/src/components/ui/TextEditor/ColorPicker.tsx
@@ -1,5 +1,3 @@
-import { ChangeEvent, useState, useEffect } from "react";
-import { twMerge } from "tailwind-merge";
 import {
   faFont,
   faHashtag,
@@ -7,11 +5,13 @@ import {
 } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
-import { HexColorPicker } from "react-colorful";
+import { ChangeEvent, useEffect, useState } from "react";
+import { HexAlphaColorPicker } from "react-colorful";
+import { twMerge } from "tailwind-merge";
 
+import { paperWrapperStyles } from "~/components/styles";
 import { Button } from "../Button";
 import { Input } from "../Input";
-import { paperWrapperStyles } from "~/components/styles";
 
 export const ColorPicker = ({
   color: prevColor,
@@ -119,7 +119,7 @@ export const ColorPicker = ({
                 }
                 static
               >
-                <HexColorPicker
+                <HexAlphaColorPicker
                   className="overflow-hidden"
                   color={currColor}
                   onChange={(color) => {
diff --git a/frontend/realtime/src/components/ui/ToolbarMain/PaintModeMenu.tsx b/frontend/realtime/src/components/ui/ToolbarMain/PaintModeMenu.tsx
index a9d9dc083c..b75b162c48 100644
--- a/frontend/realtime/src/components/ui/ToolbarMain/PaintModeMenu.tsx
+++ b/frontend/realtime/src/components/ui/ToolbarMain/PaintModeMenu.tsx
@@ -6,7 +6,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import { ChangeEvent, useEffect, useState } from "react";
-import { HexColorPicker } from "react-colorful";
+import { HexAlphaColorPicker } from "react-colorful";
 import { twMerge } from "tailwind-merge";
 
 import { useSignals } from "@preact/signals-react/runtime";
@@ -126,7 +126,7 @@ export const PaintModeMenu = ({
                 }
                 static
               >
-                <HexColorPicker
+                <HexAlphaColorPicker
                   className="overflow-hidden"
                   color={currColor}
                   onChange={(color) => {