@bytebrand/fe-ui-core 4.1.171 → 4.1.172

package/source/components/Alternative/DealerInfo.styl

@@ -96,7 +96,6 @@
     width: 1.5rem;
     height: auto;
     fill: $skyBlue
-    margin-left: 5px
 
 .ourPriceBlock
     display: flex;
@@ -108,9 +107,4 @@
     cursor: pointer;
 
 .editIconBlock
-    cursor: pointer;
-
-.editFieldWrapper
-    display: flex
-    align-items: center
-
+    cursor: pointer;

package/source/components/Alternative/DealerInfo.tsx

@@ -20,37 +20,15 @@ const DealerInfo = ({ infoSections, t, dealerPrice, link, linkName, currentSales
   const inputRef = useRef(null);
 
   const handleSubmit = () => {
+    setPriceUpdating(false);
     setNewPrice(Math.max(currentSalesPrice, newPrice));
     onCurrentSalesPriceChange(Math.max(currentSalesPrice, newPrice));
   };
 
-  const handlePriceUpdating = () => {
-    if (isPriceUpdating) {
-      handleSubmit();
-      setPriceUpdating(false);
-    } else if (!isPriceUpdating) {
-      setPriceUpdating(true);
-      setTimeout(
-        () => {
-          inputRef.current.focus();
-        },
-        200
-      );
-    }
-  };
-
   const onPriceChange = (e: any) => {
     const newPrice = +e.target.value;
     setNewPrice(Math.max(0, newPrice));
   };
-
-  const onEnterSubmit = (e: any) => {
-    if (e.key === 'Enter') {
-      handleSubmit();
-      setPriceUpdating(false);
-    }
-  };
-
   const ourMargin = newPrice - dealerPrice;
 
   return (
@@ -121,48 +99,44 @@ const DealerInfo = ({ infoSections, t, dealerPrice, link, linkName, currentSales
           <span>
             {t('vehicleProps:alternative.ourPrice')}
           </span>
-          <div className={styles.editFieldWrapper}>
-            {isPriceUpdating
-              ? <div className={styles.ourPriceBlock}>
-                  <input
-                    className={styles.ourPriceInput}
-                    type='number'
-                    value={newPrice}
-                    onChange={e => onPriceChange(e)}
-                    ref={inputRef}
-                    onBlur={handleSubmit}
-                    onKeyPress={onEnterSubmit}
-                  />
-              </div>
-              : <span onClick={
-                  () => {
-                    setPriceUpdating(true);
-                    setTimeout(
-                      () => {
-                        inputRef.current.focus();
-                      },
-                      200
-                    );
-                  }}
-                >
-                <VehicleFormattedPrice
-                  className={classnames(styles.price, styles.ourPrice)}
-                  numbersAfterDot={0}
-                  price={newPrice}
-                  unit='€'
-                  isNew={true}
-                  numberContainerClassName={styles.numberContainer}
-                  unitWrapperClassName={styles.unitWrapper}
-                  unitClassName={styles.unit}
-                  monthlyClassName={styles.monthly}
+          {isPriceUpdating
+            ? <div className={styles.ourPriceBlock}>
+                <input
+                  className={styles.ourPriceInput}
+                  type='number'
+                  value={newPrice}
+                  onChange={e => onPriceChange(e)}
+                  ref={inputRef}
+                  onBlur={handleSubmit}
                 />
-              </span>
-            }
-            <span className={styles.editIconBlock} onClick={handlePriceUpdating}>
-              <IconSVG className={styles.editIcon} customDimensions name='editPriceIcon'></IconSVG>
-            </span>
-          </div>
-        </span>
+                <span className={styles.editIconBlock} onClick={handleSubmit}>
+                  <IconSVG className={styles.editIcon} customDimensions name='editIcon'></IconSVG>
+                </span>
+            </div>
+            : <span onClick={
+                () => {
+                  setPriceUpdating(true);
+                  setTimeout(
+                    () => {
+                      inputRef.current.focus();
+                    },
+                    200
+                  );
+                }}
+              >
+              <VehicleFormattedPrice
+                className={classnames(styles.price, styles.ourPrice)}
+                numbersAfterDot={0}
+                price={newPrice}
+                unit='€'
+                isNew={true}
+                numberContainerClassName={styles.numberContainer}
+                unitWrapperClassName={styles.unitWrapper}
+                unitClassName={styles.unit}
+                monthlyClassName={styles.monthly}
+              />
+            </span>}
+          </span>
       </div>
     </div>
   );

package/source/components/Breadcrumbs/Breadcrumbs.styl

@@ -1,4 +1,5 @@
 @import '../../theme/mixins.styl'
+@import '../../theme/theme.styl'
 
 .breadcrumbsWrap
   display none
@@ -7,19 +8,16 @@
     align-items: center;
     justify-content: space-between;
     display: flex;
-    border: 1px solid rgba(76, 78, 100, 0.12);
+    border: 1px solid $grey-trans
     background-color: #fff;
     margin 8px 0;
     padding 0 12px;
     height: 44px;
-    border-radius: 6px;
 
 .breadcrumbs
   padding-right: 15px;
   box-sizing: border-box
   flex-shrink: 0;
-  display: flex;
-  align-items: center;
   +media-phone-only()
     display none
   +media-tablet-landscape-down()
@@ -29,16 +27,15 @@
       width: 20px;
       height: 20px;
       font-size: 0;
-      display: block;
+      display: inline-block
       position: relative
 
 .link
   display: inline-block
   position: relative
   margin-right: 20px
-  font-size: 16px
-  line-height: 1;
-  color: rgba(76, 78, 100, 0.68);
+  font-size: 12px
+  color: $grey-3
   text-decoration: none
   // vertical-align: middle
 
@@ -49,16 +46,15 @@
     transform translateY(-50%)
     right: -13px
     background-image: url('../../../media/svg/common/arrow_breadcrumps.svg')
-    width: 7px
-    height: 10px
+    width: 5px
+    height: 8px
 
 .homeLink
   display: inline-block
   position: relative
   margin-right: 20px
-  font-size: 16px
-  line-height: 1;
-  color: rgba(76, 78, 100, 0.68);
+  font-size: 12px
+  color: $grey-3
   text-decoration: none
   vertical-align: middle
 
@@ -69,9 +65,9 @@
     transform translateY(-50%)
     right: -13px
     background-image: url('../../../media/svg/common/arrow_breadcrumps.svg')
-    width: 7px
-    height: 10px
-
+    width: 5px
+    height: 8px
+    
   &::before
     position: absolute
     content: ''
@@ -85,12 +81,11 @@
 
 .text
   display: inline-block
-  line-height: 1;
-  font-size: 16px
-  color: rgba(76, 78, 100, 0.68);
+  font-size: 12px
+  color: $grey-74
 
 .active
-  // font-weight: bold;
+  font-weight: bold;
 
 .back
   display: inline-block
@@ -99,7 +94,7 @@
   position relative;
   color: $grey-74
 
-  &::before
+  &::before 
     position: absolute
     content: ''
     z-index: 1;
@@ -116,17 +111,10 @@
   cursor: pointer
   color: $grey-74
 
-.breadcrumbsCDP
-  [class*='Breadcrumbs__link'],
-  [class*='Breadcrumbs__text']
-    font-size: 12px;
-    color: rgba(76, 78, 100, 0.87);
+.classBreadcrumbsCDP
+  [class*='FirstInfoBlock__firstInfoBlock']
+    grid-template-columns: repeat(4, minmax(auto, 171px));
 
-.breadcrumbsUserDashboard
-  display: none;
-.breadcrumbsMySearches
-  height: 56px;
-  border-radius: 8px;
   // [class*='FirstInfoBlock__container']
   //   width: 100px;
   //   margin 0 auto;

package/source/components/Breadcrumbs/Breadcrumbs.tsx

@@ -64,9 +64,9 @@ class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps> {
                             ? BreadcrumbsFactory[page]({ t, ...pageProps })
                             : BreadcrumbsFactory['DEFAULT']();
 
-    const { list, withBackBtn, classBreadcrumbsAny, className } = BreadcrumbsConfig;
+    const { list, withBackBtn, classBreadcrumbsAny } = BreadcrumbsConfig;
 
-    const stylesNewForBreadcrumbs = className ? styles[className]  : '';
+    const stylesNewForBreadcrumbs = classBreadcrumbsAny === 'VEHICLE_DETAILS' ? styles.classBreadcrumbsCDP : '';
 
     const infoBlockProps = { infoBlockData, t };
 
@@ -75,7 +75,7 @@ class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps> {
         <div className={styles.breadcrumbs}>
           <span className={styles.homeLink}><a href='/search'></a></span>
           {list && list.length ? this.renderList(list) : false}
-          {/* {withBackBtn ? this.renderGoBackButton() : false} */}
+          {withBackBtn ? this.renderGoBackButton() : false}
         </div>
         {classBreadcrumbsAny ? <FirstInfoBlock {...infoBlockProps} /> : ''}
       </div>

package/source/components/Breadcrumbs/FirstInfoBlock/FirstInfoBlock.styl

@@ -2,7 +2,7 @@
 
 .firstInfoBlock
   display grid
-  grid-template-columns: repeat(4, minmax(auto, 216px))
+  grid-template-columns: repeat(4, minmax(auto, 179px))
 
   +media-tablet-landscape-down()
     display none
@@ -16,32 +16,38 @@
   position relative
   // width: 211px
 
-  // &::before
-  //   content: ''
-  //   width: 1px;
-  //   background-color: $grey-d;
-  //   height: 100%;
-  //   position absolute;
-  //   left: 0;
-  //   top: 0;
+  &::before
+    content: ''
+    width: 1px;
+    background-color: $grey-d;
+    height: 100%;
+    position absolute;
+    left: 0;
+    top: 0;
 
   &:last-of-type
     width: 179px
 
   &:nth-of-type(1) .icon
     background-image: url('../../../../media/svg/common/whyAutodeIconSet-Q.svg');
+    width: 34px
+    height: 34px
   &:nth-of-type(2) .icon
     background-image: url('../../../../media/svg/common/whyAutodeIconSet-G.svg');
+    width: 22px
+    height: 26px
   &:nth-of-type(3) .icon
     background-image: url('../../../../media/svg/common/whyAutodeIconSet-F.svg');
+    width: 36px
+    height: 36px
   &:nth-of-type(4) .icon
     background-image: url('../../../../media/svg/common/whyAutodeIconSet-R.svg');
+    width: 27px
+    height: 27px
 
 .icon
   margin-right: 10px
   display block;
-  width: 34px;
-  height: 34px;
   background-repeat no-repeat
   background-position center center;
   background-size contain
@@ -52,4 +58,5 @@
   text-align center
   font-weight: 400
   color: $grey-75;
+  width: 57px;
   margin 0

package/source/components/PriceRating/PriceRating.styl

@@ -16,7 +16,6 @@
   text-transform: uppercase
   color: $priceReviewColors[darkBackground]
   margin-bottom: 4px
-  font-weight: bold;
 
 .segmentWrapper
   display: flex

package/source/components/SearchFilters/common/RangeControlled/RangeControlled.tsx

@@ -144,6 +144,5 @@ const RangeControlled = ({
 
 export default memo(RangeControlled, (prevProps: any, nextProps: any) => {
   return prevProps.controls.from === nextProps.controls.from &&
-         prevProps.controls.to === nextProps.controls.to &&
-         prevProps.t === nextProps.t;
+         prevProps.controls.to === nextProps.controls.to;
 });

package/source/components/SearchPage/SearchTopBar/SearchTopBar.styl

@@ -6,6 +6,7 @@
   display: flex
   flex-direction: row
   align-items: center
+  padding: 5px 0
   margin-bottom: 10px;
   margin-top: 10px;
   box-sizing: border-box
@@ -45,19 +46,9 @@
   font-weight: 700
 
 .sorting
-  min-width: 181px;
-  max-width: 285px;
-  height: 100%;
-  [class*='MuiPaper-root'], [class*='MuiFormControl-root-MuiTextField-root']
-    height: 100%
+  min-width: 180px;
   [class*='MuiPaper-root'], [class*='MuiOutlinedInput-root']
     font-size: 14px !important
-    height: 100%
-  [class*='MuiOutlinedInput-input']
-    padding: 5.5px 30px 7.5px 6px !important
-  +media-tablet-landscape-down()
-    min-width: 150px;
-    max-width: 199px;
 
 .saveSearch
   flex-basis: 20%
@@ -65,6 +56,7 @@
   cursor: pointer
   font-size: 13px
   margin-left: auto
+  margin-right: 10px
   color: $skyBlue
   +media-tablet-down()
     flex-basis: unset
@@ -90,8 +82,6 @@
 
 .select
   min-width: 0
-  height:100%
-
 
 +media-tablet-down()
   .sorting

package/source/components/SearchPage/SearchTopBar/SearchTopBar.tsx

@@ -74,7 +74,7 @@ class SearchTopBar extends React.Component<ISearchTopBarProps, {}> {
       />
       :
       <MaterialAutocomplete
-        size={'small'}
+        size={'custom'}
         freeSolo={false}
         disabled={!resultsCount}
         className={styles.select}
@@ -82,9 +82,9 @@ class SearchTopBar extends React.Component<ISearchTopBarProps, {}> {
         placeholder={t('sortingPlaceholder')}
         items={translatedSortingOptions}
         onChange={onSortChange}
-        name={isMobileOnly ? 'mobileSearch' : ''}
+        name='mobileSearch'
         disableClearable={true}
-        label={''}      />;
+      />;
   };
 
   render(): JSX.Element {

package/source/components/Vehicle/VehicleFormattedPrice/VehicleFormattedPrice.styl

@@ -12,7 +12,6 @@ $color-price-new = $lightGreen
 .old
   color: $grey-3;
   font-size: 8px;
-  margin-bottom: 1px;
 
   &::after
     content: ''
@@ -62,7 +61,7 @@ _:-ms-fullscreen, :root .old::after
   font-weight: 700
 
 .price.semimedium
-  font-size: 20px
+  font-size: 18px
   font-weight: 700
 
 .price.small
@@ -84,12 +83,9 @@ _:-ms-fullscreen, :root .old::after
   transform: translateY(-7px)
   font-size: 9px
 
-.price.semimedium .decimals,
-.price.semimedium .unit
-  display: inline-block
-  position: relative
-  transform: translateY(-9px)
-  font-size: 8px
+// .price.large .decimals,
+// .price.large .unit
+//   top: 4px
 
 .price.medium .decimals,
 .price.medium .unit
@@ -100,19 +96,18 @@ _:-ms-fullscreen, :root .old::after
   top: 2px
 
 .price.semimedium .decimals,
-.price.semimedium .unit,
-.price.semimedium .sub,
-  // top: 1px
-  font-weight: 400
-
-.price.semimedium .postfix,
-.old .postfix
-  position: absolute;
-  top: 0;
-  left: auto;
+.price.semimedium .unit
+  top: 1px
 
-.old .postfix
-  transform: translateX(7px);
+.price.large .decimals,
+.price.medium .decimals,
+.price.small .decimals,
+.price.large .unitMonthly,
+.price.medium .unitMonthly,
+.price.small .unitMonthly
+  position: relative
+  transform: translateY(-7px)
+  font-size: 9px
 
 .price.large .decimals
 .price.large .unitMonthly
@@ -141,9 +136,8 @@ _:-ms-fullscreen, :root .old::after
   display: block
 
 .price .sub
-  font-size: 9px;
+  font-size: 8px;
   display: inline-block;
   position: relative;
   bottom: 0;
-  left: -5px
-  vertical-align: baseline;
+  left: -5px

package/source/components/VehicleDetailedSidebar/partials/Properties.styl

@@ -15,6 +15,10 @@
   &:nth-child(2)
     border-top-color: transparent;
 
+.propertyIcon
+  width: 20px;
+  height: 23px;
+
 .details
   display: flex
   flex-direction: row

package/source/components/VehicleDetailedSidebar/partials/Properties.tsx

@@ -86,7 +86,7 @@ const Properties: React.FunctionComponent<IPropertiesProps> = ({ t, car, decorat
       children: (
         <div className={`${styles.tabContentPadding} ${styles.tabContentOverviewPadding}`}>
           {mainProperties.map((property: any, index: number) => (
-            <VehicleProperty {...property} className={styles.property} key={index} />
+            <VehicleProperty {...property} className={styles.property} classNameIcon={styles.propertyIcon} key={index} />
           ))}
         </div>
       )

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

@@ -9,35 +9,25 @@
   height: 46px;
   box-sizing: border-box;
 
-  &.priceItemSearch
-    height: 44px;
-    +media-tablet-landscape-up()
-      height: 51px;
-    &.priceItemBuy
-      border-top: none;
-      border-bottom: 1px solid rgba(76, 78, 100, 0.12);
-      +media-tablet-landscape-up()
-        border: none;
-
   &.priceItemFavorite
     height: 44px;
-    +media-tablet-landscape-up()
-      height: 46px;
-      &.priceItemBuy
-        height: 52px;
-
-  &.priceItemRecently
-    height: 44px;
-
-    &.priceItemBuy
-      border-bottom: 1px solid rgba(76, 78, 100, 0.12);
-
-  &.priceItemComparable
-    +media-tablet-landscape-up()
-      height: 38px;
-      [class*='semimedium__']
-        font-size: 16px;
 
+  +media-phone-up()
+    height: 42px;
+    &.priceItemFavorite
+      height: 42px;
+
+  &:first-of-type
+    align-items: flex-end;
+    padding-bottom: 10px;
+    .priceItemCategory
+      font-size: 12px;
+      +media-phone-up()
+        font-size: 11px;
+
+      &.priceItemCategorySearch
+        +media-tablet-landscape-up()
+          font-size: 12px;
   &:nth-of-type(3), &:last-of-type
     .tooltipWrap
       &__block
@@ -51,31 +41,34 @@
           transform: rotate(180deg) translateX(3px);
 
 .priceItemBuy
-  border-top: 1px solid rgba(76, 78, 100, 0.12);
-
-  .priceItemPrice
-    transform: translateX(-6px);
+  border-top: 1px solid $grey-d3
 
 .priceItemCategory
   font-size: 12px
-  color: rgba(76, 78, 100, 0.87);
+  font-weight bold
+  color: $grey-3
   box-sizing: border-box
   padding 3px 0;
   cursor pointer;
   text-decoration none;
   margin-right: 2px
   flex-shrink: 0;
-  position relative;
-
-  &.priceItemCategoryComparable
-    +media-tablet-landscape-up()
-      font-size: 9px;
+  position relative
 
   & > span:hover
     background: rgba(196, 196, 196, 0.6);
 
-  +media-tablet-landscape-up()
-    font-size: 13px
+  +media-phone-up()
+    font-size: 9px;
+
+  &.priceItemCategorySearch
+    +media-tablet-landscape-up()
+      font-size: 12px;
+
+  &.priceItemCategoryFavorite
+    +media-tablet-landscape-up()
+      font-size: 13px !important;
+      color: rgba(76, 78, 100, 0.87);
 
 .priceItemDisable
   pointer-events: none;
@@ -87,6 +80,7 @@
   .priceNewBlock
     background-color $grey-9;
 
+
 .noPrice
   color: $grey-9;
   font-size: 11px;
@@ -102,27 +96,19 @@
   align-items: flex-end;
   color: inherit;
 
-.oldPriceWrap
-  display: flex;
-  font-size: 10px;
-  align-items: center;
-  width: 100%;
-  justify-content: space-between;
-
-.prefixOldPrice
-  margin: 0 8px;
-  color: rgba(51, 51, 51, 0.83);
+  .largeMobilePrice
+    +media-phone-only()
+      font-size: 25px;
+      & > span:last-of-type
+        transform: translateY(-12px);
 
 .oldPrice
-  margin-left: auto;
+  font-size: 10px
   & > span:last-of-type
     font-size: 8px;
     transform: translateY(-2px);
     display: inline-flex;
 
-.priceMtl
-  transform: translateX(6px);
-
 .priceNewBlock
   flex-shrink: 0;
   width: 18px
@@ -159,5 +145,5 @@
   bottom: 5px;
 
 .tooltipWrapFavorites
-  transform: translateY(0px);
-  margin-left: 5px;
+  transform: translateY(-1px);
+  margin-left: 5px;