diff --git a/demo/src/screens/foundationScreens/ShadowsScreen.js b/demo/src/screens/foundationScreens/ShadowsScreen.js index 4f03baa215..560f7989b8 100644 --- a/demo/src/screens/foundationScreens/ShadowsScreen.js +++ b/demo/src/screens/foundationScreens/ShadowsScreen.js @@ -3,27 +3,28 @@ import React, {Component} from 'react'; import {ScrollView, View, Text, StyleSheet, Dimensions} from 'react-native'; import {Colors, Shadows} from 'react-native-ui-lib'; // eslint-disable-line - const {height} = Dimensions.get('window'); const SHAPE_DIAMETER = 80; -const shadowsOverWhiteBkg = _.reduce(Shadows, (results, value, key) => { - if (key.startsWith('white')) { - results[key] = value; - } - return results; -}, {}); - -const shadowsOverDarkBkg = _.reduce(Shadows, (results, value, key) => { - if (key.startsWith('dark')) { - results[key] = value; - } - return results; -}, {}); +const shadowsOverWhiteBkg = _.reduce(Shadows, + (results, value, key) => { + if (key.startsWith('white')) { + results[key] = value; + } + return results; + }, + {}); +const shadowsOverGreyBkg = _.reduce(Shadows, + (results, value, key) => { + if (key.startsWith('grey')) { + results[key] = value; + } + return results; + }, + {}); export default class ShadowsScreen extends Component { - renderShadows(shadowsList) { return [] .concat(_.map(shadowsList, (value, key) => this.renderCircleWithShadow(value, key))) @@ -59,12 +60,8 @@ export default class ShadowsScreen extends Component { - - {this.renderShadows(shadowsOverDarkBkg)} - - - {this.renderShadows(shadowsOverWhiteBkg)} - + {this.renderShadows(shadowsOverGreyBkg)} + {this.renderShadows(shadowsOverWhiteBkg)} @@ -76,14 +73,14 @@ const styles = StyleSheet.create({ container: { flexDirection: 'row', flex: 1, - justifyContent: 'space-between', + justifyContent: 'space-between' }, subContainer: { flex: 1, flexDirection: 'column', minHeight: 0.8 * height, alignItems: 'center', - justifyContent: 'space-between', + justifyContent: 'space-between' }, shadowCircle: { width: SHAPE_DIAMETER, @@ -92,14 +89,14 @@ const styles = StyleSheet.create({ backgroundColor: 'white', margin: 40, justifyContent: 'center', - alignItems: 'center', + alignItems: 'center' }, innerCircle: { width: SHAPE_DIAMETER, height: SHAPE_DIAMETER, borderRadius: SHAPE_DIAMETER / 2, backgroundColor: 'white', - justifyContent: 'center', + justifyContent: 'center' }, shadowSquare: { width: SHAPE_DIAMETER, @@ -107,17 +104,17 @@ const styles = StyleSheet.create({ borderRadius: 6, backgroundColor: 'white', margin: 40, - justifyContent: 'center', + justifyContent: 'center' }, innerSquare: { width: SHAPE_DIAMETER, height: SHAPE_DIAMETER, borderRadius: 6, backgroundColor: 'white', - justifyContent: 'center', + justifyContent: 'center' }, shadowLabel: { fontSize: 9, - textAlign: 'center', - }, + textAlign: 'center' + } }); diff --git a/src/style/shadows.ts b/src/style/shadows.ts index d188e85900..9bba01213b 100644 --- a/src/style/shadows.ts +++ b/src/style/shadows.ts @@ -88,23 +88,6 @@ const Shadows = { top: {shadowColor: Colors.grey10, shadowOpacity: 0.04, shadowRadius: 4.5, shadowOffset: {height: 5, width: 0}}, bottom: {shadowColor: Colors.grey20, shadowOpacity: 0.04, shadowRadius: 9, shadowOffset: {height: 10, width: 0}} }, - // TODO: We should remove dark presets eventually in favor of grey presets (after completing migration properly) - dark10: { - top: {shadowColor: Colors.grey20, shadowOpacity: 0.02, shadowRadius: 13.5}, - bottom: {shadowColor: Colors.grey10, shadowOpacity: 0.03, shadowRadius: 2, shadowOffset: {height: 2, width: 0}} - }, - dark20: { - top: {shadowColor: Colors.grey20, shadowOpacity: 0.03, shadowRadius: 15}, - bottom: {shadowColor: Colors.grey10, shadowOpacity: 0.02, shadowRadius: 3, shadowOffset: {height: 2.5, width: 0}} - }, - dark30: { - top: {shadowColor: Colors.grey10, shadowOpacity: 0.04, shadowRadius: 3.5, shadowOffset: {height: 3, width: 0}}, - bottom: {shadowColor: Colors.grey20, shadowOpacity: 0.04, shadowRadius: 8, shadowOffset: {height: 7, width: 0}} - }, - dark40: { - top: {shadowColor: Colors.grey10, shadowOpacity: 0.04, shadowRadius: 4.5, shadowOffset: {height: 5, width: 0}}, - bottom: {shadowColor: Colors.grey20, shadowOpacity: 0.04, shadowRadius: 9, shadowOffset: {height: 10, width: 0}} - }, /** * Load custom set of shadows