tidy up layout

views/lib/cropper.mcss

@@ -1,7 +1,4 @@
 Cropper {
-  input[type="file"] {
-    width: 14rem
-  }
   div.lightbox {
     div.lightbox__content {
       div.canvas {

views/settings/edit.js

@@ -29,20 +29,24 @@ module.exports = function SettingsEdit (opts) {
   return h('Settings', [
     h('h1', 'Settings'),
     h('section.inputs', [
-      h('div.avatar', [
-        h('label.avatar', 'Avatar'),
-        Cropper({ addBlob, image: state.avatar }),
-        computed(state.avatar, img => (img ? h('img.avatar', { src: blobUrl(img.link) }) : avatar(feedId, 10)))
-      ]),
-      h('div.name', [
-        h('label.name', 'Name'),
-        computed(name(feedId), name => (
-          h('input.name', {
-            value: name,
-            'ev-input': (e) => state.name.set(e.target.value)
-          })
-        ))
+      h('div.inputs', [
+        h('div.avatar', [
+          h('label.avatar', 'Avatar'),
+          Cropper({ addBlob, image: state.avatar }),
+        ]),
+        h('div.name', [
+          h('label.name', 'Name'),
+          computed(name(feedId), name => (
+            h('input.name', {
+              value: name,
+              'ev-input': (e) => state.name.set(e.target.value)
+            })
+          ))
+        ])
       ]),
+      h('div.current', [
+        computed(state.avatar, img => (img ? h('img.avatar', { src: blobUrl(img.link) }) : avatar(feedId, 10)))
+      ])
     ]),
     h('section.actions', when(state.isSaving,
       h('i.fa.fa-spinner.fa-pulse'),
@@ -52,12 +56,11 @@ module.exports = function SettingsEdit (opts) {
           state.isSaving.set(false)
           const name = resolve(state.name)
           const image = resolve(state.avatar)
-          console.log("IS PUBLISHING")
-          // publish(Object.assign(about, { name, image }), (err, about) => {
-          //   canSave.set(true)
-          //   if (err) throw err
-          //   console.log(about)
-          // })
+          publish(Object.assign(about, { name, image }), (err, about) => {
+            canSave.set(true)
+            if (err) throw err
+            else onCancel()
+          })
         } }, 'Save')
       ]
     ))

views/settings/edit.mcss

@@ -25,29 +25,36 @@ Settings {
   }
 
   section.inputs {
-    display: grid
-    grid-gap: 1rem
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-columns: 70% auto;
 
-    div {
-      div.Cropper {}
+    div.inputs {
       display: grid
-      grid-template-columns: 7.5rem 15rem auto;
-      align-items: center
+      div {
+        display: grid;
+        grid-template-columns: 9rem auto;
 
-      label {
-        font-size: .8rem
-        text-transform: uppercase
-        letter-spacing: .1rem
-      }
+        div.Cropper {
+          input[type='file'] {
+            width: 14rem
+          }
+        }
+        align-items: center
+
+        label {
+          font-size: .8rem
+          text-transform: uppercase
+          letter-spacing: .1rem
+        }
 
-      input { }
-      input.quorum {
-        max-width: 18rem
+        input {
+          width: 14rem
+        }
       }
-      textarea { min-height: 8rem }
     }
 
-    div.avatar {
+    div.current {
       a.Avatar {
         justify-self: center
       }