PRD-200 Refactor_UI

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entando/app-builder",
-  "version": "7.3.0",
+  "version": "7.3.0-SNAPSHOT",
   "author": "Entando",
   "homepage": "https://github.com/entando/app-builder",
   "license": "MIT",
@@ -30,6 +30,7 @@
     "html-webpack-plugin": "^3.2.0",
     "keycloak-js": "^18.0.1",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.469.0",
     "md5": "^2.3.0",
     "moment": "^2.22.1",
     "object-assign": "4.1.1",
@@ -82,8 +83,8 @@
     "lint": "eslint ./src",
     "coverage": "node scripts/test.js --env=jest-environment-jsdom-sixteen --coverage",
     "sass-lint": "sass-lint -v",
-    "precommit": "npm run lint && npm run sass-lint && npm run coverage",
-    "build-full": "npm run precommit && npm run import-plugins && node scripts/build.js",
+
+
     "start-openshift": "npm install -g serve && serve -l 8080 -s build",
     "analyze": "source-map-explorer build/static/js/main.*",
     "app-install": "node apps/install.js",

public/index.html

@@ -10,6 +10,9 @@
     -->
     <link rel="manifest" href="./manifest.json">
     <link rel="shortcut icon" href="./favicon-entando.png">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
     <script>
       var env = "REACT_APP_ENV";
     </script>

sass/categories/filter/CategoryTreeFilter.scss

@@ -2,7 +2,7 @@
   &__title {
     margin-left: 5px;
     color: $color-space-grey;
-    font-family: "Open Sans";
+    font-family: "Inter";
     font-size: 13px;
     font-style: normal;
     font-weight: bold;
@@ -28,7 +28,7 @@
   &__apply-button {
     width: 100%;
     margin-top: 10px;
-    font-family: "Open Sans";
+    font-family: "Inter";
     font-weight: 400;
 
     @media (min-width: 992px) {

sass/common/Button.scss

@@ -0,0 +1,61 @@
+.Button {
+    display: flex;
+    align-items: center;
+    padding-inline: 16px;
+    font-size: 14px;
+    font-weight: 500;
+    border-radius: $spacing-8;
+    column-gap: 8px;
+
+    &:not(.radius-xxs) {
+        border-radius: $radius-s;
+    }
+
+    &.radius-xxs{
+        border-radius: $radius-xxs;
+    }
+
+    .btn:focus {
+        outline: none;
+    }
+
+    &.btn-primary,
+    &.btn-primary:active,
+    &.btn-primary:focus {
+        background-color: $color-brand-primary;
+        border: none;
+    }
+
+    &.btn-clear {  
+        &-secondary {
+            background-color: transparent;
+            border: none;
+            color: $color-text-secondary;
+        }
+    }
+
+    &.btn-link, &.btn-outlined-primary {
+        color: $color-brand-primary;
+        font-size: 16px;
+        font-weight: 500;
+
+        &:hover {
+            color: $color-brand-primary;
+            border-color: $color-brand-primary;
+            background: none;
+        }
+    }
+
+    &.btn-outlined-secondary {
+        &:hover {
+            background-color: $color-content-09;
+        }
+    }
+
+
+    &.btn-outlined-secondary, &.btn-outlined-primary {
+        &:focus, &:focus:hover {
+            outline: none;
+        }
+    }
+}

sass/common/CardList.scss

@@ -0,0 +1,102 @@
+.CardList {
+    display: grid;
+    grid-auto-flow: row;
+    gap: 10px;
+    padding: 20px;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 320px));
+    grid-auto-rows: 1fr;
+    justify-content: space-between;
+    background: rgba(249, 250, 251, 1);
+}
+
+.CardItem {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+  background-color: #fff;
+  border: 1px solid rgba(228, 231, 236, 1);
+  border-radius: 8px;
+  position: relative;
+}
+
+.CardItemActions {
+  position: absolute;
+  top: 10px;
+  right: 14px;
+
+  .dropdown-kebab-pf .dropdown-menu.dropdown-menu-right {
+    width: max-content;
+    max-width: 320px;
+    overflow-wrap: anywhere;
+    padding: 8px;
+
+    .dropdown-menu {
+      display: flex;
+      flex-direction: column;
+      row-gap: 6px;
+    }
+
+    .FragmentListMenuAction__menu-item-container {
+      display: flex;
+      align-items: stretch;
+      column-gap: 8px;
+      padding: 4px;
+
+      &:hover{
+        background-color: $color-neutral-grey;
+      }
+    }
+  }
+}
+
+.CardItemIconWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(236, 249, 242, 1);
+  color: $color-green-new;
+  padding: 6px;
+  width: fit-content;
+  border-radius: 50%;
+
+  &>span {
+    height: 18px;
+  }
+}
+
+.CardItemLabel {
+  display: flex;
+  gap: 10px;
+  align-items: center
+}
+
+.CardItemTitle {
+  color: $color-brand-primary;
+  width: calc(100% - 10px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.CardItemCounter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 6px;
+  width: 20px;
+  height: 20px;
+  background-color: rgba(242, 244, 247, 1);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.CardItemSubtitle{
+  color: rgba(99, 112, 131, 1);
+}
+
+.CardItemCounter__popover {
+  font-weight: 600;
+}

sass/common/CollapsibleSectionTitle.scss

@@ -5,9 +5,9 @@
     justify-content: space-between;
     width: 100%;
     padding: 10px 10px 10px 30px;
-    border-top: 1px solid $color-black;
+    border-top: 1px solid $color-neutral-grey;
     outline: none;
-    color: $color-white;
+    color: $color-content-3;
     font-size: 14px;
     font-weight: bold;
     line-height: inherit;