Style Icons

Author: FalkWolsky

client/packages/lowcoder-design/src/components/colorSelect/index.tsx

@@ -178,4 +178,4 @@ const ColorBlock = styled.div<{ $color: string }>`
   cursor: pointer;
   background-clip: content-box;
   overflow: hidden;
-`;
+`;

client/packages/lowcoder/src/components/ColorPicker.tsx

@@ -197,7 +197,7 @@ export default function ColorPicker(props: ColorConfigProps) {
       )}
       {colorKey === "margin" && (	
         <div className="config-input">	
-          <Margin $margin={defaultMargin || "3px"}>	
+          <Margin $margin={defaultMargin || "4px"}>	
             <div>	
               <ExpandIcon title="" />	
             </div>	
@@ -215,7 +215,7 @@ export default function ColorPicker(props: ColorConfigProps) {
       )}	
       {colorKey === "padding" && (	
         <div className="config-input">	
-          <Padding $padding={defaultPadding || "3px"}>	
+          <Padding $padding={defaultPadding || "4px"}>	
             <div>	
               <CompressIcon title="" />	
             </div>	

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

@@ -13,6 +13,8 @@ import {
   ExpandIcon,
   CompressIcon,
   TextSizeIcon,
+  PencilIcon,
+  ShowBorderIcon,
 } from "lowcoder-design";
 import { useContext } from "react";
 import styled from "styled-components";
@@ -250,19 +252,11 @@ const StyleContent = styled.div`
   }
 `;
 
-const RadiusIcon = styled(IconRadius)`
-  margin: 0 8px 0 -2px;
-`;
-
-const MarginIcon = styled(ExpandIcon)`	
-margin: 0 8px 0 -2px;	
-`;	
-const PaddingIcon = styled(CompressIcon)`	
-margin: 0 8px 0 -2px;	
-`;
-const StyledTextSizeIcon = styled(TextSizeIcon)`	
-margin: 0 8px 0 -2px;	
-`;
+const RadiusIcon = styled(IconRadius)` margin: 0 8px 0 -2px;`;
+const BorderIcon = styled(ShowBorderIcon)` margin: 0px 10px 0 3px;`;
+const MarginIcon = styled(ExpandIcon)` margin: 0 8px 0 2px;`;	
+const PaddingIcon = styled(CompressIcon)`	margin: 0 8px 0 2px;`;
+const StyledTextSizeIcon = styled(TextSizeIcon)` margin: 0 8px 0 0px;`;
 const ResetIcon = styled(IconReset)`
   &:hover g g {
     stroke: #315efb;
@@ -366,22 +360,29 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
                   { filterText: config.label },
                   <div key={index}>	
                     {(name === "radius" ||
-                    name === "borderWidth" ||
                     name === "gap" ||	
                     name === "cardRadius")
                       ? (	
                           children[name] as InstanceType<typeof StringControl>	
                         ).propertyView({	
                           label: config.label,	
-                          preInputNode: <RadiusIcon title="" />,	
+                          preInputNode: <RadiusIcon title="Radius" />,	
                           placeholder: props[name],	
-                        })	
+                        })
+                        : name === "borderWidth"
+                        ? (	
+                            children[name] as InstanceType<typeof StringControl>	
+                          ).propertyView({	
+                            label: config.label,	
+                            preInputNode: <BorderIcon title="Border-Width" />,	
+                            placeholder: props[name],	
+                          })
                       : name === "margin"	
                       ? (	
                           children[name] as InstanceType<typeof StringControl>	
                         ).propertyView({	
                           label: config.label,	
-                          preInputNode: <MarginIcon title="" />,	
+                          preInputNode: <MarginIcon title="Margin" />,	
                           placeholder: props[name],	
                         })	
                       : (name === "padding" ||
@@ -392,7 +393,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
                           children[name] as InstanceType<typeof StringControl>	
                         ).propertyView({	
                           label: config.label,	
-                          preInputNode: <PaddingIcon title="" />,	
+                          preInputNode: <PaddingIcon title="Padding" />,	
                           placeholder: props[name],	
                         })	
                       : name === "textSize"