nestiq-component-library 1.1.162 → 1.1.164

package/src/components/ImageListPopup/ImageListPopup.css

@@ -91,3 +91,23 @@
   border: 2px solid white;
   opacity: 1;
 }
+
+.activeStyle {
+  border: 3px solid transparent;
+  border-radius: 4px;
+  transition: transform 0.2s ease, border-color 0.2s ease;
+  cursor: pointer;
+}
+
+.activeStyle:hover {
+  transform: scale(1.05);
+}
+
+.activeStyle:focus {
+  outline: none;
+  transform: scale(1.05);
+}
+
+.activeStyle.active {
+  transform: scale(1.05);
+}

package/src/components/ImageListPopup/ImageListPopup.tsx

@@ -60,7 +60,7 @@ export default function ImageListPopup(props: PopupProps) {
             <div className="d-flex justify-content-center">
               <div className="p-2 bd-highlight align-self-center align-items-center me-5">
                 <div
-                  className="rounded-circle border onImageArrow start-0 d-flex  "
+                  className="rounded-circle border onImageArrow d-flex  justify-content-center"
                   role="button"
                   onClick={() => handleArrowClickInMainImage("left")}
                 >
@@ -87,7 +87,7 @@ export default function ImageListPopup(props: PopupProps) {
                 {" "}
                 <div
                   role="button"
-                  className="rounded-circle border onImageArrow d-flex     justify-content-center"
+                  className="rounded-circle border onImageArrow d-flex justify-content-center"
                   onClick={() => handleArrowClickInMainImage("right")}
                 >
                   <img
@@ -115,10 +115,8 @@ export default function ImageListPopup(props: PopupProps) {
                     {props.pictureUrls.map((picture, index) => (
                       <div
                         key={index}
-                        className={`flex-shrink-0 ${
-                          index === currentImageIndex
-                            ? "border border-3 border-primary"
-                            : ""
+                        className={`flex-shrink-0 activeStyle ${
+                          index === currentImageIndex ? "active" : ""
                         }`}
                         onClick={() => {
                           setCurrentImageIndex(index);

package/src/components/NewPropertyCard/NewPropertyCard.tsx

@@ -235,7 +235,7 @@ export default function PropertyCard(props: PopupProps) {
             }}
           >
             {" "}
-            <div className="location-wrapper mb-1">
+            <div className="location-wrapper">
               <img
                 src={locationIcon}
                 alt="Location Icon"
@@ -248,13 +248,13 @@ export default function PropertyCard(props: PopupProps) {
           </div>
         </div>
         <div
-          className="d-flex  flex-row gap-3 col-6 col-lg-8 justify-content-between  "
+          className="d-flex  flex-row gap-3 col-6 col-lg-8 justify-content-between mt-3"
           style={{
             paddingLeft: "32px",
             paddingRight: "32px",
           }}
         >
-          <span className="priceValue col-lg-4 col-md-4 col-sm-6  ">
+          <span className="priceValue col-lg-5 col-md-5 col-sm-6  ">
             {formatPrice(props.property?.evaluation?.askingPrice ?? 0)} €
             <div className="price_label">Kaufpreis</div>
           </span>
@@ -262,14 +262,14 @@ export default function PropertyCard(props: PopupProps) {
             {props.property.constructedArea} m²
             <div className="details">Wohnfläche</div>
           </span>
-          <span className="text-dark value col-lg-4 col-md-3 col-sm-6 text-truncate  ">
+          <span className="text-dark value col-lg-3 col-md-3 col-sm-6 text-truncate  ">
             {+props.property?.rooms}
             <div className="details">Zimmer</div>
           </span>
-          <span className="text-dark value col-lg-4 col-md-3 col-sm-4 text-truncate ">
+          {/* <span className="text-dark value col-lg-4 col-md-3 col-sm-4 text-truncate ">
             {+props.property.propertyArea} m²
             <div className="details">Grundstück</div>
-          </span>
+          </span> */}
         </div>
         <div
           className="labelTopClass d-flex start-0 col-sm-5 col-lg-8 "