@bytebrand/fe-ui-core 4.1.170 → 4.1.172

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

@@ -10,25 +10,21 @@ import { IPrice } from '../../../../framework/types/types';
 export interface IVehiclePriceItemProps {
   priceTitle: string;
   tooltipDescription?: string;
-  priceSub?: string;
   price?: IPrice;
   isTotal: Boolean;
   isNewPriceCategory: Boolean;
   showAboIcon: Boolean;
   isPriceDisable: Boolean;
   isAlternativeText?: string;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite';
   perMonthCurrent?: number;
   iconName?: string;
-  prefixOldPrice?: string;
   perMonthOld?: number;
   totalCurrent?: number;
   totalOld?: number;
   positionX?: string;
   positionY?: string;
   url?: string;
-  target?: string;
-  rel?: string;
   routeObj?: any;
   linkTag?: string;
   isStrikeShown?: boolean;
@@ -48,8 +44,6 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
       perMonthCurrent,
       perMonthOld,
       url,
-      target,
-      rel,
       totalOld,
       totalCurrent,
       tooltipDescription,
@@ -60,11 +54,9 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
       linkTag,
       routeObj,
       combineRefAlternative,
-      prefixOldPrice,
       margin,
       isAlternativeText,
       vehicleComponentName,
-      priceSub,
       isTotal = false,
       showAboIcon = false,
       isPriceDisable = false,
@@ -75,9 +67,6 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
     const stylesItem = classnames(
       styles.priceItem,
       { [styles.priceItemFavorite]: vehicleComponentName === 'favorite' },
-      { [styles.priceItemSearch]: vehicleComponentName === 'search' },
-      { [styles.priceItemRecently]: vehicleComponentName === 'recently' },
-      { [styles.priceItemComparable]: vehicleComponentName === 'comparable' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
       { [styles.priceItemDisable]: isPriceDisable },
       { [styles.priceItemBuy]: isTotal }
     );
@@ -85,9 +74,8 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
     const priceItemCategoryClassName = classnames(
       styles.priceItemCategory,
       { [styles.priceItemCategorySearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
-      { [styles.priceItemCategoryComparable]: vehicleComponentName === 'comparable' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' }
+      { [styles.priceItemCategoryFavorite]: vehicleComponentName === 'favorite' }
     );
-
     return (
       <div className={stylesItem}>
         {React.createElement(linkTag, {
@@ -95,17 +83,15 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
           ...routeObj,
           onClick: this.routeToActiveTab,
           className: priceItemCategoryClassName,
-          href: url,
-          target,
-          rel
+          href: url
         })}
         {tooltipDescription && (
           <Tooltip
-            tooltipClassName={styles.tooltipWrapFavorites}
+            tooltipClassName={vehicleComponentName === 'favorite' ? styles.tooltipWrapFavorites : ''}
             description={tooltipDescription}
             positionX={positionX}
             positionY={positionY}
-            iconName={'infoIcon'}
+            iconName={vehicleComponentName === 'favorite' ? 'infoIcon' : iconName}
           />
         )}
         {isNewPriceCategory && (
@@ -119,17 +105,13 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
               {!isPriceDisable ? (
                 <>
                   {isStrikeShown && perMonthOld && (
-                    <div className={styles.oldPriceWrap}>
-                      {prefixOldPrice && <span className={styles.prefixOldPrice}>{prefixOldPrice}</span>}
-                      <VehicleFormattedPrice
-                        numbersAfterDot={0}
-                        className={styles.oldPrice}
-                        price={perMonthOld}
-                        size='semimedium'
-                        isOld
-                        disableStyles
-                      />
-                    </div>
+                    <VehicleFormattedPrice
+                      numbersAfterDot={0}
+                      className={styles.oldPrice}
+                      price={perMonthOld}
+                      isOld
+                      disableStyles
+                    />
                   )}
 
                   {perMonthCurrent && (
@@ -137,10 +119,9 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
                       numbersAfterDot={0}
                       price={perMonthCurrent}
                       postfix={postfix}
-                      className={styles.priceMtl}
                       isNew={isStrikeShown}
-                      size='semimedium'
-                      sub={priceSub}
+                      className={styles.largeMobilePrice}
+                      size={vehicleComponentName === 'search' && !isMobileOnly ? 'semimedium' : 'small'}
                     />
                   )}
                 </>
@@ -154,7 +135,6 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
                   className={styles.oldPrice}
                   price={totalOld}
                   postfix={isStrikeShown ? '2' : ''}
-                  size='semimedium'
                   isOld
                   disableStyles
                 />
@@ -165,7 +145,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
                   price={totalCurrent}
                   isNew={isStrikeShown}
                   toRound={false}
-                  size='semimedium'
+                  size={vehicleComponentName === 'search' && !isMobileOnly ? 'semimedium' : 'small'}
                   afterCommaClassName={styles.priceAfterComma}
                   postfix={postfix}
                 />
@@ -175,9 +155,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
           ...routeObj,
           onClick: this.routeToActiveTab,
           className: styles.priceItemPrice,
-          href: url,
-          target,
-          rel
+          href: url
         })}
       </div>
     );

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

@@ -2,7 +2,7 @@
 
 .vehicleInfo
   box-sizing: border-box
-  padding: 8px 7px 14px 7px
+  padding: 8px 7px 14px 11px
   flex-shrink: 0;
   display: grid;
   text-align: left;
@@ -17,6 +17,9 @@
   +media-tablet-landscape-down()
     padding: 0 10px;
 
+    & > div:last-of-type
+      margin: auto;
+
   &::after
     content: '';
     position absolute;
@@ -24,7 +27,7 @@
     width: 1px;
     height: calc(100% - 10px);
     top: 10px;
-    background-color rgba(76, 78, 100, 0.12);
+    background-color $grey-d3;
 
     +media-phone-up()
       height: calc(100% - 20px);
@@ -48,24 +51,11 @@
       grid-auto-rows: 36px;
       grid-template-columns: 100%;
 
-      span
-        font-size: 11px;
-
       & > .consumptionCombined,
       & > div:last-of-type
         grid-column: auto;
         grid-row: auto;
-
-      & .priceRatingSegmentWrapSRL
-        gap: 2px;
-        & > div
-          width: 13px;
-          height: 12px;
-
-      & .priceRatingSRL span
-        font-size: 8px;
-        margin-bottom: 2px;
-
+  
   &.vehiclePropertiesMain
     grid-auto-rows: 44px;
     grid-template-columns: 100%;
@@ -78,25 +68,9 @@
     +media-phone-up()
       grid-auto-rows: 38px;
 
-      & > .consumptionCombined span
-        font-size: 8px
-
     +media-tablet-landscape-up()
       grid-auto-rows: 36px;
 
-      span
-        font-size: 11px;
-
-      & .priceRatingSegmentWrapSRL
-        gap: 2px;
-        & > div
-          width: 13px;
-          height: 12px;
-
-      & .priceRatingSRL span
-        font-size: 8px;
-        margin-bottom: 2px;
-
   &.vehiclePropertiesComparable
     grid-template-columns: 100%;
     grid-auto-rows: 40px;
@@ -110,15 +84,12 @@
     +media-phone-up()
       grid-auto-rows: 38px;
 
-      & > .consumptionCombined span
+      & > .consumptionCombined
         font-size: 8px
 
     +media-tablet-landscape-up()
       grid-auto-rows: 36px;
 
-      span
-        font-size: 11px;
-
       & .priceRatingSegmentWrapSRL
         gap: 2px;
         & > div
@@ -126,7 +97,7 @@
           height: 12px;
 
       & .priceRatingSRL span
-        font-size: 8px;
+        font-size: 10px;
         margin-bottom: 2px;
 
   &.vehiclePropertiesSearch,
@@ -170,6 +141,11 @@
       & > .offerAvailability
         border: none;
 
+      & .carIconSearch
+        width: 30px;
+        height: 30px;
+        max-width: 28px;
+
       & .priceRatingSRL
         margin: auto;
 
@@ -201,19 +177,14 @@
         & + div
           border: none;
 
+      & .carIconSearch
+        width: 30px;
+        height: 30px;
+        max-width: 28px;
+
       & .priceRatingSRL
         margin: auto;
 
-  &.vehiclePropertiesRecently
-    grid-template-columns: 1fr;
-    display: grid;
-    grid-auto-rows: 44px;
-    padding: 0 10px;
-
-    & > .consumptionCombined
-      white-space: pre-line;
-      grid-row: 4;
-
   &.vehiclePropertiesMyVehicles
     &::after
       +media-tablet-landscape-down()

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

@@ -27,8 +27,6 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
     currentSalesPrice,
     language,
     url,
-    target,
-    rel,
     regDate,
     linkTag,
     routeObj,
@@ -80,7 +78,7 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
       icon: decoratedProps[prop].icon,
       description: decoratedProps[prop].value,
       className: styles[decoratedProps[prop].name],
-      classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently') && styles.carIconSearch
+      classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite') && styles.carIconSearch
     }));
 
     return mainPropertiesList.map((property: any, index: number) => (
@@ -96,18 +94,15 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
     { [styles.vehiclePropertiesSearch]: vehicleComponentName === 'search' },
     { [styles.vehiclePropertiesFavorite]: vehicleComponentName === 'favorite' },
     { [styles.vehiclePropertiesMyVehicles]: vehicleComponentName === 'myVehicles' },
-    { [styles.vehiclePropertiesRecently]: vehicleComponentName === 'recently' },
     { [styles.vehiclePropertiesIsAlternative]: combineRefAlternative },
   );
 
-  const conditionForRating = vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently';
-
   return (
     <>
       {React.createElement(linkTag, {
         children: (
         <>
-          {vehicleComponentName === 'comparable' || vehicleComponentName === 'recently' ? renderProperty(getMainPropertiesForComparableCars) : ''}
+          {vehicleComponentName === 'comparable' ? renderProperty(getMainPropertiesForComparableCars) : ''}
           {vehicleComponentName === 'main' ? renderProperty(getMainPropertiesForLandingCars) : ''}
           {vehicleComponentName === 'landing' ? (
             <>
@@ -135,18 +130,16 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
             t={t}
             i18nPrefix={i18nPrefixForPriceRating ? `${i18nPrefixForPriceRating}priceRating.` : 'priceRating.'}
             rating={getPriceRating(currentSalesPrice, mlCurrentSalesPricePredicted)}
-            className={`${styles.priceRating} ${conditionForRating ? styles.priceRatingSRL : ''}`}
-            classLabel={conditionForRating ? styles.priceRatingLabelSRL : ''}
-            classSegmentWrapper={conditionForRating ? styles.priceRatingSegmentWrapSRL : ''}
+            className={`${styles.priceRating} ${vehicleComponentName === 'search' || 'myVehicles' || 'favorite' ? styles.priceRatingSRL : ''}`}
+            classLabel={vehicleComponentName === 'search' || 'myVehicles' || 'favorite' ? styles.priceRatingLabelSRL : ''}
+            classSegmentWrapper={vehicleComponentName === 'search' || 'myVehicles' || 'favorite' ? styles.priceRatingSegmentWrapSRL : ''}
           />
         </>
       ),
         ...routeObj,
         className: wrapClasses,
         onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
-        href: url,
-        target,
-        rel
+        href: url
       })}
     </>
   );

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

@@ -13,51 +13,34 @@
     padding: 13px 12px 0 8px
 
   &.vehiclePriceSectionSearch
-    padding: 0 10px;
     +media-tablet-landscape-up()
       flex-shrink: 0;
-      padding: 24px 5px 0 15px;
-      border-left: 1px solid rgba(76, 78, 100, 0.12)
+      padding: 0 5px 0 15px;
+      border-left: 1px solid $grey-d
 
   &.vehiclePriceSectionFavorite
-    padding: 1px 10px 0 10px
+    padding: 0 10px 0 10px
     +media-tablet-landscape-up()
-      margin-top: -1px;
       flex-shrink: 0;
       padding: 0 5px 0 15px;
-      border-left: 1px solid rgba(76, 78, 100, 0.12)
+      border-left: 1px solid $grey-d
       gap: 3px;
 
-  &.vehiclePriceSectionRecently
-    padding: 1px 10px 0 10px
-
 .vehiclePriceTitle
-  color: rgba(76, 78, 100, 0.87);
-  display flex;
-  align-items: center;
+  color: $grey-3
+  display block;
   flex-shrink: 0;
   font-size: 11px;
   height: 20px;
 
-  +media-tablet-landscape-up()
+  +media-phone-up()
     font-size 10px
     height: 12px;
 
   &.vehiclePriceTitleSearch
-    font-size: 12px;
-    height: 44px;
-
-  &.vehiclePriceTitleFavorite
-    font-size: 12px;
-    height: 42px;
-
     +media-tablet-landscape-up()
-      font-size: 13px;
-      height: 46px;
-
-  &.vehiclePriceTitleRecently
-    font-size: 12px;
-    height: 42px;
+      font-size: 11px;
+      height: 20px;
 
 .addOfferButton
   white-space: normal
@@ -68,34 +51,30 @@
   width: 100%
   height: 40px
   font-size: 16px
-  margin-top: 8px !important;
+  margin-top: 5px !important;
   font-weight bold !important;
   border-radius: 0 !important;
+  text-transform: uppercase !important
 
 .isAlternativeButton
   background-color: $alternative !important
 
 .wrapCheckbox
-  min-height: 42px !important;
-  justify-content: space-between !important;
-  margin-left: 0 !important;
-
+  height: 42px;
+  & > div
+    order: 1;
   & span
+    margin: 0 !important;
     color: rgba(76, 78, 100, 0.87);
-    font-size: 12px;
-
-    +media-tablet-landscape-up()
-      font-size: 13px;
 
 .wrapHandleCompare
   display: flex;
   gap: 8px;
-  border-top: 1px solid rgba(76, 78, 100, 0.12);
+  border-top: 1px solid $grey-d3;
   padding-top: 15px;
-  justify-content: center;
 
   +media-tablet-landscape-up()
-    margin-top: 12px;
+    margin-top: 19px;
     padding-top: 0;
     border: none;
 
@@ -106,18 +85,19 @@
   display: flex !important;
 
 .btnCarToCompare
-  display: flex !important;
+  display: flex;
   height: 30px;
-  font-size: 13px !important;
-  min-width: auto !important;
+  align-items: center;
+  text-transform uppercase !important
   width: 100%;
-
-  +media-tablet-landscape-up()
-    width: 100%;
+  min-width: auto !important;
+  max-width: 100% !important;
 
 .btnPlusIcon
-  font-size: 13px;
-  margin-right: 5px;
+  font-size: 26px;
+  margin-right: 10px;
+  line-height: 26px;
 
-  +media-tablet-landscape-up()
-    margin-right: 10px;
+.btnText
+  position: relative;
+  top: -2px;

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

@@ -4,9 +4,8 @@ import classnames from 'classnames';
 import VehiclePriceItem from '../VechiclePriceItem/VechiclePriceItem';
 import { IBuy, ILeasing, IFinancing, ICommonFinancing } from '../../../../framework/types/types';
 import { Hidden } from 'react-grid-system';
-import { isMobileOnly } from 'react-device-detect';
 import Button from '../../../../components/_common/Button/Button';
-import CheckboxMaterial from '../../../../components/_common/CheckboxMaterial/CheckboxMaterial';
+import Checkbox from '../../../../components/_common/Checkbox/Checkbox';
 import IconSVG from '../../../_common/IconSVG/IconSVG';
 
 export interface IVehiclePriceSectionProps {
@@ -19,20 +18,15 @@ export interface IVehiclePriceSectionProps {
   isDealerSuperAdmin?: boolean;
   routeObj?: any;
   linkTag?: string;
-  classButton?: string;
   showAboIcon?: boolean;
-  dashboardButtonText?: string;
   isNewPriceCategory?: boolean;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite';
   monthlyInstallment?: number;
   oldMonthlyInstallment?: number;
   positionY?: string;
   url?: string;
-  target?: string;
-  rel?: string;
   iconName?: string;
   mainImageId?: string;
-  showCompareCheckboxes?: boolean;
   toRound?: boolean;
   showOfferBtn?: boolean;
   margin?: number;
@@ -80,10 +74,9 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
   };
 
   onDetailsClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    const { id, onDetailsClick } = this.props;
     event.preventDefault();
     event.stopPropagation();
-    onDetailsClick(id);
+    this.props.onDetailsClick(this.props.url);
   };
 
   render(): React.ReactNode {
@@ -91,18 +84,13 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
       t,
       combineRefAlternative,
       url,
-      target,
-      rel,
       isDealerSuperAdmin,
       linkTag,
       showOfferBtn,
       routeObj,
       toggleCarToCompare,
       toCompare,
-      dashboardButtonText,
-      classButton,
       onRemoveClick,
-      showCompareCheckboxes,
       vatRate,
       iconName,
       vehicleComponentName,
@@ -124,43 +112,33 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
     const vehiclePriceSectionClassName = classnames(
       styles.vehiclePriceSection,
       { [styles.vehiclePriceSectionSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
-      { [styles.vehiclePriceSectionFavorite]: vehicleComponentName === 'favorite' },
-      { [styles.vehiclePriceSectionRecently]: vehicleComponentName === 'recently' }
+      { [styles.vehiclePriceSectionFavorite]: vehicleComponentName === 'favorite' }
     );
 
     const vehiclePriceTitleClassName = classnames(
       styles.vehiclePriceTitle,
-      { [styles.vehiclePriceTitleFavorite]: vehicleComponentName === 'favorite' },
-      { [styles.vehiclePriceTitleRecently]: vehicleComponentName === 'recently' },
-      { [styles.vehiclePriceTitleSearch]: vehicleComponentName === 'search' || 'myVehicles' }
+      { [styles.vehiclePriceTitleSearch]: vehicleComponentName === 'search' || 'myVehicles' || 'favorite' }
     );
     const priceItemsGlobal = [
       {
         perMonthOld: oldMonthlyInstallment,
         perMonthCurrent: monthlyInstallment,
         title: t('vehicleProps:title.financing'),
-        prefixOldPrice: vehicleComponentName === 'search' && !isMobileOnly && t('vehicleProps:value.prefixOldPrice'),
         postfix: '3',
-        priceSub: t('vehicleProps:value.priceSub'),
         tooltipDescription: !combineRefAlternative && t('vehicleProps:title.financingDescription')
       },
       {
         perMonthOld: lOldMonthlyInstallment,
         perMonthCurrent: lMonthlyInstallment,
-        prefixOldPrice: vehicleComponentName === 'search' && !isMobileOnly && t('vehicleProps:value.prefixOldPrice'),
+        isNewPriceCategory: true,
         postfix: '1,3',
         isPriceDisable: !isLeasingActive,
         title: t('vehicleProps:title.leasing'),
-        priceSub: t('vehicleProps:value.priceSub'),
         tooltipDescription: !combineRefAlternative && t('vehicleProps:title.leasingDescription')
       }
     ];
 
-    const showAboCondition = vehicleComponentName !== 'favorite' &&
-                             vehicleComponentName !== 'recently' &&
-                             vehicleComponentName !== 'search';
-
-    const Abo = showAboCondition ? [
+    const Abo = vehicleComponentName !== 'favorite' ? [
       {
         perMonthOld: oldMonthlyInstallment,
         perMonthCurrent: monthlyInstallment,
@@ -203,8 +181,6 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
     const ListPrices = priceData.map((
     {
       title,
-      priceSub,
-      prefixOldPrice,
       totalCurrent,
       tooltipDescription,
       perMonthOld,
@@ -230,14 +206,10 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
           showAboIcon={showAboIcon}
           totalOld={highestPriceExtra}
           isTotal={isTotal}
-          priceSub={priceSub}
           positionY={positionY}
           url={url}
-          target={target}
-          rel={rel}
           isStrikeShown={isStrikeShown}
           iconName={iconName}
-          prefixOldPrice={prefixOldPrice}
           totalCurrent={totalCurrent}
           postfix={postfix}
           linkTag={linkTag}
@@ -248,36 +220,28 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
       );
     });
     const buttonClassNames = classnames(
-      classButton,
       styles.buttonDetails,
       { [styles.isAlternativeButton]: typeAlternative }
     );
     return (
       <section className={vehiclePriceSectionClassName}>
-        {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
-          <CheckboxMaterial
+        {vehicleComponentName === 'favorite' ? (
+          <Checkbox
             checked={toCompare}
             onChange={toggleCarToCompare}
-            labelPlacement='start'
             label={t('FavoritesPage:toCompare')}
-            formControlClassName={styles.wrapCheckbox}
+            labelClassName={styles.wrapCheckbox}
           />
-        )}
-        {vehicleComponentName !== 'favorite' && vehicleComponentName !== 'search' && (
-          <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
-        )}
-        {vehicleComponentName === 'search' && isMobileOnly && (
-          <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
-        )}
+        ) : <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>}
         {ListPrices}
-        {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
+        {vehicleComponentName === 'favorite' && (
           <div className={styles.wrapHandleCompare}>
             <Button variant='outlined' onClick={onRemoveClick} className={styles.btnCompareRemove} color='error'>
               <IconSVG className={styles.removeIcon} name='trashRed' customDimensions />
             </Button>
             <Button className={styles.btnCarToCompare} variant='outlined' onClick={toggleCarToCompare}>
               <span className={styles.btnPlusIcon}>{!toCompare ? '+' : '-'}</span>
-              {t('FavoritesPage:compare')}
+              <span className={styles.btnText}>{t('FavoritesPage:compare')}</span>
             </Button>
           </div>
         )}
@@ -287,7 +251,9 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
           </Button>
         ) : null}
         {showOfferBtn ? (
-          <Button color='primary' className={buttonClassNames} onClick={this.onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
+          <Hidden xs>
+            <Button color='primary' className={buttonClassNames} onClick={this.onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
+          </Hidden>
         ) : ''}
       </section>
     );