Button changes and color changes

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],

eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-create/shared-tag-create.component.html

@@ -11,9 +11,9 @@ <h3 mat-dialog-title>{{ 'New tag' | translate }}</h3>
     <mat-label>{{ 'Name' | translate }}</mat-label>
   </mat-form-field>
 </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-primary btn-primary--icon-left"
     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()"
   >

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 }}

eform-client/src/app/common/modules/eform-shared/components/entity-edit-create/entity-edit-create.component.html

@@ -1,8 +1,7 @@
 <eform-new-subheader [title]="title | translate" [forceStaticTitle]="true">
   <button
     *ngIf="edit"
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     id="entityUpdateSaveBtn"
     (click)="updateEntityGroup()"
     [disabled]="entityGroupEditModel.isLocked && !entityGroupEditModel.isEditable"
@@ -11,17 +10,15 @@
   </button>
   <button
     *ngIf="!edit"
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     id="entityCreateSaveBtn"
     (click)="createEntityGroup()"
     [disabled]="!entityGroupEditModel.name"
   >
     {{ 'Create' | translate }}
   </button>
   <button
-    mat-raised-button
-    color="primary"
+    class="btn-cancel"
     id="entitySearchUpdateCancelBtn"
     (click)="goBack()"
   >

eform-client/src/app/common/modules/eform-shared/components/entity-item-edit-name/entity-item-edit-name.component.html

@@ -9,17 +9,16 @@ <h3 mat-dialog-title>{{ 'Edit element' | translate}}</h3>
       id="entityItemEditNameBox">
   </mat-form-field>
 </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="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="emitValue();"
     id="entityItemSaveBtn"
   >
     {{'Save' | translate}}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="entityItemCancelBtn"
     (click)="hide()"
   >

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) {

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>

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;
+}

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';
+}

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>
+  `
+
+};

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

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"

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

eform-client/src/app/modules/account-management/components/profile/change-password/change-password.component.html

@@ -1,7 +1,6 @@
 <eform-new-subheader>
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     id="changePasswordSaveBtn"
     [disabled]="!valid"
     (click)="updateUserPassword()"

eform-client/src/app/modules/account-management/components/profile/profile-settings/profile-settings.component.html

@@ -1,8 +1,7 @@
 <eform-new-subheader>
   <div>
     <button
-      mat-raised-button
-      color="accent"
+      class="btn-primary btn-primary--icon-left"
       matTooltip="Save settings"
       id="ProfileSettingsSaveBtn"
       (click)="updateUserProfileSettings()">
@@ -75,17 +74,16 @@
         <div class="d-flex pt-2">
           <div class="align-self-center align-self-end mb-3">
             <button
-              mat-raised-button
-              color="primary"
+              class="btn-primary btn-primary--icon-left"
               *ngIf="profilePictureUploader?.queue?.length === 0"
               id="loginPageImageUploadBtn"
               (click)="loginPagefileInput.click()"
             >
-              {{ 'Upload' | translate }}
+              <mat-icon>upload</mat-icon>
+              <span>{{ 'Upload' | translate }}</span>
             </button>
             <button
-              mat-raised-button
-              color="warn"
+              class="btn-warning"
               *ngIf="profilePictureUploader?.queue?.length > 0"
               (click)="loginPagefileInput.click()"
             >
@@ -102,8 +100,7 @@
           </div>
           <div class="align-self-center align-self-end mb-3 pl-2">
             <button
-              mat-raised-button
-              color="accent"
+             class="btn-cancel"
               id="resetProfilePicture"
               (click)="resetProfilePicture()"
               matTooltip="{{ 'Reset' | translate }}"

eform-client/src/app/modules/account-management/components/users/user-modal/user-modal.component.html

@@ -82,10 +82,9 @@ <h3 mat-dialog-title>{{ (edit ? 'Edit User' : 'New User') | translate }}</h3>
     </div>
   </form>
 </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="accent"
+    class="btn-primary btn-primary--icon-left"
     type="submit"
     [disabled]="userForm.invalid"
     (click)="submit()"
@@ -94,7 +93,7 @@ <h3 mat-dialog-title>{{ (edit ? 'Edit User' : 'New User') | translate }}</h3>
     {{ (edit ? 'Save' : 'Create') | translate }}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     (click)="hide()"
     type="button"
     [id]="edit ? 'editUserCancelSaveBtn' : 'createAdministrationUserCancelBtn'"

eform-client/src/app/modules/account-management/components/users/user-set-password-modal/user-set-password.component.html

@@ -88,18 +88,17 @@ <h3 mat-dialog-title>{{ 'Set user password' | translate }}</h3>
     </mat-form-field>
   </form>
 </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-warning"
     id="userDeleteBtn"
     (click)="setPassword()"
     [disabled]="setPasswordForm.invalid"
   >
     {{ 'Save' | translate }}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="userDeleteCancelBtn"
     (click)="hide()"
   >

eform-client/src/app/modules/account-management/components/users/users-page/users-page.component.html

@@ -1,7 +1,6 @@
 <eform-new-subheader>
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="openNewUserModal()"
     *ngIf="selectCurrentUserClaimsUsersCreate$ | async"
     matTooltip="{{ 'Create user' | translate }}"

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

@@ -1,14 +1,14 @@
 <eform-new-subheader>
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     id="createEntitySearchBtn"
     matTooltip="{{ 'Create new searchable list' | translate }}"
     *ngIf="selectCurrentUserClaimsEntitySearchCreate$ | async"
     matTooltipPosition="left"
     [routerLink]="['/advanced/entity-search/create']"
   >
-    {{ 'New list' | translate }}
+    <mat-icon>add</mat-icon>
+    <span>{{ 'New list' | translate }}</span>
   </button>
 </eform-new-subheader>