UI niceties

2 files changed, 35 insertions, 11 deletions

diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
index 1d15296..a59a433 100644
--- a/frontend/views/page/components/tile.form.js
+++ b/frontend/views/page/components/tile.form.js
@@ -313,16 +313,19 @@ class TileForm extends Component {
     console.log(temporaryTile.settings)
     return (
       <div>
-        <TextInput
-          title=""
-          placeholder='http://'
-          name="url"
-          required
-          data={temporaryTile.settings}
-          error={errorFields.has('url')}
-          onChange={this.handleImageChange.bind(this)}
-          autoComplete="off"
-        />
+        <div className='row imageUrl'>
+          {temporaryTile.settings.url && <div className='thumb'><img src={temporaryTile.settings.url} /></div>}
+          <TextInput
+            title=""
+            placeholder='http://'
+            name="url"
+            required
+            data={temporaryTile.settings}
+            error={errorFields.has('url')}
+            onChange={this.handleImageChange.bind(this)}
+            autoComplete="off"
+          />
+        </div>
         <div className='row pair'>
           <Checkbox
             label="Tiled"
diff --git a/frontend/views/page/page.css b/frontend/views/page/page.css
index 887ec0f..5c29a9a 100644
--- a/frontend/views/page/page.css
+++ b/frontend/views/page/page.css
@@ -68,6 +68,27 @@
   opacity: 0.6;
 }
 
-.row.buttons {
+.row.imageUrl label {
+  width: 13rem;
+}
+.row.imageUrl .thumb {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 1.5rem;
+  width: 2rem;
+  margin-right: 0.5rem;
+}
+.row.imageUrl img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.box .row.buttons {
+  justify-content: space-between;
+}
+.box .row.pair {
   justify-content: space-between;
 }
+.box .pair label:last-child {
+  margin-right: 0;
+}
\ No newline at end of file