Fix modals after revamp [SCI-9330]

app/assets/stylesheets/marvinjs.scss

@@ -19,16 +19,17 @@
   }
 
   .modal-content {
-    background: transparent;
     border: 0;
     box-shadow: none;
     height: 100%;
+    padding: 0;
     width: auto;
   }
 
   .modal-header {
     background: $color-white;
     display: flex;
+    flex-direction: row;
     height: 60px;
     line-height: 40px;
     padding: 10px 15px;

app/assets/stylesheets/my_modules/repositories.scss

@@ -172,6 +172,7 @@
       grid-template-columns: minmax(50%, 100%) 0;
       grid-template-rows: 55px calc(100% - 55px);
       height: inherit;
+      padding: 0;
       transition: all $timing-function-sharp;
 
       &.show-sidebar {

app/assets/stylesheets/repository/print_progress_modal.scss

@@ -10,6 +10,7 @@
   .modal-header {
     align-items: center;
     display: flex;
+    flex-direction: row;
     padding: .5em;
 
     .title {

app/assets/stylesheets/shared/file_preview.scss

@@ -19,7 +19,9 @@
     background: inherit;
     border: 0;
     border-radius: 0;
-    height: auto;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
     min-height: 100%;
     padding: 0;
   }
@@ -72,6 +74,8 @@
     align-items: center;
     background: $color-white;
     display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
     height: 4em;
     padding: 0 1em;
 
@@ -89,7 +93,7 @@
     align-items: center;
     background: transparent;
     display: flex;
-    height: calc(100vh - 8em);
+    flex-grow: 1;
     justify-content: center;
     overflow: hidden;
     padding: 0;
@@ -99,6 +103,7 @@
   .modal-footer {
     background: $color-white;
     height: 4em;
+    flex-shrink: 0;
     padding: 0 1em;
 
     .gallery {

app/assets/stylesheets/shared/image_edit_modal.scss

@@ -13,12 +13,14 @@
   .modal-content {
     border: 0;
     height: 100%;
+    padding: 0;
   }
 
   .modal-header {
     align-items: center;
     background: $color-white;
     display: flex;
+    flex-direction: row;
     height: 4em;
     padding: 0 1em;
 

app/assets/stylesheets/shared/pdf_preview.scss

@@ -1,9 +1,10 @@
 .pdf-viewer {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: calc(100% + 4rem);
+  margin: -2rem;
   position: relative;
-  width: 100%;
+  width: calc(100% + 4rem);
 
   .page-container {
     display: flex;

app/assets/stylesheets/tailwind/buttons.css

@@ -13,7 +13,7 @@
   }
 
   .btn.btn-lg {
-    @apply py-2.5 px-[1.125rem] text-base leading-5 max-h-[44px];
+    @apply py-2.5 px-[1.125rem] text-base leading-5 h-[44px];
   }
 
   .btn.btn-lg.icon-btn {
@@ -21,7 +21,7 @@
   }
 
   .btn.btn-sm {
-    @apply py-1.5 px-2.5 text-xs leading-5 max-h-[36px];
+    @apply py-1.5 px-2.5 text-xs leading-5 h-[36px];
   }
 
   .btn.btn-sm.icon-btn {
@@ -29,7 +29,7 @@
   }
 
   .btn.btn-xs {
-    @apply py-0.5 px-2.5 text-xs leading-5 max-h-[30px];
+    @apply py-0.5 px-2.5 text-xs leading-5 h-[30px];
   }
 
   .btn.btn-xs.icon-btn {

app/assets/stylesheets/tailwind/inputs.css

@@ -20,10 +20,6 @@
     @apply text-sn-sleepy-grey;
   }
 
-  .sci-input-container-v2 .sci-input-field-v2 {
-    @apply h-[2.25rem];
-  }
-
   .sci-input-container-v2 .error {
     @apply !border-sn-coral;
   }
@@ -38,7 +34,7 @@
 
   .sci-input-container-v2 input:disabled {
     background-color: var(--sn-super-light-grey);
-    color: var(--sn-light-grey);
+    color: var(--sn-grey);
     border: 1px solid var(--sn-light-grey);
   }
 

app/javascript/vue/shareable_links/components/shareable_link_modal.vue

@@ -11,9 +11,6 @@
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header flex">
-            <h4 class="modal-title">
-              {{ i18n.t("shareable_links.modal.title") }}
-            </h4>
             <button
               type="button"
               class="close float-right !ml-auto"
@@ -23,6 +20,9 @@
             >
               <i class="sn-icon sn-icon-close"></i>
             </button>
+            <h4 class="modal-title">
+              {{ i18n.t("shareable_links.modal.title") }}
+            </h4>
           </div>
           <div class="modal-body">
             <div class="flex items-center text-sm gap-4 mb-4">
@@ -66,13 +66,13 @@
               <div class="mb-2"> {{ i18n.t('shareable_links.modal.sharing_link_label') }} </div>
               <div class="sci-input-container-v2 input-sm text-sm mb-2 flex-row-reverse">
                 <input type="text"
-                        class="sci-input-field-v2"
+                        class="sci-input-field !pr-16"
                         ref="clone"
                         :value="shareableData.attributes ? shareableData.attributes.shareable_url : ''"
                         id="#share-link-input"
                         :disabled="true"
                   />
-                  <button class="btn btn-primary share-link-copy"
+                  <button class="btn btn-primary btn-sm share-link-copy"
                           tabindex="0"
                           @click="copy($refs.clone.value)"
                           :disabled="!sharedEnabled">{{ i18n.t('shareable_links.modal.copy_button') }}

app/views/reports/_content_document_preview.html.erb

@@ -21,5 +21,3 @@
     <% end %>
   </div>
 </div>
-<div class="modal-footer">
-</div>

app/views/shared/file_preview/_content.html.erb

@@ -70,8 +70,8 @@
     <% end %>
   </div>
 </div>
-<div class="modal-footer">
+<% if gallery.present? %>
-  <% if gallery %>
+  <div class="modal-footer">
     <div class="gallery">
       <% previous_asset = Asset.find_by(id: gallery.split(asset.id.to_s)[0]&.last) %>
       <% next_asset = Asset.find_by(id: gallery.split(asset.id.to_s)[1]&.first) %>
@@ -109,7 +109,7 @@
         <% end %>
       <% end %>
     </div>
-  <% end %>
+  </div>
-</div>
+<% end %>
 
 <%= javascript_include_tag 'shared/file_preview', nonce: true %>