Added styling to the codesandbox link.

Author: Hyperkid123

packages/react-renderer-demo/src/app/src/components/code-example.js

@@ -13,9 +13,11 @@ import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import Paper from '@material-ui/core/Paper';
 import clsx from 'clsx';
 import grey from '@material-ui/core/colors/grey';
+import IconButton from '@material-ui/core/IconButton';
 import { getParameters } from 'codesandbox/lib/api/define';
 
 import GhIcon from './common/gh-svg-icon';
+import CodesandboxIcon from './common/code-sandbox-svg-icon';
 
 const CodeEditor = dynamic(import('./code-editor'), {
   ssr: false
@@ -35,9 +37,11 @@ const useStyles = makeStyles((theme) => ({
     padding: 16
   },
   heading: {
-    fontSize: theme.typography.pxToRem(15),
+    fontSize: theme.typography.pxToRem(20),
     fontWeight: theme.typography.fontWeightRegular,
-    flexGrow: 1
+    flexGrow: 1,
+    display: 'flex',
+    alignItems: 'center'
   },
   secondaryHeading: {
     fontSize: theme.typography.pxToRem(15),
@@ -147,13 +151,20 @@ const CodeExample = ({ source, mode }) => {
         <Grid item xs={12}>
           <ExpansionPanel className={classes.expansionPanel}>
             <ExpansionPanelSummary className={classes.expansionPanelSummary} expandIcon={<CodeIcon />}>
-              {Component && <Typography className={classes.heading}>{Component.name}</Typography>}
+              {Component && (
+                <Typography className={classes.heading} component="h4" variant="h3">
+                  {Component.name}
+                </Typography>
+              )}
               <Box display="flex">
                 <form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank">
                   <input type="hidden" name="parameters" value={getPayload('pf4', codeSource)} />
-                  <input type="submit" value="Open in sandbox" />
+                  <IconButton disableFocusRipple type="submit">
+                    <CodesandboxIcon />
+                  </IconButton>
                 </form>
                 <Link
+                  component="button"
                   href={`https://github.com/data-driven-forms/react-forms/tree/master/packages/react-renderer-demo/src/app/examples/${source}.js`}
                   target="_blank"
                   rel="noopener noreferrer"

packages/react-renderer-demo/src/app/src/components/common/code-sandbox-svg-icon.js

@@ -0,0 +1,11 @@
+/* eslint-disable max-len */
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+const CodesandboxIcon = (props) => (
+  <SvgIcon {...props} viewBox="0 0 24 24" role="presentation">
+    <path d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z" />
+  </SvgIcon>
+);
+
+export default CodesandboxIcon;