Update file layout

src/style_manager/view/PropertyFileView.js

@@ -7,6 +7,8 @@ const $ = Backbone.$;
 export default PropertyView.extend({
   templateInput() {
     const { pfx, em } = this;
+    const icons = this.em?.getConfig('icons');
+    const iconClose = icons?.close;
 
     return `
       <div class="${pfx}field ${pfx}file">
@@ -20,7 +22,7 @@ export default PropertyView.extend({
         </div>
         <div id="${pfx}preview-box" class="${pfx}preview-file">
           <div id="${pfx}preview-file" class="${pfx}preview-file-cnt"></div>
-          <div id="${pfx}close" class="${pfx}preview-file-close">&Cross;</div>
+          <div id="${pfx}close" class="${pfx}preview-file-close">${iconClose}</div>
         </div>
       </div>
     `;

src/styles/scss/_gjs_style_manager.scss

@@ -38,10 +38,10 @@
   right: 5px;
   top: 0;
 
-  @include opacity(0.2);
+  @include opacity(0.7);
 
   &:hover {
-    @include opacity(0.7);
+    @include opacity(0.9);
   }
 }
 
@@ -302,29 +302,30 @@
     float: left;
     width: 100%;
   }
+}
 
-  .#{$sm-prefix}preview-file {
-    background-color: $lightBorder;
-    border-radius: 2px;
-    margin-top: 5px;
-    position: relative;
-    overflow: hidden;
-    border: 1px solid darken($lightBorder, 1%);
-    padding: 3px 20px;
+.#{$sm-prefix}preview-file {
+  background-color: $lightBorder;
+  border-radius: 2px;
+  margin-top: 5px;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid darken($lightBorder, 1%);
+  padding: 3px 20px;
 
-    &-cnt {
-      background-size: auto 100%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      height: 50px;
-    }
+  &-cnt {
+    background-size: auto 100%;
+    background-repeat: no-repeat;
+    background-position: center center;
+    height: 50px;
+  }
 
-    &-close {
-      @extend .#{$sm-prefix}close-btn;
+  &-close {
+    @extend .#{$sm-prefix}close-btn;
 
-      top: -5px;
-      display: block;
-    }
+    top: -5px;
+    width: 14px;
+    height: 14px;
   }
 }