Fix protocol repository CSS [SCI-7064] (#4335)

* Fix protocol repository CSS [SCI-7064]

* Fix protocol repository CSS [SCI-7064]

* Fix hound [SCI-7064]

app/assets/stylesheets/my_modules.scss

@@ -138,6 +138,12 @@
       width: 100%;
     }
   }
+
+  form:not([novalidate]):invalid {
+    .control-label {
+      color: $brand-danger;
+    }
+  }
 }
 
 // Mobile view

app/assets/stylesheets/my_modules/protocols/index.scss

@@ -486,6 +486,11 @@
     .dropdown-footer {
       display: flex;
       padding: 16px;
+
+      .button-container {
+        margin-left: auto;
+        margin-right: auto;
+      }
     }
   }
 }
@@ -588,36 +593,6 @@
   }
 }
 
-.task-information .expanded {
-  align-items: flex-start;
-  height: 50px;
-
-  .task-flows,
-  .status-label,
-  .status-buttons {
-    display: block;
-    max-width: 230px;
-  }
-
-  .status-label {
-    margin: 0;
-    text-align: left;
-  }
-
-  .status-flow-dropdown {
-    margin: 0;
-  }
-
-  .status-buttons > :not(:first-child):not(.dropdown-menu) {
-    margin-left: 0;
-    margin-top: .5em;
-  }
-
-  .modal .modal-footer .btn {
-    margin-top: 0;
-  }
-}
-
 @media (max-width: 810px) {
   .task-information .task-section-header {
     display: block;
@@ -656,10 +631,13 @@
       .dropdown-footer {
         display: block;
 
-        .btn {
+        .button-container {
-          float: left !important;
+          display: flex;
-          margin: 5px 0;
+
-          width: auto;
+          .btn {
+            margin: 5px auto;
+            width: 230px;
+          }
         }
       }
     }

app/assets/stylesheets/protocols/protocol.scss

@@ -37,6 +37,10 @@
             border: $border-focus;
           }
         }
+
+        .sci-inline-edit__content {
+          padding-top: .35em;
+        }
       }
 
       * {

app/assets/stylesheets/steps/components/checklist.scss

@@ -7,6 +7,7 @@
 
     .sci-inline-edit__content {
       margin-bottom: 7px;
+      margin-left: 0;
     }
   }
 
@@ -17,7 +18,7 @@
   .step-element-header {
     .step-element-name {
       align-items: flex-start;
-      column-gap: .5em;
+      column-gap: .25em;
       display: grid;
       font-weight: normal;
       grid-template-columns: max-content auto;

app/assets/stylesheets/steps/step.scss

@@ -20,17 +20,23 @@
       position: relative;
 
       .step-name-edit-icon {
-        display: none;
+        background: linear-gradient(90deg,
+              transparent,
+              $color-concrete 15%,
+              $color-concrete 100%);
+        cursor: pointer;
+        opacity: 0;
         position: absolute;
-        right: -8px;
+        right: 0;
-        top: -6px;
+        top: 0;
+
+        &:hover {
+          background: $color-concrete;
+        }
       }
 
       &:hover .step-name-edit-icon {
-        cursor: pointer;
+        opacity: 1;
-        display: inline-block;
-        margin-right: 16px;
-        margin-top: 16px;
       }
 
       .step-collapse-link {

app/javascript/vue/protocol/step.vue

@@ -52,7 +52,9 @@
             @update="updateName"
           />
         </div>
-        <i v-if="urls.update_url && !editingName" class="step-name-edit-icon fas fa-pen" @click="editingName = true"></i>
+        <button v-if="urls.update_url && !editingName" class="step-name-edit-icon btn icon-btn btn-light  " @click="editingName = true">
+          <i class="fas fa-pen"></i>
+        </button>
       </div>
       <div class="step-actions-container">
         <div ref="actionsDropdownButton" v-if="urls.update_url"  class="dropdown">

app/javascript/vue/shared/tinymce.vue

@@ -36,6 +36,7 @@
                     :data-highlightjs-path="this.getStaticUrl('highlightjs-url')"
                     :data-last-updated="lastUpdated * 1000"
                     :data-tinymce-asset-path="this.getStaticUrl('tiny-mce-assets-url')"
+                    :placeholder="placeholder"
                     :value="value"
                     cols="120"
                     rows="10"

app/views/shared/comments/_comments_sidebar.html.erb

@@ -27,7 +27,8 @@
     </div>
     <div class="sidebar-footer">
       <div class="comment-input-container">
-        <textarea class="comment-input-field smart-text-area textarea-sm"></textarea>
+        <textarea class="comment-input-field smart-text-area textarea-sm" 
+                  placeholder="<%= t('comments.placeholder') %>"></textarea>
         <i class="fas fa-paper-plane send-comment"></i>
       </div>
       <div class="error-container"></div>

config/locales/en.yml

@@ -353,6 +353,7 @@ en:
     empty_state:
       title: "No comments here"
       description: "Nobody has commented yet. Be the first by using the box below."
+    placeholder: "Add a new comment..."
     options_dropdown:
       header: "Comment options"
       edit: "Edit"
@@ -910,7 +911,7 @@ en:
           unlink_title: "Unlink this protocol from the parent in the repository"
           revert: "Revert protocol"
           revert_title: "Revert the protocol to the repository version. This will discard any local changes."
-          save_to_repository: "Save to protocol repository"
+          save_to_repository: "Save to repository"
           save_a_copy_to_repository: "Save a copy to repository"
           save_to_repository_title: "Copy this protocol to repository"
           update_self: "Update from repository"
@@ -2801,7 +2802,7 @@ en:
       button_text: 'Create an MS Office file'
       li_text: "Office file"
       modal_title: 'Create new MS Office document'
-      text_field_label: 'Document name'
+      text_field_label: 'Document name & type'
       type_select_label: 'Document type'
       text_field_placeholder: 'Enter document name...'
       ms_word: 'Word<br/>Online'