design enhancements

weDevsOfficial · Aug 15, 2024 · 86ff1d1 · 86ff1d1
1 parent b038a51
commit 86ff1d1
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 22 deletions.
diff --git a/assets/css/admin/subscriptions.min.css b/assets/css/admin/subscriptions.min.css
diff --git a/assets/js/components/subscriptions/SectionInnerField.vue b/assets/js/components/subscriptions/SectionInnerField.vue
@@ -21,10 +21,8 @@ const showField = computed(() => {
     <div
         v-show="showField"
         class="wpuf-grid wpuf-grid-cols-3">
-        <label
-            :for="parentField.name"
-            class="wpuf-block wpuf-text-sm wpuf-leading-6 wpuf-text-gray-600 wpuf-flex wpuf-items-center wpuf-pl-4">
-            {{ parentField.label }}
+        <div class="wpuf-block wpuf-text-sm wpuf-leading-6 wpuf-text-gray-600 wpuf-flex wpuf-items-center wpuf-pl-4">
+        <label :for="parentField.name" v-html="parentField.label"></label>
             <div
                 v-if="parentField.tooltip"
                 class="wpuf-tooltip wpuf-cursor-pointer wpuf-ml-2 wpuf-z-10"
@@ -34,10 +32,10 @@ const showField = computed(() => {
                           stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                 </svg>
             </div>
-        </label>
         <div class="wpuf-mr-2 wpuf-contents">
             <SectionInputField v-for="field in parentField.fields"
                :field="field" :fieldId="field.id" />
         </div>
+        </div>
     </div>
 </template>
diff --git a/assets/js/components/subscriptions/SectionInputField.vue b/assets/js/components/subscriptions/SectionInputField.vue
@@ -198,10 +198,11 @@ onMounted(() => {
         v-show="showField"
         :class="field.label ? 'wpuf-grid wpuf-grid-cols-3 wpuf-p-4' : 'wpuf-py-4 wpuf-pl-3 wpuf-pr-4'"
         class="wpuf-gap-4">
-        <label v-if="field.label"
-               :for="field.name"
-               class="wpuf-block wpuf-text-sm wpuf-leading-6 wpuf-text-gray-600 wpuf-flex wpuf-items-center">
-            {{ field.label }}
+        <div
+            v-if="field.label"
+           class="wpuf-block wpuf-text-sm wpuf-leading-6 wpuf-text-gray-600 wpuf-flex wpuf-items-center"
+        >
+            <label :for="field.name" v-html="field.label"></label>
             <span
                 v-if="field.tooltip"
                 class="wpuf-tooltip wpuf-cursor-pointer wpuf-ml-2 wpuf-z-10"
@@ -216,7 +217,7 @@ onMounted(() => {
                 <ProBadge v-if="showProBadge" />
                 <ProTooltip />
             </span>
-        </label>
+        </div>
         <div
             class="wpuf-w-full wpuf-col-span-2 wpuf-relative wpuf-group">
             <div

diff --git a/assets/js/components/subscriptions/Subsection.vue b/assets/js/components/subscriptions/Subsection.vue
@@ -92,5 +92,21 @@ const toggleDependentFields = (fieldId, status) => {
                :fieldId="fieldId"
                :subscription="subscription"/>
         </div>
+        <div
+            v-if="!closed && subSection.notice"
+            class="wpuf-rounded-b-xl wpuf-bg-yellow-50 wpuf-p-4">
+                <div class="wpuf-flex wpuf-items-center">
+                    <div class="wpuf-flex-shrink-0">
+                        <svg class="wpuf-h-5 wpuf-w-5 wpuf-text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+                        </svg>
+                    </div>
+                    <div class="wpuf-ml-3">
+                        <div class="wpuf-mt-2 wpuf-text-sm wpuf-text-yellow-700">
+                            <p v-html="subSection.notice.message"></p>
+                        </div>
+                    </div>
+                </div>
+        </div>
     </div>
 </template>