DIV-1148 - Started implementing fixes from visual design review

vue/src/components/Uploader/Image.vue

@@ -92,11 +92,12 @@ export default {
 
     i.fa-file-pdf-o, i.fa-frown-o {
       display: block;
-      font-size: 105px;
-      margin-left: 32px;
-      margin-top: 15px;
-      position: absolute;
-      top: 0;
+      font-size: 48px;
+      margin-left: 60px;
+    }
+
+    i.fa-file-pdf-o {
+      color: #D5D5D5;
     }
 
     i.fa-frown-o {
@@ -112,7 +113,7 @@ export default {
     }
 
     &.valid:hover {
-      background-color: #6484d3;
+      background-color: #365EBE;
       cursor: pointer;
 
       button.btn-remove {
@@ -129,7 +130,7 @@ export default {
     }
 
     &:hover img { 
-      opacity: 0.3;
+      opacity: 0.12;
     } 
   }
 

vue/src/components/Uploader/ItemTile.vue

@@ -3,7 +3,12 @@
     <uploaded-image :file="file" :image-style="imageStyle" @imageclick="showPreview" @removeclick="$emit('remove')" />
     <div class="bottom-wrapper">
       <div class="item-text">
-        {{file.name}} <span class="no-wrap">({{ Math.round(file.size/1024/1024 * 100) / 100 }} MB)</span>
+        <div class="filename-text">
+          {{file.name}}
+        </div>
+        <div class="size-text">
+          ({{ Math.round(file.size/1024/1024 * 100) / 100 }} MB)
+        </div>  
       </div>
       <div class="button-wrapper">
         <div v-if="!file.active && file.success && !isPdf">
@@ -71,19 +76,31 @@ export default {
 
     .item-text {
       text-align: center;
-      min-height: 75px;
-      max-height: 75px;
-      overflow: hidden;
-      padding: 5px;
-      line-height: 1.05;
-      font-size: 0.95em;
+      padding: 10px;
+      padding-bottom: 4px;
+      font-size: 16px; 
+      line-height: 24px;
+      min-height: 87px;
+
+
+      .filename-text {
+        min-height: 25px;
+        max-height: 50px;
+        overflow: hidden;
+        overflow-wrap: anywhere;;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;  
+      }    
 
-      .no-wrap {
-        white-space: nowrap;
+      .size-text {
+        min-height: 25px;
+        max-height: 25px;
       }
     }
 
     .button-wrapper {
+      margin-top: -4px;
       text-align: center;
     }
 

vue/src/components/Uploader/Uploader.vue

@@ -409,9 +409,10 @@ export default {
     border: 2px #365EBE dashed;
     border-radius: 6px;
     padding: 18px;
+    margin-bottom: 5px;
 
     &.dragging {
-      background-color: #F2E3F2;
+      background-color: #D7DFF2;
     }
 
     .cards {