box shadow improved

Author: MenamAfzal

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

@@ -16,7 +16,7 @@ import {
   withExposingConfigs,
 } from "comps/generators/withExposing";
 import styled, { css } from "styled-components";
-import { UICompBuilder } from "../../generators";
+import { UICompBuilder, withDefault } from "../../generators";
 import { FormDataPropertyView } from "../formComp/formDataConstants";
 import { jsonControl } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
@@ -58,7 +58,8 @@ import {
 
 
 
-const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
+const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>`
+box-shadow: ${props=>`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
   ${(props) => css`
     ${getStyle(props.$style)}
     input {
@@ -75,7 +76,7 @@ const childrenMap = {
   ...textInputChildren,
   viewRef: RefControl<InputRef>,
   allowClear: BoolControl.DEFAULT_TRUE,
-  style: styleControl(InputFieldStyle),
+  style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}),
   labelStyle:styleControl(LabelStyle),
   prefixIcon: IconControl,
   suffixIcon: IconControl,
@@ -89,7 +90,7 @@ const childrenMap = {
   autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"),
   componentSize: dropdownControl(componentSize, "small"),
   valueInItems: booleanExposingStateControl("valueInItems"),
-  inputFieldStyle: styleControl(InputLikeStyle),
+  inputFieldStyle: withDefault(styleControl(InputLikeStyle),{borderWidth:'1px'}),
   animationStyle: styleControl(AnimationStyle),
 };
 

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

@@ -119,9 +119,11 @@ const getStyle = (style: InputLikeStyleType) => {
   `;
 };
 
-const InputNumber = styled(AntdInputNumber) <{
+const InputNumber = styled(AntdInputNumber)<{
   $style: InputLikeStyleType;
 }>`
+  box-shadow: ${(props) =>
+    `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
   width: 100%;
   ${(props) => props.$style && getStyle(props.$style)}
 `;

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

@@ -40,7 +40,9 @@ import { EditorContext } from "comps/editorState";
  * Input Comp
  */
 
-const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>`
+const InputStyle = styled(Input)<{$style: InputLikeStyleType}>`
+  box-shadow: ${(props) =>
+    `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 

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

@@ -43,9 +43,11 @@ import React, { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 
-const PasswordStyle = styled(InputPassword) <{
+const PasswordStyle = styled(InputPassword)<{
   $style: InputLikeStyleType;
 }>`
+  box-shadow: ${(props) =>
+    `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 

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

@@ -38,9 +38,11 @@ import React, { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 
-const TextAreaStyled = styled(TextArea) <{
+const TextAreaStyled = styled(TextArea)<{
   $style: InputLikeStyleType;
 }>`
+  box-shadow: ${(props) =>
+    `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 

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

@@ -231,7 +231,6 @@ export const LabelControl = (function () {
                 : "100%",
             height: props.position === "column" && !!props.text ? "calc(100% - 22px)" : "100%",
             rotate:args?.inputFieldStyle?.rotation,
-            boxShadow:`${args?.inputFieldStyle?.boxShadow} ${args?.inputFieldStyle?.boxShadowColor}`
           }}
         >
           {args.children}