added images on btns

src/app/components/add-task/add-task.component.html

@@ -269,8 +269,9 @@
         [class]="'btn-clear'"
         [type]="'button'"
         [value]="'Clear'"
-        (click)="removeTaskData()"
+        [img]="'close'"
         [ngStyle]="{ display: overlayData !== '' ? 'none' : 'block' }"
+        (click)="removeTaskData()"
       ></app-form-btn>
       <app-form-btn
         [class]="'btn-delete'"
@@ -281,6 +282,8 @@
       <app-form-btn
         [class]="'btn-submit'"
         [type]="'submit'"
+        [img]="'check'"
+        [imgFilter]="'none'"
         [value]="overlayData.toString() !== '' ? 'Update Task' : 'Create Task'"
         [disabled]="
           title.invalid ||

src/app/components/add-task/add-task.component.scss

@@ -267,73 +267,6 @@ p {
   margin-top: 12px;
 }
 
-.btn-submit {
-  width: 183px;
-  height: 56px;
-  padding: 12px;
-  margin: 12px 12px;
-  border-radius: 10px;
-  border: 1px solid var(--black) !important;
-  background-color: var(--light-gray);
-  font-size: 23px;
-  font-weight: 400;
-  transition: 125ms ease-in-out;
-  &:hover:not(:disabled) {
-    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
-    background-color: var(--light-blue) !important;
-    border: 1px solid var(--light-blue) !important;
-    cursor: pointer;
-  }
-  &:not(:disabled) {
-    background-color: var(--very-dark-blue) !important;
-    color: var(--white);
-  }
-  &:hover {
-    cursor: default;
-  }
-}
-
-.btn-clear {
-  width: 110px;
-  height: 56px;
-  padding: 12px;
-  margin: 12px 12px;
-  border-radius: 10px;
-  color: var(--black);
-  background-color: var(--white);
-  border: 1px solid var(--black);
-  font-size: 23px;
-  font-weight: 400;
-  transition: 125ms ease-in-out;
-  cursor: pointer;
-  &:hover {
-    color: var(--light-blue);
-    border-color: var(--light-bluek);
-    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
-  }
-}
-
-.btn-delete {
-  width: 110px;
-  height: 56px;
-  padding: 12px;
-  margin: 12px 12px;
-  border-radius: 10px;
-  color: var(--red);
-  background-color: var(--white);
-  border: 1px solid var(--red);
-  font-size: 23px;
-  font-weight: 400;
-  transition: 125ms ease-in-out;
-  cursor: pointer;
-  &:hover {
-    color: var(--white);
-    background-color: var(--red);
-    border-color: var(--black);
-    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
-  }
-}
-
 /*------------- RESPONSIVE -------------*/
 
 @media screen and (max-width: 1250px) {

src/app/components/contacts/contact-form/contact-form.component.html

@@ -64,18 +64,17 @@
     <span>{{ "contact-dialog-form.invalid-phone" | translate }}</span>
     }
     <div class="btns">
-      <div class="btn">
+      <app-form-btn
-        <input
-          (click)="deleteContact()"
         class="btn-delete"
         type="button"
         value="{{ 'contact-dialog-form.btn-delete' | translate }}"
-        />
+        (click)="deleteContact()"
-      </div>
+      ></app-form-btn>
-      <div class="btn">
+      <app-form-btn
-        <input
+        [class]="'btn-submit'"
-          class="btn-save"
+        [type]="'submit'"
-          type="submit"
+        [img]="'check'"
+        [imgFilter]="'none'"
         value="{{ 'contact-dialog-form.btn-save' | translate }}"
         [disabled]="
           firstName.invalid ||
@@ -87,8 +86,7 @@
           phone.invalid ||
           !contactData.phone
         "
-        />
+      ></app-form-btn>
-      </div>
     </div>
   </form>
 </section>

src/app/components/contacts/contact-form/contact-form.component.scss

@@ -19,47 +19,6 @@ span {
   display: flex;
   flex-direction: column;
   min-width: 480px;
-  .btn-delete {
-    padding: 12px;
-    margin: 12px 12px;
-    border-radius: 10px;
-    color: var(--red);
-    background-color: var(--white);
-    border: 1px solid var(--red);
-    font-size: 23px;
-    font-weight: 400;
-    transition: 125ms ease-in-out;
-    cursor: pointer;
-    &:hover {
-      color: var(--white);
-      background-color: var(--red);
-      border-color: var(--black);
-      box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
-    }
-  }
-  .btn-save {
-    padding: 12px;
-    margin: 12px 12px;
-    border-radius: 10px;
-    border: 1px solid var(--black) !important;
-    background-color: var(--light-gray);
-    font-size: 23px;
-    font-weight: 400;
-    transition: 125ms ease-in-out;
-    &:hover:not(:disabled) {
-      box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
-      background-color: var(--light-blue) !important;
-      border: 1px solid var(--light-blue) !important;
-      cursor: pointer;
-    }
-    &:not(:disabled) {
-      background-color: var(--very-dark-blue) !important;
-      color: var(--white);
-    }
-    &:hover {
-      cursor: default;
-    }
-  }
   input {
     background-color: var(--white);
     border: 1px solid var(--gray);
@@ -85,16 +44,6 @@ span {
   align-items: center;
 }
 
-.btn {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 111px;
-  height: 57px;
-  margin: 0 24px;
-  padding-bottom: 12px;
-}
-
 @media screen and (max-width: 800px) {
   .name {
     flex-direction: column;

src/app/components/contacts/contact-form/contact-form.component.ts

@@ -3,11 +3,12 @@ import { FormsModule, NgForm } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 import { SharedService } from '../../../services/shared.service';
 import { FirebaseService } from '../../../services/firebase.service';
+import { FormBtnComponent } from '../../../shared/components/buttons/form-btn/form-btn.component';
 
 @Component({
   selector: 'app-contact-form',
   standalone: true,
-  imports: [TranslateModule, FormsModule],
+  imports: [TranslateModule, FormsModule, FormBtnComponent],
   templateUrl: './contact-form.component.html',
   styleUrl: './contact-form.component.scss',
 })

src/app/shared/components/buttons/form-btn/form-btn.component.html

@@ -1,6 +1,20 @@
+<div class="input-container">
   <input
     class="{{ class }}"
     type="{{ type }}"
     value="{{ value }}"
     [disabled]="disabled"
+    [style.padding-right.px]="
+      img == 'check' && !disabled ? '44' : img !== '' && !disabled ? '36' : ''
+    "
   />
+  <div
+    class="background-image"
+    [ngStyle]="{
+      '--filter': imgFilter,
+      'background-image': disabled
+        ? 'none'
+        : 'url(./../../../../../assets/img/' + img + '.svg)',
+    }"
+  ></div>
+</div>

src/app/shared/components/buttons/form-btn/form-btn.component.scss

@@ -1,5 +1,5 @@
 .btn-submit {
-  width: 183px;
+  width: fit-content;
   height: 56px;
   padding: 12px;
   margin: 12px 12px;
@@ -9,6 +9,7 @@
   font-size: 23px;
   font-weight: 400;
   transition: 125ms ease-in-out;
+  cursor: pointer;
   &:hover:not(:disabled) {
     box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
     background-color: var(--light-blue) !important;
@@ -25,10 +26,10 @@
 }
 
 .btn-clear {
-  width: 110px;
+  width: fit-content;
   height: 56px;
   padding: 12px;
-  margin: 12px 12px;
+  margin: 12px;
   border-radius: 10px;
   color: var(--black);
   background-color: var(--white);
@@ -45,10 +46,10 @@
 }
 
 .btn-delete {
-  width: 110px;
+  width: fit-content;
   height: 56px;
   padding: 12px;
-  margin: 12px 12px;
+  margin: 12px;
   border-radius: 10px;
   color: var(--red);
   background-color: var(--white);
@@ -64,3 +65,25 @@
     box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
   }
 }
+
+.input-container {
+  position: relative;
+  display: inline-block;
+}
+
+.input-container .background-image {
+  position: absolute;
+  top: 0;
+  right: 12px;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  background-size: auto 20%;
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  transition: filter 125ms ease-in-out;
+}
+
+.input-container:hover .background-image {
+  filter: var(--filter);
+}

src/app/shared/components/buttons/form-btn/form-btn.component.ts

@@ -1,9 +1,10 @@
+import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-form-btn',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './form-btn.component.html',
   styleUrl: './form-btn.component.scss',
 })
@@ -11,5 +12,8 @@ export class FormBtnComponent {
   @Input() class: string = '';
   @Input() type: string = '';
   @Input() value: string = '';
+  @Input() img: string = '';
   @Input() disabled: boolean = false;
+  @Input() imgFilter: string =
+    'brightness(0) saturate(100%) invert(57%) sepia(44%) saturate(848%) hue-rotate(155deg) brightness(95%) contrast(86%)';
 }

src/assets/img/check.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.79911 9.15L14.2741 0.675C14.4741 0.475 14.7116 0.375 14.9866 0.375C15.2616 0.375 15.4991 0.475 15.6991 0.675C15.8991 0.875 15.9991 1.1125 15.9991 1.3875C15.9991 1.6625 15.8991 1.9 15.6991 2.1L6.49911 11.3C6.29911 11.5 6.06578 11.6 5.79911 11.6C5.53245 11.6 5.29911 11.5 5.09911 11.3L0.799113 7C0.599113 6.8 0.50328 6.5625 0.511613 6.2875C0.519946 6.0125 0.624113 5.775 0.824113 5.575C1.02411 5.375 1.26161 5.275 1.53661 5.275C1.81161 5.275 2.04911 5.375 2.24911 5.575L5.79911 9.15Z" fill="white"/>
+</svg>

src/assets/img/close.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.24953 7.00008L11.4925 12.2431M1.00653 12.2431L6.24953 7.00008L1.00653 12.2431ZM11.4925 1.75708L6.24853 7.00008L11.4925 1.75708ZM6.24853 7.00008L1.00653 1.75708L6.24853 7.00008Z" stroke="#2A3647" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>