Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 45x 21x 21x 21x 21x 21x 21x | import { Box, Grid } from "@mui/material";
import GradientPickerPopoverNew from "@components/EnterpriseSettings/Branding/components/GradientPickerPopoverNew";
import { useState } from "react";
import { useAppTheme } from "@theme/v2/Provider";
import { PencilSimpleIcon } from "@phosphor-icons/react";
import GiveText from "@shared/Text/GiveText";
import { rgbaToHex } from "@utils/index";
export const ColorPickerInput = ({ defaultColor, onSave }: any) => {
const { palette } = useAppTheme();
const [anchorEl, setAnchorEl] = useState(null);
const handleSetColor = (color: any) => {
setColor(color);
onSave(color);
};
const handleClose = () => {
setAnchorEl(null);
};
const [color, setColor] = useState(defaultColor);
return (
<>
<Grid
item
gap="12px"
sx={{
background: palette.primitive?.transparent["darken-5"],
borderRadius: "12px",
display: "flex",
alignItems: "center",
padding: "10px",
cursor: "pointer",
}}
onClick={(e) => {
if (e.currentTarget) {
setAnchorEl(e.currentTarget as any);
}
}}
>
<Box
sx={{
background: color,
width: "24px",
height: "24px",
borderRadius: "100%",
border: 1,
borderColor: palette.border?.tertiary,
}}
/>
<GiveText fontSize="14px" fontWeight={400}>
{rgbaToHex(color, true).toUpperCase()}
</GiveText>
<Box sx={{ marginLeft: "auto", display: "flex", alignItems: "center" }}>
<PencilSimpleIcon size="20px" />
</Box>
</Grid>
<GradientPickerPopoverNew
anchorEl={anchorEl}
onChange={handleSetColor}
handleClose={handleClose}
value={color}
hideOpacity
hideColorTypeBtns
hideEyeDrop
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
sx={{
".MuiPopover-paper": {
boxShadow: "0px 4px 8px rgba(0, 0, 0, 0.1)",
borderRadius: "8px",
border: "1px solid #CCCCC9", //another color not in the theme
},
}}
/>
</>
);
};
|