Feature/ivyportal 18032 UI facelift conflict (#1312)

* 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 * bug/IVYPORTAL-18051-Portal-Dashboard-shows-no-permission-screen-when-… (#1280) * bug/IVYPORTAL-18051-Portal-Dashboard-shows-no-permission-screen-when-dashboards-is-empty _ adapt logic _ import default dashboard * feature/IVYPORTAL-18032-UI-facelift-conflict - Update Edit external link UI * feature/IVYPORTAL-18032-UI-facelift-conflict - Add error message when uploading file fail * IVYPORTAL-18072 SPIKE: Evaluate the full screen issue with new case and task list - Implemented * 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-18028-High-Failure-to-use-HTTPS-or-SFTP-URL-in-Maven-artifact-upload-download-Two-occurrences (#1298) - Use HTTPS URL in maven artifact download * Update portal_walkthrough_testplan.jmx for new test data (#1306) * IVYPORTAL-18029 High - Client-side cross-site scripting - Fixed security check * Updated all pom build.plugin.version=12.0.0, ivy.engine.version=12.0.2 (#1308) Co-authored-by: wawa-axonivy <[email protected]> * IVYPORTAL-18029 High - Client-side cross-site scripting - Try to fix Client-side cross-site scripting * 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 * IVYPORTAL-18029 High - Client-side cross-site scripting - Apply new approach * 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 * IVYPORTAL-18029: Security findings- Client-side cross-site scripting (#1310) * feature/IVYPORTAL-18028-High-Failure-to-use-HTTPS-or-SFTP-URL-in-Maven-artifact-upload-download-Two-occurrences-12 (#1305) * IVYPORTAL-18029 High - Client-side cross-site scripting - Apply new approach to load taskUrl from server * IVYPORTAL-18031 Medium - DOM text reinterpreted as HTML - Implement * IVYPORTAL-18029 Security findings- Client-side cross-site scripting - Fixed GUI test * IVYPORTAL-18072 SPIKE: Evaluate the full screen issue with new case and task list - Handled feedback: make the dashboard load from memory responsiveness * feature/IVYPORTAL-18032-UI-facelift-conflict - Handle feedback --------- Co-authored-by: Thinh Nguyen <[email protected]> Co-authored-by: mnhnam-axonivy <[email protected]> Co-authored-by: Tung Le <[email protected]> Co-authored-by: wawa-axonivy <[email protected]> Co-authored-by: Nam Mai <[email protected]> Co-authored-by: Nam.Chu <[email protected]> Co-authored-by: Nam Chu <[email protected]>
axonivy-market · Dec 18, 2024 · 885c2f9 · 885c2f9
1 parent ef524d1
commit 885c2f9
Show file tree

Hide file tree

Showing 46 changed files with 314 additions and 162 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/...vyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/TemplatePage.java b/...vyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/TemplatePage.java
@@ -481,6 +481,10 @@ public NewDashboardPage openTaskList() {
     return openMainMenu().selectTaskMenu();
   }
 
+  public void waitForTaskTitleAppear() {
+    waitForElementDisplayed(By.id("title"), true);
+  }
+
   public void waitForIFrameContentVisible() {
     waitForIFrameScreenshotSizeGreaterThan(IFRAME_SCREENSHOT_FILE_SIZE_AT_MINIMUM);
   }

diff --git a/...l/portal-selenium-test/src_test/com/axonivy/portal/selenium/test/LanguageSettingTest.java b/...l/portal-selenium-test/src_test/com/axonivy/portal/selenium/test/LanguageSettingTest.java
@@ -8,6 +8,7 @@
 import com.axonivy.portal.selenium.common.NavigationHelper;
 import com.axonivy.portal.selenium.page.MainMenuPage;
 import com.axonivy.portal.selenium.page.NewDashboardPage;
+import com.axonivy.portal.selenium.page.TaskIFrameTemplatePage;
 import com.axonivy.portal.selenium.page.TopMenuTaskWidgetPage;
 import com.axonivy.portal.selenium.page.UserProfilePage;
 import com.axonivy.portal.selenium.page.WorkingTaskDialogFromUserProfilePage;
@@ -26,9 +27,10 @@ public void setup() {
   public void testChangeLanguageWhenWorkingOnTask() {
     NavigationHelper.navigateToTaskList();
     TopMenuTaskWidgetPage taskWidget = new TopMenuTaskWidgetPage();
-    taskWidget.startTaskIFrameByIndex(0);
+    TaskIFrameTemplatePage taskPage = taskWidget.startTaskIFrameByIndex(0);
     taskWidget.switchBackToParent();
-    taskWidget.clickOnMyProfile();
+    taskPage.waitForTaskTitleAppear();
+    taskPage.clickOnMyProfile();
     WorkingTaskDialogFromUserProfilePage workingTaskDialogPage = new WorkingTaskDialogFromUserProfilePage();
     workingTaskDialogPage.leaveTask();
     UserProfilePage userProfilePage = new UserProfilePage();

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/config/variables/Portal/Dashboard.json b/AxonIvyPortal/portal/config/variables/Portal/Dashboard.json
@@ -377,7 +377,7 @@
         ],
         "layout": {
           "w": 12,
-          "h": 8,
+          "h": 12,
           "x": 0,
           "y": 0
         },
@@ -489,7 +489,7 @@
         ],
         "layout": {
           "w": 12,
-          "h": 8,
+          "h": 12,
           "x": 0,
           "y": 0
         },

diff --git a/AxonIvyPortal/portal/src/ch/ivy/addon/portal/generic/bean/DashboardBean.java b/AxonIvyPortal/portal/src/ch/ivy/addon/portal/generic/bean/DashboardBean.java
@@ -107,6 +107,12 @@ public void init() {
         .findGlobalSettingValue(GlobalVariable.DEFAULT_BEHAVIOUR_WHEN_CLICKING_ON_LINE_IN_TASK_LIST)
         .equals(BehaviourWhenClickingOnLineInTaskList.RUN_TASK.name());
 
+    // Set responsive option for default task list and case list
+    if (DashboardUtils.isDefaultCaseListDashboard(selectedDashboard)
+        || DashboardUtils.isDefaultTaskListDashboard(selectedDashboard)) {
+      selectedDashboard.setIsResponsive(true);
+    }
+
     buildClientStatisticApiUri();
   }
 

diff --git a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/dto/dashboard/Dashboard.java b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/dto/dashboard/Dashboard.java
@@ -35,9 +35,13 @@ public class Dashboard extends AbstractConfiguration implements Serializable {
   private String displayedPermission;
   private Boolean isTopMenu;
 
+  @JsonIgnore
+  private Boolean isResponsive;
+
   public Dashboard() {
     // Set default values
     isTopMenu = false;
+    isResponsive = false;
   }
 
   public Dashboard(Dashboard dashboard) {
@@ -54,6 +58,7 @@ public Dashboard(Dashboard dashboard) {
     permissionDTOs = dashboard.permissionDTOs;
     displayedPermission = dashboard.displayedPermission;
     isTopMenu = dashboard.isTopMenu;
+    isResponsive = dashboard.isResponsive;
   }
 
   public String getTitle() {
@@ -146,6 +151,16 @@ public void setIsTopMenu(Boolean isTopMenu) {
     this.isTopMenu = isTopMenu;
   }
 
+  @JsonIgnore
+  public Boolean getIsResponsive() {
+    return isResponsive;
+  }
+
+  @JsonIgnore
+  public void setIsResponsive(Boolean isResponsive) {
+    this.isResponsive = isResponsive;
+  }
+
   @Override
   public int hashCode() {
     final int prime = 31;

diff --git a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/util/DashboardUtils.java b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/util/DashboardUtils.java
@@ -327,4 +327,13 @@ public static void updatePropertiesToNullIfCurrentValueIsDefaultValue(List<Dashb
     }
   }
 
+  public static boolean isDefaultTaskListDashboard(Dashboard dashboard) {
+    return Optional.ofNullable(dashboard).map(Dashboard::getId)
+        .orElseGet(() -> "").contentEquals(DEFAULT_TASK_LIST_DASHBOARD);
+  }
+
+  public static boolean isDefaultCaseListDashboard(Dashboard dashboard) {
+    return Optional.ofNullable(dashboard).map(Dashboard::getId)
+        .orElseGet(() -> "").contentEquals(DEFAULT_CASE_LIST_DASHBOARD);
+  }
 }
diff --git a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/util/DefaultDashboardUtils.java b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/util/DefaultDashboardUtils.java
@@ -53,7 +53,7 @@ public class DefaultDashboardUtils {
             ],
             "layout": {
               "w": 12,
-              "h": 8,
+              "h": 12,
               "x": 0,
               "y": 0
             },
@@ -168,7 +168,7 @@ public class DefaultDashboardUtils {
             ],
             "layout": {
               "w": 12,
-              "h": 8,
+              "h": 12,
               "x": 0,
               "y": 0
             },

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"