fix: add shadows

opengovsg · Jul 23, 2024 · 5d50876 · 5d50876
1 parent e047e37
commit 5d50876
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 32 deletions.
diff --git a/apps/studio/src/features/editing-experience/components/Preview.tsx b/apps/studio/src/features/editing-experience/components/Preview.tsx
@@ -3,7 +3,7 @@ import type {
   IsomerSchema,
 } from "@opengovsg/isomer-components"
 import type { PartialDeep } from "type-fest"
-import { Skeleton, Box } from "@chakra-ui/react"
+import { Skeleton } from "@chakra-ui/react"
 import { RenderEngine } from "@opengovsg/isomer-components"
 import { merge } from "lodash"
 
@@ -37,27 +37,21 @@ function SuspendablePreview({
   })
 
   return (
-    // TODO: should migrate this to a colour token
-    <Box p="2rem" backgroundColor="#EDEDED">
-      {/* TODO: should migrate this to a colour token */}
-      <Box borderRadius="8px" backgroundColor="white" boxShadow="0px 0px 20px 0px #6868684D" overflow="hidden">
-        <RenderEngine
-          {...renderProps}
-          site={{
-            // TODO: fixup all the typing errors
-            // @ts-expect-error to fix when types are proper
-            // TODO: dynamically generate sitemap
-            siteMap: { title: "Home", permalink: "/", children: [] },
-            environment: "production",
-            // TODO: Fetch from DB in the future
-            lastUpdated: "3 Apr 2024",
-            ...siteConfig,
-            navBarItems: navbar,
-            footerItems: footer,
-          }}
-        />
-      </Box>
-    </Box>
+    <RenderEngine
+      {...renderProps}
+      site={{
+        // TODO: fixup all the typing errors
+        // @ts-expect-error to fix when types are proper
+        // TODO: dynamically generate sitemap
+        siteMap: { title: "Home", permalink: "/", children: [] },
+        environment: "production",
+        // TODO: Fetch from DB in the future
+        lastUpdated: "3 Apr 2024",
+        ...siteConfig,
+        navBarItems: navbar,
+        footerItems: footer,
+      }}
+    />
   )
 }
 

diff --git a/apps/studio/src/pages/sites/[siteId]/pages/[pageId]/index.tsx b/apps/studio/src/pages/sites/[siteId]/pages/[pageId]/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from "react"
-import { Grid, GridItem } from "@chakra-ui/react"
+import { Box, Grid, GridItem } from "@chakra-ui/react"
 import { z } from "zod"
 
 import { useEditorDrawerContext } from "~/contexts/EditorDrawerContext"
@@ -51,15 +51,17 @@ function EditPage(): JSX.Element {
       </GridItem>
       {/* TODO: Implement preview */}
       <GridItem colSpan={2} overflow="scroll">
-        {/* TODO: the version here should be obtained from the schema  */}
-        {/* and not from the page */}
-        <Preview
-          siteId={siteId}
-          {...page}
-          permalink={permalink}
-          version="0.1.0"
-          content={previewPageState}
-        />
+        <Box p="2rem" bg="gray.100">
+          <Box borderRadius="8px" bg="white" shadow="md" overflow="hidden">
+            <Preview
+              siteId={siteId}
+              {...page}
+              permalink={permalink}
+              version="0.1.0"
+              content={previewPageState}
+            />
+          </Box>
+        </Box>
       </GridItem>
     </Grid>
   )