11import { type Interpolation , type Theme , useTheme } from "@emotion/react" ;
2+ import { Button } from "components/Button/Button" ;
23import DialogActions from "@mui/material/DialogActions" ;
34import TextField from "@mui/material/TextField" ;
45import type { BannerConfig } from "api/typesGenerated" ;
56import { Dialog , DialogActionButtons } from "components/Dialogs/Dialog" ;
67import { Stack } from "components/Stack/Stack" ;
78import { useFormik } from "formik" ;
89import { AnnouncementBannerView } from "modules/dashboard/AnnouncementBanners/AnnouncementBannerView" ;
9- import type { FC } from "react" ;
10- import { BlockPicker } from "react-color" ;
10+ import { useState , type FC } from "react" ;
11+ import { SliderPicker , TwitterPicker } from "react-color" ;
1112import { getFormHelpers } from "utils/formUtils" ;
1213
1314interface AnnouncementBannerDialogProps {
@@ -29,12 +30,14 @@ export const AnnouncementBannerDialog: FC<AnnouncementBannerDialogProps> = ({
2930} > ( {
3031initialValues :{
3132message :banner . message ?? "" ,
32- background_color :banner . background_color ?? "#004852 " ,
33+ background_color :banner . background_color ?? "#ABB8C3 " ,
3334} ,
3435onSubmit :( banner ) => onUpdate ( banner ) ,
3536} ) ;
3637const bannerFieldHelpers = getFormHelpers ( bannerForm ) ;
3738
39+ const [ showHuePicker , setShowHuePicker ] = useState ( false ) ;
40+
3841return (
3942< Dialog css = { styles . dialogWrapper } open onClose = { onCancel } >
4043{ /* Banner preview */ }
@@ -64,29 +67,67 @@ export const AnnouncementBannerDialog: FC<AnnouncementBannerDialogProps> = ({
6467</ div >
6568< div >
6669< h4 css = { styles . settingName } > Background color</ h4 >
67- < BlockPicker
68- color = { bannerForm . values . background_color }
69- onChange = { async ( color ) => {
70- await bannerForm . setFieldValue ( "background_color" , color . hex ) ;
71- } }
72- triangle = "hide"
73- colors = { [ "#004852" , "#D65D0F" , "#4CD473" , "#D94A5D" , "#5A00CF" ] }
74- styles = { {
75- default :{
76- input :{
77- color :"white" ,
78- backgroundColor :theme . palette . background . default ,
79- } ,
80- body :{
81- backgroundColor :"black" ,
82- color :"white" ,
83- } ,
84- card :{
85- backgroundColor :"black" ,
86- } ,
87- } ,
88- } }
89- />
70+ < Stack spacing = { 2 } >
71+ { showHuePicker ?(
72+ < SliderPicker
73+ color = { bannerForm . values . background_color }
74+ onChange = { async ( color ) => {
75+ await bannerForm . setFieldValue (
76+ "background_color" ,
77+ color . hex ,
78+ ) ;
79+ } }
80+ />
81+ ) :(
82+ < TwitterPicker
83+ color = { bannerForm . values . background_color }
84+ onChange = { async ( color ) => {
85+ await bannerForm . setFieldValue (
86+ "background_color" ,
87+ color . hex ,
88+ ) ;
89+ } }
90+ triangle = "hide"
91+ colors = { [
92+ "#8b5cf6" ,
93+ "#d94a5d" ,
94+ "#f78da7" ,
95+ "#d65d0f" ,
96+ "#ff6900" ,
97+ "#fcb900" ,
98+ "#0693e3" ,
99+
100+ "#8ed1fc" ,
101+ "#4cd473" ,
102+ "#abb8c3" ,
103+ ] }
104+ styles = { {
105+ default :{
106+ input :{
107+ color :"white" ,
108+ backgroundColor :theme . palette . background . default ,
109+ } ,
110+ body :{
111+ backgroundColor :"transparent" ,
112+ color :"white" ,
113+ padding :0 ,
114+ } ,
115+ card :{
116+ backgroundColor :"transparent" ,
117+ } ,
118+ } ,
119+ } }
120+ />
121+ ) }
122+ < div >
123+ < Button
124+ variant = "outline"
125+ onClick = { ( ) => setShowHuePicker ( ( it ) => ! it ) }
126+ >
127+ Show{ showHuePicker ?"palette" :"slider" }
128+ </ Button >
129+ </ div >
130+ </ Stack >
90131</ div >
91132</ Stack >
92133</ div >