How to use the config/theme.background function in config

To help you get started, we’ve selected a few config examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github forest-watcher / forest-watcher / app / components / common / area-list / area-cache / index.js View on Github external
render() {
    const { cacheStatus, showTooltip } = this.props;
    const { indeterminate, checkingConnectivity } = this.state;
    const cacheAreaAction = this.getCacheAreaAction();
    const cacheButtonIcon = this.getCacheAreaIcon();

    const cacheButton = (
github forest-watcher / forest-watcher / app / components / settings / partners / styles.js View on Github external
import Theme from 'config/theme';
import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Theme.background.main,
    paddingTop: 10
  },
  containerContent: {
    paddingBottom: 20
  },
  content: {
    paddingTop: 0,
    paddingBottom: 30
  },
  partner: {
    padding: 24,
    paddingTop: 0,
    paddingBottom: 10,
    flexDirection: 'column',
    justifyContent: 'space-between'
  },
github forest-watcher / forest-watcher / app / components / settings / terms-and-conditions / detail / index.js View on Github external
>
            
            
          
        ))}
      

    
  );
}

TermsAndConditionsDetail.navigatorStyle = {
  navBarTextColor: Theme.colors.color1,
  navBarButtonColor: Theme.colors.color1,
  topBarElevationShadowEnabled: false,
  navBarBackgroundColor: Theme.background.main
};

TermsAndConditionsDetail.propTypes = {
  contentTerm: PropTypes.object.isRequired
};

export default TermsAndConditionsDetail;
github forest-watcher / forest-watcher / app / components / common / action-button / index.js View on Github external
props.short ? styles.short : '',
    props.disabled || props.delete || props.noIcon ? styles.buttonNoIcon : ''
  ];

  const textStyles = [
    styles.buttonText,
    props.main ? styles.buttonTextMain : '',
    props.monochrome ? styles.buttonTextMonochrome : '',
    props.light ? styles.buttonTextLight : '',
    props.dark ? styles.buttonTextLight : '',
    props.left ? styles.buttonTextLeft : '',
    props.disabled ? styles.buttonTextDisabled : '',
    props.error ? styles.buttonTextError : '',
    props.delete ? styles.buttonTextError : '',
    props.transparent
      ? { color: props.delete ? Theme.colors.color7 : props.light || props.dark ? '' : Theme.background.secondary }
      : ''
  ];

  const arrowIconStyles = [Theme.icon, props.short ? styles.shortIcon : ''];

  let arrowIcon = nextIconWhite;
  let underlayColor = Platform.select({ android: Theme.background.white, ios: Theme.background.secondary });
  if (props.light || props.dark) {
    underlayColor = Theme.background.white;
    arrowIcon = nextIcon;
  }
  if (props.monochrome) {
    arrowIcon = nextIcon;
  }
  if (props.disabled) underlayColor = Theme.colors.color6;
  if (props.error || props.delete) underlayColor = Theme.colors.color7;
github forest-watcher / forest-watcher / app / components / common / header / styles.js View on Github external
import { StyleSheet, Platform } from 'react-native';
import Theme from 'config/theme';

export default StyleSheet.create({
  container: {
    backgroundColor: Theme.background.main,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    ...Platform.select({
      ios: {
        height: 114
      },
      android: {
        height: 94
      }
    })
  },
  title: {
    color: Theme.fontColors.main,
    fontFamily: Theme.font,
    fontSize: 15,
github forest-watcher / forest-watcher / app / components / common / steps-slider / styles.js View on Github external
import Theme from 'config/theme';
import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: Theme.background.main
  },
  indexBar: {
    height: 44,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  dot: {
    backgroundColor: Theme.background.white,
    width: 10,
    height: 10,
    borderRadius: 4,
    marginLeft: 8,
    marginRight: 8,
    borderWidth: 2,
    borderColor: Theme.borderColors.main
github forest-watcher / forest-watcher / app / components / common / form-inputs / text-detail / styles.js View on Github external
width: 0,
    height: 0,
    top: -20,
    left: 24,
    position: 'absolute',
    borderWidth: 10,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderTopColor: 'transparent',
    borderBottomColor: Theme.borderColors.main
  },
  markerInner: {
    top: -5,
    left: -8,
    borderWidth: 8,
    borderBottomColor: Theme.background.main
  },
  inputLabel: {
    color: Theme.fontColors.secondary
  }
});
github forest-watcher / forest-watcher / app / components / common / action-button / styles.js View on Github external
import Theme from 'config/theme';
import { StyleSheet, Platform } from 'react-native';

export default StyleSheet.create({
  container: {
    borderRadius: 32,
    borderWidth: 2,
    borderColor: Theme.background.secondary,
    backgroundColor: Theme.background.secondary,
    overflow: 'hidden'
  },
  iconContainer: {
    width: Theme.icon.width,
    marginRight: 12
  },
  dark: {
    backgroundColor: Theme.colors.color6,
    borderColor: Theme.colors.color6
  },
  light: {
    backgroundColor: Theme.background.white,
    borderColor: Theme.background.white
  },
  disabled: {
github forest-watcher / forest-watcher / app / components / common / area-list / area-cache / styles.js View on Github external
backgroundColor: 'transparent'
  },
  cacheTooltip: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: Theme.background.main,
    paddingHorizontal: 18,
    height: 48,
    marginLeft: 6
  },
  cacheTooltipArrow: {
    position: 'absolute',
    left: -5,
    height: 10,
    width: 10,
    backgroundColor: Theme.background.main,
    transform: [{ rotate: '45deg' }],
    marginLeft: 6
  },
  cacheTooltipText: {
    fontFamily: Theme.font,
    color: Theme.fontColors.light,
    fontSize: 17,
    fontWeight: '400'
  },
  cacheBtn: {
    width: 64,
    height: 64,
    backgroundColor: Theme.background.secondary,
    borderRadius: 32,
    alignItems: 'center',
    justifyContent: 'center'
github forest-watcher / forest-watcher / app / components / settings / area-detail / styles.js View on Github external
import Theme from 'config/theme';
import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Theme.background.main
  },
  contentContainer: {
    flex: 1,
    width: Theme.screen.width,
    height: Theme.screen.height
  },
  input: {
    flex: 1,
    fontSize: 17,
    color: Theme.fontColors.secondary,
    paddingTop: 14,
    marginLeft: -4
  },
  buttonContainer: {
    padding: 10
  },