Uploader styling updates

vue/src/components/ItemTile.vue

@@ -6,22 +6,24 @@
         <i class="fa fa-times-circle"></i>
       </button>
     </div>
-    <div class="item-text">
-    {{file.name}} ({{ Math.round(file.size/1024 * 100) / 100 }}KB)
-    </div>
-    <div class="button-wrapper">
-      <button type="button" @click.prevent="$emit('moveup')" :disabled="index === 0" aria-label="Move down one position">
-        <i class="fa fa-chevron-circle-left"></i>
-      </button>
-      <button type="button" @click.prevent="$emit('movedown')" :disabled="index >= (fileCount - 1)" aria-label="Move up one position">
-        <i class="fa fa-chevron-circle-right"></i>
-      </button>
-      <button type="button" aria-label="Rotate counter-clockwise">
-        <i class="fa fa-undo"></i>
-      </button>
-      <button type="button" aria-label="Rotate clockwise">
-        <i class="fa fa-redo"></i>
-      </button>    
+    <div class="bottom-wrapper">
+      <div class="item-text">
+      {{file.name}} ({{ Math.round(file.size/1024 * 100) / 100 }}KB)
+      </div>
+      <div class="button-wrapper">
+        <button type="button" @click.prevent="$emit('moveup')" :disabled="index === 0" aria-label="Move down one position">
+          <i class="fa fa-chevron-circle-left"></i>
+        </button>
+        <button type="button" @click.prevent="$emit('movedown')" :disabled="index >= (fileCount - 1)" aria-label="Move up one position">
+          <i class="fa fa-chevron-circle-right"></i>
+        </button>
+        <button type="button" aria-label="Rotate counter-clockwise">
+          <i class="fa fa-undo"></i>
+        </button>
+        <button type="button" aria-label="Rotate clockwise">
+          <i class="fa fa-undo fa-flip-horizontal"></i>
+        </button>    
+      </div>
     </div>
   </div>
 </template>
@@ -52,8 +54,9 @@ export default {
 
       .item-text {
         text-align: center;
-        min-height: 50px;
-        overflow-y: hidden;
+        min-height: 75px;
+        max-height: 75px;
+        overflow: hidden;
         padding: 5px;
       }
 
@@ -61,6 +64,14 @@ export default {
         text-align: center;
       }
 
+      .bottom-wrapper {
+        border-bottom-left-radius: 6px;
+        border-bottom-right-radius: 6px;
+        border: 1px solid silver;
+        background-color: #F2F2F2;
+        margin-bottom: 10px;
+      }
+
       img {
         width: 98%;
       }
@@ -71,10 +82,13 @@ export default {
         background-color: transparent;
         border: none;
         outline: none;
-        font-size: 1.4rem;
+        font-size: 22px;
         padding: 0;
         margin-right: 16px;
-        color: #003366;
+
+        i.fa {
+          color: #003366;
+        }
 
         &:last-of-type {
           margin-right: 0;
@@ -84,7 +98,10 @@ export default {
           position: absolute;
           top: 125px;
           left: 130px;
+
+         i.fa {
           color: #365EBE;
+         }
         }
       }
     }

vue/src/components/Uploader.vue

@@ -114,7 +114,7 @@ export default {
 
 <style scoped lang="scss">
   .drop-zone {
-    width: 95%;
+    width: 100%;
     display: block;
     text-align: left;
     border: 2px #365EBE dashed;
@@ -126,8 +126,7 @@ export default {
     }
 
     .item {
-      margin-bottom: 20px;
-      background-color: #F2F2F2;
+      margin-bottom: 10px;
       width: 160px;
       display: inline-block;
       margin-right: 20px;