From 1b376746a277aafe2dadd7213f913ed86c93b0ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 6 Aug 2024 21:06:53 -0500
Subject: [PATCH] feat: better preview

---
 src/components/EmbedCustomize.tsx | 81 +++++++++++++++----------------
 1 file changed, 40 insertions(+), 41 deletions(-)

diff --git a/src/components/EmbedCustomize.tsx b/src/components/EmbedCustomize.tsx
index deb1dafde..696670985 100644
--- a/src/components/EmbedCustomize.tsx
+++ b/src/components/EmbedCustomize.tsx
@@ -8,11 +8,9 @@ import {
 import {
   Box,
   Button,
-  Card,
   Flex,
   Heading,
   IconButton,
-  Inset,
   ScrollArea,
   Select,
   Slider,
@@ -568,48 +566,49 @@ export function EmbedCustomize<Config extends EmbedConfig>({
           top={`${NAVBAR_HEIGHT}px`}
           height={`calc(100vh - ${NAVBAR_HEIGHT}px)`}
         >
-          <Card style={{ height: '100%' }}>
-            <Flex direction="column" gap="2" height="100%">
-              <Inset style={{ borderRadius: 0 }}>
-                <Flex
-                  justify="between"
-                  p="2"
-                  px="3"
-                  style={{
-                    backgroundColor: 'var(--color-panel-translucent)',
-                  }}
-                >
-                  <Text color="gray">Example preview</Text>
+          <Flex
+            direction="column"
+            height="100%"
+            style={{
+              borderRadius: 'var(--radius-3)',
+              overflow: 'hidden',
+              boxShadow: 'var(--shadow-3)',
+            }}
+          >
+            <Flex
+              justify="between"
+              p="2"
+              px="3"
+              style={{
+                backgroundColor: 'var(--color-panel-solid)',
+              }}
+            >
+              <Text color="gray">Example preview</Text>
 
-                  <Flex align="center" gap="3">
-                    <IconButton color="gray" disabled size="1" variant="ghost">
-                      <BorderSolidIcon />
-                    </IconButton>
-                    <IconButton color="gray" disabled size="1" variant="ghost">
-                      <SquareIcon />
-                    </IconButton>
-                    <IconButton color="gray" disabled size="1" variant="ghost">
-                      <Cross1Icon />
-                    </IconButton>
-                  </Flex>
-                </Flex>
-              </Inset>
-
-              <Flex
-                mt="4"
-                flexGrow="1"
-                style={{
-                  borderRadius: toRadiusVar('3'),
-                  overflow: 'hidden',
-                  background: `url(${backgroundImage}) center / cover no-repeat`,
-                }}
-                align="center"
-                justify="center"
-              >
-                {preview(state)}
+              <Flex align="center" gap="3">
+                <IconButton color="gray" disabled size="1" variant="ghost">
+                  <BorderSolidIcon />
+                </IconButton>
+                <IconButton color="gray" disabled size="1" variant="ghost">
+                  <SquareIcon />
+                </IconButton>
+                <IconButton color="gray" disabled size="1" variant="ghost">
+                  <Cross1Icon />
+                </IconButton>
               </Flex>
             </Flex>
-          </Card>
+
+            <Flex
+              flexGrow="1"
+              style={{
+                background: `url(${backgroundImage}) center / cover no-repeat`,
+              }}
+              align="center"
+              justify="center"
+            >
+              {preview(state)}
+            </Flex>
+          </Flex>
         </Box>
       </Flex>
     </PageWrapper>