Curated examples page

Author: saharmor

example/src/App.js

@@ -12,11 +12,12 @@ import Typography from "@material-ui/core/Typography";
 import {Link, List, ListItem, ListItemText} from "@material-ui/core";
 import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
 import GitHubIcon from '@material-ui/icons/GitHub';
+import LinkedInIcon from "@material-ui/icons/LinkedIn";
 
 const useStyles = (theme) => ({
   root: {
     backgroundColor: '#fbfafa',
-    height: '100%',
+    height: '100vh',
     display: 'flex',
     flexDirection: 'column',
     flex: '1',
@@ -25,13 +26,19 @@ const useStyles = (theme) => ({
   headline: {
     marginBottom: '10px',
   },
+  ctaText: {
+    fontWeight: 'bold',
+  },
   cmd: {
     backgroundColor: '#dedede',
   },
   listBullet: {
     fontSize: '10px',
     marginRight: '3px',
   },
+  footer: {
+    marginTop: '30px',
+  }
 });
 
 const App = ({classes}) => {
@@ -75,7 +82,7 @@ const App = ({classes}) => {
 
   return (
     <GlobalHotKeys keyMap={keyMap} handlers={handlers}>
-      <Grid className={classes.root} container justify='center' alignItems='center' spacing={3}>
+      <Grid className={classes.root} container alignItems='center' spacing={3}>
         <Grid item>
           <Typography className={classes.headline} align="center" variant="h4">
             react-super-cmd <span role="img" aria-label="lightning-emoji">⚡</span>
@@ -84,7 +91,7 @@ const App = ({classes}) => {
           <Typography align="center" variant="h6">A blazing fast command line to allow your users to seamlessly interact with your React app.</Typography>
         </Grid>
         {!lastRunCmd && <Grid item>
-          <Typography align="center" variant="body1">
+          <Typography className={classes.ctaText} color="primary" align="center" variant="body1">
             Give it a spin <span role="img" aria-label="point-emoji">👉</span> Press <code className={classes.cmd}>cmd+k</code>
           </Typography>
         </Grid>}
@@ -111,17 +118,24 @@ const App = ({classes}) => {
             </ListItem>
           </List>
         </Grid>
-        <Grid item>
-          <Grid item container direction="row" spacing={1}>
+        <Grid item className={classes.footer}>
+          <Grid item>
+            <Typography variant={"body1"}>
+              <Link href="https://github.com/saharmor/react-super-cmd" target="_blank" rel="noreferrer">
+                By Sahar Mor
+              </Link>
+            </Typography>
+          </Grid>
+          <Grid item container justify="center" direction="row" spacing={1}>
             <Grid item>
-              <GitHubIcon/>
+              <Link href="https://github.com/saharmor/react-super-cmd" target="_blank" rel="noreferrer">
+                <GitHubIcon fontSize="small"/>
+              </Link>
             </Grid>
             <Grid item>
-              <Typography variant={"body1"}>
-                <Link href="https://github.com/saharmor/react-super-cmd" target="_blank" rel="noreferrer">
-                  By Sahar Mor
-                </Link>
-              </Typography>
+              <Link href="https://www.linkedin.com/in/sahar-mor/" target="_blank" rel="noreferrer">
+                <LinkedInIcon/>
+              </Link>
             </Grid>
           </Grid>
         </Grid>

example/src/index.css

@@ -1,14 +1,35 @@
 body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+#root {
+    height: 100vh;
+}
+
+html {
+    height: 100%;
+}
+
+body {
+    min-height: 100%;
+}
+
+/* MaterialUI overrides */
+a:-webkit-any-link {
+    text-decoration: none !important;
+}
+
+a, a:visited, a:hover, a:active {
+    color: inherit;
+}