From b1f26f322f92852391bdb633911fa094c30d3ca5 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Fri, 19 May 2023 19:46:09 +0530
Subject: [PATCH] style: added theme in color picker (#1088)

---
 .../core/board-view/single-board.tsx          |  2 +-
 .../projects/[projectId]/pages/[pageId].tsx   | 27 +++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index 0ebc77d5b..b50b978ce 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -99,7 +99,7 @@ export const SingleBoard: React.FC<Props> = ({
                   </div>
                 </>
               )}
-              <div className="overflow-y-auto pt-3">
+              <div className="pt-3">
                 {groupedByIssues?.[groupTitle].map((issue, index) => (
                   <Draggable
                     key={issue.id}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index 03b56ce41..d70559d3f 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -442,6 +442,33 @@ const SinglePage: NextPage = () => {
                             <Popover.Panel className="absolute top-full right-0 z-20 mt-1 max-w-xs px-2 sm:px-0">
                               <TwitterPicker
                                 color={pageDetails.color}
+                                styles={{
+                                  default: {
+                                    card: {
+                                      backgroundColor: `rgba(var(--color-bg-surface-2))`,
+                                    },
+                                    triangle: {
+                                      position: "absolute",
+                                      borderColor:
+                                        "transparent transparent rgba(var(--color-bg-surface-2)) transparent",
+                                    },
+                                    input: {
+                                      border: "none",
+                                      height: "1.85rem",
+                                      fontSize: "0.875rem",
+                                      paddingLeft: "0.25rem",
+                                      color: `rgba(var(--color-text-secondary))`,
+                                      boxShadow: "none",
+                                      backgroundColor: `rgba(var(--color-bg-surface-1))`,
+                                      borderLeft: `1px solid rgba(var(--color-bg-surface-2))`,
+                                    },
+                                    hash: {
+                                      color: `rgba(var(--color-text-secondary))`,
+                                      boxShadow: "none",
+                                      backgroundColor: `rgba(var(--color-bg-surface-1))`,
+                                    },
+                                  },
+                                }}
                                 onChange={(val) => partialUpdatePage({ color: val.hex })}
                               />
                             </Popover.Panel>