fixed xml icon, hover and click shape, added action menu design

Author: shawon

eform-client/src/app/components/navigation/navigation.component.scss

@@ -1,3 +1,9 @@
+
+:root {
+  --rounded-full: 9999px;;
+  --font-family: Nunito Sans, Roboto, "Helvetica Neue", sans-serif;
+}
+
 mat-tree {
   mat-tree-node {
     display: inline-flex;
@@ -14,15 +20,21 @@ mat-tree {
         white-space: initial;
         line-height: 1.4em;
       }
+
+      &:hover{
+        border-radius: var(--rounded-full)!important;
+        background-color: var(--mdc-theme-primary-dark, #00695C) !important;
+        color: var(--mdc-theme-on-primary) !important;
+      }
+      //&:focus {
+      //  background-color: var(--mdc-theme-primary-dark, #00695C) !important;
+      //  border-radius: var(--rounded-full) !important;
+      //  color: var(--mdc-theme-on-primary) !important;
+      //}
     }
 
 
-    &:hover{
-      border-radius: var(--rounded-full)!important;
-    }
-    &:focus{
-      border-radius: var(--rounded-full)!important;
-    }
+
 
     .selected-node {
       background-color: var(--mdc-theme-primary) !important;
@@ -31,6 +43,7 @@ mat-tree {
 
       &:hover{
           background-color: var(--mdc-theme-primary-dark) !important;
+          color: var(--mdc-theme-on-primary) !important;
       }
     }
 
@@ -61,16 +74,25 @@ mat-tree {
         }
 
         mat-tree-node {
+          .nav-link{
+            &:hover{
+              width: calc(100% - 20px)!important;
+              border-radius: var(--rounded-full)!important;
+              background-color: var(--mdc-theme-primary-dark, #00695C) !important;
+              color: var(--mdc-theme-on-primary) !important;
+            }
+          }
           span {
             white-space: initial;
-            //line-height: 1.4em;
           }
         }
       }
     }
     .selected-node {
       width: calc(100% - 20px)!important;
     }
+
+
   }
 }
 
@@ -87,3 +109,9 @@ mat-tree {
   vertical-align: middle;
   font-size: 18px;
 }
+
+
+mat-tree-node a.mat-mdc-button-base.nav-link {
+  border-radius: var(--rounded-full) !important;
+  overflow: hidden !important;
+}

eform-client/src/app/modules/eforms/components/eforms-page/eforms-page.component.html

@@ -26,7 +26,8 @@
       (click)="openNewEformModal()"
       class="btn-secondary btn-secondary--icon-rounded-border"
     >
-      <mat-icon class="icon-secondary">text_snippet</mat-icon>
+<!--      <mat-icon class="icon-secondary">text_snippet</mat-icon>-->
+      <app-icon name="xmlFile" size="20"></app-icon>
     </button>
 
     <div class="line-vert"></div>

eform-client/src/scss/styles.scss

@@ -685,8 +685,14 @@ ngx-material-timepicker-container {
   }
 }
 
+
+.mat-tree{
+  background-color: var(--bg)!important;
+}
+
 .mat-drawer-inner-container{
   background: var(--bg)!important;
+
   .mat-tree, .mat-expansion-panel{
     background: var(--bg)!important;
 
@@ -797,8 +803,72 @@ ngx-material-timepicker-container {
   gap: var(--624-px, 24px);
 }
 
+eform-new-subheader{
+  .mat-mdc-card{
+    box-shadow: unset !important;
+    border: none !important;
+  }
+}
+
 .mat-mdc-card{
   box-shadow: unset !important;
   border: 1px solid var(--border) !important;
   //border-color: var(--border) !important;
 }
+
+.mat-mdc-menu-panel{
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: var(--rounded-8, 8px);
+  border: 1px solid var(--border, #EBEFF2)!important;
+  background: var(--bg, #FFF)!important;
+  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10);
+
+  .mat-mdc-menu-content{
+    display: inline-flex;
+    padding: var(--28-px, 8px);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--14-px, 4px);
+    button{
+      display: flex;
+      height: 40px;
+      padding: var(--28-px, 8px) var(--416-px, 16px);
+      align-items: center;
+      gap: var(--28-px, 8px);
+      align-self: stretch;
+      .mat-icon{
+        margin: 0!important;
+      }
+      span{
+        color: var(--text-header, #0F1316)!important;
+        font-family: var(--font-family, "Nunito Sans");
+        font-size: var(--Text-size-sm, 14px);
+        font-style: normal;
+        font-weight: 600;
+        line-height: var(--Text-line-height-sm, 22px);
+      }
+    }
+
+    .mat-mdc-menu-item {
+      display: flex;
+      height: 40px;
+      padding: var(--28-px, 8px) var(--416-px, 16px);
+      align-items: flex-start;
+      gap: var(--28-px, 8px);
+      align-self: stretch;
+      min-height: unset!important;
+      .mat-mdc-menu-item-text {
+        color: var(--text-header, #0F1316) !important;
+        font-family: var(--font-family, "Nunito Sans");
+        font-size: var(--Text-size-sm, 14px) !important;
+        font-style: normal !important;
+        font-weight: 600 !important;
+        line-height: var(--Text-line-height-sm, 22px) !important;
+      }
+    }
+  }
+
+
+}