chore(edit-ema): Fix UI Content Palette #27061 (#27182)

* Working on palette edit ema

* Working on palette. Finished functionallity

* Refactor, separate to components

* Working on Palette testing.

* Replaced hardcoded values with scss variables

* Working on refactor and PR suggestions

* Lint

* Work in PR suggestions.

* Working on PR suggestions

* Refactor component. Now each contenttype and contentlet have input inside.

* Fix SonarQ issue

* Fix drag and drop on contentTypes and contentlets

* Fixed test on EmaStore

* Reduced mocks lenght for sonarQ issue

* Reduced mocks again.

* Replaced mock of Content Types

* Moved mocks to appropiate place. Removed mocks file

* Added scroll to contentlets

* Make PR suggestions

* Finished PR suggestions

* Restore .env.local.example

* Fix paginate issue

* Fixed UI on Palette. Updated shadows on all project

* Installed dotcms lib

* Fixed overflows and drag on thumbnail

---------

Co-authored-by: Freddy Montes <[email protected]>

SECURITY.md

@@ -3,10 +3,9 @@
 For more information regarding dotCMS security polices and known security issues see our documentation site:
 https://dotcms.com/docs/latest/security-and-privacy
 
-
 ## Supported Versions
 
-dotCMS is commited to backporting security fixes to our LTS version.  For an up to date list of which versions are supported, please see:
+dotCMS is commited to backporting security fixes to our LTS version. For an up to date list of which versions are supported, please see:
 https://www.dotcms.com/docs/latest/current-releases
 
 When possible, dotCMS will also provide a workaround that can remediate a security issue without having to update you dotCMS version.

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-configuration-detail/dot-apps-configuration-detail.component.scss

@@ -2,7 +2,7 @@
 
 :host {
     background: $color-palette-gray-200;
-    box-shadow: $md-shadow-4;
+    box-shadow: $shadow-m;
     display: flex;
     height: 100%;
     padding: $spacing-4;
@@ -44,7 +44,7 @@
 
 .dot-apps-configuration-detail__container {
     background-color: $white;
-    box-shadow: $md-shadow-4;
+    box-shadow: $shadow-m;
     display: flex;
     flex-direction: column;
     overflow-y: auto;

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-configuration-header/dot-apps-configuration-header.component.scss

@@ -12,7 +12,7 @@
     p-avatar {
         align-self: baseline;
         border-radius: 50%;
-        box-shadow: $md-shadow-2;
+        box-shadow: $shadow-s;
         cursor: pointer;
         margin: 0 $spacing-4 0 $spacing-4;
     }

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-configuration/dot-apps-configuration-list/dot-apps-configuration-item/dot-apps-configuration-item.component.scss

@@ -11,7 +11,7 @@
     width: 100%;
 
     &:hover {
-        box-shadow: $md-shadow-5;
+        box-shadow: $shadow-m;
     }
 
     p-button {

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-configuration/dot-apps-configuration.component.scss

@@ -2,7 +2,7 @@
 
 :host {
     background: $color-palette-gray-200;
-    box-shadow: $md-shadow-4;
+    box-shadow: $shadow-m;
     display: flex;
     height: 100%;
     min-width: 75.25rem;
@@ -50,7 +50,7 @@
 
 .dot-apps-configuration__container {
     background-color: $white;
-    box-shadow: $md-shadow-4;
+    box-shadow: $shadow-m;
     overflow-y: auto;
     width: 100%;
 }

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-card/dot-apps-card.component.scss

@@ -1,13 +1,13 @@
 @use "variables" as *;
 
 :host {
-    box-shadow: $md-shadow-4;
+    box-shadow: $shadow-m;
     display: block;
     transition: box-shadow $basic-speed ease-in;
     border-radius: $border-radius-sm;
 
     &:hover {
-        box-shadow: $md-shadow-3;
+        box-shadow: $shadow-s;
         cursor: pointer;
     }
 
@@ -82,7 +82,7 @@ p-header {
 
 p-avatar {
     border-radius: 50%;
-    box-shadow: $md-shadow-2;
+    box-shadow: $shadow-s;
     margin: 0 $spacing-3 0;
 }
 

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-list.component.scss

@@ -48,7 +48,7 @@
 
 .dot-apps__container {
     background-color: $white;
-    box-shadow: $md-shadow-4;
+    box-shadow: $shadow-m;
     overflow-y: auto;
     padding-top: $spacing-4;
     width: 100%;

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/dot-edit-content.component.scss

@@ -13,7 +13,7 @@ dot-whats-changed,
 .dot-edit__iframe {
     background: $white;
     border-radius: $border-radius-xs;
-    box-shadow: $md-shadow-4;
+    box-shadow: $shadow-m;
     flex-grow: 1;
     overflow: hidden;
 }
@@ -57,7 +57,7 @@ dot-whats-changed,
     .dot-edit__page-wrapper--deviced & {
         flex-grow: 0;
         border-radius: 10px;
-        box-shadow: $md-shadow-6;
+        box-shadow: $shadow-l;
         background: $white;
         background: linear-gradient(135deg, $white 0%, rgba(240, 240, 240, 1) 100%);
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=1);

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.scss

@@ -10,7 +10,7 @@
 .results-seo-tool__main-card {
     width: 47.6rem;
     border-radius: $border-radius-xl;
-    box-shadow: $md-shadow-6;
+    box-shadow: $shadow-l;
     margin: $spacing-4 $spacing-6;
 }
 

core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-card/dot-pages-card.component.scss

@@ -2,7 +2,7 @@
 
 :host {
     &:hover {
-        box-shadow: $md-shadow-5;
+        box-shadow: $shadow-m;
         transition: box-shadow 0.35s ease-in-out;
     }
 

core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.component.scss

@@ -9,7 +9,7 @@
 
 .dot-pages__container {
     background-color: $white;
-    box-shadow: $md-shadow-4;
+    box-shadow: $shadow-m;
     padding: $spacing-4 $spacing-5 0;
     width: 100%;
 }

core-web/apps/dotcms-ui/src/app/portlets/dot-starter/dot-starter.component.scss

@@ -62,7 +62,7 @@ $number-link-icon-size: 2.28rem;
 
     .dot-starter-top-main__block {
         border-radius: $border-radius-md;
-        box-shadow: $md-shadow-7;
+        box-shadow: $shadow-l;
 
         align-content: space-between;
         border-bottom: 1px solid $color-palette-gray-300;
@@ -195,7 +195,7 @@ $number-link-icon-size: 2.28rem;
     .dot-starter-bottom__block {
         background-color: $white;
         border-bottom: 1px solid $color-palette-gray-300;
-        box-shadow: $md-shadow-4;
+        box-shadow: $shadow-m;
         display: flex;
         flex-grow: 1;
         height: 100%;