styling updated

lowcoder-org · raheeliftikhar5 · Jun 13, 2024 · Jun 12, 2024 · Jun 12, 2024 · Jun 12, 2024
commit aeaa42f7ae262e5d60c01adb3a4359f062a978f1
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
@@ -37,7 +37,7 @@ const Link = styled(Button)<{
     font-style:${props.$style.fontStyle};
     font-family:${props.$style.fontFamily};
     font-weight:${props.$style.textWeight};
-    border: ${props.$style.borderWidth} solid ${props.$style.border};
+    border: ${props.$style.borderWidth} ${props.$style.borderStyle} ${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;

diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
@@ -49,6 +49,10 @@ const Wrapper = styled.div<{
     margin: ${props => props.$headerStyle?.margin};
     padding: ${props => props.$headerStyle?.padding};
   }
+  .ant-card-head-title{
+    font-size: ${props => props.$headerStyle?.textSize};
+    font-family: ${props => props.$headerStyle?.fontFamily};
+  }
   .ant-card .ant-card-actions {
     border-top: 1px solid ${props => props.$style?.border};
   }
@@ -72,6 +76,8 @@ const Wrapper = styled.div<{
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    margin: ${props => props.$style?.margin};
+    padding: ${props => props.$style?.padding};
     background-color: ${props => props.$style?.background};
     border: ${props => props.$style?.border};
     rotate: ${props => props.$style?.rotation};

diff --git a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
@@ -27,6 +27,7 @@ type IProps = DividerProps & {
 
 const StyledDivider = styled(Divider) <IProps>`
   margin-top: 3.5px;
+  rotate:${props=>props.$style.rotation};
   .ant-divider-inner-text {
     height: 32px;
     display: flex;
@@ -50,8 +51,8 @@ const StyledDivider = styled(Divider) <IProps>`
     return props.$style.margin;
   }};	
   padding: ${(props) => props.$style.padding};
-
-  border-top: ${(props) => (props.$style.borderWidth && props.$style.borderWidth != "0px" ? props.$style.borderWidth : "1px")} ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.border};
+  border-radius:${props=>props.$style.radius};
+  border-top: ${(props) => (props.$style.borderWidth && props.$style.borderWidth != "0px" ? props.$style.borderWidth : "1px")} ${(props) => props.$style.borderStyle} ${(props) => props.$style.border};
 ""
   .ant-divider-inner-text::before, .ant-divider-inner-text::after {
     border-block-start: ${(props) => (props.$style.borderWidth && props.$style.borderWidth != "0px" ? props.$style.borderWidth : "1px")} ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.border} !important;

diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
@@ -148,6 +148,10 @@ const getStyle = (style: FileStyleType) => {
       font-weight:${style.textWeight};
       font-style:${style.fontStyle};
       border-width:${style.borderWidth};
+      border-style:${style.borderStyle};
+      text-decoration:${style.textDecoration};
+      text-transform:${style.textTransform};
+      text-transform:${style.textTransform};
     }
 
     .ant-btn:not(:disabled) {

diff --git a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
@@ -21,7 +21,9 @@ const Wrapper = styled.div<{$style: IframeStyleType; $animationStyle:AnimationSt
       props.$style.borderWidth ? props.$style.borderWidth : '1px'}
     solid ${(props) => props.$style.border};
   border-radius: calc(min(${(props) => props.$style.radius}, 20px));
-rotate:${props => props.$style.rotation}
+rotate:${props => props.$style.rotation};
+margin:${props => props.$style.margin};
+padding:${props => props.$style.padding};
 ${props=>props.$animationStyle}
   iframe {
     border: 0;

diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx
@@ -23,6 +23,9 @@ export function getStyle(style: ColorPickerStyleType) {
     &:not(.ant-input-disabled, .ant-input-affix-wrapper-disabled),
     input {
       background-color: ${style.background};
+      color:${style.text};
+      font-weight:${style.textWeight};
+      font-family:${style.fontFamily};
       border-color: ${style.border};
       &:focus,
       &.ant-input-affix-wrapper-focused {

diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -53,7 +53,7 @@ const Container = styled.div<{ $style: any }>`
 const getStyle = (style: any) => {
   return css`
     button {
-      border: 1px solid ${style.border};
+      border: ${style.borderWidth} ${style.borderStyle} ${style.border};
       border-radius: ${style.radius};
       margin: ${style.margin};
       rotate: ${style.rotation};

diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
@@ -29,17 +29,18 @@ type IProps = {
   $borderColor: string;
   $borderWidth: string;
   $borderRadius: string;
-  $animationStyle:AnimationStyleType;
+  $borderStyle: string;
+  $animationStyle: AnimationStyleType;
 };
 
 const Wrapper = styled("div")<
-  Pick<IProps, "$bgColor" | "$borderColor" | "$borderWidth" | "$borderRadius"|"$animationStyle">
+  Pick<IProps, "$bgColor" | "$borderColor" | "$borderWidth" | "$borderRadius"|"$borderStyle"|"$animationStyle">
   >`
 ${props=>props.$animationStyle}
   height: 100%;
-  border-radius: ${(props) => props.$borderRadius ? props.$borderRadius : '2px'};
+  border-radius: ${(props) =>props.$borderRadius ? props.$borderRadius : '2px'};
   box-sizing: border-box;
-  border: ${(props) => props.$borderWidth ? `${props.$borderWidth}` : '1px'} solid ${(props) => props.$borderColor};
+  border: ${(props) => props.$borderWidth ? `${props.$borderWidth}` : '1px'} ${props=>props.$borderStyle} ${(props) => props.$borderColor};
   background-color: ${(props) => props.$bgColor};
 `;
 
@@ -212,11 +213,12 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
 
   return (
     <Wrapper
+      $borderStyle={props.style.borderStyle}
       $animationStyle={props.animationStyle}
       $borderColor={props.style.border}
       $bgColor={props.style.background}
       $borderWidth={props.style.borderWidth}
-      $borderRadius={props.style.borderRadius}
+      $borderRadius={props.style.radius}
     >
       <NavInner $justify={justify}>
         {props.logoUrl && (

diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
@@ -50,7 +50,7 @@ const RowWrapper = styled(Row)<{
   ${(props) => props.$animationStyle}
   height: 100%;
   border-radius: ${(props) => props.$style?.radius};
-  border-width: ${(props) => props.$style?.borderWidth}px;
+  border-width: ${(props) => props.$style?.borderWidth};
   border-color: ${(props) => props.$style?.border};
   border-style: ${(props) => props.$style?.borderStyle};
   padding: ${(props) => props.$style.padding};

diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
@@ -76,7 +76,7 @@ const getStyle = (
   return css`
     &.ant-tabs {
       overflow: hidden;
-      border: ${style.borderWidth} solid ${style.border};
+      border: ${style.borderWidth} ${style.borderStyle} ${style.border};
       border-radius: ${style.radius};
       padding: ${style.padding};
       background-color: ${style.background};
@@ -91,11 +91,13 @@ const getStyle = (
         .react-grid-layout {
           border-radius: 0;
           background-color: ${bodyStyle.background || 'transparent'};
+          padding: ${bodyStyle.containerBodyPadding};
         }
       }
 
       > .ant-tabs-nav {
         background-color: ${headerStyle.headerBackground || 'transparent'};
+        padding: ${headerStyle.containerHeaderPadding};
 
         .ant-tabs-tab {
           div {
@@ -108,6 +110,7 @@ const getStyle = (
         }
 
         .ant-tabs-tab-btn {
+          color: ${style.tabText} !important;
           font-size: ${style.textSize};
           font-family:${style.fontFamily};
           font-weight:${style.textWeight};

diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
@@ -13,6 +13,7 @@ const getStyle = (style: ContainerStyleType) => {
     border-color: ${style.border};
     border-width: ${style.borderWidth};
     border-radius: ${style.radius};
+    border-style: ${style.borderStyle};
     overflow: hidden;
     padding: ${style.padding};
     ${style.background && `background-color: ${style.background};`}