Merge pull request #1548 from ProcessMaker/bugfix/FOUR-14227

FOUR-14227: Design in modal to edit pages is not the same with mockup
ProcessMaker · Feb 27, 2024 · 2db7999 · 2db7999
2 parents 9771830 + 3eab500
commit 2db7999
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/components/sortable/sortableList/sortableList.scss b/src/components/sortable/sortableList/sortableList.scss
@@ -9,6 +9,7 @@ $border-color: #cdddee;
     &-header {
       display: flex;
       align-items: center;
+      border-bottom: 1px solid $border-color;
     }
 
     &-title {
@@ -31,7 +32,7 @@ $border-color: #cdddee;
     display: flex;
     align-items: center;
     height: 56px;
-    border-top: 1px solid $border-color;
+    border-bottom: 1px solid $border-color;
     cursor: move;
 
     &-icon {

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
@@ -359,11 +359,18 @@
       header-close-content="&times;"
       role="dialog"
       size="lg"
-      :title="$t('Edit Pages')"
       :ok-title="$t('CONFIRM')"
       ok-only
       ok-variant="secondary"
+      header-class = "modal-header-custom"
     >
+    <template #modal-title>
+      <h5 class="modal-title">{{ $t('Edit Pages') }}</h5>
+      <span class="modal-subtitle">{{ $t('Change pages order and name') }}</span>
+    </template>
+    <template #modal-header-close="{ close }">
+      <button type="button" aria-label="Close" class="close"  @click="close()">×</button>
+    </template>
       <Sortable
         :items="config"
         filter-key="name"
@@ -1501,4 +1508,8 @@ $side-bar-font-size: 0.875rem;
     box-shadow: 0 0 0 13px rgba(0, 0, 0, 0);
   }
 }
+.modal-subtitle {
+  font-size: 15px;
+  font-weight: normal;
+}
 </style>