feat(slice-machine-ui): update Slice Builder layout

cypress/e2e/slices/00-create.cy.js

@@ -47,13 +47,6 @@ describe("Create Slices", () => {
       "contain",
       "Save your work in order to simulate",
     );
-    cy.contains("button", "Update screenshot").should("have.attr", "disabled");
-    cy.contains("button", "Update screenshot").realHover();
-    cy.get("#update-screenshot-button-tooltip").should("be.visible");
-    cy.get("#update-screenshot-button-tooltip").should(
-      "contain",
-      "Save your work in order to update the screenshot",
-    );
 
     cy.location("pathname", { timeout: 20000 }).should(
       "eq",

packages/slice-machine/components/ScreenshotPreview/index.tsx

@@ -9,11 +9,9 @@ const MemoedImage = memo<{ src: string | undefined }>(({ src }) => (
 interface ScreenshotPreviewProps {
   src?: string;
   sx: { height: string | number } & ThemeUIStyleObject;
-  hideMissingWarning?: boolean;
 }
 
 export const ScreenshotPreview: React.FC<ScreenshotPreviewProps> = ({
-  hideMissingWarning = false,
   src,
   sx,
 }) => {
@@ -32,23 +30,19 @@ export const ScreenshotPreview: React.FC<ScreenshotPreviewProps> = ({
         ...sx,
       }}
     >
-      {hideMissingWarning ? null : (
-        <>
-          {src !== undefined ? (
-            <MemoedImage src={src} />
-          ) : (
-            <Text
-              sx={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-              }}
-            >
-              <MdInfoOutline />
-              You have no screenshot yet.
-            </Text>
-          )}
-        </>
+      {src !== undefined ? (
+        <MemoedImage src={src} />
+      ) : (
+        <Text
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <MdInfoOutline />
+          You have no screenshot yet.
+        </Text>
       )}
     </Flex>
   );

packages/slice-machine/components/Simulator/components/Header/index.tsx

@@ -1,16 +1,15 @@
 import router from "next/router";
 import { Text, Flex, Switch, Label } from "theme-ui";
 
-import VarationsPopover from "@lib/builders/SliceBuilder/Header/VariationsPopover";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-
 import { Button } from "@components/Button";
+import VariationsPopover from "@components/Simulator/components/Header/VariationsPopover";
+import * as Links from "@components/Simulator/components/Header/links";
 import SliceMachineLogo from "@src/icons/SliceMachineLogo";
 import { useSelector } from "react-redux";
 import { selectSavingMock } from "@src/modules/simulator";
 
-import * as Links from "@lib/builders/SliceBuilder/links";
 import { SliceMachineStoreType } from "@src/redux/type";
+import { ComponentUI } from "@lib/models/common/ComponentUI";
 import { VariationSM } from "@lib/models/common/Slice";
 
 const redirect = (
@@ -80,7 +79,7 @@ const Header: React.FunctionComponent<PropTypes> = ({
         >
           {slice.model.name}
         </Text>
-        <VarationsPopover
+        <VariationsPopover
           defaultValue={variation}
           variations={slice.model.variations}
           onChange={(v) => redirect(slice, v, true)}

packages/slice-machine/lib/builders/SliceBuilder/FieldZones/index.tsx

@@ -1,5 +1,3 @@
-import { Box } from "theme-ui";
-
 import { ensureDnDDestination } from "@lib/utils";
 import { transformKeyAccessor } from "@utils/str";
 
@@ -10,6 +8,7 @@ import * as Widgets from "@lib/models/common/widgets";
 import sliceBuilderWidgetsArray from "@lib/models/common/widgets/sliceBuilderArray";
 
 import { DropResult } from "react-beautiful-dnd";
+import { List } from "@src/components/List";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { VariationSM, WidgetsArea } from "@lib/models/common/Slice";
 
@@ -118,7 +117,7 @@ const FieldZones: React.FunctionComponent<FieldZonesProps> = ({
   };
 
   return (
-    <>
+    <List>
       <Zone
         zoneType="slice"
         tabId={undefined}
@@ -145,7 +144,6 @@ const FieldZones: React.FunctionComponent<FieldZonesProps> = ({
         dataCy="slice-non-repeatable-zone"
         isRepeatableCustomType={undefined}
       />
-      <Box mt={4} />
       <Zone
         zoneType="slice"
         tabId={undefined}
@@ -171,7 +169,7 @@ const FieldZones: React.FunctionComponent<FieldZonesProps> = ({
         dataCy="slice-repeatable-zone"
         isRepeatableCustomType={undefined}
       />
-    </>
+    </List>
   );
 };