From 030fc9ea4b066ef449e873cab74caa3b6e1540db Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Tue, 21 May 2024 13:10:11 -0400
Subject: [PATCH] code formatting

---
 blocks/saved-properties/saved-properties.css | 32 ++++++++------------
 blocks/shared/property/cards.css             |  4 +++
 blocks/shared/property/cards.js              |  2 +-
 styles/styles.css                            | 22 ++++++++------
 4 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/blocks/saved-properties/saved-properties.css b/blocks/saved-properties/saved-properties.css
index e508a314..d2f4eebb 100644
--- a/blocks/saved-properties/saved-properties.css
+++ b/blocks/saved-properties/saved-properties.css
@@ -11,7 +11,7 @@
 .saved-properties.block .confirmation-modal {
   border: 0;
   display: none;
-  background: #fff;
+  background: var(--white);
   position: fixed;
   z-index: 1050;
   right: auto;
@@ -50,10 +50,10 @@ body.modal-open {
   font-family: var(--font-family-primary);
   font-size: 22px;
   font-style: normal;
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
   letter-spacing: normal;
   line-height: 140%;
-  color: #3a3a3a;
+  color: var(--body-color);
   text-align: center;
 }
 
@@ -75,17 +75,15 @@ body.modal-open {
 .saved-properties.block .confirmation-modal .confirmation-modal-buttons .modal-cta .btn {
   cursor: pointer;
   text-align: center;
-  font-size: 16px;
-  font-weight: 700;
 }
 
 .saved-properties.block .confirmation-modal .confirmation-modal-buttons .modal-cta .btn span{
-  font-size: 16px;
-  font-weight: 700;
+  font-size: var(--body-font-size-s);
+  font-weight: var(--font-weight-bold);
 }
 
 .saved-properties.block .confirmation-modal-overlay {
-  background-color: #212529;
+  background-color: var(--very-dark-blue);
   width: 100%;
   height: 100%;
   position: fixed;
@@ -104,39 +102,35 @@ body.modal-open {
   height: unset;
 }
 
-.form-loader-image.exit {
+.saved-properties.block .form-loader-image.exit {
   opacity: 0;
   pointer-events: none;
 }
 
-.form-loader-image.exit.show {
+.saved-properties.block .form-loader-image.exit.show {
   opacity: 1;
   transition: all 1s ease-in;
   pointer-events: all;
 }
 
-.form-loader-image {
+.saved-properties.block .form-loader-image {
   position: absolute;
   height: 100%;
   width: 100%;
   display: flex;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  background-color: #FFFFFF80;
+  background-color: var(--semi-transparent-white);
   z-index: 2;
 }
 
-.form-loader .spinner {
+.saved-properties.block .form-loader .spinner {
   width: 40px;
   height: 40px;
   position: relative;
 }
 
-.form-loader .double-bounce1, .form-loader .double-bounce2 {
+.saved-properties.block .form-loader .double-bounce1, .form-loader .double-bounce2 {
   width: 100%;
   height: 100%;
   border-radius: 50%;
@@ -148,7 +142,7 @@ body.modal-open {
   animation: sk-bounce 2s infinite ease-in-out;
 }
 
-.form-loader .double-bounce2 {
+.saved-properties.block .form-loader .double-bounce2 {
   animation-delay: -1s;
 }
 
diff --git a/blocks/shared/property/cards.css b/blocks/shared/property/cards.css
index 48cfaf96..1020b277 100644
--- a/blocks/shared/property/cards.css
+++ b/blocks/shared/property/cards.css
@@ -278,6 +278,10 @@
   display: block;
 }
 
+.property-list-cards .listing-tile.saved .property-details .property-buttons .save-btn:hover .icon-heartfull {
+  display: block;
+}
+
 .property-list-cards .listing-tile.saved .property-details .property-buttons .icon-heartempty {
   display: none;
 }
diff --git a/blocks/shared/property/cards.js b/blocks/shared/property/cards.js
index 84fc9b75..f9a147bd 100644
--- a/blocks/shared/property/cards.js
+++ b/blocks/shared/property/cards.js
@@ -95,7 +95,7 @@ export function createCard(listing) {
               <img data-icon-name="envelopedark" src="/icons/envelopedark.svg" loading="lazy" alt="envelope">
             </span>
           </a> 
-          <a aria-label="Save ${listing.StreetName} to saved properties." href="#" class="button-property"> 
+          <a aria-label="Save ${listing.StreetName} to saved properties." href="#" class="button-property save-btn"> 
             <span class="icon icon-heartempty">
               <img data-icon-name="heartempty" src="/icons/heartempty.svg" loading="lazy" alt="heart">
             </span>
diff --git a/styles/styles.css b/styles/styles.css
index 1d5dd801..b5660180 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -40,6 +40,8 @@
   --error: #d3636a;
   --error-highlight: #f9e1e2;
   --input-placeholder: #7f7a7a;
+  --very-dark-blue: #212529;
+  --semi-transparent-white: #FFFFFF80;
 
 
   /* Blog Colors (only?) */
@@ -447,20 +449,20 @@ main .section.banner .default-content-wrapper {
 
 .btn {
   font-family: var(--font-family-primary);
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
   letter-spacing: 1px;
   text-transform: uppercase;
   text-decoration: none;
   white-space: normal;
   padding: 7px 25px;
-  font-size: 14px;
+  font-size: var(--body-font-size-xs);
   line-height: 1.5;
   border-radius: 0;
   width: 100%;
 }
 
 .btn.btn-primary{
-  background: #670038;
+  background: var(--primary-color);
   border: 0;
   cursor: pointer;
   text-align: center;
@@ -472,30 +474,30 @@ main .section.banner .default-content-wrapper {
 }
 
 .btn.btn-primary:hover{
-  background-color: #670038;
+  background-color: var(--primary-color);
     border: 0;
     box-shadow: none;
 }
 
 .btn.btn-primary:hover span{
-  color: #c299af;
+  color: var(--primary-light);
 }
 
 .btn.btn-secondary{
   background: #fff;
-  color: #670038;
-  border: 1px solid #670038;
+  color: var(--primary-color);
+  border: 1px solid var(--primary-color);
   font-size: 16px;
 }
 
 .btn.btn-secondary:hover{
-  background-color: #670038;
-  border: 1px solid #670038;
+  background-color: var(--primary-color);
+  border: 1px solid var(--primary-color);
   box-shadow: none;
 }
 
 .btn.btn-secondary:hover span{
-  color: #c299af;
+  color: var(--primary-light);
 }
 
 .btn:not(:disabled, .disabled) {