Ui (#8)

* spruce up UI a bit

* fission color palette

Author: dholms

src/App.js

@@ -3,7 +3,20 @@ import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import Main from "./components/Main";
 
-const theme = createMuiTheme({});
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      main: "#6446fa",
+      light: "#9e74ff",
+      dark: "#1118c6"
+    },
+    secondary: {
+      main: "#ff5274",
+      light: "#ff87a2",
+      dark: "#1118c6"
+    }
+  }
+});
 
 function App() {
   return (

src/components/Main.js

@@ -1,6 +1,8 @@
 import React from "react";
 import { withStyles, createStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";
+import Grid from "@material-ui/core/Grid";
+import Paper from "@material-ui/core/Paper";
 import Typography from "@material-ui/core/Typography";
 import PreferenceForm from "./PreferenceForm";
 import Preview from "./Preview";
@@ -100,19 +102,32 @@ class Main extends React.Component {
         <Typography variant="h4" gutterBottom>
           IPFS Portable User Settings
         </Typography>
-        <div className={classes.main}>
-          <PreferenceForm
-            cid={this.state.cid}
-            preferences={this.state.preferences}
-            justSaved={this.state.justSaved}
-            justLoaded={this.state.justLoaded}
-            onCIDChange={this.handleCIDChange}
-            onPrefChange={this.handlePrefChange}
-            onLoad={this.handleLoad}
-            onSave={this.handleSave}
-          />
-          <Preview cid={this.state.cid} preferences={this.state.preferences} />
-        </div>
+        {/* <div className={classes.main}> */}
+        <Grid container spacing={3}>
+          <Grid item sm={12} md={6}>
+            <Paper className={classes.paper}>
+              <PreferenceForm
+                cid={this.state.cid}
+                preferences={this.state.preferences}
+                justSaved={this.state.justSaved}
+                justLoaded={this.state.justLoaded}
+                onCIDChange={this.handleCIDChange}
+                onPrefChange={this.handlePrefChange}
+                onLoad={this.handleLoad}
+                onSave={this.handleSave}
+              />
+            </Paper>
+          </Grid>
+          <Grid item sm={12} md={6}>
+            <Paper className={classes.paper}>
+              <Preview
+                cid={this.state.cid}
+                preferences={this.state.preferences}
+              />
+            </Paper>
+          </Grid>
+        </Grid>
+        {/* </div> */}
         <ErrorSnackbar
           error={this.state.error}
           onClose={this.handleErrorClose}
@@ -129,6 +144,9 @@ const styles = theme =>
     },
     main: {
       display: "flex"
+    },
+    paper: {
+      padding: 32
     }
   });
 

src/components/PreferenceForm.js

@@ -1,13 +1,13 @@
 import React from "react";
 import { withStyles, createStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
 import TextField from "@material-ui/core/TextField";
 import InputLabel from "@material-ui/core/InputLabel";
 import Select from "@material-ui/core/Select";
 import MenuItem from "@material-ui/core/MenuItem";
 import Divider from "@material-ui/core/Divider";
 import LoadIcon from "@material-ui/icons/Unarchive";
 import SaveIcon from "@material-ui/icons/Save";
-import * as codeStyles from "react-syntax-highlighter/dist/esm/styles/hljs";
 import SubmitButton from "./SubmitButton";
 
 class PreferenceForm extends React.Component {
@@ -25,6 +25,9 @@ class PreferenceForm extends React.Component {
 
     return (
       <div className={classes.root}>
+        <Typography variant="h5" className={classes.header}>
+          Settings
+        </Typography>
         <form onSubmit={this.props.onLoad}>
           <TextField
             label="cid"
@@ -70,7 +73,7 @@ class PreferenceForm extends React.Component {
             fullWidth
             className={classes.input}
           >
-            {Object.keys(codeStyles).map(style => (
+            {styleOptions.map(style => (
               <MenuItem key={style} value={style}>
                 {style}
               </MenuItem>
@@ -88,11 +91,32 @@ class PreferenceForm extends React.Component {
   }
 }
 
+const styleOptions = [
+  "arduinoLight",
+  "codepenEmbed",
+  "darcula",
+  "docco",
+  "github",
+  "googlecode",
+  "hybrid",
+  "monokaiSublime",
+  "nord",
+  "ocean",
+  "pojoaque",
+  "tomorrow",
+  "tomorrowNight",
+  "vs"
+];
+
 const styles = theme =>
   createStyles({
     root: {
-      width: "100%",
-      marginRight: 64
+      width: "100%"
+    },
+    header: {
+      borderBottom: `1px solid ${theme.palette.divider}`,
+      paddingBottom: theme.spacing(1),
+      marginBottom: theme.spacing(2)
     },
     divider: {
       marginTop: 32,

src/components/Preview.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { withStyles, createStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
 import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
 import js from "react-syntax-highlighter/dist/esm/languages/hljs/javascript";
 import * as codeStyles from "react-syntax-highlighter/dist/esm/styles/hljs";
@@ -10,6 +11,9 @@ class Preview extends React.Component {
     const { preferences = {}, classes } = this.props;
     return (
       <div className={classes.root}>
+        <Typography variant="h5" className={classes.header}>
+          Preview
+        </Typography>
         <div>One: {preferences.one}</div>
         <div>Two: {preferences.two}</div>
         <div>Three: {preferences.three}</div>
@@ -42,8 +46,12 @@ export const ipfsIsWorking = async ipfs => {
 const styles = theme =>
   createStyles({
     root: {
-      marginLeft: 64,
       width: "100%"
+    },
+    header: {
+      borderBottom: `1px solid ${theme.palette.divider}`,
+      paddingBottom: theme.spacing(1),
+      marginBottom: theme.spacing(2)
     }
   });