added new button design

shawon · shawon · commit b53d569fb157 · 2025-11-18T13:17:31.000+06:00
diff --git a/eform-client/src/app/app.module.ts b/eform-client/src/app/app.module.ts
@@ -5,6 +5,8 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {GalleryModule} from 'ng-gallery';
 import {TranslateModule} from '@ngx-translate/core';
 import {LightboxModule} from 'ng-gallery/lightbox';
+import { AppIconComponent } from './components/icons/app-icon/app-icon.component';
+
 // TODO fix ngx-mask
 //import {NgxMaskModule} from 'ngx-mask';
 import {ToastrModule} from 'ngx-toastr';
@@ -136,6 +138,7 @@ import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
     MatProgressSpinnerModule,
     // EformDateFnsDateModule,
     EformMatDateFnsDateModule,
+    AppIconComponent,
   ],
   schemas: [NO_ERRORS_SCHEMA],
   providers: [providers],
diff --git a/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-create/shared-tag-create.component.html b/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-create/shared-tag-create.component.html
@@ -13,7 +13,7 @@ <h3 mat-dialog-title>{{ 'New tag' | translate }}</h3>
 </div>
 <div mat-dialog-actions class="d-flex flex-row justify-content-end">
   <button
-    mat-raised-button
+    class="btn-primary"
     color="accent"
     id="newTagSaveBtn"
     [disabled]="!name"
@@ -22,7 +22,7 @@ <h3 mat-dialog-title>{{ 'New tag' | translate }}</h3>
     {{ 'Save' | translate }}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="newTagSaveCancelBtn"
     (click)="cancelCreate()"
   >
diff --git a/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tags/shared-tags.component.html b/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tags/shared-tags.component.html
@@ -4,22 +4,20 @@ <h3 mat-dialog-title>{{ 'Tags management' | translate }}</h3>
   <div class="d-flex flex-row justify-content-end mb-2">
     <button
       *ngIf="showMultipleCreateBtn"
-      mat-raised-button
-      color="primary"
+      class="btn-primary btn-primary--icon-left"
       id="newTagsBtn"
       (click)="showMultipleCreateTagModal()"
       type="button">
       <mat-icon>add</mat-icon>
-      {{'Add bulk' | translate}}
+      <span>{{'Add bulk' | translate}}</span>
     </button>
     <button
-      mat-raised-button
-      color="accent"
+      class="btn-primary btn-primary--icon-left"
       id="newTagBtn"
       (click)="showCreateTagModal()"
       type="button">
       <mat-icon>add</mat-icon>
-      {{'Add new' | translate}}
+      <span>{{'Add new' | translate}}</span>
     </button>
   </div>
   <div class="d-flex flex-column">
@@ -53,7 +51,7 @@ <h3 mat-dialog-title>{{ 'Tags management' | translate }}</h3>
 </div></div>
 <div mat-dialog-actions class="d-flex flex-row justify-content-end">
   <button
-    mat-raised-button
+    class="btn-cancel"
     (click)="hide()"
     id="tagsModalCloseBtn">
     {{ 'Close' | translate }}
diff --git a/eform-client/src/app/components/app.component.ts b/eform-client/src/app/components/app.component.ts
@@ -11,13 +11,15 @@ import {
 } from 'src/app/state';
 import {AuthStateService} from 'src/app/common/store';
 import {TranslateService} from '@ngx-translate/core';
+import IconService from './icons/index';
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     standalone: false
 })
 export class AppComponent implements OnInit, OnDestroy {
+  private iconService = inject(IconService);
   private router = inject(Router);
   private authStore = inject(Store);
   private userSettings = inject(UserSettingsService);
@@ -31,6 +33,7 @@ export class AppComponent implements OnInit, OnDestroy {
   public selectIsAuth$ = this.authStore.select(selectAuthIsAuth);
 
   ngOnInit(): void {
+    this.iconService.register();
     this.authSyncStorageService.init();
     this.selectIsAuth$.pipe(debounceTime(1000), take(1)).subscribe((isAuth) => {
       if (isAuth) {
diff --git a/eform-client/src/app/components/icons/app-icon/app-icon.component.html b/eform-client/src/app/components/icons/app-icon/app-icon.component.html
@@ -0,0 +1,10 @@
+<mat-icon
+  [svgIcon]="name"
+  [ngStyle]="{
+    'width.px': size,
+    'height.px': size,
+    'font-size.px': size,
+    'color': color
+  }"
+  class="app-icon"
+></mat-icon>
diff --git a/eform-client/src/app/components/icons/app-icon/app-icon.component.scss b/eform-client/src/app/components/icons/app-icon/app-icon.component.scss
@@ -0,0 +1,5 @@
+.app-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/eform-client/src/app/components/icons/app-icon/app-icon.component.ts b/eform-client/src/app/components/icons/app-icon/app-icon.component.ts
@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import {NgStyle} from '@angular/common';
+
+@Component({
+  selector: 'app-icon',
+  standalone: true,
+  imports: [MatIconModule, NgStyle],
+  templateUrl: './app-icon.component.html',
+  styleUrls: ['./app-icon.component.scss']
+})
+export class AppIconComponent {
+  @Input() name!: string;
+  @Input() size: number | string = 20;
+  @Input() color: string = 'currentColor';
+}
diff --git a/eform-client/src/app/components/icons/icons.ts b/eform-client/src/app/components/icons/icons.ts
@@ -0,0 +1,32 @@
+export const CUSTOM_ICONS: Record<string, string> = {
+  xmlFile: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+      <path d="M15.8333 18.3346H4.16667C3.24619 18.3346 2.5 17.5884 2.5 16.668L2.5 3.33464C2.5 2.41416 3.24619 1.66797 4.16667 1.66797H10L15.8333 7.5013V9.16797M15.4167 7.5013H11.665C10.7446 7.5013 9.99837 6.75511 9.99837 5.83464V2.08464"
+        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M5.4165 11.6798L7.05439 13.7142M7.05439 13.7142L8.74984 15.7753M7.05439 13.7142L8.63236 11.668M7.05439 13.7142L5.43119 15.8346M10.4165 15.8346V11.668L12.0832 14.168L13.7498 11.668V15.8346M15.8332 11.668V15.8346H17.4998"
+        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  `,
+
+  tags: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+      <path d="M12.0791 8.33464C12.7802 7.86845 13.4025 7.12039 13.7892 6.19008C14.5875 4.26932 14.0788 2.299 12.6532 1.78925C11.2274 1.27949 9.42441 2.42334 8.62616 4.34409C8.49266 4.66519 8.39575 4.98769 8.3335 5.30449" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M8.3335 16.6667V8.89952C8.3335 8.54826 8.5178 8.22275 8.819 8.04203L11.6668 6.33333M8.3335 16.6667V17.3333C8.3335 17.8856 8.78121 18.3333 9.3335 18.3333H15.6668C16.2191 18.3333 16.6668 17.8856 16.6668 17.3333V8.89952C16.6668 8.54826 16.4825 8.22275 16.1813 8.04203L13.0147 6.14203C12.698 5.95202 12.3023 5.95202 11.9857 6.14203L11.6668 6.33333M8.3335 16.6667L4.41295 16.0132C3.83317 15.9166 3.46136 15.3432 3.60973 14.7744L5.6874 6.81005C5.77777 6.46361 6.04647 6.19192 6.3919 6.09771L9.83596 5.15842C10.1933 5.06096 10.5753 5.16901 10.8286 5.43924L11.6668 6.33333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  `,
+
+  upload: `
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="none">
+    <path d="M5.33301 2.83203L7.41634 0.748698L9.49967 2.83203M7.41634 9.08203V1.25602" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M14.0833 11.168L13.9452 11.9968C13.7845 12.9611 12.9501 13.668 11.9724 13.668H2.86092C1.88324 13.668 1.04886 12.9611 0.888133 11.9968L0.75 11.168" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+  `,
+  pencil: `
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="none">
+    <path d="M13.3756 5.04304L4.74938 13.6693H0.75V9.66927L9.37561 1.04309C9.76613 0.652545 10.3993 0.652534 10.7898 1.04307L13.3756 3.62883C13.7661 4.01936 13.7661 4.65252 13.3756 5.04304Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+    <path d="M7.41602 3.00195L11.416 7.00195" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+    <path d="M14.0833 13.668H8.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+  `
+
+};
diff --git a/eform-client/src/app/components/icons/index.ts b/eform-client/src/app/components/icons/index.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MatIconRegistry } from '@angular/material/icon';
+import { CUSTOM_ICONS } from './icons';
+
+@Injectable({ providedIn: 'root' })
+class IconService {
+  constructor(private registry: MatIconRegistry, private sanitizer: DomSanitizer) {}
+
+  register(): void {
+    Object.entries(CUSTOM_ICONS).forEach(([name, svg]) => {
+      this.registry.addSvgIconLiteral(
+        name,
+        this.sanitizer.bypassSecurityTrustHtml(svg)
+      );
+    });
+  }
+}
+
+export default IconService
diff --git a/eform-client/src/app/components/navigation/navigation.component.html b/eform-client/src/app/components/navigation/navigation.component.html
@@ -8,7 +8,7 @@
       <!-- use a disabled button to provide padding for tree leaf -->
       <a mat-button
          style="width: 100%"
-         color="{{this.router.url === node.link ? 'accent' : ''}}"
+         [class.selected-node]="router.url === node.link"
          *ngIf="node.isInternalLink"
          routerLink="{{ node.link }}"
          class="nav-link px-3"
diff --git a/eform-client/src/app/components/navigation/navigation.component.scss b/eform-client/src/app/components/navigation/navigation.component.scss
@@ -15,6 +15,17 @@ mat-tree {
         line-height: 1.4em;
       }
     }
+
+    .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;
+      }
+    }
+
   }
 
   mat-nested-tree-node { // styles for nested tree nodes
diff --git a/eform-client/src/app/modules/advanced/components/workers/workers/workers.component.html b/eform-client/src/app/modules/advanced/components/workers/workers/workers.component.html
@@ -1,12 +1,13 @@
 <eform-new-subheader>
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
+    id="newDeviceUserBtn"
     id="workerCreateBtn"
     *ngIf="selectCurrentUserClaimsWorkersCreate$ | async"
     (click)="openCreateModal()"
   >
-    {{ 'Create Worker' | translate }}
+    <mat-icon>add</mat-icon>
+    <span>{{ 'Create Worker' | translate }}</span>
   </button>
 </eform-new-subheader>
 
diff --git a/eform-client/src/app/modules/device-users/components/device-users-page/device-users-page.component.html b/eform-client/src/app/modules/device-users/components/device-users-page/device-users-page.component.html
@@ -1,13 +1,13 @@
 <eform-new-subheader>
   <button
-    mat-raised-button
-    color="accent"
     id="newDeviceUserBtn"
     *ngIf="selectCurrentUserClaimsDeviceUsersCreate$ | async"
     matTooltip="{{ 'Create Device User' | translate }}"
     (click)="openCreateModal()"
+    class="btn-primary btn-primary--icon-left"
   >
-    {{ 'New Device User' | translate }}
+    <mat-icon>add</mat-icon>
+    <span>{{ 'New Device User' | translate }}</span>
   </button>
 </eform-new-subheader>
 
diff --git a/eform-client/src/app/modules/eforms/components/eforms-page/eforms-page.component.html b/eform-client/src/app/modules/eforms/components/eforms-page/eforms-page.component.html
@@ -1,39 +1,44 @@
 <eform-new-subheader>
-  <div class="">
+  <div class="d-flex flex-row justify-content-center align-items-center gap-12">
+    <div class="line-vert"></div>
     <button
-      mat-icon-button
+      class="btn-secondary btn-secondary--icon-rounded-border"
       id="importEformsBtn"
       matTooltip="{{ 'Import eforms' | translate }}"
       *ngIf="selectCurrentUserClaimsEformsCreate$ | async"
       (click)="openEformsImportModal()">
-      <mat-icon>file_upload</mat-icon>
+      <app-icon name="upload" size="20" class="icon-secondary"></app-icon>
     </button>
     <button
-      mat-icon-button
+      class="btn-secondary btn-secondary--icon-rounded-border"
       id="eformsManageTagsBtn"
       (click)="openTagsModal()"
       matTooltip="{{ 'Manage tags' | translate }}"
       *ngIf="selectEformAllowManagingEformTags$ | async"
     >
-      <mat-icon>discount</mat-icon>
+      <app-icon name="tags" size="20" class="icon-secondary"></app-icon>
     </button>
-    <a
-      mat-icon-button
-      id="eformsVisualEditor"
-      *ngIf="selectCurrentUserClaimsEformsCreate$ | async"
-      [routerLink]="['visual-editor']"
-      matTooltip="{{ 'New eForm' | translate }}"
-    >
-      <mat-icon>add</mat-icon>
-    </a>
+
     <button
-      mat-icon-button
       matTooltip="{{ 'New eForm from XML' | translate }}"
       id="newEFormBtn"
       *ngIf="selectCurrentUserClaimsEformsCreate$ | async"
       (click)="openNewEformModal()"
+      class="btn-secondary btn-secondary--icon-rounded-border"
+    >
+      <app-icon name="xmlFile" size="20" class="icon-secondary"></app-icon>
+    </button>
+
+    <div class="line-vert"></div>
+
+    <button
+      id="eformsVisualEditor"
+      class="btn-primary btn-primary--icon-left"
+      *ngIf="selectCurrentUserClaimsEformsCreate$ | async"
+      [routerLink]="['visual-editor']"
     >
-      <mat-icon>code</mat-icon>
+      <mat-icon>add</mat-icon>
+      <span>{{ 'New eForm' | translate }}</span>
     </button>
   </div>
 </eform-new-subheader>
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-page/eform-visual-editor-container/eform-visual-editor-container.component.html b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-page/eform-visual-editor-container/eform-visual-editor-container.component.html
@@ -2,43 +2,48 @@
   [forceStaticTitle]="true"
   [title]="(selectedTemplateId ? 'eForm' : 'New eForm') | translate"
 >
+  <div class="d-flex flex-row justify-content-center align-items-center gap-12">
   <button
-    mat-raised-button
+    class="btn-secondary btn-secondary--icon-rounded-border"
     *ngIf="selectCurrentUserIsAdmin$ | async"
     id="reportEditHeadersBtn"
     color="accent"
     (click)="showHeadersEditModal()"
+    matTooltip="{{ 'Edit headers' | translate }}"
   >
-    {{ 'Edit headers' | translate }}
+    <app-icon name="pencil" size="20" class="icon-secondary"></app-icon>
   </button>
   <button
-    mat-icon-button
+    class="btn-secondary btn-secondary--icon-rounded-border"
     id="manageTags"
     (click)="openTagsModal()"
     matTooltip="{{ 'Manage tags' | translate }}"
   >
-    <mat-icon>discount</mat-icon>
+    <app-icon name="tags" size="20" class="icon-secondary"></app-icon>
   </button>
+
+  <div class="line-vert"></div>
+
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="
         selectedTemplateId ? updateVisualTemplate() : createVisualTemplate()
       "
     matTooltip="{{ (selectedTemplateId ? 'Save' : 'Create') | translate }}"
     id="saveCreateEformBtn"
     [disabled]="isAllNamesEmpty"
   >
-    {{ (selectedTemplateId ? 'Save' : 'Create') | translate }}
+    <mat-icon>add</mat-icon>
+    <span>{{ (selectedTemplateId ? 'Save' : 'Create') | translate }}</span>
   </button>
   <button
-    mat-raised-button
-    color="primary"
     id="cancel{{(selectedTemplateId ? 'Edit' : 'Create')}}Btn"
     [routerLink]="['/']"
+    class="btn-cancel"
   >
     {{'Cancel'| translate}}
   </button>
+  </div>
 </eform-new-subheader>
 
 <mat-card class="d-flex flex-column mb-3" style="padding-right: 0; padding-left: 0; padding-bottom: 0">
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/eform-visual-editor.module.ts b/eform-client/src/app/modules/eforms/eform-visual-editor/eform-visual-editor.module.ts
@@ -39,6 +39,7 @@ import {DragDropModule} from '@angular/cdk/drag-drop';
 import {MtxGridModule} from '@ng-matero/extensions/grid';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatDatepickerModule} from '@angular/material/datepicker';
+import {AppIconComponent} from "src/app/components/icons/app-icon/app-icon.component";
 
 @NgModule({
   declarations: [
@@ -84,6 +85,7 @@ import {MatDatepickerModule} from '@angular/material/datepicker';
     MtxGridModule,
     MatSlideToggleModule,
     MatDatepickerModule,
+    AppIconComponent,
   ],
 })
 export class EformVisualEditorModule {
diff --git a/eform-client/src/app/modules/eforms/eforms.module.ts b/eform-client/src/app/modules/eforms/eforms.module.ts
@@ -31,6 +31,7 @@ import {MtxGridModule} from '@ng-matero/extensions/grid';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {MtxButtonModule} from '@ng-matero/extensions/button';
 import {MatChipsModule} from '@angular/material/chips';
+import {AppIconComponent} from "src/app/components/icons/app-icon/app-icon.component";
 
 @NgModule({
     imports: [
@@ -55,6 +56,7 @@ import {MatChipsModule} from '@angular/material/chips';
         MatTooltipModule,
         MtxButtonModule,
         MatChipsModule,
+        AppIconComponent,
     ],
   declarations: [
     EformsPageComponent,
diff --git a/eform-client/src/scss/libs/theme.scss b/eform-client/src/scss/libs/theme.scss
diff --git a/eform-client/src/scss/styles.scss b/eform-client/src/scss/styles.scss
diff --git a/eform-client/src/scss/utilities/_colors.scss b/eform-client/src/scss/utilities/_colors.scss
diff --git a/eform-client/src/scss/utilities/_variables.scss b/eform-client/src/scss/utilities/_variables.scss
