refix flex grid

webstudio-is · Oct 21, 2024 · cc28e19 · cc28e19
1 parent 67287cf
commit cc28e19
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 17 deletions.
diff --git a/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx b/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx
@@ -368,10 +368,10 @@ const LayoutSectionFlex = () => {
 
   return (
     <Flex css={{ flexDirection: "column", gap: theme.spacing[5] }}>
-      <Flex css={{ gap: theme.spacing[7] }} align="stretch">
+      <Flex css={{ gap: theme.spacing[5] }} align="stretch">
         <FlexGrid />
         <Flex direction="column" justify="between">
-          <Flex css={{ gap: theme.spacing[7] }}>
+          <Flex css={{ gap: theme.spacing[5] }}>
             <MenuControl
               property="flexDirection"
               items={[
@@ -397,7 +397,7 @@ const LayoutSectionFlex = () => {
               ]}
             />
           </Flex>
-          <Flex css={{ gap: theme.spacing[7] }}>
+          <Flex css={{ gap: theme.spacing[5] }}>
             <MenuControl
               property="alignItems"
               items={[

diff --git a/apps/builder/app/builder/features/style-panel/sections/layout/shared/flex-grid.tsx b/apps/builder/app/builder/features/style-panel/sections/layout/shared/flex-grid.tsx
@@ -49,14 +49,19 @@ export const FlexGrid = () => {
     flexDirectionValue === "column" || flexDirectionValue === "column-reverse";
 
   let color = theme.colors.foregroundFlexUiMain;
+  let borderColor = theme.colors.foregroundFlexUiMain;
+
   if (styleValueSourceColor === "local") {
-    color = theme.colors.borderLocalFlexUi;
+    borderColor = theme.colors.borderLocalMain;
+    color = theme.colors.foregroundLocalFlexUi;
   }
   if (styleValueSourceColor === "overwritten") {
-    color = theme.colors.borderOverwrittenFlexUi;
+    borderColor = theme.colors.borderOverwrittenFlexUi;
+    color = theme.colors.foregroundOverwrittenFlexUi;
   }
   if (styleValueSourceColor === "remote") {
-    color = theme.colors.borderRemoteFlexUi;
+    borderColor = theme.colors.borderRemoteFlexUi;
+    color = theme.colors.foregroundRemoteFlexUi;
   }
 
   const addjustLinesPadding = (padding: number | undefined) => {
@@ -72,20 +77,17 @@ export const FlexGrid = () => {
     <Grid
       tabIndex={0}
       css={{
-        width: 72,
-        height: 72,
-        padding: theme.spacing[4],
+        padding: theme.spacing[2],
         borderRadius: theme.borderRadius[4],
-        outline: "none",
-        border: `1px solid ${color}`,
+        outline: `1px solid ${borderColor}`,
         background: theme.colors.backgroundControls,
         alignItems: "center",
         gap: 0,
         gridTemplateColumns: "repeat(3, 1fr)",
         gridTemplateRows: "repeat(3, 1fr)",
         color,
         "&:focus-within": {
-          borderColor: theme.colors.borderLocalFlexUi,
+          outlineColor: theme.colors.borderLocalFlexUi,
         },
       }}
     >
@@ -113,8 +115,8 @@ export const FlexGrid = () => {
             <IconButton
               tabIndex={-1}
               css={{
-                width: "100%",
-                height: "100%",
+                width: "90%",
+                height: "90%",
                 color: theme.colors.foregroundFlexUiMain,
                 "&:hover": {
                   // @todo not clear which token to use here
@@ -174,15 +176,15 @@ export const FlexGrid = () => {
           ),
         }}
       >
-        {[11, 16, 9].map((size) => (
+        {[7, 12, 5].map((size) => (
           <Box
             key={size}
             css={{
               borderRadius: theme.borderRadius[1],
               backgroundColor: "currentColor",
               ...(isFlexDirectionColumn
-                ? { minWidth: size, minHeight: 4 }
-                : { minWidth: 4, minHeight: size }),
+                ? { minWidth: size, minHeight: 3 }
+                : { minWidth: 3, minHeight: size }),
             }}
           />
         ))}