Text Decoration and Text Transform property, along with fixes and addition of styles to other components

client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx

@@ -24,6 +24,8 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
         font-weight: ${buttonStyle.textWeight};
         font-family: ${buttonStyle.fontFamily};
         font-style: ${buttonStyle.fontStyle};
+        text-transform:${buttonStyle.textTransform};
+        text-decoration:${buttonStyle.textDecoration};
         background-color: ${buttonStyle.background};
         border-radius: ${buttonStyle.radius};
         margin: ${buttonStyle.margin};	

client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx

@@ -25,30 +25,41 @@ import {
 
 const StyledDropdownButton = styled(DropdownButton)`
   width: 100%;
+
   .ant-btn-group {
     width: 100%;
+
   }
 `;
 
 const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
   width: calc(100%);
   ${(props) => `margin: ${props.$buttonStyle.margin};`}
   margin-right: 0;
+  .ant-btn span {
+    ${(props) => `text-decoration: ${props.$buttonStyle.textDecoration};`}
+    ${(props) => `font-family: ${props.$buttonStyle.fontFamily};`}
+  }
+
   .ant-btn {
     ${(props) => getButtonStyle(props.$buttonStyle)}
     margin: 0 !important;
     height: 100%;
     &.ant-btn-default {
       margin: 0 !important;
       ${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`}
+      ${(props) => `text-transform: ${props.$buttonStyle.textTransform};`}
+      ${(props) => `font-weight: ${props.$buttonStyle.textWeight};`}
     }
     ${(props) => `background-color: ${props.$buttonStyle.background};`}
     ${(props) => `color: ${props.$buttonStyle.text};`}
     ${(props) => `padding: ${props.$buttonStyle.padding};`}
     ${(props) => `font-size: ${props.$buttonStyle.textSize};`}
     ${(props) => `font-style: ${props.$buttonStyle.fontStyle};`}
+
     width: 100%;
   }
+
 `;
 
 const RightButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`

client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx

@@ -34,6 +34,8 @@ const Link = styled(Button) <{ $style: LinkStyleType }>`
     font-weight:${props.$style.textWeight};
     border: ${props.$style.borderWidth} solid ${props.$style.border};
     border-radius:${props.$style.radius ? props.$style.radius:'0px'};
+    text-transform:${props.$style.textTransform ? props.$style.textTransform:''};
+    text-decoration:${props.$style.textDecoration ? props.$style.textDecoration:''} !important;
     background-color: ${props.$style.background};
     &:hover {
       color: ${props.$style.hoverText} !important;

client/packages/lowcoder/src/comps/comps/dividerComp.tsx

@@ -30,6 +30,8 @@ const StyledDivider = styled(Divider) <IProps>`
     font-size: ${(props) => props.$style.textSize};
     font-weight: ${(props) => props.$style.textWeight};
     font-family: ${(props) => props.$style.fontFamily};
+    text-transform:${(props)=>props.$style.textTransform};
+    text-decoration:${(props)=>props.$style.textDecoration};
     font-style:${(props) => props.$style.fontStyle}
   }
   min-width: 0;	

client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx

@@ -52,6 +52,8 @@ const Item = styled.div<{
   $textSize: string;
   $margin: string;
   $padding: string;
+  $textTransform:string;
+  $textDecoration:string;
 }>`
   height: 30px;
   line-height: 30px;
@@ -61,6 +63,8 @@ const Item = styled.div<{
   font-family:${(props) => (props.$fontFamily ? props.$fontFamily : 'sans-serif')};
   font-style:${(props) => (props.$fontStyle ? props.$fontStyle : 'normal')};
   font-size:${(props) => (props.$textSize ? props.$textSize : '14px')};
+  text-transform:${(props) => (props.$textTransform ? props.$textTransform : '')};
+  text-decoration:${(props) => (props.$textDecoration ? props.$textDecoration : '')};
   margin:${(props) => props.$margin ? props.$margin : '0px'};
 
   &:hover {
@@ -161,6 +165,8 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
             $textWeight={props.style.textWeight}
             $textSize={props.style.textSize}
             $padding={props.style.padding}
+            $textTransform={props.style.textTransform}
+            $textDecoration={props.style.textDecoration}
             $margin={props.style.margin}
             onClick={() => onEvent("click")}
           >

client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx

@@ -51,13 +51,25 @@ export const getStyle = (style: CheckboxStyleType) => {
           border-radius: ${style.radius};
         }
       }
-
+      
       .ant-checkbox-inner {
         border-radius: ${style.radius};
         background-color: ${style.uncheckedBackground};
         border-color: ${style.uncheckedBorder};
         border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
       }
+
+      &:hover .ant-checkbox-inner, 
+      .ant-checkbox:hover .ant-checkbox-inner,
+      .ant-checkbox-input + ant-checkbox-inner {
+        background-color:${style.hoverBackground ? style.hoverBackground :'#fff'};
+      }
+
+      &:hover .ant-checkbox-checked .ant-checkbox-inner, 
+      .ant-checkbox:hover .ant-checkbox-inner,
+      .ant-checkbox-input + ant-checkbox-inner {
+        background-color:${style.hoverBackground ? style.hoverBackground:'#ffff'};
+      }
 
       &:hover .ant-checkbox-inner,
       .ant-checkbox:hover .ant-checkbox-inner,
@@ -67,11 +79,15 @@ export const getStyle = (style: CheckboxStyleType) => {
       }
     }
 
+
+
     .ant-checkbox-group-item {
       font-family:${style.fontFamily};
       font-size:${style.textSize};
       font-weight:${style.textWeight};
       font-style:${style.fontStyle};
+      text-transform:${style.textTransform};
+      text-decoration:${style.textDecoration};
     }
     .ant-checkbox-wrapper {
       padding: ${style.padding};

client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx

@@ -25,6 +25,8 @@ const getStyle = (style: RadioStyleType) => {
         font-size:${style.textSize};
         font-weight:${style.textWeight};
         font-style:${style.fontStyle};
+        text-transform:${style.textTransform};
+        text-decoration:${style.textDecoration};
       }
 
       .ant-radio-checked {
@@ -47,6 +49,12 @@ const getStyle = (style: RadioStyleType) => {
         }
       }
 
+      &:hover .ant-radio-inner, 
+      .ant-radio:hover .ant-radio-inner,
+      .ant-radio-input + ant-radio-inner {
+        background-color:${style.hoverBackground ? style.hoverBackground:'#ffff'};
+      }
+
       &:hover .ant-radio-inner,
       .ant-radio:hover .ant-radio-inner,
       .ant-radio-input:focus + .ant-radio-inner {

client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx

@@ -52,6 +52,14 @@ const getStyle = (style: SegmentStyleType) => {
     .ant-segmented-item-selected {
       border-radius: ${style.radius};
     }
+    &.ant-segmented, .ant-segmented-item-label {
+      font-family:${style.fontFamily};
+      font-style:${style.fontStyle};
+      font-size:${style.textSize};
+      font-weight:${style.textWeight};
+      text-transform:${style.textTransform};
+      text-decoration:${style.textDecoration};
+    }
   `;
 };
 

client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx

@@ -76,6 +76,8 @@ export const getStyle = (
     }	
     .ant-select-selection-search-input {
       font-family:${(style as SelectStyleType).fontFamily} !important;
+      text-transform:${(style as SelectStyleType).textTransform} !important;
+      text-decoration:${(style as SelectStyleType).textDecoration} !important;
       font-size:${(style as SelectStyleType).textSize} !important;
       font-weight:${(style as SelectStyleType).textWeight};
       color:${(style as SelectStyleType).text} !important;
@@ -268,7 +270,6 @@ export const SelectUIView = (
           label={option.label}
           disabled={option.disabled}
           key={option.value}
-          style={{fontFamily:"Montserrat"}}
         >
           <Wrapper className="option-label">
             {props.options.findIndex((option) => hasIcon(option.prefixIcon)) >

client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx

@@ -111,6 +111,14 @@ const getStyle = (
           }
         }
 
+        .ant-tabs-tab-btn {
+          font-family:${style.fontFamily};
+          font-weight:${style.textWeight};
+          text-transform:${style.textTransform};
+          text-decoration:${style.textDecoration};
+          font-style:${style.fontStyle};
+        }
+
         .ant-tabs-ink-bar {
           background-color: ${style.accent};
         }

client/packages/lowcoder/src/comps/comps/textComp.tsx

@@ -30,6 +30,8 @@ const getStyle = (style: TextStyleType) => {
     font-weight: ${style.textWeight} !important;
     font-family: ${style.fontFamily} !important;
     font-style:${style.fontStyle} !important;
+    text-transform:${style.textTransform} !important;
+    text-decoration:${style.textDecoration} !important;
     background-color: ${style.background};
     .markdown-body a {
       color: ${style.links};
@@ -146,7 +148,6 @@ let TextTmpComp = (function () {
     .setPropertyViewFn((children) => {
       return (
         <>
-
           <Section name={sectionNames.basic}>
             {children.type.propertyView({
               label: trans("value"),

client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx

@@ -58,7 +58,14 @@ import { EditorContext } from "comps/editorState";
 const Wrapper = styled.div<{
   $style: InputLikeStyleType;
 }>`
-  height: 100%;
+  box-sizing:border-box;
+  .rc-textarea {
+    background-color:${(props) => props.$style.background};
+    padding:${(props) => props.$style.padding};
+    text-transform:${(props)=>props.$style.textTransform};
+    text-decoration:${(props)=>props.$style.textDecoration};
+    margin: 0px 3px 0px 3px !important;
+  }
 
   .ant-input-clear-icon {
     opacity: 0.45;
@@ -196,7 +203,7 @@ let MentionTmpComp = (function () {
                 height: "100%",
                 maxHeight: "100%",
                 resize: "none",
-                padding: props.style.padding,
+                // padding: props.style.padding,
                 fontStyle: props.style.fontStyle,
                 fontFamily: props.style.fontFamily,
                 borderWidth: props.style.borderWidth,

client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx

@@ -248,6 +248,8 @@ export function getStyle(style: InputLikeStyleType) {
       font-weight: ${style.textWeight};
       font-family: ${style.fontFamily};
       font-style:${style.fontStyle};
+      text-transform:${style.textTransform};
+      text-decoration:${style.textDecoration};
       background-color: ${style.background};
       border-color: ${style.border};
 

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

@@ -547,6 +547,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
       name === "cardRadius" ||
       name === "textSize" ||
       name === "textWeight" ||
+      name === "textTransform" ||
+      name === "textDecoration" ||
       name === "fontFamily" ||
       name === "fontStyle" ||
       name === "backgroundImage" ||