From 54fbb109828877a99caee5bbe045cfa1ca094c5a Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 9 Aug 2023 21:32:16 -0300
Subject: [PATCH] yarn docs:typescript:formatted

---
 .../theme-colors/PaletteThemeViewer.js        | 34 +++++++++++++------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/docs/data/joy/customization/theme-colors/PaletteThemeViewer.js b/docs/data/joy/customization/theme-colors/PaletteThemeViewer.js
index 49c48d2b766283..4a85f8c55e5c51 100644
--- a/docs/data/joy/customization/theme-colors/PaletteThemeViewer.js
+++ b/docs/data/joy/customization/theme-colors/PaletteThemeViewer.js
@@ -9,7 +9,7 @@ import Sheet from '@mui/joy/Sheet';
 import LightMode from '@mui/icons-material/LightModeOutlined';
 import DarkMode from '@mui/icons-material/DarkModeOutlined';
 import InfoOutlined from '@mui/icons-material/InfoOutlined';
-import Check from '@mui/icons-material/Check';
+import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
 import useClipboardCopy from 'docs/src/modules/utils/useClipboardCopy';
 
 const defaultTheme = extendTheme();
@@ -37,9 +37,6 @@ const collator = new Intl.Collator(undefined, {
 });
 
 const Table = styled('table')(({ theme }) => ({
-  border: '1px solid',
-  borderColor: theme.vars.palette.divider,
-  borderRadius: '12px',
   borderCollapse: 'separate',
   borderSpacing: 0,
   display: 'block',
@@ -47,7 +44,7 @@ const Table = styled('table')(({ theme }) => ({
   overflowY: 'scroll',
   th: {
     textAlign: 'left',
-    padding: '8px 6px',
+    padding: 8,
     position: 'sticky',
     top: 0,
     zIndex: 1,
@@ -102,7 +99,18 @@ export default function PaletteThemeViewer() {
   );
 
   return (
-    <Box sx={{ width: '100%', overflow: 'hidden', position: 'relative' }}>
+    <Box
+      sx={{
+        marginBottom: '-9px',
+        width: '100%',
+        overflow: 'hidden',
+        position: 'relative',
+        border: '1px solid',
+        borderColor: 'divider',
+        borderTopLeftRadius: '12px',
+        borderTopRightRadius: '12px',
+      }}
+    >
       <Sheet
         variant="solid"
         color="success"
@@ -115,13 +123,18 @@ export default function PaletteThemeViewer() {
           })`,
           transition: '0.3s',
           p: 0.5,
-          px: 0.75,
-          borderRadius: 'xs',
-          boxShadow: 'sm',
+          pl: 0.5,
+          pr: 1,
+          borderRadius: 'xl',
+          boxShadow: 'md',
           zIndex: 1,
         }}
       >
-        <Typography level="body-xs" textColor="inherit" startDecorator={<Check />}>
+        <Typography
+          level="body-xs"
+          textColor="inherit"
+          startDecorator={<CheckCircleRoundedIcon fontSize="small" />}
+        >
           Copied
         </Typography>
       </Sheet>
@@ -164,6 +177,7 @@ export default function PaletteThemeViewer() {
                     color="neutral"
                     textColor="inherit"
                     fontSize="sm"
+                    fontWeight={500}
                     textAlign="left"
                     onClick={() => copy(token)}
                     endDecorator={