Update image edit modal

app/assets/stylesheets/shared/image_edit_modal.scss

@@ -0,0 +1,37 @@
+// Image edit modal
+.modal-file-edit {
+  background: transparent;
+  font-size: $font-size-base;
+  padding: 0 !important;
+
+  .modal-dialog {
+    height: 100%;
+    margin: 0;
+    width: auto;
+  }
+
+  .modal-content {
+    border: 0;
+    height: 100%;
+  }
+
+  .modal-header {
+    align-items: center;
+    background: $color-white;
+    display: flex;
+    height: 4em;
+    padding: 0 1em;
+
+    .file-name {
+      font-weight: bold;
+      margin-right: auto;
+    }
+  }
+
+  .modal-body {
+    height: calc(100% - 4em);
+    padding: 0;
+  }
+}
+
+

app/assets/stylesheets/themes/scinote.scss

@@ -1591,61 +1591,6 @@ ul.content-activities {
   }
 }
 
-// Image edit modal
-.modal-file-edit {
-  background: transparent;
-  font-size: $font-size-large;
-  padding: 0 !important;
-
-  .preview-close {
-    background: transparent;
-    border: 0;
-    color: $color-white;
-    display: inline-block;
-    float: right;
-  }
-
-  .modal-dialog {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    width: auto;
-  }
-
-  .modal-content {
-    background: transparent;
-    border: 0;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-    color: $color-white;
-    height: 100%;
-    width: auto;
-  }
-
-  .modal-header {
-    background: $color-black;
-    border: 0;
-    height: 60px;
-    text-align: center;
-
-    .file-name {
-      float: left;
-    }
-  }
-
-  .modal-body {
-    height: calc(100% - 60px);
-    padding: 0;
-  }
-
-  .file-save-link {
-    color: $color-white;
-    display: inline-block;
-    float: right;
-    margin-right: 20px;
-  }
-}
-
 // Disable textarea resizing throughout application
 // (will be done via autosize JS plugin)
 textarea {

app/views/shared/_file_edit_modal.html.erb

@@ -8,11 +8,15 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="preview-close" data-dismiss="modal"><span class="fas fa-times"></span></button>
         <span class="file-name"></span>
-        <a class="file-save-link" href='#'>
-          <p><span class="fas fa-save"></span> <%= t('SaveClose')%></p>
+        <div class="sci-btn-group">
+          <a class="file-save-link btn btn-light" href='#'>
+            <span class="fas fa-save"></span> <%= t('SaveClose')%>
           </a>
+          <button type="button" class="preview-close btn btn-light icon-btn" data-dismiss="modal">
+            <span class="fas fa-times"></span>
+          </button>
+        </div>
       </div>
       <div class="modal-body">
         <div id="tui-image-editor">