implemented new button design

shawon · shawon · commit 121792b0a9c7 · 2025-11-20T14:58:16.000+06:00
diff --git a/eform-client/src/app/common/modules/eform-shared/components/entity-edit-create/entity-edit-create.component.html b/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()"
   >
diff --git a/eform-client/src/app/modules/advanced/components/entity-search/entity-search/entity-search.component.html b/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>
 
diff --git a/eform-client/src/app/modules/advanced/components/entity-select/entity-select/entity-select.component.html b/eform-client/src/app/modules/advanced/components/entity-select/entity-select/entity-select.component.html
@@ -1,7 +1,6 @@
 <eform-new-subheader>
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     id="entitySelectCreateBtn"
     matTooltip="{{ 'Create new selectable list' | translate }}"
     *ngIf="selectCurrentUserClaimsEntitySelectCreate$ | async"
diff --git a/eform-client/src/app/modules/application-settings/components/admin-settings/admin-settings.component.html b/eform-client/src/app/modules/application-settings/components/admin-settings/admin-settings.component.html
@@ -1,8 +1,7 @@
 <ng-container *ngIf="selectAuthIsAuth$ | async">
 <eform-new-subheader [subtitle]="adminSettingsModel.assemblyVersion">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     matTooltip="{{ 'Save settings' | translate }}"
     matTooltipPosition="left"
     id="applicationSettingsSaveBtn"
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
@@ -7,7 +7,7 @@
       matTooltip="{{ 'Import eforms' | translate }}"
       *ngIf="selectCurrentUserClaimsEformsCreate$ | async"
       (click)="openEformsImportModal()">
-      <app-icon name="upload" size="20" class="icon-secondary"></app-icon>
+      <mat-icon class="icon-secondary">upload</mat-icon>
     </button>
     <button
       class="btn-secondary btn-secondary--icon-rounded-border"
@@ -16,7 +16,7 @@
       matTooltip="{{ 'Manage tags' | translate }}"
       *ngIf="selectEformAllowManagingEformTags$ | async"
     >
-      <app-icon name="tags" size="20" class="icon-secondary"></app-icon>
+      <mat-icon class="icon-secondary">style</mat-icon>
     </button>
 
     <button
@@ -26,7 +26,7 @@
       (click)="openNewEformModal()"
       class="btn-secondary btn-secondary--icon-rounded-border"
     >
-      <app-icon name="xmlFile" size="20" class="icon-secondary"></app-icon>
+      <mat-icon class="icon-secondary">text_snippet</mat-icon>
     </button>
 
     <div class="line-vert"></div>
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/checklist/visual-editor-checklist-modal/visual-editor-checklist-modal.component.html b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/checklist/visual-editor-checklist-modal/visual-editor-checklist-modal.component.html
@@ -34,17 +34,16 @@ <h3 mat-dialog-title>{{ (isChecklistSelected ? 'Edit sub eForm' : 'New sub eForm
     </ng-container>
   </ng-container>
 </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 gap-12">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="isChecklistSelected ? onUpdateChecklist() : onCreateChecklist()"
     id="changeChecklistSaveBtn"
   >
-    {{(isChecklistSelected ? 'Save' : 'Create') | translate}}
+    <span>{{(isChecklistSelected ? 'Save' : 'Create') | translate}}</span>
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     (click)="hide()"
     id="changeChecklistSaveCancelBtn"
   >
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/checklist/visual-editor-checklist/visual-editor-checklist.component.html b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/checklist/visual-editor-checklist/visual-editor-checklist.component.html
@@ -24,7 +24,7 @@
             *ngIf="checklist.fields.length == 0"
             mat-icon-button
             [matTooltip]="'New sub eForm' | translate"
-            color="accent"
+            color="primary"
             id="addNewNestedChecklist{{ checklistIndex }}"
             (click)="onAddNewNestedChecklist()"
           >
@@ -33,7 +33,7 @@
           <button
             *ngIf="checklist.checkLists.length == 0"
             mat-icon-button
-            color="accent"
+            color="primary"
             [matTooltip]="'New nested field' | translate"
             id="addNewNestedField{{ checklistIndex }}"
             (click)="onAddNewNestedField()"
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-field-modal/visual-editor-field-modal.component.html b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-field-modal/visual-editor-field-modal.component.html
@@ -162,17 +162,17 @@ <h3 mat-dialog-title>{{ (isFieldSelected ? 'Edit field' : 'New field') | transla
   >
   </app-visual-editor-additional-field-show-picture>
 </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 gap-12">
   <button
-    mat-raised-button
+    class="btn-primary btn-primary--icon-left"
     color="accent"
     (click)="isFieldSelected ? onUpdateField() : onCreateField()"
     id="changeFieldSaveBtn"
   >
-    {{'Save' | translate}}
+    <span>{{'Save' | translate}}</span>
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     (click)="hide()"
     id="changeFieldSaveCancelBtn"
   >
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
@@ -11,15 +11,15 @@
     (click)="showHeadersEditModal()"
     matTooltip="{{ 'Edit headers' | translate }}"
   >
-    <app-icon name="pencil" size="20" class="icon-secondary"></app-icon>
+    <mat-icon class="icon-secondary">border_color</mat-icon>
   </button>
   <button
     class="btn-secondary btn-secondary--icon-rounded-border"
     id="manageTags"
     (click)="openTagsModal()"
     matTooltip="{{ 'Manage tags' | translate }}"
   >
-    <app-icon name="tags" size="20" class="icon-secondary"></app-icon>
+    <mat-icon class="icon-secondary">style</mat-icon>
   </button>
 
   <div class="line-vert"></div>
@@ -146,15 +146,15 @@
       mat-icon-button
       id="initialFieldCreateBtn"
       [matTooltip]="'Add field' | translate"
-      color="accent"
+      color="primary"
       (click)="showFieldModal()"
     >
       <mat-icon>add</mat-icon>
     </button>
     <button
       *ngIf="visualEditorTemplateModel.fields.length === 0"
       mat-icon-button
-      color="accent"
+      color="primary"
       id="initialChecklistCreateBtn"
       [matTooltip]="'Add sub eForm' | translate"
       (click)="showChecklistModal()"
diff --git a/eform-client/src/app/modules/email-recipients/components/email-recipients-page/email-recipients-page.component.html b/eform-client/src/app/modules/email-recipients/components/email-recipients-page/email-recipients-page.component.html
@@ -1,20 +1,22 @@
 <eform-new-subheader>
+<div class="d-flex justify-content-center align-items-center gap-12">
   <button
-    mat-icon-button
+    class="btn-secondary btn-secondary--icon-rounded-border"
     (click)="openTagsModal()"
     matTooltip="{{ 'Manage tags' | translate }}"
   >
     <mat-icon>discount</mat-icon>
   </button>
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     id="createEmailRecipientBtn"
     matTooltip="{{ 'Add Recipients' | translate }}"
     (click)="openCreateModal()"
   >
-    {{ 'Add Recipients' | translate }}
+    <mat-icon>add</mat-icon>
+    <span>{{ 'Add Recipients' | translate }}</span>
   </button>
+</div>
 </eform-new-subheader>
 
 <ng-template #toolbarTpl>
diff --git a/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-new/email-recipients-new.component.html b/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-new/email-recipients-new.component.html
@@ -35,17 +35,16 @@ <h3 mat-dialog-title>{{'New Email recipients' | translate}}</h3>
     </mat-form-field>
   </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 gap-12">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="createEmailRecipients(textAreaData)"
     id="emailRecipientsCreateSaveBtn"
   >
     {{'Save' | translate}}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="emailRecipientsSaveCancelBtn"
     (click)="hide()"
   >
diff --git a/eform-client/src/scss/libs/theme.scss b/eform-client/src/scss/libs/theme.scss
@@ -82,7 +82,7 @@ $eform-typography: mat.m2-define-typography-config(
 // Define a light theme
 //$eform-light-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
 $eform-light-primary: mat.m2-define-palette(mat.$m2-teal-palette);
-$eform-light-accent: mat.m2-define-palette(mat.$m2-pink-palette);
+$eform-light-accent: mat.m2-define-palette(mat.$m2-teal-palette);
 $eform-light-theme: mat.m2-define-light-theme((
   color: (
     primary: $eform-light-primary,
diff --git a/eform-client/src/scss/styles.scss b/eform-client/src/scss/styles.scss
@@ -46,6 +46,7 @@ h2 {
 }
 :root {
   --rounded-full: #{$border-rounded-full};
+  --font-family: #{$eform-font-family};
 }
 
 
@@ -60,8 +61,9 @@ body, .theme-light {
   --tp-white-text: black;
   --border: #{$border-light};
   --icon-secondary: #{$icon-secondary-light};
-  --bg: $bg-light;
-  --text-header: $text-header-light;
+  --bg:  #{$bg-light};
+  --text-header: #{$text-header-light};
+  //--mat-card-elevated-container-color: #{$bg-light}!important;
 }
 
 body, .theme-dark {
@@ -72,8 +74,9 @@ body, .theme-dark {
   --tp-white-text: white;
   --border: #{$border-dark};
   --icon-secondary: #{$icon-secondary-dark};
-  --bg: $bg-dark;
-  --text-header: $text-header-dark;
+  --bg: #{$bg-dark};
+  --text-header: #{$text-header-dark};
+  //--mat-card-elevated-container-color: #{$bg-dark}!important;
 }
 
 a {
@@ -428,7 +431,7 @@ ngx-material-timepicker-container {
       align-items: center;
     }
     span {
-      //font-family: var(--font-family, "Nunito Sans");
+      font-family: var(--font-family);
       font-size: var(--Text-size-sm, 14px);
       font-style: normal;
       //font-weight: 600;
@@ -443,6 +446,7 @@ ngx-material-timepicker-container {
   border-radius: var(--rounded-full);
   background: unset;
   cursor: pointer;
+  color: var(--text-header)!important;
 
   &--icon-rounded-border{
     display: flex;
@@ -473,7 +477,7 @@ ngx-material-timepicker-container {
   cursor: pointer;
 
   /* Text/sm/Medium */
-  //font-family: var(--font-family, "Nunito Sans");
+  font-family: var(--font-family);
   font-size: var(--Text-size-sm, 14px);
   font-style: normal;
   //font-weight: 600;
diff --git a/eform-client/src/scss/utilities/_colors.scss b/eform-client/src/scss/utilities/_colors.scss
@@ -40,4 +40,4 @@ $bg-light: #FFFFFF;
 $bg-dark: #202122;
 
 $text-header-light: #0F1316;
-$text-header-dark: #0F1316;
+$text-header-dark: #F3F5F7;
