refactor: optimize FormBtnComponent for better performance and usability

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

@@ -1,16 +1,11 @@
 <div class="input-container">
-  @if (class == "btn-google") {
-  <div class="google-image"></div>
-  }
   <input
-    class="{{ class }}"
+    class="btn"
-    type="{{ type }}"
+    [class]="class"
-    value="{{ value }}"
+    [type]="type"
+    [value]="value"
     [disabled]="disabled"
-    [style.padding-right.px]="
+    [style.padding-right.px]="inputPaddingRight"
-      img == 'check' && !disabled ? '44' : img !== '' && !disabled ? '36' : ''
-    "
-    [style.padding-left.px]="class == 'btn-google' ? '52' : ''"
   />
   <div
     class="background-image"
@@ -18,7 +13,7 @@
       '--filter': imgFilter,
       'background-image': disabled
         ? 'none'
-        : 'url(./../../../../../assets/img/' + img + '.svg)',
+        : 'url(./assets/img/' + img + '.svg)'
     }"
   ></div>
 </div>

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

@@ -1,217 +1,122 @@
-.btn-submit {
+.btn {
   width: fit-content;
   padding: 12px;
-  margin: 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;
   cursor: pointer;
+  background-color: var(--white);
+  border: 1px solid var(--black);
+
   &:hover:not(:disabled) {
-    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
-    background-color: var(--light-blue) !important;
-    border: 1px solid var(--light-blue) !important;
-    cursor: pointer;
   }
+
+  &:disabled {
+    background-color: var(--light-gray);
+    cursor: default;
+  }
+}
+
+.btn-submit {
+  background-color: var(--light-gray);
+  border: 1px solid var(--black);
+
   &:not(:disabled) {
-    background-color: var(--very-dark-blue) !important;
+    background-color: var(--very-dark-blue);
     color: var(--white);
   }
-  &:hover {
+
-    cursor: default;
+  &:hover:not(:disabled) {
+    background-color: var(--light-blue);
+    border-color: var(--light-blue);
   }
 }
 
 .btn-clear,
 .btn-cancel {
-  width: fit-content;
-  padding: 12px;
-  margin: 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-blue);
-    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
   }
 }
 
 .btn-delete {
-  width: fit-content;
-  padding: 12px;
-  margin: 12px;
-  border-radius: 10px;
   color: var(--red);
-  background-color: var(--white);
+  border-color: var(--red);
-  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);
+    color: var(--white);
     border-color: var(--black);
-    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
   }
 }
 
 .btn-login {
-  width: fit-content;
   padding: 12px 18px;
-  margin: 12px;
-  border-radius: 10px;
-  border: 1px solid var(--black) !important;
-  background-color: var(--light-gray);
-  font-size: 23px;
   font-weight: 700;
-  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;
-    border: 1px solid var(--light-blue) !important;
-    cursor: pointer;
-  }
   &:not(:disabled) {
-    background-color: var(--very-dark-blue) !important;
+    background-color: var(--very-dark-blue);
     color: var(--white);
   }
-  &:hover {
+
-    cursor: default;
+  &:hover:not(:disabled) {
+    background-color: var(--light-blue);
+    border-color: var(--light-blue);
   }
 }
 
 .btn-guest-login {
-  width: fit-content;
   padding: 12px 18px;
-  margin: 12px;
-  border-radius: 10px;
-  background-color: var(--light-gray);
-  border: 1px solid var(--black);
-  font-size: 23px;
   font-weight: 700;
-  transition: 125ms ease-in-out;
+
-  cursor: pointer;
-  &:hover:not(:disabled) {
-    color: var(--light-blue);
-    border-color: var(--light-blue);
-    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
-    cursor: pointer;
-  }
   &:not(:disabled) {
-    background-color: var(--white) !important;
+    background-color: var(--white);
     color: var(--black);
   }
-  &:hover {
-    cursor: default;
-  }
-}
 
-.btn-google {
-  width: fit-content;
-  padding: 12px 18px;
-  margin: 12px;
-  border-radius: 10px;
-  background-color: var(--light-gray);
-  border: 1px solid var(--black);
-  font-size: 23px;
-  font-weight: 700;
-  transition: 125ms ease-in-out;
-  cursor: pointer;
   &:hover:not(:disabled) {
     color: var(--light-blue);
     border-color: var(--light-blue);
-    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
-    cursor: pointer;
-  }
-  &:not(:disabled) {
-    background-color: var(--white) !important;
-    color: var(--black);
-  }
-  &:hover {
-    cursor: default;
   }
 }
 
 .input-container {
   position: relative;
   display: inline-block;
-}
+  margin: 12px;
 
-.input-container .background-image {
+  .background-image {
     position: absolute;
     top: 0;
     right: 12px;
     bottom: 0;
     left: 0;
     pointer-events: none;
-  background-size: auto 20%;
+    background-size: auto 30%;
     background-repeat: no-repeat;
-  background-position: right 12px center;
+    background-position: right center;
     transition: filter 125ms ease-in-out;
   }
 
-.input-container .google-image {
+  &:hover .background-image {
-  position: absolute;
+    filter: var(--filter, none);
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 12px;
-  pointer-events: none;
-  background-image: url(./../../../../../assets/img/login/google.svg);
-  background-size: auto 38px;
-  background-repeat: no-repeat;
-  background-position: left 12px center;
-  transition: filter 125ms ease-in-out;
-}
-
-.input-container:hover .background-image {
-  filter: var(--filter);
-}
-
-/*------------- RESPONSIVE -------------*/
-
-@media screen and (max-width: 650px) {
-  .input-container .google-image {
-    background-size: auto 24px;
-    background-position: left 15px center;
-  }
-
-  .btn-login,
-  .btn-guest-login,
-  .btn-google {
-    font-size: 21px;
-    font-weight: 700;
   }
 }
 
 @media screen and (max-width: 450px) {
-  .btn-login,
+  .input-container {
-  .btn-guest-login,
-  .btn-google {
-    padding: 8px 12px;
     margin: 6px;
-    font-size: 18px;
+
-    font-weight: 700;
+    .background-image {
+      right: 15px;
     }
   }
 
-@media screen and (max-width: 400px) {
+  .btn {
-  .btn-submit,
+    padding: 9px;
-  .btn-clear,
+    font-size: 19px;
-  .btn-delete {
-    padding: 8px;
-    margin: 6px;
-    font-size: 18px;
-    font-weight: 400;
   }
 }

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

@@ -16,4 +16,9 @@ export class FormBtnComponent {
   @Input() disabled: boolean = false;
   @Input() imgFilter: string =
     'brightness(0) saturate(100%) invert(57%) sepia(44%) saturate(848%) hue-rotate(155deg) brightness(95%) contrast(86%)';
+
+  get inputPaddingRight(): string {
+    if (this.disabled) return '';
+    return this.img === 'check' ? '44' : this.img ? '36' : '';
+  }
 }

src/app/shared/components/overlay/contact-overlay/contact-overlay.component.scss

@@ -90,7 +90,7 @@
 }
 
 @media screen and (max-width: 800px) {
-  .dialog {
+  .overlay {
     width: 560px;
     position: relative;
   }
@@ -123,7 +123,7 @@
 }
 
 @media screen and (max-width: 600px) {
-  .dialog {
+  .overlay {
     width: 380px;
   }
 
@@ -170,7 +170,7 @@
 }
 
 @media screen and (max-width: 400px) {
-  .dialog {
+  .overlay {
     width: 300px;
   }