Dulce-Work-Schedule/2018.1-Dulce_App

View on GitHub
src/Components/styles.js

Summary

Maintainability
A
3 hrs
Test Coverage
import {PixelRatio} from 'react-native';
import {purple_dulce, black_dulce} from '../styles';

export const styles = {
  absences: {
    title: {
      margin: 5,
      alignSelf: 'center',
      fontSize: 17,
      color: purple_dulce,
      fontFamily: 'Raleway'
    },
    container1: {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'space-around'
    },
    date: {
      color: purple_dulce,
      fontSize: 20,
      fontFamily: 'Lato'
    },
    dates: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
      marginRight: 5,
      marginLeft: 5,
      marginTop: 10,
      borderColor: purple_dulce,
      borderWidth: 2,
      borderRadius: 5,
      fontFamily: 'Lato'
    },
    justify: {
      flex: 1.5,
      backgroundColor: '#ede8f7',
      marginLeft: 5,
      marginRight: 5,
      marginTop: 10,
      borderColor: purple_dulce,
      borderWidth: 2,
      borderRadius: 5
    },
    button: {
      width: 200,
      marginTop: 15,
      marginRight: 5,
      marginLeft: 10
    },
    view1: {
      flex: 1,
      flexDirection: 'column',
      alignItems: 'center'
    },
    form: {
      width: '100%'
    },
    container2: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#fff'
    },
    documentContainer: {
      borderColor: '#9B9B9B',
      backgroundColor: '#fff',
      borderWidth: 1 / PixelRatio.get(),
      justifyContent: 'center',
      alignItems: 'center'
    },
    document: {
      borderRadius: 5,
      width: 180,
      height: 180
    },
    picker: {
      height: 50,
      width: 170,
      marginLeft: 10
    },
    text: {
      color: black_dulce,
      fontFamily: 'Lato'
    }
  },
  agrButton: {
    container: {
      backgroundColor: purple_dulce,
      height: 50,
      alignItems: 'center',
      justifyContent: 'center',
      marginTop: 30,
      flex: 8,
      alignSelf: 'center',
      marginBottom: 0,
      width: 180
    },
    text: {
      color: 'white',
      fontSize: 16,
      fontFamily: 'Raleway',
      alignItems: 'center'
    }
  },
  agrInput: {
    textInput: {
      height: 50,
      borderBottomWidth: 1,
      borderBottomColor: 'grey',
      marginBottom: 10,
      width: '100%',
      alignSelf: 'center',
      fontFamily: 'Lato'
    },
    container: {
      paddingHorizontal: 30
    },
    label: {
      fontFamily: 'Lato',
      marginTop: 5
    }
  },
  googleButton: {
    container: {
      height: 45,
      marginTop: 15,
      paddingHorizontal: 20,
      alignSelf: 'center',
      marginBottom: 0,
      backgroundColor: '#FFF',
      width: 280
    },
    text: {
      fontSize: 20,
      alignSelf: 'center',
      fontFamily: 'Raleway'
    },
    img: {
      height: 40,
      resizeMode: 'contain'
    }
  },
  scaleIcon: {
    container: {
      marginTop: 100,
      width: 100,
      justifyContent: 'center',
      alignItems: 'center'
    },
    icon: {
      height: 100,
      width: 100
    }
  },
  scheduleItem: {
    item: {
      backgroundColor: 'white',
      flex: 1,
      borderRadius: 5,
      padding: 10,
      marginRight: 10,
      marginTop: 17
    }
  },
  screenHeader: {
    header: {
      backgroundColor: purple_dulce
    },
    text: {
      fontFamily: 'Raleway'
    }
  },
  sideMenu: {
    header: {
      flexDirection: 'column',
      paddingTop: 45,
      paddingLeft: 16,
      height: 170,
      backgroundColor: purple_dulce
    },
    headerLogo: {
      width: 64,
      height: 64,
      justifyContent: 'center',
      alignItems: 'center',
      borderRadius: 32,
      overflow: 'hidden',
      backgroundColor: '#fff'
    },
    subTitle: {
      height: 56,
      paddingTop: 8
    },
    drawerTitle: {
      color: '#fff',
      fontFamily: 'Raleway',
      fontSize: 21
    },
    drawerEmail: {
      color: '#fff',
      fontFamily: 'Raleway',
      fontSize: 14
    },
    container: {
      flex: 8
    },
    navItemStyle: {
      padding: 10,
      color: '#fff',
      fontFamily: 'Lato',
      fontSize: 15
    },
    route: {
      paddingVertical: 7,
      paddingHorizontal: 5,
      flexDirection: 'row',
      alignItems: 'center',
      marginLeft: 10
    },
    footerContainer: {
      padding: 20,
      backgroundColor: purple_dulce,
      flexDirection: 'row',
      alignItems: 'center'
    },
    routesContainer: {
      marginTop: 20
    }
  },
  IconButton: {
    container: {
      backgroundColor: purple_dulce,
      width: 180,
      height: 50,
      marginTop: 40,
      justifyContent: 'center',
      alignItems: 'center',
      flex: 8,
      marginBottom: 0,
      alignSelf: 'center'
    },
    text: {
      color: 'white',
      fontSize: 16,
      fontFamily: 'Raleway',
      marginRight: 40,
      alignItems: 'center'
    },
    icon: {
      color: '#ffffff',
      height: 25,
      width: 25
    }
  },
  smallButton: {
    container: {
      backgroundColor: '#FFF',
      height: 50,
      justifyContent: 'center',
      alignItems: 'center',
      marginTop: 15
    },
    text: {
      fontSize: 18,
      color: 'black'
    }
  },
  smallLogo: {
    logo: {
      alignSelf: 'center',
      marginTop: 45,
      marginBottom: 30,
      width: 200,
      height: 100,
      resizeMode: 'contain',
      backgroundColor: 'transparent'
    }
  },
  userItem: {
    item: {
      height: 60,
      borderBottomWidth: 1,
      justifyContent: 'center'
    },
    text: {
      color: 'black',
      fontSize: 25
    }
  }
};

//Components:
export const absences = styles.absences;
export const agrButton = styles.agrButton;
export const agrInput = styles.agrInput;
export const googleButton = styles.googleButton;
export const scaleIcon = styles.scaleIcon;
export const scheduleItem = styles.scheduleItem;
export const screenHeader = styles.screenHeader;
export const sideMenu = styles.sideMenu;
export const IconButton = styles.IconButton;
export const smallButton = styles.smallButton;
export const smallLogo = styles.smallLogo;
export const userItem = styles.userItem;