@bytebrand/fe-ui-core 4.1.40 → 4.1.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.1.40",
+  "version": "4.1.41",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.styl

@@ -8,8 +8,14 @@
   flex-shrink: 0;
   height: 46px;
   box-sizing: border-box;
+
+  &.priceItemFavorite
+    height: 44px;
+
   +media-phone-up()
     height: 42px;
+    &.priceItemFavorite
+      height: 42px;
 
   &:first-of-type
     align-items: flex-end;

package/source/components/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.tsx

@@ -66,6 +66,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
 
     const stylesItem = classnames(
       styles.priceItem,
+      { [styles.priceItemFavorite]: vehicleComponentName === 'favorite' },
       { [styles.priceItemDisable]: isPriceDisable },
       { [styles.priceItemBuy]: isTotal },
     );

package/source/components/VehicleSmallCard/VehicleData/VehicleInfo/VehicleInfo.styl

@@ -153,29 +153,14 @@
         max-width: 25%;
 
   &.vehiclePropertiesFavorite
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr;
     display: grid;
     grid-auto-rows: 44px;
 
     & > .consumptionCombined
       white-space: pre-line;
-      grid-column: 1 / span 2;
       grid-row: 4;
 
-    & > .location
-      grid-column: 1 / span 2;
-
-      +media-tablet-landscape-up()
-        height: 30px;
-        margin-top: auto;
-        border: none;
-
-    & > div:last-of-type
-      grid-column: 1 / span 2;
-
-    &::after
-      height: calc(100% - 20px);
-
     +media-tablet-landscape-up()
       grid-template-columns: 1fr 1fr 1fr;
       margin-top: -13px;

package/source/components/VehicleSmallCard/VehicleData/VehicleInfo/VehicleInfo.tsx

@@ -119,7 +119,7 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
           {vehicleComponentName === 'favorite' ? (
             <>
               <Visible xs sm md>
-                {renderProperty(getMainPropertiesForSRL, vehicleComponentName)}
+                {renderProperty(getMainPropertiesForComparableCars)}
               </Visible>
               <Hidden xs sm md>
                 {renderProperty(getMainPropertiesForFavorite, vehicleComponentName)}

package/source/components/VehicleSmallCard/VehicleData/VehiclePrice/VehiclePrice.styl

@@ -19,6 +19,7 @@
       border-left: 1px solid $grey-d
 
   &.vehiclePriceSectionFavorite
+    padding: 0 10px 0 10px
     +media-tablet-landscape-up()
       flex-shrink: 0;
       padding: 0 5px 0 15px;
@@ -69,7 +70,13 @@
 .wrapHandleCompare
   display: flex;
   gap: 8px;
-  margin-top: 20px;
+  border-top: 1px solid $grey-d3;
+  padding-top: 15px;
+
+  +media-tablet-landscape-up()
+    margin-top: 20px;
+    padding-top: 0;
+    border: none;
 
 .btnCompareRemove
   min-width: 50px !important;
@@ -82,6 +89,8 @@
   align-items: center;
   text-transform uppercase !important
   width: 100%;
+  min-width: auto !important;
+  max-width: 100% !important;
 
 .btnPlusIcon
   font-size: 26px;

package/source/components/VehicleSmallCard/VehicleData/VehiclePrice/VehiclePrice.tsx

@@ -241,7 +241,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
             </Button>
             <Button className={styles.btnCarToCompare} variant='outlined' onClick={toggleCarToCompare}>
               <span className={styles.btnPlusIcon}>{!toCompare ? '+' : '-'}</span>
-              <span className={styles.btnText}>{t('FavoritesPage:toCompare')}</span>
+              <span className={styles.btnText}>{t('FavoritesPage:compare')}</span>
             </Button>
           </div>
         )}

package/source/components/VehicleSmallCard/VehicleSmallCard.styl

@@ -78,8 +78,12 @@
       'image image'\
       'info price'\
       'seoText seoText'
-    grid-template-columns: 50% 50%;
-    border-bottom: 6px solid $skyBlue;
+    grid-template-columns: 155px 1fr;
+    border: 1px solid $grey-e;
+    border-radius: 10px;
+    // border-bottom: 6px solid $skyBlue;
+    margin: 10px;
+    padding-bottom: 15px;
     +media-tablet-landscape-up()
       border: 1px solid $grey-e;
       padding: 10px;