[docs-infra] Polish demo toolbar button designs (mui#37680)

mfal · Jun 23, 2023 · 35d8bd6 · 35d8bd6
1 parent 9340efd
commit 35d8bd6
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
@@ -137,7 +137,7 @@ const Button = styled(MDButton)(({ theme }) => ({
   border: 'none',
   paddingLeft: theme.spacing(1),
   paddingRight: theme.spacing(0.5),
-  fontSize: '0.85rem',
+  fontSize: theme.typography.pxToRem(13),
   fontWeight: theme.typography.fontWeightMedium,
   color: theme.palette.primary.main,
   '& svg': {
@@ -172,8 +172,8 @@ const MenuItem = styled(MDMenuItem)(({ theme }) => ({
 
 const ToggleButton = styled(MDToggleButton)(({ theme }) => [
   theme.unstable_sx({
-    padding: theme.spacing(0, 1),
-    fontSize: '0.85rem',
+    padding: theme.spacing(0, 1, 0.1, 1),
+    fontSize: theme.typography.pxToRem(13),
     borderRadius: 99,
     borderColor: 'grey.200',
     '&.Mui-disabled': {
@@ -602,6 +602,7 @@ export default function DemoToolbar(props) {
               onClick={handleCodeOpenClick}
               color="default"
               {...getControlProps(3)}
+              sx={{ borderRadius: 1 }}
             >
               <CodeRoundedIcon />
             </IconButton>
@@ -615,6 +616,7 @@ export default function DemoToolbar(props) {
                   data-ga-event-action="codesandbox"
                   onClick={() => codeSandbox.createReactApp(demoData).openSandbox('/demo')}
                   {...getControlProps(4)}
+                  sx={{ borderRadius: 1 }}
                 >
                   <SvgIcon viewBox="0 0 1024 1024">
                     <path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z" />
@@ -628,6 +630,7 @@ export default function DemoToolbar(props) {
                   data-ga-event-action="stackblitz"
                   onClick={() => stackBlitz.createReactApp(demoData).openSandbox('demo')}
                   {...getControlProps(5)}
+                  sx={{ borderRadius: 1 }}
                 >
                   <SvgIcon viewBox="0 0 19 28">
                     <path d="M8.13378 16.1087H0L14.8696 0L10.8662 11.1522L19 11.1522L4.13043 27.2609L8.13378 16.1087Z" />
@@ -643,6 +646,7 @@ export default function DemoToolbar(props) {
               data-ga-event-action="copy"
               onClick={handleCopyClick}
               {...getControlProps(6)}
+              sx={{ borderRadius: 1 }}
             >
               <ContentCopyRoundedIcon />
             </IconButton>
@@ -654,6 +658,7 @@ export default function DemoToolbar(props) {
               data-ga-event-action="reset-focus"
               onClick={handleResetFocusClick}
               {...getControlProps(7)}
+              sx={{ borderRadius: 1 }}
             >
               <ResetFocusIcon />
             </IconButton>
@@ -666,6 +671,7 @@ export default function DemoToolbar(props) {
               data-ga-event-action="reset"
               onClick={onResetDemoClick}
               {...getControlProps(8)}
+              sx={{ borderRadius: 1 }}
             >
               <RefreshRoundedIcon />
             </IconButton>
@@ -676,6 +682,7 @@ export default function DemoToolbar(props) {
             aria-owns={anchorEl ? 'demo-menu-more' : undefined}
             aria-haspopup="true"
             {...getControlProps(9)}
+            sx={{ borderRadius: 1 }}
           >
             <MoreVertIcon />
           </IconButton>