added new button design

Author: shawon

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
-    class="btn-primary"
+    class="btn-primary btn-primary--icon-left"
     color="accent"
     id="newTagSaveBtn"
     [disabled]="!name"

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/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-select/entity-select/entity-select.component.html

@@ -7,7 +7,8 @@
     matTooltipPosition="left"
     [routerLink]="['/advanced/entity-select/create']"
   >
-    {{ 'New list' | translate }}
+    <mat-icon>add</mat-icon>
+    <span>{{ 'New list' | translate }}</span>
   </button>
 </eform-new-subheader>
 

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

@@ -62,17 +62,16 @@ <h3 mat-dialog-title>{{(edit ? 'Edit folder' : 'New folder') | translate}}</h3>
     </ng-container>
   </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="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="edit ? updateFolder() : createFolder()"
     id="{{edit ? 'saveEditBtn' : 'folderSaveBtn'}}"
   >
     {{(edit ? 'Save' : 'Create') | translate}}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="{{edit ? 'cancelEditBtn' : 'cancelCreateBtn'}}"
     (click)="hide()"
   >

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

@@ -13,14 +13,14 @@
       (deleteNode)="openDeleteModal($event)"
     ></app-eform-tree-view-picker>
     <button
-      mat-raised-button
+     class="btn-primary btn-primary--icon-left"
       style="margin-top: 10px"
       id="newFolderBtn"
       (click)="openCreateModal()"
       *ngIf="selectCurrentUserClaimsWorkersCreate$ | async"
     >
       <mat-icon>add</mat-icon>
-      {{ 'Add new' | translate }}
+      <span>{{ 'Add new' | translate }}</span>
     </button>
   </mat-card-content>
 </mat-card>