label styles in modal

Author: MenamAfzal

client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx

@@ -47,7 +47,8 @@ import {
   Tooltip,
   EditorContext,
   CompNameContext,
-  AnimationStyle
+  AnimationStyle,
+  EventModalStyle
 } from 'lowcoder-sdk';
 
 import {
@@ -94,6 +95,7 @@ let childrenMap: any = {
   currentFreeView: dropdownControl(DefaultWithFreeViewOptions, "timeGridWeek"),
   currentPremiumView: dropdownControl(DefaultWithPremiumViewOptions, "resourceTimelineDay"),
   animationStyle: styleControl(AnimationStyle, 'animationStyle'),
+  modalStyle:  styleControl(EventModalStyle),
 };
 // this should ensure backwards compatibility with older versions of the SDK
 if (DragEventHandlerControl) { 
@@ -123,7 +125,9 @@ let CalendarBasicComp = (function () {
     licensed?: boolean;
     currentFreeView?: string; 
     currentPremiumView?: string; 
-    animationStyle:any;
+    animationStyle?:any;
+    modalStyle?:any
+
   }, dispatch: any) => {
 
     const comp = useContext(EditorContext)?.getUICompByName(
@@ -236,6 +240,7 @@ let CalendarBasicComp = (function () {
       editable,
       licenseKey,
       resourceName,
+      modalStyle,
     } = props;
 
     function renderEventContent(eventInfo: EventContentArg) {
@@ -353,14 +358,13 @@ let CalendarBasicComp = (function () {
       const eventId = editEvent.current?.id;
       CustomModal.confirm({
         title: modalTitle,
-        animationStyle: {
-          animation: props.animationStyle?.animation || "none",
-          animationDelay: props.animationStyle?.animationDelay || "0s",
-          animationDuration: props.animationStyle?.animationDuration || "0s",
-          animationIterationCount: props.animationStyle?.animationIterationCount || "1",
-        },
+        customStyles: {
+          backgroundColor:props?.modalStyle?.background,
+          animationStyle:props?.animationStyle
+         },
         content: (
-          <FormWrapper form={form}>
+          <FormWrapper form={form}  
+           $modaltyle={modalStyle}>
             <Form.Item
               label={
                 <Tooltip title={trans("calendar.eventIdTooltip")}>
@@ -587,6 +591,7 @@ let CalendarBasicComp = (function () {
       currentPremiumView: { propertyView: (arg0: { label: string; tooltip: string; }) => any; }; 
       style: { getPropertyView: () => any; };
       animationStyle:  { getPropertyView: () => any; };
+      modalStyle: { getPropertyView: () => any; };
       licenseKey: { getView: () => any; propertyView: (arg0: { label: string; }) => any; };
     }) => {
 
@@ -633,6 +638,9 @@ let CalendarBasicComp = (function () {
             {children.style.getPropertyView()}
           </Section>
           <Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
+          <Section name={sectionNames.modalStyle}>
+            {children.modalStyle.getPropertyView()}
+          </Section>
         </>
       );
     })

client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx

@@ -15,6 +15,7 @@ import {
   lightenColor,
   toHex,
   UnderlineCss,
+  EventModalStyleType
 } from "lowcoder-sdk";
 import styled from "styled-components";
 import dayjs from "dayjs";
@@ -747,18 +748,38 @@ export const Event = styled.div<{
   }
 `;
 
-export const FormWrapper = styled(Form)`
+export const FormWrapper = styled(Form)<{
+  $modaltyle: EventModalStyleType
+}>`
   .ant-form-item-label {
     width: 100px;
     text-align: left;
     line-height: 18px;
+
+    label.ant-form-item-required {
+      font-size: ${(props) => props.$modaltyle.textSize};
+    }
+
     label:not(.ant-form-item-required) {
       margin-left: 11px;
+      font-size: ${(props) => props.$modaltyle.textSize};
     }
     label span {
       ${UnderlineCss}
+      
     }
   }
+
+  // Setting style for input fields
+  .ant-input {
+    background-color: ${(props) => props.$modaltyle.labelBackground };
+    border-color: ${(props) => props.$modaltyle.border};
+    border-width: ${(props) => props.$modaltyle.borderWidth};
+    border-style: ${(props) => props.$modaltyle.borderStyle};
+    color: ${(props) => props.$modaltyle.text};
+    font-size: ${(props) => props.$modaltyle.textSize};
+  }
+
 `;
 
 export type EventType = {

client/packages/lowcoder-design/src/components/CustomModal.tsx

@@ -12,7 +12,7 @@ import { modalInstance } from "components/GlobalInstances";
 
 type ModalWrapperProps = {
   $width?: string | number;
-  $animationStyle?:any
+  $customStyles?:any
 };
 
 type Model = {
@@ -25,16 +25,16 @@ const ModalWrapper = styled.div<ModalWrapperProps>`
   flex-direction: column;
   width: ${(props) => (props.$width ? props.$width : "368px")};
   height: fit-content;
-  background: #ffffff;
+  background:${(props) => props.$customStyles?.backgroundColor}; ;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
   border-radius: 8px;
   padding: 0 0 16px;
   pointer-events: auto;
   will-change: transform;
-  animation: ${(props) => props.$animationStyle?.animation};
-  animation-delay: ${(props) => props.$animationStyle?.animationDelay};
-  animation-duration: ${(props) => props.$animationStyle?.animationDuration};
-  animation-iteration-count: ${(props) => props.$animationStyle?.animationIterationCount};
+  animation: ${(props) => props.$customStyles?.animationStyle?.animation};
+  animation-delay: ${(props) => props.$customStyles?.animationStyle?.animationDelay};
+  animation-duration: ${(props) => props.$customStyles?.animationStyle?.animationDuration};
+  animation-iteration-count: ${(props) => props.$customStyles?.animationStyle?.animationIterationCount};
 `;
 
 const ModalHeaderWrapper = styled.div<{ $draggable?: boolean }>`
@@ -210,7 +210,7 @@ export type CustomModalProps = {
   children?: JSX.Element | React.ReactNode;
   okButtonType?: TacoButtonType;
   model?: Model;
-  animationStyle?:any
+  customStyles?:any
 } & AntdModalProps;
 
 const DEFAULT_PROPS = {
@@ -223,7 +223,7 @@ const DEFAULT_PROPS = {
 function CustomModalRender(props: CustomModalProps & ModalFuncProps) {
   return (
     <Draggable handle=".handle" disabled={!props.draggable}>
-      <ModalWrapper $width={props.width} $animationStyle={props?.animationStyle}>
+      <ModalWrapper $width={props.width} $customStyles={props?.customStyles}>
         <>
           <ModalHeaderWrapper className="handle" $draggable={props.draggable}>
             <ModalHeader
@@ -282,7 +282,7 @@ CustomModal.confirm = (props: {
   footer?: ReactNode;
   type?: "info" | "warn" | "error" | "success";
   width?: number | string;
-  animationStyle?:React.CSSProperties;
+  customStyles?:React.CSSProperties;
 }): any => {
 
   const defaultConfirmProps: ModalFuncProps = {
@@ -340,7 +340,7 @@ CustomModal.confirm = (props: {
         }}
         footer={props.footer}
         width={props.width}
-        animationStyle={props.animationStyle}
+        customStyles={props.customStyles}
       />
     ),
   });

client/packages/lowcoder-design/src/components/Section.tsx

@@ -186,4 +186,5 @@ export const sectionNames = {
   bodyStyle:trans("prop.bodyStyle"),
   badgeStyle:trans("prop.badgeStyle"),
   columnStyle:trans("prop.columnStyle"),
+  modalStyle:trans("prop.modalStyle"),
 };

client/packages/lowcoder-design/src/i18n/design/locales/en.ts

@@ -39,6 +39,7 @@ export const en = {
     bodyStyle: 'Body Style',
     badgeStyle: 'Badge Style',
     columnStyle: 'Column Style',
+    modalStyle: 'Modal Style',
   },
   passwordInput: {
     label: "Password:",

client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

@@ -1860,6 +1860,22 @@ export const SignatureStyle = [
   BORDER_WIDTH,
 ] as const;
 
+export const EventModalStyle = [
+  getBackground("primarySurface"),
+  BORDER,
+  BORDER_WIDTH,
+  BORDER_STYLE,
+  TEXT,
+  TEXT_SIZE,
+  {
+    name: "labelBackground",
+    label: trans("style.labelBackground"),
+    depTheme: "primarySurface",
+    depType: DEP_TYPE.SELF,
+    transformer: toSelf,
+  },
+] as const;
+
 // Added by Aqib Mirza
 export const LottieStyle = [
   {
@@ -2054,6 +2070,7 @@ export type TreeSelectStyleType = StyleConfigType<typeof TreeSelectStyle>;
 export type DrawerStyleType = StyleConfigType<typeof DrawerStyle>;
 export type JsonEditorStyleType = StyleConfigType<typeof JsonEditorStyle>;
 export type CalendarStyleType = StyleConfigType<typeof CalendarStyle>;
+export type EventModalStyleType = StyleConfigType<typeof EventModalStyle>;
 export type SignatureStyleType = StyleConfigType<typeof SignatureStyle>;
 export type CarouselStyleType = StyleConfigType<typeof CarouselStyle>;
 export type RichTextEditorStyleType = StyleConfigType<

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -558,6 +558,7 @@ export const en = {
     "siderBackgroundImagePosition": "Sider Background Image Position",
     "siderBackgroundImageOrigin": "Sider Background Image Origin",
     "activeBackground": "Active Background Color",
+    "labelBackground": "Label Background Color",
 
   },
   "export": {