Feature/ivyportal 18032 UI facelift conflict (#1311)

* feature/IVYPORTAL-18032-UI-facelift-conflict - Add border in Actions menu of Task widget * feature/IVYPORTAL-18032-UI-facelift-conflict - Add border in actions menu for case widget * feature/IVYPORTAL-18032-UI-facelift-conflict - Update Edit external link UI * feature/IVYPORTAL-18032-UI-facelift-conflict - Add error message when uploading file fail * feature/IVYPORTAL-18032-UI-facelift-conflict - Update link and button following guidelines * feature/IVYPORTAL-18032-UI-facelift-conflict - Update UI of delete button * feature/IVYPORTAL-18032-UI-facelift-conflict - Update UI of remove/delete button * feature/IVYPORTAL-18032-UI-facelift-conflict - Change icon of action menu * feature/IVYPORTAL-18032-UI-facelift-conflict - Update jenkinsfile * feature/IVYPORTAL-18032-UI-facelift-conflict - Update jenkins file * feature/IVYPORTAL-18032-UI-facelift-conflict - Update UI of destroy button in CaseItemDetails and TaskItemDetails * feature/IVYPORTAL-18032-UI-facelift-conflict - Update height of upload image in external link * feature/IVYPORTAL-18032-UI-facelift-conflict - Update GUI tests * feature/IVYPORTAL-18032-UI-facelift-conflict - Update screenshot tests * feature/IVYPORTAL-18032-UI-facelift-conflict - Update UI delete document button * feature/IVYPORTAL-18032-UI-facelift-conflict - Upload document-screenshot.js file * feature/IVYPORTAL-18032-UI-facelift-conflict - Update screenshot test * feature/IVYPORTAL-18032-UI-facelift-conflict - Update reset filter in task widget filter * feature/IVYPORTAL-18032-UI-facelift-conflict - Update document * feature/IVYPORTAL-18032-UI-facelift-conflict - Update screenshot tests * Revert "feature/IVYPORTAL-18032-UI-facelift-conflict" This reverts commit 0f4b154. * Revert "feature/IVYPORTAL-18032-UI-facelift-conflict" This reverts commit 3c38c31. * feature/IVYPORTAL-18032-UI-facelift-conflict - Update UI of process image * feature/IVYPORTAL-18032-UI-facelift-conflict - Handle feedback
axonivy-market · Dec 18, 2024 · b310a72 · b310a72
1 parent 003cd36
commit b310a72
Show file tree

Hide file tree

Showing 37 changed files with 204 additions and 145 deletions.
diff --git a/AxonIvyPortal/portal-selenium-test/resources/js/document-screenshot.js b/AxonIvyPortal/portal-selenium-test/resources/js/document-screenshot.js
@@ -124,7 +124,7 @@ function highlightProcessItems() {
 }
 
 function highlightEditProcessIcon() {
-  appendStepAnnotation($("[id$='process-widget:edit-process-form:edit-process-icon:awesome-icon-selection']"), "4", -10, 100);
+  appendStepAnnotation($("[id$='process-widget:edit-process-form:edit-process-icon:awesome-icon-selection']"), "4", -40, 110);
 }
 
 function highlightEditProcessDialog() {

diff --git a/...t/src_test/com/axonivy/portal/selenium/document/screenshot/PortalCasesScreenshotTest.java b/...t/src_test/com/axonivy/portal/selenium/document/screenshot/PortalCasesScreenshotTest.java
@@ -84,7 +84,7 @@ public void screenshotCaseDetails() throws IOException {
     ScreenshotUtils.captureElementWithMarginOptionScreenshot(detailsPage.openAddAttachmentDialog(),
         ScreenshotUtils.CASE_DETAIL_FOLDER + "how-to-attach-document-to-case", new ScreenshotMargin(10));
     detailsPage.closeAddAttachmentDialog();
-    detailsPage.uploadDocumentWithoutError(FileHelper.getAbsolutePathToTestFile("test-no-files-no-js.pdf"));
+    detailsPage.uploadDocument(FileHelper.getAbsolutePathToTestFile("test-no-files-no-js.pdf"));
 
     refreshPage();
     detailsPage.waitForCaseDetailsDisplay();

diff --git a/...c_test/com/axonivy/portal/selenium/document/screenshot/PortalProcessesScreenshotTest.java b/...c_test/com/axonivy/portal/selenium/document/screenshot/PortalProcessesScreenshotTest.java
@@ -79,10 +79,11 @@ public void screenshotPortalFullProcessesList() throws IOException {
     ScreenshotUtils.captureElementWithMarginOptionScreenshot(processWidget.getProcessEditMenu(0),
         ScreenshotUtils.PROCESSES_WIDGET_FOLDER + "edit-process-menu-item", new ScreenshotMargin(150, 200));
     processWidget.clickOnProcessEditMenu(0);
+    ScreenshotUtils.maximizeBrowser();
     ScreenshotUtils.executeDecorateJs("highlightEditProcessDialog()");
     ScreenshotUtils.executeDecorateJs("highlightEditProcessIcon()");
     ScreenshotUtils.captureElementWithMarginOptionScreenshot(processWidget.getEditProcessDialog(),
-        ScreenshotUtils.PROCESSES_WIDGET_FOLDER + "edit-process-dialog", new ScreenshotMargin(10));
+        ScreenshotUtils.PROCESSES_WIDGET_FOLDER + "edit-process-dialog", new ScreenshotMargin(5));
     ScreenshotUtils.resizeBrowser(new Dimension(1366, 800));
     refreshPage();
     processWidget.waitUtilProcessWidgetDisplayed();

diff --git a/...ortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/CaseDetailsPage.java b/...ortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/CaseDetailsPage.java
@@ -850,6 +850,11 @@ public void uploadDocumentWithoutError(String pathToFile) {
     $("button[id$='document:document-upload-close-command']").shouldBe(getClickableCondition(), DEFAULT_TIMEOUT)
         .click();
   }
+
+  public void uploadDocument(String pathToFile) {
+    $("input[id$='document-upload-panel_input']").shouldBe(exist, DEFAULT_TIMEOUT)
+    .shouldBe(Condition.hidden, DEFAULT_TIMEOUT).sendKeys(pathToFile);
+  }
 
   public void openAddDocumentDialogAndUploadDocument(String pathToFile) {
     getAddAttachmentDialog();

diff --git a/...l-selenium-test/src_test/com/axonivy/portal/selenium/page/CaseWidgetNewDashBoardPage.java b/...l-selenium-test/src_test/com/axonivy/portal/selenium/page/CaseWidgetNewDashBoardPage.java
@@ -162,7 +162,7 @@ public void nextPageTable() {
   }
 
   public void resetFilter() {
-    $("div.filter-overlay-panel__footer").shouldBe(appear, DEFAULT_TIMEOUT).$$("button[id$='reset-button']")
+    $("div.filter-overlay-panel__footer").shouldBe(appear, DEFAULT_TIMEOUT).$$("a[id$='reset-button']")
         .filter(text("Reset")).first().shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
     $("div.filter-overlay-panel__footer").shouldBe(disappear, DEFAULT_TIMEOUT);
     waitForElementClickable($$("div.table-widget-panel")
@@ -269,7 +269,7 @@ public void removeAllFilterItems() {
   }
 
   public void openManageFiltersDialog() {
-    $("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("button").shouldBe(getClickableCondition()).click();
+    $("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("a").shouldBe(getClickableCondition()).click();
   }
 
   public void closeManageFilterDialog() {

diff --git a/...rtal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/NewDashboardPage.java b/...rtal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/NewDashboardPage.java
@@ -545,7 +545,7 @@ public SelenideElement getCompactModeProcessFilterPanelSaveButton() {
   }
 
   public SelenideElement getCompactModeProcessFilterPanelResetButton() {
-    return getCompactModeProcessFilterPanel().$("button[id$=':reset-button']");
+    return getCompactModeProcessFilterPanel().$("a[id$=':reset-button']");
   }
 
   public void resetCompactModeProcessFilterPanel() {
@@ -1033,7 +1033,7 @@ public NotificationCompactPage openNotificationPanel() {
   }
 
   public void clickOnManageFilterLink() {
-    $("div[class*='filter-overlay-panel__footer']").shouldBe(appear, DEFAULT_TIMEOUT).$("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("button[class*='saved-filter__manage-filter']").shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
+    $("div[class*='filter-overlay-panel__footer']").shouldBe(appear, DEFAULT_TIMEOUT).$("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("a[class*='saved-filter__manage-filter']").shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
     $("[id$='manage-filter-dialog']").shouldBe(appear, DEFAULT_TIMEOUT);
   }
 

diff --git a/...l-selenium-test/src_test/com/axonivy/portal/selenium/page/TaskWidgetNewDashBoardPage.java b/...l-selenium-test/src_test/com/axonivy/portal/selenium/page/TaskWidgetNewDashBoardPage.java
@@ -132,7 +132,7 @@ public void applyFilter() {
   }
 
   public void resetFilter() {
-    $("div.filter-overlay-panel__footer").shouldBe(appear, DEFAULT_TIMEOUT).$$("button[id$='reset-button']")
+    $("div.filter-overlay-panel__footer").shouldBe(appear, DEFAULT_TIMEOUT).$$("a[id$='reset-button']")
         .filter(text("Reset")).first().shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
   }
 
@@ -183,7 +183,7 @@ public boolean hasSavedFilterItem(String filterName) {
   }
 
   public void clickOnManageFilterLink() {
-    $("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("button").shouldBe(getClickableCondition()).click();
+    $("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("a").shouldBe(getClickableCondition()).click();
     $("[id$='manage-filter-dialog']").shouldBe(appear, DEFAULT_TIMEOUT);
   }
 
@@ -530,7 +530,7 @@ public void saveFilter(String widgetFilterName) {
   }
 
   public void openManageFiltersDialog() {
-    $("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("button").shouldBe(getClickableCondition()).click();
+    $("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("a").shouldBe(getClickableCondition()).click();
   }
 
   public void removeAllFilterItems() {

diff --git a/AxonIvyPortal/portal/cms/cms_de.yaml b/AxonIvyPortal/portal/cms/cms_de.yaml
@@ -410,6 +410,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     active: Aktiviert
     add: Hinzufügen
     addDocument: Dokument hinzufügen
+    addLink: Link hinzufügen
     addNote: Notiz hinzufügen
     allCategories: Alle Kategorien
     allTypes: Alle Typen

diff --git a/AxonIvyPortal/portal/cms/cms_en.yaml b/AxonIvyPortal/portal/cms/cms_en.yaml
@@ -409,6 +409,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     active: Active
     add: Add
     addDocument: Add document
+    addLink: Add Link
     addNote: Add note
     allCategories: All Categories
     allTypes: All types

diff --git a/AxonIvyPortal/portal/cms/cms_es.yaml b/AxonIvyPortal/portal/cms/cms_es.yaml
@@ -411,6 +411,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     active: Activado
     add: Añadir
     addDocument: Agregar documento
+    addLink: Añadir enlace
     addNote: Agregar nota
     allCategories: Todas las categorias
     allTypes: Todos los tipos

diff --git a/AxonIvyPortal/portal/cms/cms_fr.yaml b/AxonIvyPortal/portal/cms/cms_fr.yaml
@@ -408,6 +408,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     active: Activé
     add: Ajouter
     addDocument: Ajouter un document
+    addLink: Ajouter un lien
     addNote: Ajouter une note
     allCategories: Toutes les catégories
     allTypes: Tous les types

diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/CaseDocuments/CaseDocuments.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/CaseDocuments/CaseDocuments.xhtml
@@ -99,13 +99,13 @@
         <ui:param name="dialogContent" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/confirmForDelete')}" />
 
         <ui:define name="dialogFooter">
-          <p:commandLink id="document-deletion-cancellation-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-             process="@this" onsuccess="PF('document-deletion-dialog').hide()" styleClass="u-mar-right-15"/>
           <p:commandButton id="document-deletion-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
-            process="@this" icon="#{visibilityBean.generateButtonIcon('si si-remove')}"
+            process="@this"
             update="case-document-global-messages case-doc-form"
-            actionListener="#{logic.deleteDocument}"
+            actionListener="#{logic.deleteDocument}" styleClass="w-full portal-remove-button"
             oncomplete="PF('document-deletion-dialog').hide();" />
+          <p:commandLink id="document-deletion-cancellation-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
+             process="@this" onsuccess="PF('document-deletion-dialog').hide()" styleClass="pt-3 flex justify-content-center"/>
         </ui:define>
       </ui:decorate>
     </ui:define>

diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/TaskDocuments/TaskDocuments.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/TaskDocuments/TaskDocuments.xhtml
@@ -99,13 +99,13 @@
         <ui:param name="dialogContent" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/confirmForDelete')}" />
 
         <ui:define name="dialogFooter">
-          <p:commandLink id="document-deletion-cancellation-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-             process="@this" onsuccess="PF('document-deletion-dialog').hide()" styleClass="u-mar-right-15"/>
           <p:commandButton id="document-deletion-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
-            process="@this" icon="#{visibilityBean.generateButtonIcon('si si-remove')}"
+            process="@this"
             update="task-document-global-messages task-doc-form"
-            actionListener="#{logic.deleteDocument}"
+            actionListener="#{logic.deleteDocument}" styleClass="w-full portal-remove-button"
             oncomplete="PF('document-deletion-dialog').hide();" />
+          <p:commandLink id="document-deletion-cancellation-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
+             process="@this" onsuccess="PF('document-deletion-dialog').hide()" styleClass="pt-3 flex justify-content-center"/>
         </ui:define>
       </ui:decorate>
     </ui:define>

diff --git a/...neric/dashboard/PortalDashboardDetailModification/PortalDashboardDetailModification.xhtml b/...neric/dashboard/PortalDashboardDetailModification/PortalDashboardDetailModification.xhtml
@@ -24,11 +24,12 @@
     </ui:define>
 
     <ui:define name="headerAction">
-      <p:commandButton id="back-to-configuration" styleClass="dashboard__switch-mode u-mar-right-5 ui-button-flat"
+      <p:commandLink id="back-to-configuration" styleClass="dashboard__switch-mode u-mar-right-5 pr-2"
         actionListener="#{dashboardDetailModificationBean.navigatetoDashboardConfigurationPage}"
-        update="grid-stack @this" process="@this"
-        value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/back')}"
-        icon="si si-arrow-left-1" />
+        update="grid-stack @this" process="@this">
+          <i class="relative si si-arrow-left-1" style="top: 2px;"/>
+          <span>#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/back')}</span>
+      </p:commandLink>
 
       <c:set var="showRestoreButton" value="#{dashboardDetailModificationBean.foundTemplate.isPresent()}"/>
       <h:panelGroup id="restore-button-group" styleClass="restore-button-group u-mar-right-15">
@@ -102,13 +103,14 @@
         <ui:param name="dialogContent" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/removeWidgetMessage')}" />
 
         <ui:define name="dialogFooter">
-          <p:link href="#" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}" onclick="PF('remove-widget-dialog').hide();"
-            styleClass="u-mar-right-15" />
-          <p:commandButton id="remove-widget-button" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/remove')}"
-            actionListener="#{dashboardDetailModificationBean.removeWidget()}"
-            icon="#{visibilityBean.generateButtonIcon('si si-remove-circle')}"
-            process="@this"
-            oncomplete="PF('remove-widget-dialog').hide(); updateDashboardWidget(); return false;"/>
+          <h:panelGroup styleClass="flex flex-column">
+            <p:commandButton id="remove-widget-button" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/remove')}"
+              actionListener="#{dashboardDetailModificationBean.removeWidget()}"
+              process="@this" styleClass="w-full portal-remove-button"
+              oncomplete="PF('remove-widget-dialog').hide(); updateDashboardWidget(); return false;"/>
+            <p:link href="#" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}" onclick="PF('remove-widget-dialog').hide();"
+              styleClass="pt-3 flex justify-content-center" />
+           </h:panelGroup>
         </ui:define>
       </ui:decorate>
     </ui:define>

diff --git a/...ddon/portal/generic/dashboard/component/DashboardModification/DashboardModification.xhtml b/...ddon/portal/generic/dashboard/component/DashboardModification/DashboardModification.xhtml
@@ -130,7 +130,7 @@
       value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/dashboardManagement/deleteDashboardMessage',[dashboardModificationBean.selectedDashboard.title])}" />
     <ui:define name="dialogFooter">
       <div class="flex flex-column">
-      <p:commandButton id="remove-dashboard-button" styleClass="w-full"
+      <p:commandButton id="remove-dashboard-button" styleClass="w-full portal-remove-button"
         value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/remove')}"
         actionListener="#{dashboardModificationBean.removeDashboard()}"
         update="dashboard-modification-container"

diff --git a/...on/portal/generic/dashboard/component/WelcomeDashboardWidget/WelcomeDashboardWidget.xhtml b/...on/portal/generic/dashboard/component/WelcomeDashboardWidget/WelcomeDashboardWidget.xhtml
@@ -33,7 +33,7 @@
               oncomplete="PF('new-widget-configuration-dialog').show()" />
             <p:menuitem id="delete-welcome-widget"
               value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
-              icon="si si-bin-1"
+              icon="si si-bin-1" styleClass="color-destroy"
               oncomplete="PF('remove-widget-dialog').show()"
               actionListener="#{dashboardDetailModificationBean.setDeleteWidget(widget)}"
               update="remove-widget-dialog"

diff --git a/...ortal/portal/src_hd/ch/ivy/addon/portal/setting/AbsenceManagement/AbsenceManagement.xhtml b/...ortal/portal/src_hd/ch/ivy/addon/portal/setting/AbsenceManagement/AbsenceManagement.xhtml
@@ -86,7 +86,7 @@
                       </p:column>
                       <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/action')}"
                         styleClass="absences-table-action-column">
-                        <p:commandButton id="absence-action-button" icon="si si-navigation-menu-horizontal"
+                        <p:commandButton id="absence-action-button" icon="fa fa-ellipsis-h"
                           styleClass="rounded-button icon-more-menu-button ui-no-rounded-button-process-page"
                           type="button" />
                         <p:menu class="absence-column-value" overlay="true" trigger="absence-action-button"
@@ -101,7 +101,7 @@
                           <p:menuitem id="delete-absence" actionListener="#{logic.preDelete(absence)}"
                             oncomplete="PF('deleteAbsenceConfirmation').show();"
                             rendered="#{absenceManagementBean.isAbsenceDeletable(absence)}"
-                            icon="si si-bin-1" process="@this"
+                            icon="si si-bin-1" process="@this" styleClass="color-destroy"
                             value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}">
                           </p:menuitem>
                         </p:menu>
@@ -253,17 +253,17 @@
         <ui:param name="dialogContent" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/confirmForDelete')}" />
 
         <ui:define name="dialogFooter">
-          <p:commandLink id="cancel-confirmation-action"
-            value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-            onclick="PF('deleteAbsenceConfirmation').hide()"
-            styleClass="u-mar-right-15" />
-
-          <p:commandButton id="confirm-action" process="@this"
-            icon="#{visibilityBean.generateButtonIcon('si si-remove')}"
-            value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
-            actionListener="#{logic.deleteAbsence}"
-            oncomplete="PF('deleteAbsenceConfirmation').hide();"
-            update="@(.absence-table) @(.substitute-table) @(.substitution-table)" />
+          <h:panelGroup styleClass="flex flex-column">
+            <p:commandButton id="confirm-action" process="@this"
+              value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
+              actionListener="#{logic.deleteAbsence}" styleClass="w-full portal-remove-button"
+              oncomplete="PF('deleteAbsenceConfirmation').hide();"
+              update="@(.absence-table) @(.substitute-table) @(.substitution-table)" />
+            <p:commandLink id="cancel-confirmation-action"
+              value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
+              onclick="PF('deleteAbsenceConfirmation').hide()"
+              styleClass="pt-3 flex justify-content-center" />
+          </h:panelGroup>
         </ui:define>
       </ui:decorate>
       <c:if test="#{absenceManagementBean.absencesCreatable ||  absenceManagementBean.ownAbsencesCreatable}">

diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/admin/AdminSettings/AdminSettings.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/admin/AdminSettings/AdminSettings.xhtml
@@ -81,7 +81,7 @@
                   process="@this" />
                 <p:menuitem id="delete-application"
                   value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
-                  icon="si si-bin-1"
+                  icon="si si-bin-1" styleClass="color-destroy"
                   oncomplete="PF('deleteConfirmation').show()"
                   actionListener="#{logic.submitDeleteApp(app)}"
                   update=":#{p:resolveFirstComponentWithId('deleteConfirmationDialog', view).clientId}"
@@ -230,7 +230,7 @@
                 <p:outputLabel styleClass="app-icon w-full admin-settings-application-icon"
                   value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/applicationList/menuIcon')}" />
                 <div class="w-full">
-                  <ic:ch.ivy.addon.portalkit.component.IconSelection value="#{data.selectedApp.menuIcon}" isNotInAdminSettings="false"/>
+                  <ic:ch.ivy.addon.portalkit.component.IconSelection value="#{data.selectedApp.menuIcon}" isImmediate="false"/>
                 </div>
               </div>
 
@@ -363,12 +363,14 @@
     <ui:param name="dialogContent" value="#{data.confirmMsg}" />
 
     <ui:define name="dialogFooter">
-       <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}" 
-          onclick="PF('deleteConfirmation').hide()" styleClass="u-mar-right-15"/>
+      <h:panelGroup styleClass="flex flex-column">
        <p:commandButton value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
-          icon="#{visibilityBean.generateButtonIcon('si si-remove')}"
+          styleClass="w-full portal-remove-button"
           actionListener="#{logic.delete}" oncomplete="PF('deleteConfirmation').hide();"
           update=":#{p:resolveFirstComponentWithId('applicationForm', view).clientId}" />
+       <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}" 
+          onclick="PF('deleteConfirmation').hide()" styleClass="pt-3 flex justify-content-center"/>
+      </h:panelGroup>
     </ui:define>
   </ui:decorate>
 

diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ActionStep/ActionStep.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ActionStep/ActionStep.xhtml
@@ -74,7 +74,7 @@
       <h:outputText value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}" />
     </p:commandLink>
 
-    <h:panelGroup id="side-steps">
+    <h:panelGroup id="side-steps" styleClass="case-side-steps-panel">
       <f:event listener="#{sideStepBean.getSideSteps(cc.attrs.taskId, case.id)}" type="preRenderComponent" />
       <h:outputText rendered="#{empty sideStepBean.currentSideSteps}" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/caseDetails/noSideSteps')}" styleClass="action-step-item" />
       <ui:repeat var="sideStep" value="#{sideStepBean.currentSideSteps}">

diff --git a/...rtal/portal/src_hd/ch/ivy/addon/portalkit/component/CaseItemDetails/CaseItemDetails.xhtml b/...rtal/portal/src_hd/ch/ivy/addon/portalkit/component/CaseItemDetails/CaseItemDetails.xhtml
@@ -181,12 +181,14 @@
     <ui:param name="dialogContent" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/caseList/destroyCaseMessage')}" />
 
     <ui:define name="dialogFooter">
-      <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-        onclick="PF('destroy-case-dialog').hide();" styleClass="u-mar-right-15" />
-      <p:commandButton id="confirm-destruction" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}"
-        icon="#{visibilityBean.generateButtonIcon('si si-remove')}"
-        actionListener="#{caseWidgetBean.destroyCase(case)}"
-        oncomplete="backToPrevPage(#{caseWidgetBean.willNavigateBack()});" />
+      <h:panelGroup styleClass="flex flex-column">
+        <p:commandButton id="confirm-destruction" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}"
+          styleClass="w-full portal-remove-button"
+          actionListener="#{caseWidgetBean.destroyCase(case)}"
+          oncomplete="backToPrevPage(#{caseWidgetBean.willNavigateBack()});" />
+        <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
+          onclick="PF('destroy-case-dialog').hide();" styleClass="pt-3 flex justify-content-center" />
+        </h:panelGroup>
     </ui:define>
   </ui:decorate>