change folder select design and added delte btn design

Author: shawon

eform-client/src/app/common/modules/eform-shared/components/eform-tree-view-picker/eform-tree-view-picker.component.html

@@ -3,6 +3,7 @@
     mat-icon-button
     *ngIf="collapsed"
     class="collapse-button"
+    style="margin-top: 12px !important;"
     (click)="treeControl.expandAll(); collapsed = !collapsed"
   >
     <mat-icon>expand_more</mat-icon>
@@ -11,6 +12,8 @@
     mat-icon-button
     *ngIf="!collapsed"
     class="collapse-button"
+
+    style="margin-top: 12px !important;"
     (click)="treeControl.collapseAll(); collapsed = !collapsed"
   >
     <mat-icon>expand_less</mat-icon>

eform-client/src/app/common/modules/eform-shared/components/eform-tree-view-picker/eform-tree-view-picker.component.scss

@@ -8,6 +8,24 @@
 mat-mdc-tree-node.mat-mdc-tree-node {
   min-height: 30px;
   max-height: 30px;
+  display: inline-flex;
+
+  &:hover{
+    border-radius: var(--rounded-full)!important;
+  }
+  &:focus{
+    border-radius: var(--rounded-full)!important;
+  }
+
+  .selected-node {
+    background-color: var(--mdc-theme-primary) !important;
+    color: var(--mdc-theme-on-primary) !important;
+    border-radius: var(--rounded-full);
+
+    &:hover{
+      background-color: var(--mdc-theme-primary-dark) !important;
+    }
+  }
 }
 
 .collapse-button {
@@ -16,16 +34,16 @@ mat-mdc-tree-node.mat-mdc-tree-node {
 }
 
 .selected-folder {
-  color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 300);
+  color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 300);
 }
 
 .microting-uid {
-  color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 300);
+  color: var(--text-header) !important;
   margin-left: .5rem;
 }
 
 .folder:hover {
-  color: mat.m2-get-color-from-palette(mat.$m2-pink-palette, 300);
+  color: mat.m2-get-color-from-palette(mat.$m2-teal-palette, 300);
   transition: color .5s;
 }
 

eform-client/src/app/modules/advanced/components/entity-search/entity-search-remove/entity-search-remove.component.html

@@ -25,17 +25,17 @@ <h3 mat-dialog-title>{{'Delete searchable group?' | translate}}</h3>
     </div>
   </div>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
+    class="btn-delete"
     color="warn"
     id="entitySearchDeleteDeleteBtn"
     (click)="deleteSelectedAdvEntitySearchableGroup()"
   >
     {{'Delete' | translate}}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="entitySearchDeleteCancelBtn"
     (click)="hide()"
   >

eform-client/src/app/modules/advanced/components/folders/folder-delete/folder-delete.component.html

@@ -33,17 +33,16 @@ <h3 mat-dialog-title>{{'Are you sure you want to delete the folder' | translate}
     </div>
   </div>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
-    color="warn"
+    class="btn-delete"
     id="saveDeleteBtn"
     (click)="deleteFolder()"
   >
     {{'Delete' | translate}}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="cancelDeleteBtn"
     (click)="hide()"
   >

eform-client/src/app/modules/advanced/components/sites/site-delete/site-delete.component.html

@@ -25,17 +25,16 @@ <h3 mat-dialog-title>{{'Are you sure you want to delete the site? The action can
     </div>
   </div>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
-    color="warn"
+   class="btn-delete"
     id="siteDeleteDeleteBtn"
     (click)="deleteSingle()"
   >
     {{'Delete' | translate}}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="siteDeleteCancelBtn"
     (click)="hide()"
   >

eform-client/src/scss/components/_text.scss

@@ -1,22 +1,32 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 @use '../utilities/colors' as *;
+body, .theme-light {
+  --error: #{$error-light};
+  --warning: #{$warning-light};
+
+}
+
+body, .theme-dark {
+  --error: #{$error-dark};
+  --warning: #{$warning-dark};
+}
 
 a {
   &.link-primary {
-    color: $eform-red;
+    color: var(--error);
     &:hover {
       color: $eform-red-dark;
     }
   }
 }
 
 .text-danger {
-  color: $eform-red;
+  color: var(--error) ;
 }
 
 .text-warning {
-  color: $eform-orange;
+  color: var(--warning) ;
 }
 
 .text-black {

eform-client/src/scss/styles.scss

@@ -66,6 +66,8 @@ body, .theme-light {
   //--mat-card-elevated-container-color: #{$bg-light}!important;
   --primary: #{$primary-light};
   --warning: #{$warning-light};
+  --error: #{$error-light};
+  --btn-delete-text: #{$text-header-dark};
 }
 
 body, .theme-dark {
@@ -81,6 +83,8 @@ body, .theme-dark {
   //--mat-card-elevated-container-color: #{$bg-dark}!important;
   --primary: #{$primary-dark};
   --warning: #{$warning-dark};
+  --error: #{$error-dark};
+  --btn-delete-text: #{$text-header-light};
 }
 
 a {
@@ -537,3 +541,35 @@ ngx-material-timepicker-container {
     pointer-events: none;
   }
 }
+
+.btn-delete{
+  display: flex;
+  height: 48px;
+  padding: var(--312-px, 12px) var(--832-px, 32px);
+  justify-content: center;
+  align-items: center;
+  gap: var(--156-px, 6px);
+  border-radius: var(--rounded-full);
+  background: var(--error);
+  color: var(--btn-delete-text);
+  cursor: pointer;
+  border: unset;
+
+  /* Text/sm/Medium */
+  font-family: var(--font-family);
+  font-size: var(--Text-size-sm, 14px);
+  font-style: normal;
+  //font-weight: 600;
+  line-height: var(--Text-line-height-sm, 22px); /* 157.143% */
+
+  &:disabled,
+  &[disabled] {
+    background-color: var(--border) !important;
+    color: var(--tp-text) !important;
+    opacity: 0.5;
+    cursor: not-allowed !important;
+    pointer-events: none;
+  }
+}
+
+

eform-client/src/scss/utilities/_colors.scss

@@ -44,3 +44,6 @@ $bg-dark: #202122;
 
 $text-header-light: #0F1316;
 $text-header-dark: #F3F5F7;
+
+$error-light: #F44336;
+$error-dark: #FF8282;