CSS: Pixel-perfect issues for Protocol templates [SCI-8100]

app/assets/stylesheets/extend/datatable.scss

@@ -49,7 +49,7 @@
     tr {
       &.selected,
       .selected {
-        background-color: $color-alto;
+        background-color: $color-concrete;
       }
     }
 

app/assets/stylesheets/protocol_management.scss

@@ -12,6 +12,8 @@
 .btn-open-file {
   overflow: hidden;
   position: relative;
+  margin-top: 9px;
+  margin-bottom: 4px;
 
   > input[type=file] {
     background: $color-white;
@@ -30,8 +32,36 @@
   }
 }
 
+.dropdown-menu {
+  border: none;
+}
+
+.import-protocols-io {
+  margin-top: 9px;
+  margin-bottom: 4px;
+}
+
 #protocols-index,
 #load-from-repository-modal {
+  .header-separator {
+    border-bottom: 1px solid $modal-header-border-color;
+    margin-left: -1.15em;
+    margin-right: -1.15em;
+    position: relative;
+    top: 17px;
+  }
+
+  .footer-separator {
+    border-top: 1px solid $modal-header-border-color;
+    margin-left: -1.15em;
+    margin-right: -1.15em;
+    position: relative;
+    bottom: 17px;
+  }
+
+  .load-warning-message {
+    margin-top: 20px;
+  }
 
   tbody {
     tr {

app/assets/stylesheets/protocols/index.scss

@@ -124,8 +124,11 @@
         background: $color-concrete;
         margin-left: .75em;
         text-align: center;
+        line-height: 24px;
+        height: 28px;
+        width: 28px;
       }
-    }
+  }
 
     .selected {
       .global-avatar-container,

app/assets/stylesheets/protocols/protocol.scss

@@ -21,6 +21,7 @@
   }
 
   .protocol-position-container {
+    border-radius: 2px;
     background-color: $color-white;
     box-shadow: $flyout-shadow;
     margin: 20px auto;
@@ -71,6 +72,7 @@
       flex-wrap: wrap;
 
       .actions-block {
+        padding: 0px 25px;
         display: flex;
         flex-grow: 1;
         justify-content: flex-end;
@@ -82,6 +84,10 @@
         .caret {
           margin-left: 25px;
         }
+        
+        button, a {
+          margin-right: 5px;
+        }
       }
     }
 

app/assets/stylesheets/themes/main_navigation.scss

@@ -148,6 +148,10 @@
   }
 }
 
+.user-name {
+  margin-right: 15px;
+}
+
 .notification {
   padding-right: 8px;
   word-wrap: break-word;

app/views/my_modules/protocols/_load_from_repository_modal.html.erb

@@ -6,9 +6,11 @@
         <h2 class="modal-title" id="load-from-repository-modal-label">
           <%= t("my_modules.protocols.load_from_repository_modal.title") %>
         </h2>
+        <div class="header-separator"></div>
       </div>
       <div class="modal-body"></div>
       <div class="modal-footer">
+        <div class="footer-separator"></div>
         <button type="button" class="btn btn-secondary" data-dismiss="modal"><%= t("general.cancel") %></button>
         <button type="button" class="btn btn-primary" data-action="submit"><%= t("my_modules.protocols.load_from_repository_modal.load") %></button>
       </div>

app/views/my_modules/protocols/_load_from_repository_modal_body.html.erb

@@ -1,4 +1,4 @@
-<div>
+<div class="load-warning-message">
   <p style="font-weight: bold;"><%= t("my_modules.protocols.load_from_repository_modal.text") %></p>
 </div>
 

app/views/protocols/index/_general_toolbar.html.erb

@@ -26,7 +26,7 @@
               <%= 'disabled="disabled"' unless can_create_protocols_in_repository?(@current_team) %>>
             </a>
           </li>
-          <li>
+          <li class="import-protocols-io">
             <%= link_to t("protocols.index.import_protocols_io"), '', data: { target: '#protocolsioModal', toggle: 'modal' } %>
           </li>
         </ul>

app/views/shared/_navigation.html.erb

@@ -169,7 +169,7 @@
              role="button"
              aria-haspopup="true"
              aria-expanded="false">
-            <span>
+            <span class="user-name">
               <%= t('nav.user_greeting', full_name: current_user.full_name) %>
             </span>
             <span class='global-avatar-container'>