#25772 Change icon of back icon at Edit page when editing a variant (#…

…25999) * #25772 fix missing gap in back icon at Edit page when editing a variant * #25772 change from pi-angle-left to pi-arrow-left of the back button * #25772 lint
dotCMS · Sep 6, 2023 · e5ca5e4 · e5ca5e4
1 parent a7e7dc3
commit e5ca5e4
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 21 deletions.
diff --git a/...t-edit-page/content/components/dot-edit-page-toolbar/dot-edit-page-toolbar.component.html b/...t-edit-page/content/components/dot-edit-page-toolbar/dot-edit-page-toolbar.component.html
@@ -1,15 +1,15 @@
 <dot-secondary-toolbar>
     <!-- Header title and actions-->
-    <div class="main-toolbar-left flex align-items-center">
+    <div class="main-toolbar-left flex align-items-center gap-2">
         <ng-container *ngIf="variant; else defaultHeaderLeftTpl">
-            <a
-                class="flex align-items-center cursor-pointer"
+            <button
+                class="p-button-rounded p-button-text"
                 [pTooltip]="'editpage.header.back.to.experiment' | dm"
                 (click)="backToExperiment.emit(true)"
                 data-testId="goto-experiment"
-                tooltipPosition="bottom">
-                <i class="pi pi-angle-left"></i>
-            </a>
+                icon="pi pi-arrow-left"
+                pButton
+                tooltipPosition="bottom"></button>
 
             <dot-edit-page-info
                 class="dot-variant-header flex gap-3"

diff --git a/...cms-ui/src/app/view/components/dot-secondary-toolbar/dot-secondary-toolbar.component.scss b/...cms-ui/src/app/view/components/dot-secondary-toolbar/dot-secondary-toolbar.component.scss
@@ -55,11 +55,12 @@
     .dot-secondary-toolbar__main.edit-page-variant-mode {
         background-color: $color-palette-primary;
         color: $white;
-
         .main-toolbar-left {
-            i {
+            color: $white;
+            i,
+            dot-copy-button button,
+            button .pi {
                 color: $white;
-                font-size: $font-size-xl;
             }
 
             h2 {
@@ -69,14 +70,16 @@
             }
 
             dot-copy-button button {
-                color: $white;
                 i.pi {
                     color: $white;
                 }
                 &:hover {
                     background-color: $color-palette-white-op-10;
                 }
             }
+            button:hover {
+                background-color: $color-palette-white-op-10;
+            }
         }
 
         .main-toolbar-right {

diff --git a/...portlet/src/lib/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.html b/...portlet/src/lib/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.html
@@ -1,7 +1,11 @@
 <div class="wrapper flex flex-row align-items-center gap-2">
-    <a class="flex cursor-pointer" (click)="goBack.emit(true)" data-testId="goback-link">
-        <i class="pi pi-angle-left"></i>
-    </a>
+    <button
+        class="p-button-rounded p-button-text"
+        (click)="goBack.emit(true)"
+        data-testId="goback-link"
+        icon="pi pi-arrow-left"
+        pButton></button>
+
     <ng-container *ngIf="!isLoading; else loadingTpl">
         <span data-testId="title">{{ title }}</span>
     </ng-container>

diff --git a/...portlet/src/lib/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.scss b/...portlet/src/lib/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.scss
@@ -2,7 +2,7 @@
 @use "mixins" as *;
 
 .wrapper {
-    padding: 0 $spacing-5 0 $spacing-5;
+    padding: 0 $spacing-4 0 $spacing-4;
     min-height: $experiment-header-height;
     background-color: $white;
     color: $black;

diff --git a/...s/portlet/src/lib/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.ts b/...s/portlet/src/lib/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.ts
@@ -1,7 +1,8 @@
-import { DatePipe, JsonPipe, LowerCasePipe, NgIf, TitleCasePipe } from '@angular/common';
+import { DatePipe, LowerCasePipe, NgIf, TitleCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { RouterLink } from '@angular/router';
 
+import { ButtonModule } from 'primeng/button';
 import { SkeletonModule } from 'primeng/skeleton';
 import { TagModule } from 'primeng/tag';
 
@@ -22,16 +23,14 @@ import { DotPipesModule } from '@pipes/dot-pipes.module';
         RouterLink,
         NgIf,
         LowerCasePipe,
-        // DotCMS
+        DatePipe,
+        TitleCasePipe,
         DotIconModule,
         DotPipesModule,
-        // PrimeNG
+        DotMessagePipe,
         SkeletonModule,
         TagModule,
-        DotMessagePipe,
-        DatePipe,
-        JsonPipe,
-        TitleCasePipe
+        ButtonModule
     ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })