Merge pull request #66 from netlify/apply-theme

Apply theme

src/components/Cards/ImageCard.js

@@ -9,7 +9,7 @@ export default class ImageCard extends React.Component {
     return (
       <Card onClick={onClick} className={styles.root}>
         <img src={image} onLoad={onImageLoaded} />
-        <h1>{text}</h1>
+        <h2>{text}</h2>
 
         {description ? <p>{description}</p> : null}
       </Card>

src/components/EntryEditor.js

@@ -8,7 +8,7 @@ export default function EntryEditor({ collection, entry, getMedia, onChange, onA
     <h1>Entry in {collection.get('label')}</h1>
     <h2>{entry && entry.get('title')}</h2>
     <div className="cms-container" style={styles.container}>
-      <div className="cms-control-pane" style={styles.pane}>
+      <div className="cms-control-pane" style={styles.controlPane}>
         <ControlPane
             collection={collection}
             entry={entry}
@@ -30,6 +30,11 @@ const styles = {
   container: {
     display: 'flex'
   },
+  controlPane: {
+    width: '50%',
+    paddingLeft: '10px',
+    paddingRight: '10px'
+  },
   pane: {
     width: '50%'
   }

src/components/Widgets/ImageControl.js

@@ -78,8 +78,8 @@ export default class ImageControl extends React.Component {
           onDragOver={this.handleDragOver}
           onDrop={this.handleChange}
       >
-        <span onClick={this.handleClick}>
-          {imageName ? imageName : 'Click or drop image here.'}
+        <span style={styles.imageUpload} onClick={this.handleClick}>
+          {imageName ? imageName : 'Tip: Click here to upload an image from your file browser, or drag an image directly into this box from your desktop'}
         </span>
         <input
             type="file"
@@ -96,6 +96,16 @@ export default class ImageControl extends React.Component {
 const styles = {
   input: {
     display: 'none'
+  },
+  imageUpload: {
+    backgroundColor: '#fff',
+    textAlign: 'center',
+    color: '#999',
+    padding: '20px',
+    display: 'block',
+    border: '1px dashed #eee',
+    cursor: 'pointer',
+    fontSize: '12px'
   }
 };
 

src/containers/FindBar.css

@@ -1,9 +1,9 @@
 :root {
-  --foregroundColor: #555;
-  --backgroundColor: rgba(245, 245, 245, 0.98);
+  --foregroundColor: #fff;
+  --backgroundColor: #272e30;
   --textFieldBorderColor: #e7e7e7;
-  --highlightFGColor: #444;
-  --highlightBGColor: #d2dee4;
+  --highlightFGColor: #fff;
+  --highlightBGColor: #3ab7a5;
 }
 
 .root {
@@ -30,6 +30,7 @@
   white-space: nowrap;
   vertical-align: middle;
   border-right: 1px solid var(--textFieldBorderColor);
+  margin:0;
 }
 
 .inputField {

src/index.css

@@ -3,6 +3,7 @@ html {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   margin: 0;
+  font-family: Roboto,"Helvetica Neue",HelveticaNeue,Helvetica,Arial,sans-serif;
 }
 *, *:before, *:after {
   box-sizing: inherit;
@@ -11,14 +12,16 @@ html {
 body {
   font-family: 'Roboto', sans-serif;
   height: 100%;
-  background-color: #fafafa;
+  background-color: #f2f5f4;
+  color:#7c8382;
   margin: 0;
 }
 
 header {
-  background-color: #fff;
+  background-color: #272e30;
   box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22);
   height: 54px;
+  border-bottom:2px solid #3ab7a5;
   position: fixed;
   width: 100%;
   z-index: 999;
@@ -31,3 +34,29 @@ header {
 h1, h2, h3, h4, h5, h6, p {
   margin: 0;
 }
+
+h1{
+    color: #3ab7a5;
+    border-bottom: 1px solid #3ab7a5;
+    margin: 30px auto 25px;
+    padding-bottom: 15px;
+    font-size: 25px;
+}
+
+input{
+  width:100%;
+  padding:3px;
+  font-size:14px;
+  margin-bottom:10px;
+}
+header input{
+  margin-bottom:0;
+}
+button{
+  border: 1px solid #3ab7a5;
+  padding: 3px 20px;
+  font-size: 12px;
+  line-height: 18px;
+  background-color:#fff;
+  cursor: pointer;
+}