Ryan/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2025-11-15 16:21:21 +10:00
Code Issues Packages Projects Releases Wiki Activity

background colors

Browse Source
This commit is contained in:
Philipinho
2025-07-14 13:00:41 -07:00
parent 82a2fc997d
commit ad1c692e14
1 changed files with 19 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
apps/client/src/features/editor/components/table/table-background-color.tsx
View File

@ -22,32 +22,14 @@ interface TableBackgroundColorProps {
}
const TABLE_COLORS: TableColorItem[] = [
// First row - grays
{ name: "Default", color: "" },
{ name: "Light blue", color: "#E6E9FF" },
{ name: "Light cyan", color: "#E0F2FE" },
{ name: "Light teal", color: "#CCFBF1" },
{ name: "Light yellow", color: "#FEF3C7" },
{ name: "Light pink", color: "#FCE7F3" },
{ name: "Light purple", color: "#EDE9FE" },
// Second row - light colors
{ name: "Gray", color: "#F3F4F6" },
{ name: "Blue", color: "#BFDBFE" },
{ name: "Cyan", color: "#A5F3FC" },
{ name: "Teal", color: "#99F6E4" },
{ name: "Yellow", color: "#FDE68A" },
{ name: "Pink", color: "#FBCFE8" },
{ name: "Purple", color: "#DDD6FE" },
// Third row - bold colors
{ name: "Dark gray", color: "#9CA3AF" },
{ name: "Bold blue", color: "#60A5FA" },
{ name: "Bold cyan", color: "#22D3EE" },
{ name: "Bold teal", color: "#2DD4BF" },
{ name: "Bold orange", color: "#FB923C" },
{ name: "Bold red", color: "#F87171" },
{ name: "Bold purple", color: "#A78BFA" },
{ name: "Blue", color: "#b4d5ff" },
{ name: "Green", color: "#acf5d2" },
{ name: "Yellow", color: "#fef1b4" },
{ name: "Red", color: "#ffbead" },
{ name: "Pink", color: "#ffc7fe" },
{ name: "Gray", color: "#eaecef" },
{ name: "Purple", color: "#c1b7f2" },
];
export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
@ -83,12 +65,12 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
return (
<Popover
width={280}
width={150}
position="bottom"
opened={opened}
onChange={setOpened}
withArrow
transitionProps={{ transition: 'pop' }}
transitionProps={{ transition: "pop" }}
>
<Popover.Target>
<Tooltip label={t("Background color")} withArrow>
@ -112,7 +94,7 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(7, 1fr)",
gridTemplateColumns: "repeat(4, 1fr)",
gap: "8px",
}}
>
@ -139,7 +121,8 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
<IconCheck
size={18}
style={{
color: item.color === "" || item.color.startsWith("#F")
color:
item.color === "" || item.color.startsWith("#F")
? "#000000"
: "#ffffff",
}}