Repository: kiwicom/mobile
Pull request #1107 (2018-09-19 12:57:29)

Hotels modals new design
Hello, this is my first pull request here at kiwi.
The slider, used in ScorePopup and PricePopup is still WIP.

denbalogh: Hi, I think I am finished with the task. Can you review me please @tbergq @RobinCsl 
tbergq: @denbalogh Seems you need to fix some tests. You should run `yarn test-ci` before creating PR 😊 
tbergq: You need to add a `SafeAreaView` from `react-navigation` here (the one from `react-native` is broken. 

Also, the price you show in the slider is the price pr night, so if the designers wish to show price pr stay, you need to multiply it with the number of days, or create a new graphql query to get the price pr stay

![image](https://user-images.githubusercontent.com/7705041/45862981-66010900-bd74-11e8-86e0-d95ddccb5002.png)

tbergq: Also this happens sometimes, and the slider sometimes `jumps` is there a way to make it smoother?

![image](https://user-images.githubusercontent.com/7705041/45863564-fd675b80-bd76-11e8-8944-4df3bafd00f3.png)

tbergq: SliderLabels seems to have infinite re-render

![skjermbilde 2018-09-21 kl 08 27 29](https://user-images.githubusercontent.com/7705041/45863862-41a72b80-bd78-11e8-8966-db357ac426f8.png)

denbalogh: Hello,
can you review again, please?
tbergq: @denbalogh could you rebase master into your branch first. Your PR is on a lower version of react-native. 
denbalogh: @tbergq I fixed the comments, except the one with testing checkbox icon for android. I checked it on emulator, but I don't know how to write a test for it. Can you give me some hints?

Patch:
diff --git a/app/hotels/src/filter/hotelFacilities/HotelFacilitiesPopup.js b/app/hotels/src/filter/hotelFacilities/HotelFacilitiesPopup.js
index 06f3381a..e800d925 100644
--- a/app/hotels/src/filter/hotelFacilities/HotelFacilitiesPopup.js
+++ b/app/hotels/src/filter/hotelFacilities/HotelFacilitiesPopup.js
@@ -5,12 +5,14 @@ import { View } from 'react-native';
 import {
   ButtonPopup,
   Checkbox,
-  Icon,
   StyleSheet,
   Text,
+  TextIcon,
 } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
+import { SeparatorTrimmed } from '@kiwicom/mobile-navigation';
+import { SafeAreaView } from 'react-navigation';
 
 type Props = {|
   +facilities: string[],
@@ -28,65 +30,65 @@ const facilitiesList = {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.airport_shuttle" />
     ),
-    icon: 'airport-shuttle',
+    icon: '<',
   },
   familyRooms: {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.family_rooms" />
     ),
-    icon: 'child-friendly',
+    icon: '\ue05d',
   },
   facilitiesForDisabled: {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.facilities_for_disabled" />
     ),
-    icon: 'accessible',
+    icon: '\uE088',
   },
   fitnessCenter: {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.fitness_center" />
     ),
-    icon: 'fitness-center',
+    icon: '\uE089',
   },
   parking: {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.parking" />
     ),
-    icon: 'directions-car',
+    icon: '\uE03E',
   },
   freeParking: {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.free_parking" />
     ),
-    icon: 'directions-car',
+    icon: '\uE03E',
   },
   valetParking: {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.valet_parking" />
     ),
-    icon: 'directions-car',
+    icon: '\uE03E',
   },
   indoorPool: {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.indoor_pool" />
     ),
-    icon: 'pool',
+    icon: '\uE123',
   },
   petsAllowed: {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.pets_allowed" />
     ),
-    icon: 'pets',
+    icon: '\uE043',
   },
   spa: {
     text: <Translation id="hotels_search.filter.hotel_facilities_filter.spa" />,
-    icon: 'spa',
+    icon: '\uE04A',
   },
   wifi: {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.wifi" />
     ),
-    icon: 'wifi',
+    icon: '\uE062',
   },
 };
 
@@ -104,7 +106,7 @@ export default class HotelFacilitiesPopup extends React.Component<
   handleCheckboxOnPress = (option: string) => () =>
     this.setState(state => {
       let facilities = [...state.facilities];
-      if (facilities.indexOf(option) >= 0) {
+      if (facilities.includes(option)) {
         facilities = facilities.filter(facility => facility !== option);
       } else {
         facilities.push(option);
@@ -117,20 +119,36 @@ export default class HotelFacilitiesPopup extends React.Component<
   renderCheckboxes = (facilities: string[]) => {
     const checkboxes = [];
     const facilitiesListKeys = Object.keys(facilitiesList);
+    const facilitiesListLength = facilitiesListKeys.length;
     facilitiesListKeys.forEach((key, i) => {
       const facility = facilitiesList[key];
+      const isFacilityChecked = facilities.includes(key);
+      const isNotLastRow = i < facilitiesListLength - 1;
       checkboxes.push(
-        <Checkbox
-          key={i}
-          isChecked={facilities.indexOf(key) >= 0}
-          onPress={this.handleCheckboxOnPress(key)}
-          style={i < facilitiesListKeys.length - 1 && styles.delimiter}
-        >
-          <View style={styles.checkbox}>
-            <Icon name={facility.icon} size={20} style={styles.facilityIcon} />
-            {facility.text}
-          </View>
-        </Checkbox>,
+        <React.Fragment key={i}>
+          <Checkbox
+            isChecked={isFacilityChecked}
+            onPress={this.handleCheckboxOnPress(key)}
+          >
+            <View style={styles.checkbox}>
+              <TextIcon
+                code={facility.icon}
+                orbit={true}
+                style={styles.facilityIcon}
+              />
+              {facility.text}
+            </View>
+          </Checkbox>
+          {isNotLastRow && (
+            <View style={styles.separatorEnd}>
+              <SeparatorTrimmed
+                gapSizeStart={31}
+                color={defaultTokens.paletteInkLighter}
+                height={0.5}
+              />
+            </View>
+          )}
+        </React.Fragment>,
       );
     });
     return checkboxes;
@@ -139,36 +157,44 @@ export default class HotelFacilitiesPopup extends React.Component<
   render() {
     const { facilities } = this.state;
     return (
-      <ButtonPopup
-        buttonTitle={
-          <Translation id="hotels_search.filter.hotel_facilities_popup.save" />
-        }
-        onSave={this.onSave}
-        onClose={this.props.onClose}
-        isVisible={this.props.isVisible}
-      >
-        <Text style={styles.title}>
-          <Translation id="hotels_search.filter.hotel_facilities_popup.title" />
-        </Text>
-        {this.renderCheckboxes(facilities)}
-      </ButtonPopup>
+      <SafeAreaView>
+        <ButtonPopup
+          buttonTitle={
+            <Translation id="hotels_search.filter.hotel_facilities_popup.save" />
+          }
+          buttonCloseTitle={
+            <Translation id="hotels_search.filter.hotel_facilities_popup.close" />
+          }
+          onSave={this.onSave}
+          onClose={this.props.onClose}
+          isVisible={this.props.isVisible}
+        >
+          <Text style={styles.title}>
+            <Translation id="hotels_search.filter.hotel_facilities_popup.title" />
+          </Text>
+          {this.renderCheckboxes(facilities)}
+        </ButtonPopup>
+      </SafeAreaView>
     );
   }
 }
 
 const styles = StyleSheet.create({
   title: {
-    color: defaultTokens.paletteInkNormal,
-    paddingBottom: 5,
-  },
-  delimiter: {
-    borderBottomWidth: 0.5,
-    borderBottomColor: defaultTokens.paletteCloudNormal,
+    color: defaultTokens.colorHeading,
+    fontSize: 16,
+    fontWeight: '500',
+    paddingTop: 15,
+    paddingBottom: 10,
   },
   checkbox: {
     flexDirection: 'row',
+    alignItems: 'center',
   },
   facilityIcon: {
     marginEnd: 10,
   },
+  separatorEnd: {
+    marginEnd: -15,
+  },
 });
diff --git a/app/hotels/src/filter/price/PriceFilter.js b/app/hotels/src/filter/price/PriceFilter.js
index 6eeda56f..354cb5a2 100644
--- a/app/hotels/src/filter/price/PriceFilter.js
+++ b/app/hotels/src/filter/price/PriceFilter.js
@@ -2,7 +2,11 @@
 
 import * as React from 'react';
 import { Icon } from '@kiwicom/mobile-shared';
-import { Translation } from '@kiwicom/mobile-localization';
+import {
+  Translation,
+  TranslationFragment,
+  DateUtils,
+} from '@kiwicom/mobile-localization';
 
 import PricePopup from './PricePopup';
 import FilterButton from '../FilterButton';
@@ -15,6 +19,7 @@ type PropsWithContext = {
   ...Props,
   +currentSearchStats: CurrentSearchStats,
   +currency: string,
+  +daysOfStay: number,
 };
 
 type State = {|
@@ -72,17 +77,58 @@ class PriceFilter extends React.Component<PropsWithContext, State> {
     min: number,
     max: number,
     currency: string,
+    daysOfStay: number,
   ) => {
     if (start === min && end === max) {
       return <Translation id="hotels_search.filter.price_filter.price" />;
     }
     if (start === min) {
-      return <Translation passThrough={`< ${end} ${currency}`} />;
+      return (
+        <TranslationFragment>
+          <Translation passThrough="< " />
+          <Translation
+            id="hotels_search.filter.price_popup.price_label"
+            values={{
+              amount: end * daysOfStay,
+              currency: currency,
+            }}
+          />
+        </TranslationFragment>
+      );
     }
     if (end === max) {
-      return <Translation passThrough={`> ${start} ${currency}`} />;
+      return (
+        <TranslationFragment>
+          <Translation passThrough="> " />
+          <Translation
+            id="hotels_search.filter.price_popup.price_label"
+            values={{
+              amount: start * daysOfStay,
+              currency: currency,
+            }}
+          />
+        </TranslationFragment>
+      );
     }
-    return <Translation passThrough={`${start} - ${end} ${currency}`} />;
+    return (
+      <TranslationFragment>
+        <Translation
+          id="hotels_search.filter.price_popup.price_label"
+          values={{
+            amount: start * daysOfStay,
+            currency: currency,
+          }}
+        />
+        <Translation passThrough=" - " />
+        <Translation
+          id="hotels_search.filter.price_popup.price_label"
+          values={{
+            amount: end * daysOfStay,
+            currency: currency,
+          }}
+        />
+      </TranslationFragment>
+    );
   };
 
   render() {
@@ -90,6 +136,7 @@ class PriceFilter extends React.Component<PropsWithContext, State> {
       currentSearchStats: { priceMin, priceMax },
       isActive,
       currency,
+      daysOfStay,
     } = this.props;
     const start = this.props.start || priceMin;
     const end = this.props.end || priceMax;
@@ -97,7 +144,14 @@ class PriceFilter extends React.Component<PropsWithContext, State> {
     return (
       <React.Fragment>
         <FilterButton
-          title={this.getTitle(start, end, priceMin, priceMax, currency)}
+          title={this.getTitle(
+            start,
+            end,
+            priceMin,
+            priceMax,
+            currency,
+            daysOfStay,
+          )}
           icon={<Icon name="attach-money" size={18} />}
           isActive={isActive}
           onPress={this.filterButtonClicked}
@@ -111,6 +165,7 @@ class PriceFilter extends React.Component<PropsWithContext, State> {
           start={start}
           end={end}
           currency={currency}
+          daysOfStay={daysOfStay}
         />
       </React.Fragment>
     );
@@ -125,20 +180,34 @@ type Props = {|
   +isActive: boolean,
 |};
 
+const calculateDaysOfStay = (checkin, checkout) => {
+  if (checkin && checkout) {
+    return DateUtils.diffInDays(checkout, checkin);
+  }
+  return null;
+};
+
 export default function PriceFilterWithContext(props: Props) {
   return (
     <HotelsContext.Consumer>
-      {({ currency }) => (
-        <HotelsSearchContext.Consumer>
-          {({ currentSearchStats }) => (
-            <PriceFilter
-              {...props}
-              currentSearchStats={currentSearchStats}
-              currency={currency}
-            />
-          )}
-        </HotelsSearchContext.Consumer>
-      )}
+      {({ currency, checkin, checkout }) => {
+        const daysOfStay = calculateDaysOfStay(checkin, checkout);
+        if (daysOfStay === null) {
+          return null;
+        }
+        return (
+          <HotelsSearchContext.Consumer>
+            {({ currentSearchStats }) => (
+              <PriceFilter
+                {...props}
+                currentSearchStats={currentSearchStats}
+                currency={currency}
+                daysOfStay={daysOfStay}
+              />
+            )}
+          </HotelsSearchContext.Consumer>
+        );
+      }}
     </HotelsContext.Consumer>
   );
 }
diff --git a/app/hotels/src/filter/price/PricePopup.js b/app/hotels/src/filter/price/PricePopup.js
index 784103c9..e971dca9 100644
--- a/app/hotels/src/filter/price/PricePopup.js
+++ b/app/hotels/src/filter/price/PricePopup.js
@@ -1,8 +1,16 @@
 // @flow
 
 import * as React from 'react';
-import { Text, ButtonPopup, Slider } from '@kiwicom/mobile-shared';
+import {
+  Text,
+  ButtonPopup,
+  Slider,
+  StyleSheet,
+  SliderLabels,
+} from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
+import { SafeAreaView } from 'react-navigation';
 
 type Props = {|
   onClose: () => void,
@@ -13,6 +21,7 @@ type Props = {|
   start: number,
   end: number,
   currency: string,
+  daysOfStay: number,
 |};
 
 type State = {|
@@ -41,7 +50,9 @@ export default class PricePopup extends React.Component<Props, State> {
         };
 
   handlePriceChanged = ([start, end]: number[]) =>
-    this.setState({ price: { start, end } });
+    this.setState({
+      price: { start, end },
+    });
 
   onSave = () =>
     this.props.onSave({
@@ -49,44 +60,78 @@ export default class PricePopup extends React.Component<Props, State> {
       maxPrice: this.state.price.end,
     });
 
-  renderLabel = () => {
-    const { start, end } = this.state.price;
-    const { currency } = this.props;
-
-    return (
-      <Text>
-        <Translation passThrough={`${start} ${currency}`} />
-        <Translation passThrough=" - " />
-        <Translation passThrough={`${end} ${currency}`} />
-      </Text>
-    );
-  };
-
   render() {
     const { start, end } = this.state.price;
-    const { min, max } = this.props;
+    const { min, max, currency, daysOfStay } = this.props;
 
-    const label = this.renderLabel();
     return (
-      <ButtonPopup
-        buttonTitle={<Translation id="hotels_search.filter.price_popup.save" />}
-        onSave={this.onSave}
-        onClose={this.props.onClose}
-        isVisible={this.props.isVisible}
-      >
-        <Text>
-          <Translation id="hotels_search.filter.price_popup.title" />
-          <Translation passThrough=" " />
-          {label}
-        </Text>
-        <Slider
-          startValue={start}
-          endValue={end}
-          min={min}
-          max={max}
-          onChange={this.handlePriceChanged}
-        />
-      </ButtonPopup>
+      <SafeAreaView>
+        <ButtonPopup
+          buttonTitle={
+            <Translation id="hotels_search.filter.price_popup.save" />
+          }
+          buttonCloseTitle={
+            <Translation id="hotels_search.filter.hotel_facilities_popup.close" />
+          }
+          onSave={this.onSave}
+          onClose={this.props.onClose}
+          isVisible={this.props.isVisible}
+        >
+          <Text style={styles.title}>
+            <Translation id="hotels_search.filter.price_popup.title" />
+            <Translation passThrough=" " />
+            <Text style={styles.subtitle}>
+              <Translation id="hotels_search.filter.price_popup.subtitle" />
+            </Text>
+          </Text>
+          <SliderLabels
+            max={max}
+            min={min}
+            startLabel={
+              <Translation
+                id="hotels_search.filter.price_popup.price_label"
+                values={{
+                  amount: start * daysOfStay,
+                  currency: currency,
+                }}
+              />
+            }
+            startValue={start}
+            endLabel={
+              <Translation
+                id="hotels_search.filter.price_popup.price_label"
+                values={{
+                  amount: end * daysOfStay,
+                  currency: currency,
+                }}
+              />
+            }
+            endValue={end}
+          />
+          <Slider
+            startValue={start}
+            endValue={end}
+            min={min}
+            max={max}
+            onChange={this.handlePriceChanged}
+          />
+        </ButtonPopup>
+      </SafeAreaView>
     );
   }
 }
+
+const styles = StyleSheet.create({
+  title: {
+    color: defaultTokens.colorHeading,
+    fontSize: 16,
+    fontWeight: '500',
+    paddingTop: 15,
+    paddingBottom: 10,
+  },
+  subtitle: {
+    fontSize: 14,
+    fontWeight: '200',
+    color: defaultTokens.colorTextSecondary,
+  },
+});
diff --git a/app/hotels/src/filter/score/ScorePopup.js b/app/hotels/src/filter/score/ScorePopup.js
index af369373..b2ec0e4d 100644
--- a/app/hotels/src/filter/score/ScorePopup.js
+++ b/app/hotels/src/filter/score/ScorePopup.js
@@ -1,8 +1,16 @@
 // @flow
 
 import * as React from 'react';
-import { Text, ButtonPopup, Slider } from '@kiwicom/mobile-shared';
+import {
+  Text,
+  ButtonPopup,
+  Slider,
+  StyleSheet,
+  SliderLabels,
+} from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
+import { SafeAreaView } from 'react-navigation';
 
 type Props = {|
   onClose: () => void,
@@ -48,33 +56,50 @@ export default class ScorePopup extends React.Component<Props, State> {
       <Translation key="8" id="hotels_search.filter.score_filter.rating.8" />,
       <Translation key="9" id="hotels_search.filter.score_filter.rating.9" />,
     ];
-    return (
-      <Text>
-        <Translation id="hotels_search.filter.score_popup.title" />
-        <Translation passThrough=" " />
-        {labels[sliderValue]}
-      </Text>
-    );
+    return labels[sliderValue];
   };
 
   convertSliderValueToScore = (value: number) =>
     value ? value + SLIDER_SHIFT : null;
 
   render = () => (
-    <ButtonPopup
-      buttonTitle={<Translation id="hotels_search.filter.score_popup.save" />}
-      onSave={this.onSave}
-      onClose={this.props.onClose}
-      isVisible={this.props.isVisible}
-    >
-      <Text>{this.renderLabel(this.state.sliderValue)}</Text>
-      <Slider
-        startValue={this.state.sliderValue}
-        min={0}
-        max={4}
-        onChange={this.handleScoreChanged}
-        snapped={true}
-      />
-    </ButtonPopup>
+    <SafeAreaView>
+      <ButtonPopup
+        buttonTitle={<Translation id="hotels_search.filter.score_popup.save" />}
+        buttonCloseTitle={
+          <Translation id="hotels_search.filter.hotel_facilities_popup.close" />
+        }
+        onSave={this.onSave}
+        onClose={this.props.onClose}
+        isVisible={this.props.isVisible}
+      >
+        <Text style={styles.title}>
+          <Translation id="hotels_search.filter.score_filter.rating" />
+        </Text>
+        <SliderLabels
+          max={4}
+          min={0}
+          startLabel={this.renderLabel(this.state.sliderValue)}
+          startValue={this.state.sliderValue}
+        />
+        <Slider
+          startValue={this.state.sliderValue}
+          min={0}
+          max={4}
+          onChange={this.handleScoreChanged}
+          snapped={true}
+        />
+      </ButtonPopup>
+    </SafeAreaView>
   );
 }
+
+const styles = StyleSheet.create({
+  title: {
+    color: defaultTokens.colorHeading,
+    fontSize: 16,
+    fontWeight: '500',
+    paddingTop: 15,
+    paddingBottom: 10,
+  },
+});
diff --git a/app/hotels/src/filter/stars/StarsPopup.js b/app/hotels/src/filter/stars/StarsPopup.js
index d5dce8dc..79acd18e 100644
--- a/app/hotels/src/filter/stars/StarsPopup.js
+++ b/app/hotels/src/filter/stars/StarsPopup.js
@@ -7,8 +7,11 @@ import {
   Checkbox,
   Text,
 } from '@kiwicom/mobile-shared';
+import { View } from 'react-native';
 import { Translation } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
+import { SeparatorTrimmed } from '@kiwicom/mobile-navigation';
+import { SafeAreaView } from 'react-navigation';
 
 import StarsCheckbox from './StarsCheckbox';
 
@@ -34,7 +37,7 @@ export default class StarsPopup extends React.Component<Props, State> {
   handleCheckboxOnPress = (option: number) => () =>
     this.setState(state => {
       let stars = [...state.stars];
-      if (stars.indexOf(option) >= 0) {
+      if (stars.includes(option)) {
         stars = stars.filter(star => star !== option);
       } else {
         stars.push(option);
@@ -47,20 +50,29 @@ export default class StarsPopup extends React.Component<Props, State> {
   renderCheckboxes = (stars: number[]) => {
     const checkboxes = [];
     for (let i = 5; i > 0; i--) {
+      const isStarsRowChecked = stars.includes(i);
       checkboxes.push(
-        <StarsCheckbox
-          key={i}
-          stars={i}
-          isChecked={stars.indexOf(i) >= 0}
-          style={styles.delimiter}
-          onPress={this.handleCheckboxOnPress(i)}
-        />,
+        <React.Fragment key={i}>
+          <StarsCheckbox
+            stars={i}
+            isChecked={isStarsRowChecked}
+            onPress={this.handleCheckboxOnPress(i)}
+          />
+          <View style={styles.separatorEnd}>
+            <SeparatorTrimmed
+              gapSizeStart={0}
+              color={defaultTokens.paletteInkLighter}
+              height={0.5}
+            />
+          </View>
+        </React.Fragment>,
       );
     }
+    const isUnratedChecked = stars.includes(0);
     checkboxes.push(
       <Checkbox
         key={0}
-        isChecked={stars.indexOf(0) >= 0}
+        isChecked={isUnratedChecked}
         onPress={this.handleCheckboxOnPress(0)}
       >
         <Text style={styles.unrated}>
@@ -74,33 +86,41 @@ export default class StarsPopup extends React.Component<Props, State> {
   render() {
     const { stars } = this.state;
     return (
-      <ButtonPopup
-        buttonTitle={<Translation id="hotels_search.filter.stars_popup.save" />}
-        onSave={this.onSave}
-        onClose={this.props.onClose}
-        isVisible={this.props.isVisible}
-      >
-        <Text style={styles.title}>
-          <Translation id="hotels_search.filter.stars_popup.title" />
-        </Text>
-        {this.renderCheckboxes(stars)}
-      </ButtonPopup>
+      <SafeAreaView>
+        <ButtonPopup
+          buttonTitle={
+            <Translation id="hotels_search.filter.stars_popup.save" />
+          }
+          buttonCloseTitle={
+            <Translation id="hotels_search.filter.hotel_facilities_popup.close" />
+          }
+          onSave={this.onSave}
+          onClose={this.props.onClose}
+          isVisible={this.props.isVisible}
+        >
+          <Text style={styles.title}>
+            <Translation id="hotels_search.filter.stars_popup.title" />
+          </Text>
+          {this.renderCheckboxes(stars)}
+        </ButtonPopup>
+      </SafeAreaView>
     );
   }
 }
 
 const styles = StyleSheet.create({
   title: {
-    color: defaultTokens.colorTextSecondary,
-    paddingBottom: 5,
-    fontSize: 12,
-  },
-  delimiter: {
-    borderBottomWidth: 0.5,
-    borderBottomColor: defaultTokens.paletteCloudLight,
+    color: defaultTokens.colorHeading,
+    fontSize: 16,
+    fontWeight: '500',
+    paddingTop: 15,
+    paddingBottom: 10,
   },
   unrated: {
     marginStart: 3,
     fontSize: 16,
   },
+  separatorEnd: {
+    marginEnd: -15,
+  },
 });
diff --git a/packages/localization/src/vocabularies/Hotels.js b/packages/localization/src/vocabularies/Hotels.js
index cad849c2..582f5c02 100644
--- a/packages/localization/src/vocabularies/Hotels.js
+++ b/packages/localization/src/vocabularies/Hotels.js
@@ -39,11 +39,14 @@ export default {
   'hotels_search.filter.hotel_facilities_filter.title': 'amenities',
   'hotels_search.filter.hotel_facilities_filter.wifi': 'Wi-Fi',
   'hotels_search.filter.hotel_facilities_popup.save': 'Save',
+  'hotels_search.filter.hotel_facilities_popup.close': 'Close',
   'hotels_search.filter.hotel_facilities_popup.title': 'Hotel facilities',
   'hotels_search.filter.price_filter.price': 'price',
   'hotels_search.filter.price_popup.save': 'Save',
-  'hotels_search.filter.price_popup.title': 'Price per night:',
-  'hotels_search.filter.score_filter.rating': 'rating',
+  'hotels_search.filter.price_popup.title': 'Price range',
+  'hotels_search.filter.price_popup.subtitle': 'per stay',
+  'hotels_search.filter.price_popup.price_label': '__1_amount__ __2_currency__',
+  'hotels_search.filter.score_filter.rating': 'Rating',
   'hotels_search.filter.score_filter.rating.6': 'pleasant 6+',
   'hotels_search.filter.score_filter.rating.7': 'good 7+',
   'hotels_search.filter.score_filter.rating.8': 'very good 8+',
diff --git a/packages/navigation/src/Separators.js b/packages/navigation/src/Separators.js
index 57b77de7..7442deb4 100644
--- a/packages/navigation/src/Separators.js
+++ b/packages/navigation/src/Separators.js
@@ -7,6 +7,7 @@ import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 type SeparatorFullWidthType = {|
   +color?: string,
+  +height?: number,
 |};
 
 /**
@@ -21,6 +22,7 @@ export function SeparatorFullWidth(props: SeparatorFullWidthType) {
   if (props.color) {
     style = {
       backgroundColor: props.color,
+      height: props.height ? props.height : 1,
     };
   }
   return <View style={[styleSheet.separator, style]} />;
@@ -30,6 +32,7 @@ type SeparatorTrimmedType = {|
   +gapSizeStart: number,
   +gapSizeEnd?: number,
   +color?: string,
+  +height?: number,
 |};
 
 /**
@@ -40,31 +43,30 @@ type SeparatorTrimmedType = {|
  * |                           |
  */
 export function SeparatorTrimmed(props: SeparatorTrimmedType) {
-  const { gapSizeStart, gapSizeEnd, color } = props;
+  const { gapSizeStart, gapSizeEnd, color, height } = props;
   return (
     <View style={styleSheet.row}>
-      <View style={[styleSheet.gap, { width: gapSizeStart }]} />
-      <SeparatorFullWidth color={color} />
-      <View style={[styleSheet.gap, { width: gapSizeEnd }]} />
+      <View style={[styleSheet.gap, { width: gapSizeStart, height }]} />
+      <SeparatorFullWidth color={color} height={height} />
+      <View style={[styleSheet.gap, { width: gapSizeEnd, height }]} />
     </View>
   );
 }
 
 SeparatorTrimmed.defaultProps = {
   gapSizeEnd: 0,
+  height: 1,
 };
 
 const styleSheet = StyleSheet.create({
   separator: {
     flex: 1,
-    height: 1,
     backgroundColor: defaultTokens.paletteCloudLight,
   },
   row: {
     flexDirection: 'row',
   },
   gap: {
-    height: 1,
     backgroundColor: defaultTokens.paletteWhite,
   },
 });
diff --git a/packages/shared/index.js b/packages/shared/index.js
index aa4f2b1a..fc4a5e6f 100644
--- a/packages/shared/index.js
+++ b/packages/shared/index.js
@@ -49,6 +49,8 @@ export { default as Stars } from './src/Stars';
 export { default as Text } from './src/Text';
 export { default as Duration } from './src/Duration';
 
+export { default as SliderLabels } from './src/SliderLabels';
+
 /**
  * Layout components:
  *  - views
diff --git a/packages/shared/src/SliderLabels.js b/packages/shared/src/SliderLabels.js
new file mode 100644
index 00000000..78cd010c
--- /dev/null
+++ b/packages/shared/src/SliderLabels.js
@@ -0,0 +1,208 @@
+// @flow
+
+import * as React from 'react';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
+import { View } from 'react-native';
+import type { OnLayout } from '@kiwicom/mobile-shared';
+import { type TranslationType } from '@kiwicom/mobile-localization';
+
+import Text from './Text';
+import StyleSheet from './PlatformStyleSheet';
+
+type Props = {|
+  +startLabel: TranslationType,
+  +startValue: number,
+  +endLabel?: TranslationType,
+  +endValue?: number,
+  +max: number,
+  +min: number,
+|};
+
+type State = {|
+  width: number,
+  labelStartWidth: number,
+  labelStartAtMax: boolean,
+  labelEndWidth: number,
+  paddingLeft: number,
+  paddingRight: number,
+|};
+
+export default class SliderLabels extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      width: 0,
+      labelStartWidth: 0,
+      labelStartAtMax: false,
+      labelEndWidth: 0,
+      paddingLeft: 0,
+      paddingRight: 0,
+    };
+  }
+
+  componentDidMount = () => {
+    if (this.props.endValue) {
+      requestAnimationFrame(this.setPaddingForTwoLabels);
+    } else {
+      requestAnimationFrame(this.setPaddingForOneLabel);
+    }
+  };
+
+  getMaxPadding = (gap: number): number => {
+    return Math.floor(
+      this.state.width -
+        this.state.labelStartWidth -
+        this.state.labelEndWidth -
+        gap,
+    );
+  };
+
+  calculateMarkerStartOffset = (): number => {
+    const { min, max, startValue } = this.props;
+
+    let val;
+    if (startValue > max) {
+      val = max;
+    } else if (startValue < min) {
+      val = min;
+    } else {
+      val = startValue;
+    }
+
+    return Math.round((val / (max - min)) * this.state.width);
+  };
+
+  calculateMarkerEndOffset = (): number => {
+    const { min, max, endValue } = this.props;
+
+    if (!endValue) {
+      return 0;
+    }
+
+    let val;
+    if (endValue > max) {
+      val = max;
+    } else if (endValue < min) {
+      val = min;
+    } else {
+      val = endValue;
+    }
+
+    const w = (val / (max - min)) * this.state.width;
+    return Math.round(this.state.width - w);
+  };
+
+  getStartLabelOffset = (): number => {
+    const startMarkerOffset = this.calculateMarkerStartOffset();
+    const startLabelHalf = this.state.labelStartWidth / 2;
+
+    return startMarkerOffset < startLabelHalf
+      ? 0
+      : startMarkerOffset - startLabelHalf;
+  };
+
+  isBelowMaxPadding = (value: number, gap: number = 0): boolean => {
+    const maxPadding = this.getMaxPadding(gap);
+    return value + gap < maxPadding;
+  };
+
+  setPaddingForTwoLabels = (): void => {
+    const startLabelOffset = this.getStartLabelOffset();
+    const endMarkerOffset = this.calculateMarkerEndOffset();
+    const endLabelHalf = this.state.labelEndWidth / 2;
+    const endLabelOffset =
+      endMarkerOffset < endLabelHalf ? 0 : endMarkerOffset - endLabelHalf;
+
+    const isBelowMaxPadding = this.isBelowMaxPadding(
+      startLabelOffset + endLabelOffset,
+      10,
+    );
+
+    const hasOffsetChanged =
+      this.state.paddingLeft !== startLabelOffset ||
+      this.state.paddingRight !== endLabelOffset;
+
+    if (isBelowMaxPadding && hasOffsetChanged) {
+      this.setState({
+        paddingLeft: startLabelOffset,
+        paddingRight: endLabelOffset,
+      });
+    }
+
+    requestAnimationFrame(this.setPaddingForTwoLabels);
+  };
+
+  setPaddingForOneLabel = (): void => {
+    const startLabelOffset = this.getStartLabelOffset();
+    const isBelowMaxPadding = this.isBelowMaxPadding(startLabelOffset);
+    const hasOffsetChanged = this.state.paddingLeft !== startLabelOffset;
+
+    if (isBelowMaxPadding) {
+      if (hasOffsetChanged) {
+        this.setState({
+          paddingLeft: startLabelOffset,
+        });
+      }
+
+      if (this.state.labelStartAtMax) {
+        this.setState({ labelStartAtMax: false });
+      }
+    } else if (this.state.labelStartAtMax === false) {
+      this.setState({ labelStartAtMax: true });
+    }
+
+    requestAnimationFrame(this.setPaddingForOneLabel);
+  };
+
+  saveFullWidth = (e: OnLayout) => {
+    this.setState({ width: Math.floor(e.nativeEvent.layout.width) });
+  };
+
+  saveLabelStartWidth = (e: OnLayout) => {
+    this.setState({ labelStartWidth: Math.floor(e.nativeEvent.layout.width) });
+  };
+
+  saveLabelEndWidth = (e: OnLayout) => {
+    this.setState({ labelEndWidth: Math.floor(e.nativeEvent.layout.width) });
+  };
+
+  render = () => {
+    return (
+      <View
+        style={[
+          styles.sliderLabels,
+          {
+            paddingLeft: this.state.paddingLeft,
+            paddingRight: this.state.paddingRight,
+            justifyContent: this.state.labelStartAtMax
+              ? 'flex-end'
+              : 'space-between',
+          },
+        ]}
+        onLayout={this.saveFullWidth}
+      >
+        <View onLayout={this.saveLabelStartWidth}>
+          <Text style={styles.label}>{this.props.startLabel}</Text>
+        </View>
+        {this.props.endLabel && (
+          <View onLayout={this.saveLabelEndWidth}>
+            <Text style={styles.label}>{this.props.endLabel}</Text>
+          </View>
+        )}
+      </View>
+    );
+  };
+}
+
+const styles = StyleSheet.create({
+  sliderLabels: {
+    width: '100%',
+    flexDirection: 'row',
+    marginTop: 10,
+    marginBottom: 5,
+  },
+  label: {
+    fontSize: 14,
+    color: defaultTokens.paletteBlueNormal,
+  },
+});
diff --git a/packages/shared/src/buttons/Button.js b/packages/shared/src/buttons/Button.js
index 9585779e..c13cd11b 100644
--- a/packages/shared/src/buttons/Button.js
+++ b/packages/shared/src/buttons/Button.js
@@ -12,6 +12,7 @@ type Props = {|
   +onPress: () => void,
   +style?: StylePropType,
   +disabled?: boolean,
+  +type: 'primary' | 'secondary',
 |};
 
 /**
@@ -26,7 +27,11 @@ export default function Button(props: Props) {
     <Touchable
       disabled={!props.onPress || props.disabled}
       onPress={onPressHandler}
-      style={[styleSheet.buttonWrapper, props.style]}
+      style={[
+        styleSheet.buttonWrapper,
+        props.type === 'secondary' ? styleSheet.secondary : styleSheet.primary,
+        props.style,
+      ]}
       accessibilityComponentType="button"
     >
       {props.children}
@@ -36,6 +41,7 @@ export default function Button(props: Props) {
 
 Button.defaultProps = {
   disabled: false,
+  type: 'primary',
 };
 
 const styleSheet = StyleSheet.create({
@@ -44,14 +50,13 @@ const styleSheet = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     paddingHorizontal: 11,
+    height: 44,
+    borderRadius: 6,
+  },
+  primary: {
     backgroundColor: defaultTokens.paletteProductNormal,
-    android: {
-      height: 40,
-      borderRadius: 2,
-    },
-    ios: {
-      height: 44,
-      borderRadius: 6,
-    },
+  },
+  secondary: {
+    backgroundColor: defaultTokens.backgroundButtonSecondary,
   },
 });
diff --git a/packages/shared/src/buttons/TextButton.js b/packages/shared/src/buttons/TextButton.js
index a784b143..a2cbc1bd 100644
--- a/packages/shared/src/buttons/TextButton.js
+++ b/packages/shared/src/buttons/TextButton.js
@@ -12,6 +12,7 @@ type Props = {|
   +title: TranslationType,
   +onPress: () => void,
   +disabled: boolean,
+  +type: 'primary' | 'secondary',
 |};
 
 /**
@@ -22,12 +23,22 @@ export default function TextButton(props: Props) {
     <Button
       onPress={props.onPress}
       disabled={props.disabled}
-      style={props.disabled && styleSheet.buttonDisabled}
+      style={
+        props.disabled &&
+        (props.type === 'secondary'
+          ? styleSheet.buttonSecondaryDisabled
+          : styleSheet.buttonPrimaryDisabled)
+      }
+      type={props.type}
     >
       <ButtonTitle
         style={[
-          styleSheet.buttonText,
-          props.disabled && styleSheet.buttonTextDisabled,
+          props.type === 'secondary'
+            ? styleSheet.buttonTextSecondary
+            : styleSheet.buttonTextPrimary,
+          props.disabled &&
+            props.type === 'primary' &&
+            styleSheet.buttonTextPrimaryDisabled,
         ]}
         text={props.title}
       />
@@ -37,16 +48,23 @@ export default function TextButton(props: Props) {
 
 TextButton.defaultProps = {
   disabled: false,
+  type: 'primary',
 };
 
 const styleSheet = StyleSheet.create({
-  buttonText: {
+  buttonTextPrimary: {
     color: defaultTokens.paletteWhite,
   },
-  buttonDisabled: {
+  buttonTextSecondary: {
+    color: defaultTokens.colorTextButtonSecondary,
+  },
+  buttonPrimaryDisabled: {
     backgroundColor: defaultTokens.paletteCloudNormal,
   },
-  buttonTextDisabled: {
+  buttonSecondaryDisabled: {
+    opacity: 0.3,
+  },
+  buttonTextPrimaryDisabled: {
     color: defaultTokens.paletteInkDark,
   },
 });
diff --git a/packages/shared/src/forms/Checkbox.js b/packages/shared/src/forms/Checkbox.js
index 31eed2ac..9afad4c6 100644
--- a/packages/shared/src/forms/Checkbox.js
+++ b/packages/shared/src/forms/Checkbox.js
@@ -3,10 +3,10 @@
 import * as React from 'react';
 import { View, Platform } from 'react-native';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
+import { TextIcon } from '@kiwicom/mobile-shared';
 
 import TouchableWithoutFeedback from '../TouchableWithoutFeedback';
 import StyleSheet from '../PlatformStyleSheet';
-import Icon from '../icons/Icon';
 import type { StylePropType } from '../../types/Styles';
 
 type Props = {|
@@ -17,22 +17,21 @@ type Props = {|
 |};
 
 export default function Checkbox(props: Props) {
+  const icon = (
+    <TextIcon
+      orbit={true}
+      code={Platform.OS === 'ios' ? 'S' : '\ue013'}
+      style={styles.iconStyle}
+    />
+  );
+
   return (
     <TouchableWithoutFeedback onPress={props.onPress}>
       <View style={[styles.wrapper, props.style]}>
         <View style={styles.label}>{props.children}</View>
-        {props.isChecked && (
-          <View style={styles.check}>
-            <Icon
-              name="check"
-              size={Platform.select({
-                android: 25, // solves checkbox row jumping on Android devices
-                ios: 26,
-              })}
-              color={defaultTokens.paletteProductNormal}
-            />
-          </View>
-        )}
+        <View style={styles.checkWrapper}>
+          {props.isChecked ? icon : <View style={styles.notChecked} />}
+        </View>
       </View>
     </TouchableWithoutFeedback>
   );
@@ -49,9 +48,31 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     height: 26,
   },
-  check: {
-    flex: 1,
+  checkWrapper: {
     justifyContent: 'center',
     alignItems: 'flex-end',
   },
+  iconStyle: {
+    color: defaultTokens.paletteProductNormal,
+    ios: {
+      width: 26,
+      height: 26,
+      fontSize: 28,
+    },
+    android: {
+      width: 24,
+      height: 24,
+      borderWidth: 1,
+      borderColor: defaultTokens.paletteProductNormal,
+      borderRadius: 100,
+      fontSize: 24,
+    },
+  },
+  notChecked: {
+    width: 24,
+    height: 24,
+    borderRadius: 100,
+    borderWidth: 1,
+    borderColor: defaultTokens.paletteInkLighter,
+  },
 });
diff --git a/packages/shared/src/forms/Slider.js b/packages/shared/src/forms/Slider.js
index 2636b8bb..4e0bab36 100644
--- a/packages/shared/src/forms/Slider.js
+++ b/packages/shared/src/forms/Slider.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import type { OnLayout } from '@kiwicom/mobile-shared';
+import { type OnLayout } from '@kiwicom/mobile-shared';
 import MultiSlider from '@ptomasroos/react-native-multi-slider';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
@@ -75,7 +75,7 @@ export default class Slider extends React.Component<Props, State> {
           snapped={this.props.snapped}
           allowOverlap={true}
           selectedStyle={styles.selected}
-          sliderLength={this.state.width - 2 * SLIDER_PADDING}
+          sliderLength={this.state.width}
           touchDimensions={{
             height: 30,
             width: 30,
@@ -96,18 +96,16 @@ export default class Slider extends React.Component<Props, State> {
   }
 }
 
-const SLIDER_PADDING = 20;
-
 const styles = StyleSheet.create({
   selected: {
-    backgroundColor: defaultTokens.paletteProductNormal,
+    backgroundColor: defaultTokens.paletteBlueNormal,
   },
   unselected: {
-    backgroundColor: defaultTokens.paletteInkLight,
+    backgroundColor: defaultTokens.paletteInkLighter,
   },
   track: {
     borderRadius: 5,
-    height: 2,
+    height: 4,
   },
   marker: {
     height: 30,
@@ -115,14 +113,14 @@ const styles = StyleSheet.create({
     borderRadius: 15,
     backgroundColor: defaultTokens.paletteWhite,
     borderWidth: 1,
-    borderColor: defaultTokens.paletteInkLight,
+    borderColor: defaultTokens.paletteInkLighter,
     shadowColor: defaultTokens.paletteInkDark,
     shadowOffset: {
       width: 0,
-      height: 3,
+      height: 2,
     },
-    shadowOpacity: 0.3,
-    shadowRadius: 2,
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
     margin: 3, // necessary to see the Android elevation properly
     android: {
       elevation: 1,
@@ -131,7 +129,4 @@ const styles = StyleSheet.create({
   container: {
     justifyContent: 'center',
   },
-  sliderWrapper: {
-    paddingHorizontal: SLIDER_PADDING,
-  },
 });
diff --git a/packages/shared/src/popup/ButtonPopup.js b/packages/shared/src/popup/ButtonPopup.js
index be0f51e3..bdd5833a 100644
--- a/packages/shared/src/popup/ButtonPopup.js
+++ b/packages/shared/src/popup/ButtonPopup.js
@@ -10,6 +10,7 @@ import StyleSheet from '../PlatformStyleSheet';
 
 type Props = {|
   +buttonTitle: TranslationType,
+  +buttonCloseTitle: TranslationType,
   +children: React.Node,
   +isVisible: boolean,
   +onClose: Function,
@@ -18,7 +19,8 @@ type Props = {|
   +testID?: string,
 |};
 
-const POPUP_PADDING = 20;
+const POPUP_PADDING = 15;
+const POPUP_BUTTONS_MARGIN = 10;
 
 /**
  * Simple popup with confirmation button at the bottom.
@@ -35,8 +37,21 @@ export default class ButtonPopup extends React.Component<Props> {
       >
         {this.props.children}
       </View>
-      <View style={styles.button}>
-        <TextButton title={this.props.buttonTitle} onPress={this.onSave} />
+      <View style={styles.buttonsWrapper}>
+        <View style={[styles.button, styles.buttonFirst]}>
+          <TextButton
+            title={this.props.buttonCloseTitle}
+            onPress={this.onClose}
+            type="secondary"
+          />
+        </View>
+        <View style={styles.button}>
+          <TextButton
+            title={this.props.buttonTitle}
+            onPress={this.onSave}
+            type="primary"
+          />
+        </View>
       </View>
     </Popup>
   );
@@ -47,8 +62,15 @@ const styles = StyleSheet.create({
     padding: POPUP_PADDING,
     paddingBottom: 0,
   },
+  buttonsWrapper: {
+    flexDirection: 'row',
+  },
   button: {
-    marginTop: 20,
-    margin: POPUP_PADDING,
+    margin: POPUP_BUTTONS_MARGIN,
+    marginTop: 15,
+    flex: 1,
+  },
+  buttonFirst: {
+    marginEnd: 0,
   },
 });
diff --git a/packages/shared/src/popup/Popup.js b/packages/shared/src/popup/Popup.js
index af2c1b56..1b185679 100644
--- a/packages/shared/src/popup/Popup.js
+++ b/packages/shared/src/popup/Popup.js
@@ -16,13 +16,32 @@ type Props = {|
 |};
 
 export default class Popup extends React.Component<Props> {
+  scrollView: ?React$ElementRef<ScrollView>;
+
+  constructor() {
+    super();
+
+    this.scrollView = null;
+  }
+
   onClose = () => this.props.onClose();
 
+  scrollToEnd = () => {
+    if (this.scrollView) {
+      this.scrollView.scrollToEnd({ animated: true });
+    }
+  };
+
+  saveRef = (ref: React$ElementRef<ScrollView>): void =>
+    (this.scrollView = ref);
+
   render = () => {
     const modalChild = (
       <ScrollView
         contentContainerStyle={styles.content}
         alwaysBounceVertical={false}
+        ref={this.saveRef}
+        onContentSizeChange={this.scrollToEnd}
       >
         <SafeAreaView style={styles.safeArea}>
           {this.props.children}
@@ -64,7 +83,9 @@ const styles = StyleSheet.create({
     backgroundColor: defaultTokens.paletteWhite,
     alignSelf: 'center',
     width: '100%',
-    maxHeight: '75%',
+    maxHeight: '95%',
+    borderTopStartRadius: 8,
+    borderTopEndRadius: 8,
   },
   wideContentContainer: {
     width: '75%',


Test patch:
diff --git a/app/MMB/src/scenes/passenger/__tests__/__snapshots__/Passenger.test.js.snap b/app/MMB/src/scenes/passenger/__tests__/__snapshots__/Passenger.test.js.snap
index 1295c498..31a59a36 100644
--- a/app/MMB/src/scenes/passenger/__tests__/__snapshots__/Passenger.test.js.snap
+++ b/app/MMB/src/scenes/passenger/__tests__/__snapshots__/Passenger.test.js.snap
@@ -13,6 +13,7 @@ exports[`renders 1`] = `
       <SeparatorTrimmed
         gapSizeEnd={15}
         gapSizeStart={15}
+        height={1}
       />
     }
   >
diff --git a/app/hotels/src/filter/stars/__tests__/__snapshots__/StarsPopup.test.js.snap b/app/hotels/src/filter/stars/__tests__/__snapshots__/StarsPopup.test.js.snap
index c3bf1f87..6012848d 100644
--- a/app/hotels/src/filter/stars/__tests__/__snapshots__/StarsPopup.test.js.snap
+++ b/app/hotels/src/filter/stars/__tests__/__snapshots__/StarsPopup.test.js.snap
@@ -1,100 +1,159 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`StarsPopup should render popup 1`] = `
-<ButtonPopup
-  buttonTitle={
-    <Translation
-      id="hotels_search.filter.stars_popup.save"
-    />
-  }
-  isVisible={true}
-  onClose={[Function]}
-  onSave={[Function]}
->
-  <Text
-    style={
-      Object {
-        "color": "#7f91a8",
-        "fontSize": 12,
-        "paddingBottom": 5,
-      }
-    }
-  >
-    <Translation
-      id="hotels_search.filter.stars_popup.title"
-    />
-  </Text>
-  <StarsCheckbox
-    isChecked={true}
-    onPress={[Function]}
-    stars={5}
-    style={
-      Object {
-        "borderBottomColor": "#f5f7f9",
-        "borderBottomWidth": 0.5,
-      }
-    }
-  />
-  <StarsCheckbox
-    isChecked={false}
-    onPress={[Function]}
-    stars={4}
-    style={
-      Object {
-        "borderBottomColor": "#f5f7f9",
-        "borderBottomWidth": 0.5,
-      }
-    }
-  />
-  <StarsCheckbox
-    isChecked={false}
-    onPress={[Function]}
-    stars={3}
-    style={
-      Object {
-        "borderBottomColor": "#f5f7f9",
-        "borderBottomWidth": 0.5,
-      }
-    }
-  />
-  <StarsCheckbox
-    isChecked={false}
-    onPress={[Function]}
-    stars={2}
-    style={
-      Object {
-        "borderBottomColor": "#f5f7f9",
-        "borderBottomWidth": 0.5,
-      }
+<withOrientation>
+  <ButtonPopup
+    buttonCloseTitle={
+      <Translation
+        id="hotels_search.filter.hotel_facilities_popup.close"
+      />
     }
-  />
-  <StarsCheckbox
-    isChecked={false}
-    onPress={[Function]}
-    stars={1}
-    style={
-      Object {
-        "borderBottomColor": "#f5f7f9",
-        "borderBottomWidth": 0.5,
-      }
+    buttonTitle={
+      <Translation
+        id="hotels_search.filter.stars_popup.save"
+      />
     }
-  />
-  <Checkbox
-    isChecked={false}
-    onPress={[Function]}
+    isVisible={true}
+    onClose={[Function]}
+    onSave={[Function]}
   >
     <Text
       style={
         Object {
+          "color": "#171b1e",
           "fontSize": 16,
-          "marginStart": 3,
+          "fontWeight": "500",
+          "paddingBottom": 10,
+          "paddingTop": 15,
         }
       }
     >
       <Translation
-        id="hotels_search.filter.stars_popup.unrated"
+        id="hotels_search.filter.stars_popup.title"
       />
     </Text>
-  </Checkbox>
-</ButtonPopup>
+    <React.Fragment>
+      <StarsCheckbox
+        isChecked={true}
+        onPress={[Function]}
+        stars={5}
+      />
+      <Component
+        style={
+          Object {
+            "marginEnd": -15,
+          }
+        }
+      >
+        <SeparatorTrimmed
+          color="#bac7d5"
+          gapSizeEnd={0}
+          gapSizeStart={0}
+          height={0.5}
+        />
+      </Component>
+    </React.Fragment>
+    <React.Fragment>
+      <StarsCheckbox
+        isChecked={false}
+        onPress={[Function]}
+        stars={4}
+      />
+      <Component
+        style={
+          Object {
+            "marginEnd": -15,
+          }
+        }
+      >
+        <SeparatorTrimmed
+          color="#bac7d5"
+          gapSizeEnd={0}
+          gapSizeStart={0}
+          height={0.5}
+        />
+      </Component>
+    </React.Fragment>
+    <React.Fragment>
+      <StarsCheckbox
+        isChecked={false}
+        onPress={[Function]}
+        stars={3}
+      />
+      <Component
+        style={
+          Object {
+            "marginEnd": -15,
+          }
+        }
+      >
+        <SeparatorTrimmed
+          color="#bac7d5"
+          gapSizeEnd={0}
+          gapSizeStart={0}
+          height={0.5}
+        />
+      </Component>
+    </React.Fragment>
+    <React.Fragment>
+      <StarsCheckbox
+        isChecked={false}
+        onPress={[Function]}
+        stars={2}
+      />
+      <Component
+        style={
+          Object {
+            "marginEnd": -15,
+          }
+        }
+      >
+        <SeparatorTrimmed
+          color="#bac7d5"
+          gapSizeEnd={0}
+          gapSizeStart={0}
+          height={0.5}
+        />
+      </Component>
+    </React.Fragment>
+    <React.Fragment>
+      <StarsCheckbox
+        isChecked={false}
+        onPress={[Function]}
+        stars={1}
+      />
+      <Component
+        style={
+          Object {
+            "marginEnd": -15,
+          }
+        }
+      >
+        <SeparatorTrimmed
+          color="#bac7d5"
+          gapSizeEnd={0}
+          gapSizeStart={0}
+          height={0.5}
+        />
+      </Component>
+    </React.Fragment>
+    <Checkbox
+      isChecked={false}
+      onPress={[Function]}
+    >
+      <Text
+        style={
+          Object {
+            "fontSize": 16,
+            "marginStart": 3,
+          }
+        }
+      >
+        <Translation
+          id="hotels_search.filter.stars_popup.unrated"
+        />
+      </Text>
+    </Checkbox>
+  </ButtonPopup>
+</withOrientation>
 `;
diff --git a/app/hotels/src/singleHotel/bookNow/__tests__/__snapshots__/BookNow.test.js.snap b/app/hotels/src/singleHotel/bookNow/__tests__/__snapshots__/BookNow.test.js.snap
index 07de415a..658a7aa4 100644
--- a/app/hotels/src/singleHotel/bookNow/__tests__/__snapshots__/BookNow.test.js.snap
+++ b/app/hotels/src/singleHotel/bookNow/__tests__/__snapshots__/BookNow.test.js.snap
@@ -4,6 +4,7 @@ exports[`renders without crashing 1`] = `
 <Button
   disabled={false}
   onPress={[Function]}
+  type="primary"
 >
   <Text
     style={
@@ -25,6 +26,7 @@ exports[`renders without crashing with missing data 1`] = `
 <Button
   disabled={false}
   onPress={[Function]}
+  type="primary"
 >
   <Text
     style={
diff --git a/packages/shared/src/__tests__/SliderLabels.test.js b/packages/shared/src/__tests__/SliderLabels.test.js
new file mode 100644
index 00000000..a838665c
--- /dev/null
+++ b/packages/shared/src/__tests__/SliderLabels.test.js
@@ -0,0 +1,143 @@
+// @flow strict
+
+import * as React from 'react';
+import { PlaygroundRenderer } from '@kiwicom/mobile-playground';
+import { Translation } from '@kiwicom/mobile-localization';
+import renderer from 'react-test-renderer';
+
+import SliderLabels from '../SliderLabels';
+
+it('one label', () => {
+  PlaygroundRenderer.render(
+    <SliderLabels
+      startLabel={<Translation passThrough="label" />}
+      startValue={46}
+      max={1000}
+      min={1}
+    />,
+  );
+});
+
+it('two labels', () => {
+  PlaygroundRenderer.render(
+    <SliderLabels
+      startLabel={<Translation passThrough="start label" />}
+      startValue={46}
+      endLabel={<Translation passThrough="end label" />}
+      endValue={850}
+      max={1000}
+      min={1}
+    />,
+  );
+});
+
+const requestAF = global.requestAnimationFrame;
+beforeEach(async () => (global.requestAnimationFrame = jest.fn()));
+afterEach(() => (global.requestAnimationFrame = requestAF));
+
+it('startValue in the middle', () => {
+  const wrapper = renderer
+    .create(
+      <SliderLabels
+        max={5}
+        min={1}
+        startLabel={<Translation passThrough="label" />}
+        startValue={3}
+      />,
+    )
+    .getInstance();
+
+  wrapper.saveFullWidth({ nativeEvent: { layout: { width: 500 } } });
+  wrapper.saveLabelStartWidth({ nativeEvent: { layout: { width: 20 } } });
+  wrapper.saveLabelEndWidth({ nativeEvent: { layout: { width: 20 } } });
+
+  expect(wrapper.state.labelStartAtMax).toBe(false);
+  wrapper.setPaddingForOneLabel();
+  expect(wrapper.state.labelStartAtMax).toBe(false);
+});
+
+it('startValue reaches max value', () => {
+  const wrapper = renderer
+    .create(
+      <SliderLabels
+        max={5}
+        min={1}
+        startLabel={<Translation passThrough="label" />}
+        startValue={5}
+      />,
+    )
+    .getInstance();
+
+  wrapper.saveFullWidth({ nativeEvent: { layout: { width: 500 } } });
+  wrapper.saveLabelStartWidth({ nativeEvent: { layout: { width: 20 } } });
+
+  expect(wrapper.state.labelStartAtMax).toBe(false);
+  wrapper.setPaddingForOneLabel();
+  expect(wrapper.state.labelStartAtMax).toBe(true);
+});
+
+it('startValue goes beyond max value', () => {
+  const wrapper = renderer
+    .create(
+      <SliderLabels
+        max={5}
+        min={1}
+        startLabel={<Translation passThrough="label" />}
+        startValue={10}
+      />,
+    )
+    .getInstance();
+
+  wrapper.saveFullWidth({ nativeEvent: { layout: { width: 500 } } });
+  wrapper.saveLabelStartWidth({ nativeEvent: { layout: { width: 20 } } });
+
+  expect(wrapper.state.labelStartAtMax).toBe(false);
+  wrapper.setPaddingForOneLabel();
+  expect(wrapper.state.labelStartAtMax).toBe(true);
+});
+
+it('Both sides have padding', () => {
+  const wrapper = renderer
+    .create(
+      <SliderLabels
+        max={20}
+        min={1}
+        startLabel={<Translation passThrough="label" />}
+        startValue={8}
+        endLabel={<Translation passThrough="label" />}
+        endValue={16}
+      />,
+    )
+    .getInstance();
+
+  wrapper.saveFullWidth({ nativeEvent: { layout: { width: 500 } } });
+  wrapper.saveLabelStartWidth({ nativeEvent: { layout: { width: 20 } } });
+  wrapper.saveLabelEndWidth({ nativeEvent: { layout: { width: 20 } } });
+
+  wrapper.setPaddingForTwoLabels();
+  expect(wrapper.state.paddingLeft).not.toBe(0);
+  expect(wrapper.state.paddingRight).not.toBe(0);
+});
+
+it('No padding should be set', () => {
+  const wrapper = renderer
+    .create(
+      <SliderLabels
+        max={100}
+        min={1}
+        startLabel={<Translation passThrough="label" />}
+        startValue={1}
+        endLabel={<Translation passThrough="label" />}
+        endValue={100}
+      />,
+    )
+    .getInstance();
+
+  wrapper.saveFullWidth({ nativeEvent: { layout: { width: 500 } } });
+  wrapper.saveLabelStartWidth({ nativeEvent: { layout: { width: 20 } } });
+  wrapper.saveLabelEndWidth({ nativeEvent: { layout: { width: 20 } } });
+
+  wrapper.setPaddingForTwoLabels();
+  expect(wrapper.state.paddingLeft).toBe(0);
+  expect(wrapper.state.paddingRight).toBe(0);
+});
diff --git a/packages/shared/src/__tests__/__snapshots__/SliderLabels.test.js.snap b/packages/shared/src/__tests__/__snapshots__/SliderLabels.test.js.snap
new file mode 100644
index 00000000..7b223993
--- /dev/null
+++ b/packages/shared/src/__tests__/__snapshots__/SliderLabels.test.js.snap
@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`one label 1`] = `
+<Component
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+        "marginBottom": 5,
+        "marginTop": 10,
+        "width": "100%",
+      },
+      Object {
+        "justifyContent": "space-between",
+        "paddingLeft": 0,
+        "paddingRight": 0,
+      },
+    ]
+  }
+>
+  <Component
+    onLayout={[Function]}
+  >
+    <Text
+      style={
+        Object {
+          "color": "#0176D2",
+          "fontSize": 14,
+        }
+      }
+    >
+      <Translation
+        passThrough="label"
+      />
+    </Text>
+  </Component>
+</Component>
+`;
+
+exports[`two labels 1`] = `
+<Component
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+        "marginBottom": 5,
+        "marginTop": 10,
+        "width": "100%",
+      },
+      Object {
+        "justifyContent": "space-between",
+        "paddingLeft": 0,
+        "paddingRight": 0,
+      },
+    ]
+  }
+>
+  <Component
+    onLayout={[Function]}
+  >
+    <Text
+      style={
+        Object {
+          "color": "#0176D2",
+          "fontSize": 14,
+        }
+      }
+    >
+      <Translation
+        passThrough="start label"
+      />
+    </Text>
+  </Component>
+  <Component
+    onLayout={[Function]}
+  >
+    <Text
+      style={
+        Object {
+          "color": "#0176D2",
+          "fontSize": 14,
+        }
+      }
+    >
+      <Translation
+        passThrough="end label"
+      />
+    </Text>
+  </Component>
+</Component>
+`;
diff --git a/packages/shared/src/buttons/__tests__/__snapshots__/Button.test.js.snap b/packages/shared/src/buttons/__tests__/__snapshots__/Button.test.js.snap
index e8bae307..20137ddf 100644
--- a/packages/shared/src/buttons/__tests__/__snapshots__/Button.test.js.snap
+++ b/packages/shared/src/buttons/__tests__/__snapshots__/Button.test.js.snap
@@ -12,13 +12,15 @@ exports[`Button renders 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "backgroundColor": "#00a991",
         "borderRadius": 6,
         "flexGrow": 1,
         "height": 44,
         "justifyContent": "center",
         "paddingHorizontal": 11,
       },
+      Object {
+        "backgroundColor": "#00a991",
+      },
       undefined,
     ]
   }
diff --git a/packages/shared/src/buttons/__tests__/__snapshots__/LinkButton.test.js.snap b/packages/shared/src/buttons/__tests__/__snapshots__/LinkButton.test.js.snap
index f291ba82..7480d6ff 100644
--- a/packages/shared/src/buttons/__tests__/__snapshots__/LinkButton.test.js.snap
+++ b/packages/shared/src/buttons/__tests__/__snapshots__/LinkButton.test.js.snap
@@ -9,6 +9,7 @@ exports[`Button renders 1`] = `
       "backgroundColor": "transparent",
     }
   }
+  type="primary"
 >
   <ButtonTitle
     style={
diff --git a/packages/shared/src/buttons/__tests__/__snapshots__/TextButton.test.js.snap b/packages/shared/src/buttons/__tests__/__snapshots__/TextButton.test.js.snap
index 83468a3d..84064d69 100644
--- a/packages/shared/src/buttons/__tests__/__snapshots__/TextButton.test.js.snap
+++ b/packages/shared/src/buttons/__tests__/__snapshots__/TextButton.test.js.snap
@@ -5,6 +5,7 @@ exports[`renders button with custom title 1`] = `
   disabled={false}
   onPress={[Function]}
   style={false}
+  type="primary"
 >
   <ButtonTitle
     style={
diff --git a/packages/shared/src/forms/__tests__/Checkbox.test.js b/packages/shared/src/forms/__tests__/Checkbox.test.js
index be2231ea..28437896 100644
--- a/packages/shared/src/forms/__tests__/Checkbox.test.js
+++ b/packages/shared/src/forms/__tests__/Checkbox.test.js
@@ -1,8 +1,11 @@
 // @flow strict
 
 import * as React from 'react';
+import { Platform } from 'react-native';
 import { PlaygroundRenderer } from '@kiwicom/mobile-playground';
 import { Translation } from '@kiwicom/mobile-localization';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
+import StyleSheet from '@kiwicom/mobile-shared/src/PlatformStyleSheet';
 
 import Checkbox from '../Checkbox';
 
@@ -16,7 +19,70 @@ it('not checked', () => {
   );
 });
 
-it('checked', () => {
+let originalPlatform;
+beforeEach(() => (originalPlatform = Platform.OS));
+afterEach(() => (Platform.OS = originalPlatform));
+
+const createStyle = () =>
+  StyleSheet.create({
+    iconStyle: {
+      color: defaultTokens.paletteProductNormal,
+      ios: {
+        width: 26,
+        height: 26,
+        fontSize: 28,
+      },
+      android: {
+        width: 24,
+        height: 24,
+        borderWidth: 1,
+        borderColor: defaultTokens.paletteProductNormal,
+        borderRadius: 100,
+        fontSize: 24,
+      },
+    },
+  });
+
+it('works with iOS', () => {
+  Platform.OS = 'ios';
+  expect(createStyle()).toEqual({
+    iconStyle: {
+      color: defaultTokens.paletteProductNormal,
+      width: 26,
+      height: 26,
+      fontSize: 28,
+    },
+  });
+});
+
+it('works with Android', () => {
+  Platform.OS = 'android';
+  expect(createStyle()).toEqual({
+    iconStyle: {
+      color: defaultTokens.paletteProductNormal,
+      width: 24,
+      height: 24,
+      borderWidth: 1,
+      borderColor: defaultTokens.paletteProductNormal,
+      borderRadius: 100,
+      fontSize: 24,
+    },
+  });
+});
+
+it('checked on ios', () => {
+  Platform.OS = 'ios';
+
+  PlaygroundRenderer.render(
+    <Checkbox onPress={noop} isChecked={true}>
+      <Translation passThrough="Checked" />
+    </Checkbox>,
+  );
+});
+
+it('checked on android', () => {
+  Platform.OS = 'android';
+
   PlaygroundRenderer.render(
     <Checkbox onPress={noop} isChecked={true}>
       <Translation passThrough="Checked" />
diff --git a/packages/shared/src/forms/__tests__/__snapshots__/AgePicker.test.js.snap b/packages/shared/src/forms/__tests__/__snapshots__/AgePicker.test.js.snap
index b6b622c1..a7dc41e3 100644
--- a/packages/shared/src/forms/__tests__/__snapshots__/AgePicker.test.js.snap
+++ b/packages/shared/src/forms/__tests__/__snapshots__/AgePicker.test.js.snap
@@ -10,6 +10,7 @@ exports[`renders 1`] = `
         passThrough="Show age picker"
       />
     }
+    type="primary"
   />
   <AgePicker
     isVisible={false}
diff --git a/packages/shared/src/forms/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/shared/src/forms/__tests__/__snapshots__/Checkbox.test.js.snap
index 00e9c24c..be3f6e29 100644
--- a/packages/shared/src/forms/__tests__/__snapshots__/Checkbox.test.js.snap
+++ b/packages/shared/src/forms/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`checked 1`] = `
+exports[`checked on android 1`] = `
 <TouchableWithoutFeedback
   accessibilityComponentType="button"
   accessibilityTraits="button"
@@ -36,15 +36,78 @@ exports[`checked 1`] = `
       style={
         Object {
           "alignItems": "flex-end",
-          "flex": 1,
           "justifyContent": "center",
         }
       }
     >
-      <Icon
-        color="#00a991"
-        name="check"
-        size={26}
+      <TextIcon
+        code=""
+        orbit={true}
+        style={
+          Object {
+            "color": "#00a991",
+            "fontSize": 28,
+            "height": 26,
+            "width": 26,
+          }
+        }
+      />
+    </Component>
+  </Component>
+</TouchableWithoutFeedback>
+`;
+
+exports[`checked on ios 1`] = `
+<TouchableWithoutFeedback
+  accessibilityComponentType="button"
+  accessibilityTraits="button"
+  disabled={false}
+  onPress={[Function]}
+>
+  <Component
+    style={
+      Array [
+        Object {
+          "flexDirection": "row",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Component
+      style={
+        Object {
+          "flex": 3,
+          "height": 26,
+          "justifyContent": "center",
+        }
+      }
+    >
+      <Translation
+        passThrough="Checked"
+      />
+    </Component>
+    <Component
+      style={
+        Object {
+          "alignItems": "flex-end",
+          "justifyContent": "center",
+        }
+      }
+    >
+      <TextIcon
+        code="S"
+        orbit={true}
+        style={
+          Object {
+            "color": "#00a991",
+            "fontSize": 28,
+            "height": 26,
+            "width": 26,
+          }
+        }
       />
     </Component>
   </Component>
@@ -83,6 +146,26 @@ exports[`not checked 1`] = `
         passThrough="Unchecked"
       />
     </Component>
+    <Component
+      style={
+        Object {
+          "alignItems": "flex-end",
+          "justifyContent": "center",
+        }
+      }
+    >
+      <Component
+        style={
+          Object {
+            "borderColor": "#bac7d5",
+            "borderRadius": 100,
+            "borderWidth": 1,
+            "height": 24,
+            "width": 24,
+          }
+        }
+      />
+    </Component>
   </Component>
 </TouchableWithoutFeedback>
 `;
diff --git a/packages/shared/src/forms/__tests__/__snapshots__/Slider.test.js.snap b/packages/shared/src/forms/__tests__/__snapshots__/Slider.test.js.snap
index 6d98fbca..3199eeb8 100644
--- a/packages/shared/src/forms/__tests__/__snapshots__/Slider.test.js.snap
+++ b/packages/shared/src/forms/__tests__/__snapshots__/Slider.test.js.snap
@@ -3,11 +3,6 @@
 exports[`Slider renders 1`] = `
 <Component
   onLayout={[Function]}
-  style={
-    Object {
-      "paddingHorizontal": 20,
-    }
-  }
 >
   <MultiSlider
     allowOverlap={true}
@@ -29,18 +24,18 @@ exports[`Slider renders 1`] = `
     markerStyle={
       Object {
         "backgroundColor": "#fff",
-        "borderColor": "#7f91a8",
+        "borderColor": "#bac7d5",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
         "shadowColor": "#171b1e",
         "shadowOffset": Object {
-          "height": 3,
+          "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 2,
+        "shadowOpacity": 0.1,
+        "shadowRadius": 4,
         "width": 30,
       }
     }
@@ -52,27 +47,27 @@ exports[`Slider renders 1`] = `
     pressedMarkerStyle={
       Object {
         "backgroundColor": "#fff",
-        "borderColor": "#7f91a8",
+        "borderColor": "#bac7d5",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
         "shadowColor": "#171b1e",
         "shadowOffset": Object {
-          "height": 3,
+          "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 2,
+        "shadowOpacity": 0.1,
+        "shadowRadius": 4,
         "width": 30,
       }
     }
     selectedStyle={
       Object {
-        "backgroundColor": "#00a991",
+        "backgroundColor": "#0176D2",
       }
     }
-    sliderLength={-40}
+    sliderLength={0}
     snapped={false}
     step={1}
     touchDimensions={
@@ -86,12 +81,12 @@ exports[`Slider renders 1`] = `
     trackStyle={
       Object {
         "borderRadius": 5,
-        "height": 2,
+        "height": 4,
       }
     }
     unselectedStyle={
       Object {
-        "backgroundColor": "#7f91a8",
+        "backgroundColor": "#bac7d5",
       }
     }
     values={
@@ -107,11 +102,6 @@ exports[`Slider renders 1`] = `
 exports[`Slider renders correctly with all values equal 1`] = `
 <Component
   onLayout={[Function]}
-  style={
-    Object {
-      "paddingHorizontal": 20,
-    }
-  }
 >
   <MultiSlider
     allowOverlap={true}
@@ -133,18 +123,18 @@ exports[`Slider renders correctly with all values equal 1`] = `
     markerStyle={
       Object {
         "backgroundColor": "#fff",
-        "borderColor": "#7f91a8",
+        "borderColor": "#bac7d5",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
         "shadowColor": "#171b1e",
         "shadowOffset": Object {
-          "height": 3,
+          "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 2,
+        "shadowOpacity": 0.1,
+        "shadowRadius": 4,
         "width": 30,
       }
     }
@@ -156,27 +146,27 @@ exports[`Slider renders correctly with all values equal 1`] = `
     pressedMarkerStyle={
       Object {
         "backgroundColor": "#fff",
-        "borderColor": "#7f91a8",
+        "borderColor": "#bac7d5",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
         "shadowColor": "#171b1e",
         "shadowOffset": Object {
-          "height": 3,
+          "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 2,
+        "shadowOpacity": 0.1,
+        "shadowRadius": 4,
         "width": 30,
       }
     }
     selectedStyle={
       Object {
-        "backgroundColor": "#00a991",
+        "backgroundColor": "#0176D2",
       }
     }
-    sliderLength={-40}
+    sliderLength={0}
     snapped={false}
     step={1}
     touchDimensions={
@@ -190,12 +180,12 @@ exports[`Slider renders correctly with all values equal 1`] = `
     trackStyle={
       Object {
         "borderRadius": 5,
-        "height": 2,
+        "height": 4,
       }
     }
     unselectedStyle={
       Object {
-        "backgroundColor": "#7f91a8",
+        "backgroundColor": "#bac7d5",
       }
     }
     values={
@@ -211,11 +201,6 @@ exports[`Slider renders correctly with all values equal 1`] = `
 exports[`Slider renders with endValue undefined 1`] = `
 <Component
   onLayout={[Function]}
-  style={
-    Object {
-      "paddingHorizontal": 20,
-    }
-  }
 >
   <MultiSlider
     allowOverlap={true}
@@ -237,18 +222,18 @@ exports[`Slider renders with endValue undefined 1`] = `
     markerStyle={
       Object {
         "backgroundColor": "#fff",
-        "borderColor": "#7f91a8",
+        "borderColor": "#bac7d5",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
         "shadowColor": "#171b1e",
         "shadowOffset": Object {
-          "height": 3,
+          "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 2,
+        "shadowOpacity": 0.1,
+        "shadowRadius": 4,
         "width": 30,
       }
     }
@@ -260,27 +245,27 @@ exports[`Slider renders with endValue undefined 1`] = `
     pressedMarkerStyle={
       Object {
         "backgroundColor": "#fff",
-        "borderColor": "#7f91a8",
+        "borderColor": "#bac7d5",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
         "shadowColor": "#171b1e",
         "shadowOffset": Object {
-          "height": 3,
+          "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 2,
+        "shadowOpacity": 0.1,
+        "shadowRadius": 4,
         "width": 30,
       }
     }
     selectedStyle={
       Object {
-        "backgroundColor": "#00a991",
+        "backgroundColor": "#0176D2",
       }
     }
-    sliderLength={-40}
+    sliderLength={0}
     snapped={false}
     step={1}
     touchDimensions={
@@ -294,12 +279,12 @@ exports[`Slider renders with endValue undefined 1`] = `
     trackStyle={
       Object {
         "borderRadius": 5,
-        "height": 2,
+        "height": 4,
       }
     }
     unselectedStyle={
       Object {
-        "backgroundColor": "#7f91a8",
+        "backgroundColor": "#bac7d5",
       }
     }
     values={
diff --git a/packages/shared/src/popup/__tests__/ButtonPopup.test.js b/packages/shared/src/popup/__tests__/ButtonPopup.test.js
index 57273404..2687bd27 100644
--- a/packages/shared/src/popup/__tests__/ButtonPopup.test.js
+++ b/packages/shared/src/popup/__tests__/ButtonPopup.test.js
@@ -12,6 +12,7 @@ const renderPopup = (onSave, onClose) =>
     <Dimensions.Provider dimensions={{ width: 500, height: 700 }}>
       <ButtonPopup
         buttonTitle={<Translation passThrough="Save" />}
+        buttonCloseTitle={<Translation passThrough="Close" />}
         isVisible={true}
         onSave={onSave}
         onClose={onClose}
@@ -27,9 +28,11 @@ describe('ButtonPopup', () => {
     const onClose = jest.fn();
     const testRenderer = renderPopup(onSave, onClose);
     const testInstance = testRenderer.root;
-    await testInstance.findByType(Touchable).props.onPress();
+    await testInstance.findAllByType(Touchable).forEach(async child => {
+      await child.props.onPress();
+    });
 
     expect(onSave).toBeCalled();
-    expect(onClose).not.toBeCalled();
+    expect(onClose).toBeCalled();
   });
 });
diff --git a/packages/shared/src/popup/__tests__/ButtonPopupPlayground.test.js b/packages/shared/src/popup/__tests__/ButtonPopupPlayground.test.js
index 222f8b5b..1feea87b 100644
--- a/packages/shared/src/popup/__tests__/ButtonPopupPlayground.test.js
+++ b/packages/shared/src/popup/__tests__/ButtonPopupPlayground.test.js
@@ -13,6 +13,7 @@ describe('ButtonPopup playground', () => {
     PlaygroundRenderer.render(
       <ButtonPopup
         buttonTitle={<Translation passThrough="Save" />}
+        buttonCloseTitle={<Translation passThrough="Close" />}
         isVisible={true}
         onSave={noop}
         onClose={noop}
diff --git a/packages/shared/src/popup/__tests__/__snapshots__/ButtonPopupPlayground.test.js.snap b/packages/shared/src/popup/__tests__/__snapshots__/ButtonPopupPlayground.test.js.snap
index c59b39f3..cb634bd9 100644
--- a/packages/shared/src/popup/__tests__/__snapshots__/ButtonPopupPlayground.test.js.snap
+++ b/packages/shared/src/popup/__tests__/__snapshots__/ButtonPopupPlayground.test.js.snap
@@ -9,7 +9,7 @@ exports[`ButtonPopup playground renders in playground 1`] = `
     style={
       Array [
         Object {
-          "padding": 20,
+          "padding": 15,
           "paddingBottom": 0,
         },
         undefined,
@@ -23,20 +23,55 @@ exports[`ButtonPopup playground renders in playground 1`] = `
   <Component
     style={
       Object {
-        "margin": 20,
-        "marginTop": 20,
+        "flexDirection": "row",
       }
     }
   >
-    <TextButton
-      disabled={false}
-      onPress={[Function]}
-      title={
-        <Translation
-          passThrough="Save"
-        />
+    <Component
+      style={
+        Array [
+          Object {
+            "flex": 1,
+            "margin": 10,
+            "marginTop": 15,
+          },
+          Object {
+            "marginEnd": 0,
+          },
+        ]
       }
-    />
+    >
+      <TextButton
+        disabled={false}
+        onPress={[Function]}
+        title={
+          <Translation
+            passThrough="Close"
+          />
+        }
+        type="secondary"
+      />
+    </Component>
+    <Component
+      style={
+        Object {
+          "flex": 1,
+          "margin": 10,
+          "marginTop": 15,
+        }
+      }
+    >
+      <TextButton
+        disabled={false}
+        onPress={[Function]}
+        title={
+          <Translation
+            passThrough="Save"
+          />
+        }
+        type="primary"
+      />
+    </Component>
   </Component>
 </Popup>
 `;