OBKN-706 Pull out common styling

App.tsx

@@ -6,7 +6,7 @@ import rootRducer from './src/redux/reducers';
 import watchers from './src/redux/sagas';
 import Main from './src/Main';
 import { StatusBar } from 'react-native';
-import { colors } from './src/constants';
+import { colors } from './src/assets/styles';
 import * as Sentry from '@sentry/react-native';
 import { DSN_KEY } from '@env';
 
@@ -22,7 +22,7 @@ export class App extends Component {
     return (
       <Provider store={store}>
         <StatusBar
-          backgroundColor={colors.headerColor}
+          backgroundColor={colors.accent}
           hidden={false}
           barStyle="light-content"
         />

src/Main.tsx

@@ -23,15 +23,16 @@ import Location from './data/location/Location';
 import { Session } from './data/auth/Session';
 import { getSessionAction } from './redux/actions/main';
 import showPopup from './components/Popup';
-import { colors, appHeaderHeight } from './constants';
+import { appHeaderHeight } from './constants';
+import { colors } from './assets/styles';
 import Scan from './screens/Scan';
 import PutawayList from './screens/PutawayList';
 import Settings from './screens/Settings';
 import PutawayItemDetail from './screens/PutawayItemDetail';
 import InboundOrderList from './screens/InboundOrderList';
 import InboundDetails from './screens/InboundDetails';
 import CreateLpn from './screens/Lpn/Create';
-import LpnDetail from './screens/LpnDetail/Index';
+import LpnDetail from './screens/LpnDetail';
 import PutawayCandidates from './screens/PutawayCandidates';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import InternalLocationDetails from './screens/InternalLocationDetails';
@@ -100,20 +101,15 @@ class Main extends Component<Props, State> {
 
   shouldComponentUpdate(nextProps: Props) {
     return (
-      this.props.fullScreenLoadingIndicator.visible !==
-        nextProps.fullScreenLoadingIndicator.visible ||
+      this.props.fullScreenLoadingIndicator.visible !== nextProps.fullScreenLoadingIndicator.visible ||
       this.props.loggedIn !== nextProps.loggedIn ||
       this.props.currentLocation !== nextProps.currentLocation ||
       this.props.session !== nextProps.session
     );
   }
 
   componentDidUpdate() {
-    if (
-      this.props.loggedIn &&
-      this.props.currentLocation !== null &&
-      this.props.session === null
-    ) {
+    if (this.props.loggedIn && this.props.currentLocation !== null && this.props.session === null) {
       const actionCallback = (data: any) => {
         if (data?.error) {
           showPopup({
@@ -150,15 +146,13 @@ class Main extends Component<Props, State> {
             <Stack.Navigator
               initialRouteName={initialRouteName}
               screenOptions={({ route, navigation }) => ({
-                headerRight: () => (
-                  <OptionMenu route={route} navigation={navigation} />
-                ),
+                headerRight: () => <OptionMenu route={route} navigation={navigation} />,
                 headerTitleContainerStyle: {
                   width: '50%'
                 },
-                headerTintColor: '#ffffff',
+                headerTintColor: colors.white,
                 headerStyle: {
-                  backgroundColor: colors.headerColor,
+                  backgroundColor: colors.accent,
                   height: appHeaderHeight
                 }
               })}
@@ -176,52 +170,29 @@ class Main extends Component<Props, State> {
               <Stack.Screen name="ProductDetails" component={ProductDetails} />
               <Stack.Screen name="PickOrderItem" component={PickOrderItem} />
               <Stack.Screen name="Transfers" component={Transfers} />
-              <Stack.Screen
-                component={TransferDetails}
-                name="TransferDetails"
-              />
+              <Stack.Screen name="TransferDetails" component={TransferDetails} />
               <Stack.Screen name="Dashboard" component={Dashboard} />
               <Stack.Screen name="Scan" component={Scan} />
               <Stack.Screen name="Products" component={Products} />
               <Stack.Screen name="PutawayList" component={PutawayList} />
-              <Stack.Screen
-                name="PutawayCandidates"
-                component={PutawayCandidates}
-              />
+              <Stack.Screen name="PutawayCandidates" component={PutawayCandidates} />
               <Stack.Screen name="PutawayItem" component={PutawayItem} />
-              <Stack.Screen
-                name="PutawayItemDetail"
-                component={PutawayItemDetail}
-              />
+              <Stack.Screen name="PutawayItemDetail" component={PutawayItemDetail} />
               <Stack.Screen name="PutawayDetails" component={PutawayDetails} />
-              <Stack.Screen
-                name="InboundOrderList"
-                component={InboundOrderList}
-              />
+              <Stack.Screen name="InboundOrderList" component={InboundOrderList} />
               <Stack.Screen name="InboundDetails" component={InboundDetails} />
               <Stack.Screen name="Product Summary" component={ProductSummary} />
               <Stack.Screen name="CreateLpn" component={CreateLpn} />
               <Stack.Screen name="LpnDetail" component={LpnDetail} />
-              <Stack.Screen
-                name="InboundReceiveDetail"
-                component={InboundReceiveDetail}
-              />
+              <Stack.Screen name="InboundReceiveDetail" component={InboundReceiveDetail} />
               <Stack.Screen name="Settings" component={Settings} />
-              <Stack.Screen
-                name="OutboundStockList"
-                component={OutboundStockList}
-                options={{ title: 'Packing' }}
-              />
+              <Stack.Screen name="OutboundStockList" component={OutboundStockList} options={{ title: 'Packing' }} />
               <Stack.Screen
                 name="OutboundStockDetails"
                 component={OutboundStockDetails}
                 options={{ title: 'Packing' }}
               />
-              <Stack.Screen
-                name="OutboundLoadingList"
-                component={OutboundLoadingList}
-                options={{ title: 'Loading' }}
-              />
+              <Stack.Screen name="OutboundLoadingList" component={OutboundLoadingList} options={{ title: 'Loading' }} />
               <Stack.Screen
                 name="OutboundLoadingDetails"
                 component={OutboundLoadingDetails}
@@ -234,24 +205,10 @@ class Main extends Component<Props, State> {
               />
               <Stack.Screen name="AdjustStock" component={AdjustStock} />
               <Stack.Screen name="Transfer" component={Transfer} />
-              <Stack.Screen
-                name="ShipmentDetails"
-                component={ShipItemDetails}
-                options={{ title: 'Packing' }}
-              />
-              <Stack.Screen
-                name="InternalLocationDetail"
-                component={InternalLocationDetails}
-              />
-              <Stack.Screen
-                name="ViewAvailableItem"
-                component={ViewAvailableItem}
-              />
-              <Stack.Screen
-                name="Placeholder"
-                options={{ title: 'Work in progress' }}
-                component={Placeholder}
-              />
+              <Stack.Screen name="ShipmentDetails" component={ShipItemDetails} options={{ title: 'Packing' }} />
+              <Stack.Screen name="InternalLocationDetail" component={InternalLocationDetails} />
+              <Stack.Screen name="ViewAvailableItem" component={ViewAvailableItem} />
+              <Stack.Screen name="Placeholder" options={{ title: 'Work in progress' }} component={Placeholder} />
               <Stack.Screen
                 name="PackingLocationPage"
                 options={{ title: 'Packing Location' }}

src/assets/styles/colors.ts

@@ -0,0 +1,10 @@
+const colors = {
+  accent: '#003369',
+  white: '#ffffff',
+  gray: '#5e5e5e',
+  lightGray: '#cccccc',
+  grayTint: '#e7edd8',
+  black: '#000000'
+};
+
+export default colors;

src/assets/styles/common.ts

@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  containerFlexColumn: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  containerFlexRow: {
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  containerCenter: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  listItemContainer: {
+    margin: 8,
+    padding: 5,
+    justifyContent: 'center',
+    elevation: 8
+  },
+  flex1: {
+    flex: 1
+  },
+  scanSearch: {
+    marginHorizontal: 8,
+    backgroundColor: 'white'
+  },
+  zIndexMinus1: {
+    zIndex: -1
+  }
+});

src/assets/styles/index.ts

@@ -1,2 +1,6 @@
-import LayoutStyle from './LayoutStyle';
-export { LayoutStyle };
+import colors from './colors';
+import common from './common';
+import margin from './margin';
+import typography from './typography';
+
+export { colors, common, margin, typography };

src/assets/styles/margin.ts

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+
+export const units = [0, 4, 8, 10, 16, 20, 24, 30];
+
+export default StyleSheet.create({
+  // Full
+  ...units.reduce((acc, unit, index) => ({ ...acc, [`M${index}`]: { margin: unit } }), {}),
+  // Margin left
+  ...units.reduce((acc, unit, index) => ({ ...acc, [`ML${index}`]: { marginLeft: unit } }), {}),
+  // Margin right
+  ...units.reduce((acc, unit, index) => ({ ...acc, [`MR${index}`]: { marginRight: unit } }), {}),
+  // Margin top
+  ...units.reduce((acc, unit, index) => ({ ...acc, [`MT${index}`]: { marginTop: unit } }), {}),
+  // Margin bottom
+  ...units.reduce((acc, unit, index) => ({ ...acc, [`MB${index}`]: { marginBottom: unit } }), {})
+});

src/assets/styles/typography.ts

@@ -0,0 +1,58 @@
+import { StyleSheet } from 'react-native';
+import Theme from '../../utils/Theme';
+import colors from './colors';
+
+export default StyleSheet.create({
+  h1: {
+    fontSize: 30,
+    color: 'black',
+    fontWeight: '500'
+  },
+  h2: {
+    fontSize: 25,
+    color: 'black',
+    fontWeight: '500'
+  },
+  h3: {
+    fontSize: 20,
+    color: 'black',
+    fontWeight: '500'
+  },
+  h4: {
+    fontSize: 15,
+    color: 'black',
+    fontWeight: '500'
+  },
+  p1: {
+    fontSize: 11
+  },
+  p2: {
+    fontSize: 15
+  },
+  p3: {
+    fontSize: 20
+  },
+  p4: {
+    fontSize: 25
+  },
+  bold: {
+    fontWeight: 'bold'
+  },
+  colorPrimary: {
+    color: Theme.colors.text
+  },
+  colorSecondary: {
+    color: Theme.colors.placeholder
+  },
+  colorAccent: {
+    color: colors.accent
+  },
+  label: {
+    fontSize: 11,
+    color: Theme.colors.placeholder
+  },
+  value: {
+    fontSize: 12,
+    color: Theme.colors.text
+  }
+});

src/components/AutoComplete/AutoComplete.tsx → src/components/AutoComplete/index.tsx

@@ -3,7 +3,6 @@ import { Menu, TextInput } from 'react-native-paper';
 import React, { useState } from 'react';
 import { Props } from './types';
 import styles from './styles';
-import CLEAR from '../../assets/images/icon_clear.png';
 
 const AutoComplete = ({
   value,
@@ -23,14 +22,11 @@ const AutoComplete = ({
   left = () => {},
   placeholder
 }: Props) => {
-  // const [inputValue, setInputValue] = useState(value);
   const [menuVisible, setMenuVisible] = useState(false);
   const [filteredData, setFilteredData] = useState([]);
 
   const filterData = (text: string) => {
-    return data.filter(
-      (val: any) => val?.toLowerCase()?.indexOf(text?.toLowerCase()) > -1
-    );
+    return data.filter((val: any) => val?.toLowerCase()?.indexOf(text?.toLowerCase()) > -1);
   };
   return (
     <View style={[styles.container, containerStyle]}>
@@ -59,7 +55,6 @@ const AutoComplete = ({
             setFilteredData(data);
           }
           setMenuVisible(true);
-          // setInputValue(text);
         }}
         onEndEditing={(e) => {
           if (onEndEdit) {

src/components/AutoComplete/types.ts

@@ -1,29 +1,27 @@
 import { ImageSourcePropType } from 'react-native';
 
 export interface OwnProps {
-    label:  String | null,
-    placeholder?:  String | null,
-    refs?: any
-    edit: boolean | any
-    value?: string | any
-    disabled?: boolean
-    keyboard?: any
-    onEndEdit?: (text: string) => void
-    data?: any
-    containerStyle?: any
-    onChange: (text: string) => void;
-    icon?: ImageSourcePropType;
-    onIconClick?: () => void;
-    inputStyle?: any
-    menuStyle?: any
-    right?: () => void
-    left?: () => void
+  label?: string;
+  placeholder?: string;
+  refs?: any;
+  edit: boolean | any;
+  value?: string | any;
+  disabled?: boolean;
+  keyboard?: any;
+  onEndEdit?: (text: string) => void;
+  data?: any;
+  containerStyle?: any;
+  onChange: (text: string) => void;
+  icon?: ImageSourcePropType;
+  onIconClick?: () => void;
+  inputStyle?: any;
+  menuStyle?: any;
+  right?: () => void;
+  left?: () => void;
 }
 
-export interface StateProps {
-}
+export interface StateProps {}
 
-export interface DispatchProps {
-}
+export interface DispatchProps {}
 
 export type Props = OwnProps & StateProps & DispatchProps;

src/components/BarcodeSearchHeader/styles.ts

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   searchBar: {
     height: 56,
-    elevation: 4,
+    elevation: 0,
     borderRadius: 0
   }
 });