feat: better preview

src/components/EmbedCustomize.tsx

@@ -8,11 +8,9 @@ import {
 import {
   Box,
   Button,
-  Card,
   Flex,
   Heading,
   IconButton,
-  Inset,
   ScrollArea,
   Select,
   Slider,
@@ -568,15 +566,21 @@ 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
+            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-translucent)',
+                backgroundColor: 'var(--color-panel-solid)',
               }}
             >
               <Text color="gray">Example preview</Text>
@@ -593,14 +597,10 @@ export function EmbedCustomize<Config extends EmbedConfig>({
                 </IconButton>
               </Flex>
             </Flex>
-              </Inset>
 
             <Flex
-                mt="4"
               flexGrow="1"
               style={{
-                  borderRadius: toRadiusVar('3'),
-                  overflow: 'hidden',
                 background: `url(${backgroundImage}) center / cover no-repeat`,
               }}
               align="center"
@@ -609,7 +609,6 @@ export function EmbedCustomize<Config extends EmbedConfig>({
               {preview(state)}
             </Flex>
           </Flex>
-          </Card>
         </Box>
       </Flex>
     </PageWrapper>