From afa218ce30a3128a65b5b61ff24cbfd6271fa3da Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Thu, 25 Jan 2024 16:39:59 +0100
Subject: [PATCH] fix: Remaining styling fixes for box shadow and backgrounds
 (#2818)

Closes https://github.com/webstudio-is/webstudio/issues/1889

## Description

Small  styling fixes

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @TrySound , I need you to do
  - conceptual review (architecture, feature-correctness)

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
---
 .../style-panel/sections/backgrounds/background-thumbnail.tsx   | 1 +
 .../features/style-panel/sections/backgrounds/backgrounds.tsx   | 2 +-
 .../style-panel/sections/box-shadows/box-shadow-layer.tsx       | 2 +-
 .../app/builder/features/style-panel/shared/color-thumb.tsx     | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-thumbnail.tsx b/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-thumbnail.tsx
index 1ef602dfff..65b4e26cbf 100644
--- a/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-thumbnail.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-thumbnail.tsx
@@ -15,6 +15,7 @@ import { toPascalCase } from "../../shared/keyword-utils";
 
 const Thumbnail = styled("div", {
   borderRadius: 2,
+  borderWidth: 0,
   width: theme.spacing[10],
   height: theme.spacing[10],
 });
diff --git a/apps/builder/app/builder/features/style-panel/sections/backgrounds/backgrounds.tsx b/apps/builder/app/builder/features/style-panel/sections/backgrounds/backgrounds.tsx
index 0b87d689ae..58b182d85d 100644
--- a/apps/builder/app/builder/features/style-panel/sections/backgrounds/backgrounds.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/backgrounds/backgrounds.tsx
@@ -230,7 +230,7 @@ export const BackgroundsSection = (props: RenderCategoryProps) => {
     >
       <Flex gap={1} direction="column">
         <CssValueListArrowFocus dragItemId={dragItemId}>
-          <Flex gap={1} direction="column" ref={sortableRefCallback}>
+          <Flex direction="column" ref={sortableRefCallback}>
             {sortableItems.map((layer, index) => (
               <Layer
                 id={layer.id}
diff --git a/apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadow-layer.tsx b/apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadow-layer.tsx
index 8316f71c7d..fcdb40380b 100644
--- a/apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadow-layer.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadow-layer.tsx
@@ -95,7 +95,7 @@ export const Layer = (props: LayerProps) => {
             />
           </>
         }
-      ></CssValueListItem>
+      />
     </FloatingPanel>
   );
 };
diff --git a/apps/builder/app/builder/features/style-panel/shared/color-thumb.tsx b/apps/builder/app/builder/features/style-panel/shared/color-thumb.tsx
index 82843d4f16..6f71270061 100644
--- a/apps/builder/app/builder/features/style-panel/shared/color-thumb.tsx
+++ b/apps/builder/app/builder/features/style-panel/shared/color-thumb.tsx
@@ -38,7 +38,7 @@ const style = css({
   height: theme.spacing[10],
   backgroundBlendMode: "difference",
   borderRadius: 2,
-  borderStyle: "solid",
+  borderWidth: 0,
 });
 
 export const ColorThumb = forwardRef<