Styling for editor image uploader card

ghost/admin/Gruntfile.js

@@ -47,7 +47,7 @@ module.exports = function(grunt) {
                         return 'npm run build -- --environment=production --silent';
                     case 'dev':
                         return 'npm run build';
-                     case 'watch':
+                    case 'watch':
                         return 'npm run build -- --watch';
                     }
                 },

ghost/admin/app/styles/addons/gh-koenig/gh-koenig.css

@@ -43,11 +43,14 @@
 }
 
 .__mobiledoc-card {
-    display: inline-block; /* required for cursor movement around card */
-    border: 1px solid;
-    width: calc(100% - 20px); /* required for obvious cursor placmenet around card */
-    margin:5px;
- }
+    position: relative;
+    display: block; /* required for cursor movement around card */
+    width: 100%;
+}
+
+.__mobiledoc-card:hover {
+    box-shadow: var(--blue) 0 0 0 1px;
+}
 
 .__mobiledoc-card .card-handle {
     position: absolute;
@@ -150,3 +153,12 @@ textarea.ed_code {
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
 }
+
+
+.__mobiledoc-card .gh-image-uploader .upload-form {
+    width: 100%;
+    height: 350px;
+    background: color(var(--lightgrey) l(+4%));
+    box-shadow: var(--lightgrey) 0 0 0 1px inset, #fff 0 0 0 15px inset;
+    border-radius: 3px;
+}

ghost/admin/app/styles/components/uploader.css

@@ -64,6 +64,7 @@
     flex-grow: 1;
     display: flex;
     align-items: center;
+    justify-content: center;
     outline: none;
 }
 

ghost/admin/app/templates/components/gh-image-uploader.hbs

@@ -15,7 +15,7 @@
     {{!-- file selection/drag-n-drop  --}}
     <div class="upload-form">
         {{#gh-file-input multiple=false alt=description action=(action "fileSelected") accept=accept}}
-            <div class="description">{{description}}</div>
+            <div class="gh-btn gh-btn-outline"><span>{{description}}</span></div>
         {{/gh-file-input}}
     </div>
 {{/if}}

ghost/admin/lib/gh-koenig/addon/templates/components/image-card.hbs

@@ -18,7 +18,7 @@
     {{!-- file selection/drag-n-drop  --}}
     <div class="upload-form">
         {{#gh-file-input multiple=false alt=description action=(action 'fileSelected') accept=accept}}
-            <div class="description">{{description}}</div>
+            <div class="gh-btn gh-btn-blue"><span>{{description}}</span></div>
         {{/gh-file-input}}
     </div>
 {{/if}}