+
diff --git a/src/components/PriceFilter/PriceFilterPlain.js b/src/components/PriceFilter/PriceFilterPlain.js
index b19703d75b..cbf8f7e8ac 100644
--- a/src/components/PriceFilter/PriceFilterPlain.js
+++ b/src/components/PriceFilter/PriceFilterPlain.js
@@ -8,7 +8,7 @@ import config from '../../config';
import { PriceFilterForm } from '../../forms';
-import css from './PriceFilterPlain.css';
+import css from './PriceFilterPlain.module.css';
const RADIX = 10;
diff --git a/src/components/PriceFilter/PriceFilterPlain.css b/src/components/PriceFilter/PriceFilterPlain.module.css
similarity index 95%
rename from src/components/PriceFilter/PriceFilterPlain.css
rename to src/components/PriceFilter/PriceFilterPlain.module.css
index 15239cd2e7..df6f9df457 100644
--- a/src/components/PriceFilter/PriceFilterPlain.css
+++ b/src/components/PriceFilter/PriceFilterPlain.module.css
@@ -1,4 +1,4 @@
-@import '../../marketplace.css';
+@import '../../styles/propertySets.css';
.root {
position: relative;
diff --git a/src/components/PriceFilter/PriceFilterPopup.js b/src/components/PriceFilter/PriceFilterPopup.js
index c9931969a9..c062e75a47 100644
--- a/src/components/PriceFilter/PriceFilterPopup.js
+++ b/src/components/PriceFilter/PriceFilterPopup.js
@@ -7,7 +7,7 @@ import { formatCurrencyMajorUnit } from '../../util/currency';
import config from '../../config';
import { PriceFilterForm } from '../../forms';
-import css from './PriceFilterPopup.css';
+import css from './PriceFilterPopup.module.css';
const KEY_CODE_ESCAPE = 27;
const RADIX = 10;
diff --git a/src/components/PriceFilter/PriceFilterPopup.css b/src/components/PriceFilter/PriceFilterPopup.module.css
similarity index 95%
rename from src/components/PriceFilter/PriceFilterPopup.css
rename to src/components/PriceFilter/PriceFilterPopup.module.css
index 529a165f1c..ff3e28486f 100644
--- a/src/components/PriceFilter/PriceFilterPopup.css
+++ b/src/components/PriceFilter/PriceFilterPopup.module.css
@@ -1,4 +1,4 @@
-@import '../../marketplace.css';
+@import '../../styles/propertySets.css';
.root {
position: relative;
diff --git a/src/components/PrivacyPolicy/PrivacyPolicy.js b/src/components/PrivacyPolicy/PrivacyPolicy.js
index 459534e267..db8294bfe4 100644
--- a/src/components/PrivacyPolicy/PrivacyPolicy.js
+++ b/src/components/PrivacyPolicy/PrivacyPolicy.js
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
-import css from './PrivacyPolicy.css';
+import css from './PrivacyPolicy.module.css';
const PrivacyPolicy = props => {
const { rootClassName, className } = props;
diff --git a/src/components/PrivacyPolicy/PrivacyPolicy.css b/src/components/PrivacyPolicy/PrivacyPolicy.module.css
similarity index 91%
rename from src/components/PrivacyPolicy/PrivacyPolicy.css
rename to src/components/PrivacyPolicy/PrivacyPolicy.module.css
index 7f579cc2a0..ec88878e56 100644
--- a/src/components/PrivacyPolicy/PrivacyPolicy.css
+++ b/src/components/PrivacyPolicy/PrivacyPolicy.module.css
@@ -1,4 +1,4 @@
-@import '../../marketplace.css';
+@import '../../styles/propertySets.css';
.root {
& p {
diff --git a/src/components/PropertyGroup/PropertyGroup.css b/src/components/PropertyGroup/PropertyGroup.css
deleted file mode 100644
index 75657c8fff..0000000000
--- a/src/components/PropertyGroup/PropertyGroup.css
+++ /dev/null
@@ -1,94 +0,0 @@
-@import '../../marketplace.css';
-
-:root {
- /*
- These variables are available in global scope through ":root"
- element ( tag). Variables with the same names are going to
- overwrite each other if CSS Properties' (PostCSS plugin)
- configuration "preserve: true" is used - meaning that variables
- are left to CSS bundle. We are planning to enable it in the future
- since browsers support CSS Properties already.
- */
-
- --PropertyGroup_lineHeight: 24px;
- --PropertyGroup_lineThroughTop: 12px;
- --PropertyGroup_lineThroughBottom: 13px;
- --PropertyGroup_lineThroughTopMobile: 10px;
- --PropertyGroup_lineThroughBottomMobile: 11px;
-}
-
-.root {
- margin: 0;
-}
-
-.twoColumns {
- @media (--viewportMedium) {
- column-count: 2;
- }
-}
-
-.item {
- display: flex;
- align-items: center;
- padding: 3px 0;
-
- @media (--viewportMedium) {
- padding: 4px 0;
- }
-}
-
-.checkIcon {
-}
-
-.hidden {
- visibility: hidden;
-}
-
-.marketplaceFill {
- fill: var(--marketplaceColor);
-}
-
-.iconWrapper {
- align-self: baseline;
- margin-right: 8px;
-
- /* This follows line-height */
- height: var(--PropertyGroup_lineHeight);
-}
-
-.labelWrapper {
- display: inline-block;
-}
-
-.selectedLabel,
-.notSelectedLabel {
- @apply --marketplaceBodyFontStyles;
- line-height: var(--PropertyGroup_lineHeight);
- margin: 0;
-}
-
-.selectedLabel {
- font-weight: var(--fontWeightSemiBold);
-}
-
-.notSelectedLabel {
- color: var(--matterColorNegative);
- position: relative;
-
- /* line-through */
- background-image: linear-gradient(
- transparent var(--PropertyGroup_lineThroughTopMobile),
- var(--matterColorNegative) var(--PropertyGroup_lineThroughTopMobile),
- var(--matterColorNegative) var(--PropertyGroup_lineThroughBottomMobile),
- transparent var(--PropertyGroup_lineThroughBottomMobile)
- );
-
- @media (--viewportMedium) {
- background-image: linear-gradient(
- transparent var(--PropertyGroup_lineThroughTop),
- var(--matterColorNegative) var(--PropertyGroup_lineThroughTop),
- var(--matterColorNegative) var(--PropertyGroup_lineThroughBottom),
- transparent var(--PropertyGroup_lineThroughBottom)
- );
- }
-}
diff --git a/src/components/PropertyGroup/PropertyGroup.js b/src/components/PropertyGroup/PropertyGroup.js
index 15bb254296..ea1f480f2e 100644
--- a/src/components/PropertyGroup/PropertyGroup.js
+++ b/src/components/PropertyGroup/PropertyGroup.js
@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import includes from 'lodash/includes';
-import css from './PropertyGroup.css';
+import css from './PropertyGroup.module.css';
const checkSelected = (options, selectedOptions) => {
return options.map(option => ({
diff --git a/src/components/PropertyGroup/PropertyGroup.module.css b/src/components/PropertyGroup/PropertyGroup.module.css
new file mode 100644
index 0000000000..1a0519ad3b
--- /dev/null
+++ b/src/components/PropertyGroup/PropertyGroup.module.css
@@ -0,0 +1,77 @@
+@import '../../styles/propertySets.css';
+
+.root {
+ margin: 0;
+}
+
+.twoColumns {
+ @media (--viewportMedium) {
+ column-count: 2;
+ }
+}
+
+.item {
+ display: flex;
+ align-items: center;
+ padding: 3px 0;
+
+ @media (--viewportMedium) {
+ padding: 4px 0;
+ }
+}
+
+.checkIcon {
+}
+
+.hidden {
+ visibility: hidden;
+}
+
+.marketplaceFill {
+ fill: var(--marketplaceColor);
+}
+
+.iconWrapper {
+ align-self: baseline;
+ margin-right: 8px;
+
+ /* This follows line-height */
+ height: 24px;
+}
+
+.labelWrapper {
+ display: inline-block;
+}
+
+.selectedLabel,
+.notSelectedLabel {
+ @apply --marketplaceBodyFontStyles;
+ line-height: 24px;
+ margin: 0;
+}
+
+.selectedLabel {
+ font-weight: var(--fontWeightSemiBold);
+}
+
+.notSelectedLabel {
+ color: var(--matterColorNegative);
+ position: relative;
+
+ /* line-through */
+ background-image: linear-gradient(
+ transparent 10px,
+ var(--matterColorNegative) 10px,
+ var(--matterColorNegative) 11px,
+ transparent 11px
+ );
+
+ @media (--viewportMedium) {
+ background-image: linear-gradient(
+ transparent 12px,
+ var(--matterColorNegative) 12px,
+ var(--matterColorNegative) 13px,
+ transparent 13px
+ );
+ }
+}
diff --git a/src/components/RangeSlider/Handle.js b/src/components/RangeSlider/Handle.js
index 35bba6fa75..37ed26e542 100644
--- a/src/components/RangeSlider/Handle.js
+++ b/src/components/RangeSlider/Handle.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { func, number, string } from 'prop-types';
import classNames from 'classnames';
-import css from './Handle.css';
+import css from './Handle.module.css';
class Handle extends Component {
constructor(props) {
diff --git a/src/components/RangeSlider/Handle.css b/src/components/RangeSlider/Handle.module.css
similarity index 94%
rename from src/components/RangeSlider/Handle.css
rename to src/components/RangeSlider/Handle.module.css
index 25f50f29ea..fbc2268f6b 100644
--- a/src/components/RangeSlider/Handle.css
+++ b/src/components/RangeSlider/Handle.module.css
@@ -1,5 +1,3 @@
-@import '../../marketplace.css';
-
.rootTouchBuffer {
/* Position */
position: absolute;
diff --git a/src/components/RangeSlider/RangeSlider.js b/src/components/RangeSlider/RangeSlider.js
index 63f64cbb27..e11cd58273 100644
--- a/src/components/RangeSlider/RangeSlider.js
+++ b/src/components/RangeSlider/RangeSlider.js
@@ -5,7 +5,7 @@ import { withDimensions } from '../../util/contextHelpers';
import Handle from './Handle';
import Track from './Track';
-import css from './RangeSlider.css';
+import css from './RangeSlider.module.css';
class RangeSliderComponent extends Component {
constructor(props) {
diff --git a/src/components/RangeSlider/RangeSlider.css b/src/components/RangeSlider/RangeSlider.module.css
similarity index 78%
rename from src/components/RangeSlider/RangeSlider.css
rename to src/components/RangeSlider/RangeSlider.module.css
index 472de97742..61d74bdab4 100644
--- a/src/components/RangeSlider/RangeSlider.css
+++ b/src/components/RangeSlider/RangeSlider.module.css
@@ -1,5 +1,3 @@
-@import '../../marketplace.css';
-
.root {
position: relative;
margin: 0 10px;
diff --git a/src/components/RangeSlider/Track.js b/src/components/RangeSlider/Track.js
index 28bc1eccec..0b1b03679b 100644
--- a/src/components/RangeSlider/Track.js
+++ b/src/components/RangeSlider/Track.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { array, node, string } from 'prop-types';
import classNames from 'classnames';
-import css from './Track.css';
+import css from './Track.module.css';
class Track extends Component {
render() {
diff --git a/src/components/RangeSlider/Track.css b/src/components/RangeSlider/Track.module.css
similarity index 93%
rename from src/components/RangeSlider/Track.css
rename to src/components/RangeSlider/Track.module.css
index e55cbe236c..0b8e03f2a3 100644
--- a/src/components/RangeSlider/Track.css
+++ b/src/components/RangeSlider/Track.module.css
@@ -1,5 +1,3 @@
-@import '../../marketplace.css';
-
.root {
position: relative;
width: 100%;
diff --git a/src/components/ResponsiveImage/ResponsiveImage.example.js b/src/components/ResponsiveImage/ResponsiveImage.example.js
index 87b698f32d..a4011826f0 100644
--- a/src/components/ResponsiveImage/ResponsiveImage.example.js
+++ b/src/components/ResponsiveImage/ResponsiveImage.example.js
@@ -2,7 +2,7 @@ import React from 'react';
import ResponsiveImage from './ResponsiveImage';
import { types as sdkTypes } from '../../util/sdkLoader';
-import css from './ResponsiveImageExample.css';
+import css from './ResponsiveImageExample.module.css';
const { UUID } = sdkTypes;
diff --git a/src/components/ResponsiveImage/ResponsiveImage.js b/src/components/ResponsiveImage/ResponsiveImage.js
index 550743e514..87cb697beb 100644
--- a/src/components/ResponsiveImage/ResponsiveImage.js
+++ b/src/components/ResponsiveImage/ResponsiveImage.js
@@ -40,7 +40,7 @@ import { FormattedMessage } from '../../util/reactIntl';
import { propTypes } from '../../util/types';
import NoImageIcon from './NoImageIcon';
-import css from './ResponsiveImage.css';
+import css from './ResponsiveImage.module.css';
const ResponsiveImage = props => {
const { className, rootClassName, alt, noImageMessage, image, variants, ...rest } = props;
@@ -52,7 +52,6 @@ const ResponsiveImage = props => {
// NoImageMessage is needed for listing images on top the map (those component lose context)
// https://github.com/tomchentw/react-google-maps/issues/578
const noImageMessageText = noImageMessage ||
;
- /* eslint-disable jsx-a11y/img-redundant-alt */
return (
@@ -61,7 +60,6 @@ const ResponsiveImage = props => {
);
- /* eslint-enable jsx-a11y/img-redundant-alt */
}
const imageVariants = image.attributes.variants;
@@ -86,8 +84,6 @@ const ResponsiveImage = props => {
...rest,
};
- // alt prop already defined above
- // eslint-disable-next-line jsx-a11y/alt-text
return
;
};
diff --git a/src/components/ResponsiveImage/ResponsiveImage.css b/src/components/ResponsiveImage/ResponsiveImage.module.css
similarity index 93%
rename from src/components/ResponsiveImage/ResponsiveImage.css
rename to src/components/ResponsiveImage/ResponsiveImage.module.css
index fa2bfbc3fe..e88e008436 100644
--- a/src/components/ResponsiveImage/ResponsiveImage.css
+++ b/src/components/ResponsiveImage/ResponsiveImage.module.css
@@ -1,4 +1,4 @@
-@import '../../marketplace.css';
+@import '../../styles/propertySets.css';
.root {
width: 100%;
diff --git a/src/components/ResponsiveImage/ResponsiveImageExample.css b/src/components/ResponsiveImage/ResponsiveImageExample.module.css
similarity index 100%
rename from src/components/ResponsiveImage/ResponsiveImageExample.css
rename to src/components/ResponsiveImage/ResponsiveImageExample.module.css
diff --git a/src/components/ReviewModal/ReviewModal.js b/src/components/ReviewModal/ReviewModal.js
index dba365ece3..91a8320e3c 100644
--- a/src/components/ReviewModal/ReviewModal.js
+++ b/src/components/ReviewModal/ReviewModal.js
@@ -6,7 +6,7 @@ import { propTypes } from '../../util/types';
import { IconReviewUser, Modal } from '../../components';
import { ReviewForm } from '../../forms';
-import css from './ReviewModal.css';
+import css from './ReviewModal.module.css';
const ReviewModal = props => {
const {
diff --git a/src/components/ReviewModal/ReviewModal.css b/src/components/ReviewModal/ReviewModal.module.css
similarity index 91%
rename from src/components/ReviewModal/ReviewModal.css
rename to src/components/ReviewModal/ReviewModal.module.css
index 4b6ceafc54..5c251fb437 100644
--- a/src/components/ReviewModal/ReviewModal.css
+++ b/src/components/ReviewModal/ReviewModal.module.css
@@ -1,4 +1,4 @@
-@import '../../marketplace.css';
+@import '../../styles/propertySets.css';
.root {
@apply --marketplaceModalBaseStyles;
diff --git a/src/components/Reviews/Reviews.js b/src/components/Reviews/Reviews.js
index a69a48cf06..03124697b5 100644
--- a/src/components/Reviews/Reviews.js
+++ b/src/components/Reviews/Reviews.js
@@ -5,7 +5,7 @@ import classNames from 'classnames';
import { Avatar, ReviewRating, UserDisplayName } from '../../components';
import { propTypes } from '../../util/types';
-import css from './Reviews.css';
+import css from './Reviews.module.css';
const Review = props => {
const { review, intl } = props;
diff --git a/src/components/Reviews/Reviews.css b/src/components/Reviews/Reviews.module.css
similarity index 97%
rename from src/components/Reviews/Reviews.css
rename to src/components/Reviews/Reviews.module.css
index 9d4f16f4b3..b85c6cd4e9 100644
--- a/src/components/Reviews/Reviews.css
+++ b/src/components/Reviews/Reviews.module.css
@@ -1,4 +1,4 @@
-@import '../../marketplace.css';
+@import '../../styles/propertySets.css';
.root {
margin: 0;
diff --git a/src/components/SavedCardDetails/SavedCardDetails.js b/src/components/SavedCardDetails/SavedCardDetails.js
index 858d357f6d..0f21e8bd96 100644
--- a/src/components/SavedCardDetails/SavedCardDetails.js
+++ b/src/components/SavedCardDetails/SavedCardDetails.js
@@ -15,7 +15,7 @@ import {
MenuContent,
Modal,
} from '../../components';
-import css from './SavedCardDetails.css';
+import css from './SavedCardDetails.module.css';
const DEFAULT_CARD = 'defaultCard';
const REPLACE_CARD = 'replaceCard';
diff --git a/src/components/SavedCardDetails/SavedCardDetails.css b/src/components/SavedCardDetails/SavedCardDetails.module.css
similarity index 99%
rename from src/components/SavedCardDetails/SavedCardDetails.css
rename to src/components/SavedCardDetails/SavedCardDetails.module.css
index 1c830d69d6..627e6a6857 100644
--- a/src/components/SavedCardDetails/SavedCardDetails.css
+++ b/src/components/SavedCardDetails/SavedCardDetails.module.css
@@ -1,4 +1,4 @@
-@import '../../marketplace.css';
+@import '../../styles/propertySets.css';
.root {
}
diff --git a/src/components/SearchFiltersMobile/SearchFiltersMobile.js b/src/components/SearchFiltersMobile/SearchFiltersMobile.js
index ed17f01a30..43c16bd9ce 100644
--- a/src/components/SearchFiltersMobile/SearchFiltersMobile.js
+++ b/src/components/SearchFiltersMobile/SearchFiltersMobile.js
@@ -7,7 +7,7 @@ import { withRouter } from 'react-router-dom';
import routeConfiguration from '../../routeConfiguration';
import { createResourceLocatorString } from '../../util/routes';
import { ModalInMobile, Button } from '../../components';
-import css from './SearchFiltersMobile.css';
+import css from './SearchFiltersMobile.module.css';
class SearchFiltersMobileComponent extends Component {
constructor(props) {
diff --git a/src/components/SearchFiltersMobile/SearchFiltersMobile.css b/src/components/SearchFiltersMobile/SearchFiltersMobile.module.css
similarity index 98%
rename from src/components/SearchFiltersMobile/SearchFiltersMobile.css
rename to src/components/SearchFiltersMobile/SearchFiltersMobile.module.css
index 43d690f447..4c77e09f84 100644
--- a/src/components/SearchFiltersMobile/SearchFiltersMobile.css
+++ b/src/components/SearchFiltersMobile/SearchFiltersMobile.module.css
@@ -1,4 +1,4 @@
-@import '../../marketplace.css';
+@import '../../styles/propertySets.css';
.root {
display: flex;
diff --git a/src/components/SearchFiltersPrimary/SearchFiltersPrimary.js b/src/components/SearchFiltersPrimary/SearchFiltersPrimary.js
index 90be664e24..1b3a25aab2 100644
--- a/src/components/SearchFiltersPrimary/SearchFiltersPrimary.js
+++ b/src/components/SearchFiltersPrimary/SearchFiltersPrimary.js
@@ -3,7 +3,7 @@ import { bool, func, node, number, string } from 'prop-types';
import { FormattedMessage } from '../../util/reactIntl';
import classNames from 'classnames';
-import css from './SearchFiltersPrimary.css';
+import css from './SearchFiltersPrimary.module.css';
const SearchFiltersPrimaryComponent = props => {
const {
diff --git a/src/components/SearchFiltersPrimary/SearchFiltersPrimary.css b/src/components/SearchFiltersPrimary/SearchFiltersPrimary.module.css
similarity index 98%
rename from src/components/SearchFiltersPrimary/SearchFiltersPrimary.css
rename to src/components/SearchFiltersPrimary/SearchFiltersPrimary.module.css
index 9213a951d1..b4fbdafc75 100644
--- a/src/components/SearchFiltersPrimary/SearchFiltersPrimary.css
+++ b/src/components/SearchFiltersPrimary/SearchFiltersPrimary.module.css
@@ -1,4 +1,4 @@
-@import '../../marketplace.css';
+@import '../../styles/propertySets.css';
.root {
display: flex;
diff --git a/src/components/SearchFiltersSecondary/SearchFiltersSecondary.js b/src/components/SearchFiltersSecondary/SearchFiltersSecondary.js
index 882fa8d1cf..3cb1b7d297 100644
--- a/src/components/SearchFiltersSecondary/SearchFiltersSecondary.js
+++ b/src/components/SearchFiltersSecondary/SearchFiltersSecondary.js
@@ -4,7 +4,7 @@ import classNames from 'classnames';
import { FormattedMessage } from '../../util/reactIntl';
import { InlineTextButton } from '../../components';
-import css from './SearchFiltersSecondary.css';
+import css from './SearchFiltersSecondary.module.css';
class SearchFiltersSecondaryComponent extends Component {
constructor(props) {
diff --git a/src/components/SearchFiltersSecondary/SearchFiltersSecondary.css b/src/components/SearchFiltersSecondary/SearchFiltersSecondary.module.css
similarity index 96%
rename from src/components/SearchFiltersSecondary/SearchFiltersSecondary.css
rename to src/components/SearchFiltersSecondary/SearchFiltersSecondary.module.css
index c5cc9896fd..364be2e56e 100644
--- a/src/components/SearchFiltersSecondary/SearchFiltersSecondary.css
+++ b/src/components/SearchFiltersSecondary/SearchFiltersSecondary.module.css
@@ -1,4 +1,4 @@
-@import '../../marketplace.css';
+@import '../../styles/propertySets.css';
.root {
flex-grow: 1;
diff --git a/src/components/SearchMap/ReusableMapContainer.js b/src/components/SearchMap/ReusableMapContainer.js
index 4a507a781e..742808a2d5 100644
--- a/src/components/SearchMap/ReusableMapContainer.js
+++ b/src/components/SearchMap/ReusableMapContainer.js
@@ -4,7 +4,7 @@ import { node, string, object } from 'prop-types';
import { IntlProvider } from '../../util/reactIntl';
import config from '../../config';
-import css from './SearchMap.css';
+import css from './SearchMap.module.css';
/**
* ReusableMapContainer makes Google Map usage more effective. This improves:
diff --git a/src/components/SearchMap/SearchMap.js b/src/components/SearchMap/SearchMap.js
index d1317cf896..123b4dff7f 100644
--- a/src/components/SearchMap/SearchMap.js
+++ b/src/components/SearchMap/SearchMap.js
@@ -19,7 +19,7 @@ import SearchMapWithMapbox, {
isMapsLibLoaded,
} from './SearchMapWithMapbox';
import ReusableMapContainer from './ReusableMapContainer';
-import css from './SearchMap.css';
+import css from './SearchMap.module.css';
const REUSABLE_MAP_HIDDEN_HANDLE = 'reusableMapHidden';
diff --git a/src/components/SearchMap/SearchMap.css b/src/components/SearchMap/SearchMap.module.css
similarity index 94%
rename from src/components/SearchMap/SearchMap.css
rename to src/components/SearchMap/SearchMap.module.css
index 36a15a43f4..1605017ae8 100644
--- a/src/components/SearchMap/SearchMap.css
+++ b/src/components/SearchMap/SearchMap.module.css
@@ -1,5 +1,3 @@
-@import '../../marketplace.css';
-
.root {
width: 100%;
height: 100%;
diff --git a/src/components/SearchMap/SearchMapWithMapbox.js b/src/components/SearchMap/SearchMapWithMapbox.js
index 056989817a..efe6481f89 100644
--- a/src/components/SearchMap/SearchMapWithMapbox.js
+++ b/src/components/SearchMap/SearchMapWithMapbox.js
@@ -12,7 +12,7 @@ import { sdkBoundsToFixedCoordinates, hasSameSDKBounds } from '../../util/maps';
import { SearchMapInfoCard, SearchMapPriceLabel, SearchMapGroupLabel } from '../../components';
import { groupedByCoordinates, reducedToArray } from './SearchMap.helpers.js';
-import css from './SearchMapWithMapbox.css';
+import css from './SearchMapWithMapbox.module.css';
export const LABEL_HANDLE = 'SearchMapLabel';
export const INFO_CARD_HANDLE = 'SearchMapInfoCard';
diff --git a/src/components/SearchMap/SearchMapWithMapbox.css b/src/components/SearchMap/SearchMapWithMapbox.module.css
similarity index 100%
rename from src/components/SearchMap/SearchMapWithMapbox.css
rename to src/components/SearchMap/SearchMapWithMapbox.module.css
diff --git a/src/components/SearchMapGroupLabel/SearchMapGroupLabel.js b/src/components/SearchMapGroupLabel/SearchMapGroupLabel.js
index b2c209659f..65f65ec577 100644
--- a/src/components/SearchMapGroupLabel/SearchMapGroupLabel.js
+++ b/src/components/SearchMapGroupLabel/SearchMapGroupLabel.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import { propTypes } from '../../util/types';
-import css from './SearchMapGroupLabel.css';
+import css from './SearchMapGroupLabel.module.css';
class SearchMapGroupLabel extends Component {
shouldComponentUpdate(nextProps) {
diff --git a/src/components/SearchMapGroupLabel/SearchMapGroupLabel.css b/src/components/SearchMapGroupLabel/SearchMapGroupLabel.module.css
similarity index 98%
rename from src/components/SearchMapGroupLabel/SearchMapGroupLabel.css
rename to src/components/SearchMapGroupLabel/SearchMapGroupLabel.module.css
index 462dc47241..a6fb304f37 100644
--- a/src/components/SearchMapGroupLabel/SearchMapGroupLabel.css
+++ b/src/components/SearchMapGroupLabel/SearchMapGroupLabel.module.css
@@ -1,4 +1,4 @@
-@import '../../marketplace.css';
+@import '../../styles/propertySets.css';
.root {
/* Size from content */
diff --git a/src/components/SearchMapInfoCard/SearchMapInfoCard.js b/src/components/SearchMapInfoCard/SearchMapInfoCard.js
index c96936e6ac..e15463fba8 100644
--- a/src/components/SearchMapInfoCard/SearchMapInfoCard.js
+++ b/src/components/SearchMapInfoCard/SearchMapInfoCard.js
@@ -9,7 +9,7 @@ import { formatMoney } from '../../util/currency';
import { ensureListing } from '../../util/data';
import { ResponsiveImage } from '../../components';
-import css from './SearchMapInfoCard.css';
+import css from './SearchMapInfoCard.module.css';
// ListingCard is the listing info without overlayview or carousel controls
const ListingCard = props => {
diff --git a/src/components/SearchMapInfoCard/SearchMapInfoCard.css b/src/components/SearchMapInfoCard/SearchMapInfoCard.module.css
similarity index 99%
rename from src/components/SearchMapInfoCard/SearchMapInfoCard.css
rename to src/components/SearchMapInfoCard/SearchMapInfoCard.module.css
index 68e6be194f..dc07c058b6 100644
--- a/src/components/SearchMapInfoCard/SearchMapInfoCard.css
+++ b/src/components/SearchMapInfoCard/SearchMapInfoCard.module.css
@@ -1,4 +1,4 @@
-@import '../../marketplace.css';
+@import '../../styles/propertySets.css';
.root {
display: block;
diff --git a/src/components/SearchMapPriceLabel/SearchMapPriceLabel.js b/src/components/SearchMapPriceLabel/SearchMapPriceLabel.js
index 22ef1e4d6a..a48a198833 100644
--- a/src/components/SearchMapPriceLabel/SearchMapPriceLabel.js
+++ b/src/components/SearchMapPriceLabel/SearchMapPriceLabel.js
@@ -7,7 +7,7 @@ import { formatMoney } from '../../util/currency';
import { ensureListing } from '../../util/data';
import config from '../../config';
-import css from './SearchMapPriceLabel.css';
+import css from './SearchMapPriceLabel.module.css';
class SearchMapPriceLabel extends Component {
shouldComponentUpdate(nextProps) {
diff --git a/src/components/SearchMapPriceLabel/SearchMapPriceLabel.css b/src/components/SearchMapPriceLabel/SearchMapPriceLabel.module.css
similarity index 98%
rename from src/components/SearchMapPriceLabel/SearchMapPriceLabel.css
rename to src/components/SearchMapPriceLabel/SearchMapPriceLabel.module.css
index 5c272b22c1..14eea5083b 100644
--- a/src/components/SearchMapPriceLabel/SearchMapPriceLabel.css
+++ b/src/components/SearchMapPriceLabel/SearchMapPriceLabel.module.css
@@ -1,4 +1,4 @@
-@import '../../marketplace.css';
+@import '../../styles/propertySets.css';
.root {
position: relative;
diff --git a/src/components/SearchResultsPanel/SearchResultsPanel.js b/src/components/SearchResultsPanel/SearchResultsPanel.js
index 13386e9c47..550f3f1d0b 100644
--- a/src/components/SearchResultsPanel/SearchResultsPanel.js
+++ b/src/components/SearchResultsPanel/SearchResultsPanel.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import { propTypes } from '../../util/types';
import { ListingCard, PaginationLinks } from '../../components';
-import css from './SearchResultsPanel.css';
+import css from './SearchResultsPanel.module.css';
const SearchResultsPanel = props => {
const { className, rootClassName, listings, pagination, search, setActiveListing } = props;
diff --git a/src/components/SearchResultsPanel/SearchResultsPanel.css b/src/components/SearchResultsPanel/SearchResultsPanel.module.css
similarity index 98%
rename from src/components/SearchResultsPanel/SearchResultsPanel.css
rename to src/components/SearchResultsPanel/SearchResultsPanel.module.css
index b2c86999c1..441e5cffb5 100644
--- a/src/components/SearchResultsPanel/SearchResultsPanel.css
+++ b/src/components/SearchResultsPanel/SearchResultsPanel.module.css
@@ -1,5 +1,3 @@
-@import '../../marketplace.css';
-
.root {
display: flex;
flex-direction: column;
diff --git a/src/components/SearchResultsPanel/__snapshots__/SearchResultsPanel.test.js.snap b/src/components/SearchResultsPanel/__snapshots__/SearchResultsPanel.test.js.snap
index d1bdd0c97c..52e860a027 100644
--- a/src/components/SearchResultsPanel/__snapshots__/SearchResultsPanel.test.js.snap
+++ b/src/components/SearchResultsPanel/__snapshots__/SearchResultsPanel.test.js.snap
@@ -2,8 +2,10 @@
exports[`SearchResultsPanel matches snapshot 1`] = `
`;
diff --git a/src/components/SectionHero/SectionHero.js b/src/components/SectionHero/SectionHero.js
index c914f4762a..c73374deef 100644
--- a/src/components/SectionHero/SectionHero.js
+++ b/src/components/SectionHero/SectionHero.js
@@ -4,7 +4,7 @@ import { FormattedMessage } from '../../util/reactIntl';
import classNames from 'classnames';
import { NamedLink } from '../../components';
-import css from './SectionHero.css';
+import css from './SectionHero.module.css';
const SectionHero = props => {
const { rootClassName, className } = props;
diff --git a/src/components/SectionHero/SectionHero.css b/src/components/SectionHero/SectionHero.module.css
similarity index 63%
rename from src/components/SectionHero/SectionHero.css
rename to src/components/SectionHero/SectionHero.module.css
index 698f6a2e08..b297ba7bba 100644
--- a/src/components/SectionHero/SectionHero.css
+++ b/src/components/SectionHero/SectionHero.module.css
@@ -1,28 +1,4 @@
-@import '../../marketplace.css';
-
-:root {
- /*
- These variables are available in global scope through ":root"
- element ( tag). Variables with the same names are going to
- overwrite each other if CSS Properties' (PostCSS plugin)
- configuration "preserve: true" is used - meaning that variables
- are left to CSS bundle. We are planning to enable it in the future
- since browsers support CSS Properties already.
- */
-
- --SectionHero_desktopTitleMaxWidth: 625px;
-
- --SectionHero_animation: {
- animation-name: animationTitle;
- animation-duration: 0.5s;
- animation-timing-function: ease-out;
- -webkit-animation-fill-mode: forwards;
-
- visibility: hidden;
- opacity: 1;
- position: relative;
- }
-}
+@import '../../styles/propertySets.css';
/* Animation for the hero elements */
@@ -39,6 +15,18 @@
}
}
+/* Shared animation rules */
+.animation {
+ animation-name: animationTitle;
+ animation-duration: 0.5s;
+ animation-timing-function: ease-out;
+ -webkit-animation-fill-mode: forwards;
+
+ visibility: hidden;
+ opacity: 1;
+ position: relative;
+}
+
.root {
@apply --backgroundImage;
display: flex;
@@ -74,7 +62,7 @@
@apply --marketplaceHeroTitleFontStyles;
color: var(--matterColorLight);
- @apply --SectionHero_animation;
+ composes: animation;
animation-delay: 0.5s;
@media (--viewportMedium) {
@@ -88,7 +76,7 @@
color: var(--matterColorLight);
margin: 0 0 32px 0;
- @apply --SectionHero_animation;
+ composes: animation;
animation-delay: 0.65s;
@media (--viewportMedium) {
@@ -99,7 +87,7 @@
.heroButton {
@apply --marketplaceButtonStyles;
- @apply --SectionHero_animation;
+ composes: animation;
animation-delay: 0.8s;
diff --git a/src/components/SectionHero/__snapshots__/SectionHero.test.js.snap b/src/components/SectionHero/__snapshots__/SectionHero.test.js.snap
index 42466870f7..454db79b23 100644
--- a/src/components/SectionHero/__snapshots__/SectionHero.test.js.snap
+++ b/src/components/SectionHero/__snapshots__/SectionHero.test.js.snap
@@ -2,21 +2,27 @@
exports[`SectionHero matches snapshot 1`] = `