OBKN-706 remove unused styling and replace with DetailsTable and Cont…

…entLayout components

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';
@@ -149,9 +150,9 @@ class Main extends Component<Props, State> {
                 headerTitleContainerStyle: {
                   width: '50%'
                 },
-                headerTintColor: '#ffffff',
+                headerTintColor: colors.white,
                 headerStyle: {
-                  backgroundColor: colors.headerColor,
+                  backgroundColor: colors.accent,
                   height: appHeaderHeight
                 }
               })}
@@ -185,21 +186,13 @@ class Main extends Component<Props, State> {
               <Stack.Screen name="LpnDetail" component={LpnDetail} />
               <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}

src/assets/styles/colors.ts

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

src/assets/styles/index.ts

@@ -1,2 +1,5 @@
 import LayoutStyle from './LayoutStyle';
-export { LayoutStyle };
+import colors from './colors';
+import globalStyles from './globalStyles';
+
+export { LayoutStyle, colors };

src/components/Button/styles.ts

@@ -1,23 +1,23 @@
 import { StyleSheet } from 'react-native';
-import { colors } from '../../constants';
+import { colors } from '../../assets/styles';
 
 export default StyleSheet.create({
   label: {
-    color: 'white',
+    color: colors.white,
     fontSize: 15,
     fontWeight: '600'
   },
   button: {
     height: 45,
     marginTop: 25,
-    backgroundColor: colors.headerColor,
+    backgroundColor: colors.accent,
     alignSelf: 'center',
     justifyContent: 'center',
     display: 'flex',
     flexDirection: 'column'
   },
   disabled: {
-    backgroundColor: colors.disabledBgColor
+    backgroundColor: colors.lightGray
   },
   size80: {
     width: '80%'

src/components/FullScreenLoadingIndicator/styles.ts

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { colors } from '../../assets/styles';
 
 export default StyleSheet.create({
   modalParent: {
@@ -13,12 +14,12 @@ export default StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#00000099'
+    backgroundColor: `${colors.black}99`
   },
   progressContainer: {
     flex: 0,
-    backgroundColor: '#FFFFFF',
-    shadowColor: '#000000',
+    backgroundColor: colors.white,
+    shadowColor: colors.black,
     padding: 20,
     borderRadius: 5,
     justifyContent: 'center',

src/components/InputSpinner/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import Spinner from 'react-native-input-spinner';
 import { View } from 'react-native';
-import { colors, device } from '../../constants';
+import { device } from '../../constants';
+import { colors } from '../../assets/styles';
 import { Props } from './types';
 import styles from './styles';
 
@@ -12,17 +13,15 @@ const InputSpinner = ({ value, max, setValue }: Props) => {
         selectTextOnFocus
         showBorder
         step={1}
-        color={colors.headerColor}
+        color={colors.accent}
         max={max}
         skin="square"
         min={0}
         longStep={10}
         speed={1}
         width={device.windowWidth / 1.16}
         value={value}
-        onChange={(num: any) => {
-          setValue(num);
-        }}
+        onChange={setValue}
       />
     </View>
   );

src/components/PickListItem/index.tsx

@@ -4,7 +4,7 @@ import { Text, View, TouchableOpacity } from 'react-native';
 import showPopup from '../../components/Popup';
 import Button from '../../components/Button';
 import InputBox from '../../components/InputBox';
-import { colors } from '../../constants';
+import { colors } from '../../assets/styles';
 import { PicklistItem } from '../../data/picklist/PicklistItem';
 import InputSpinner from '../../components/InputSpinner';
 import { Card } from 'react-native-paper';
@@ -163,7 +163,7 @@ const PickListItem: React.FC<Props> = ({ item, onPickItem }) => {
                             <FontAwesome5
                               name="exclamation-triangle"
                               size={10}
-                              color={colors.headerColor}
+                              color={colors.accent}
                               style={styles.infoButton}
                             />
                             &nbsp;Shortage

src/components/PutAwayItem/styles.ts

@@ -1,5 +1,4 @@
 import { StyleSheet } from 'react-native';
-import { colors, device, ratio } from '../../constants';
 import Theme from '../../utils/Theme';
 
 export default StyleSheet.create({

src/constants.ts

@@ -1,10 +1,5 @@
 import { Dimensions, StatusBar } from 'react-native';
 
-export const colors = {
-  headerColor: '#003369',
-  disabledBgColor: '#cccccc'
-};
-
 export const device = {
   windowWidth: Dimensions.get('window').width,
   windowHeight: Dimensions.get('window').height,

src/screens/AdjustStock/index.tsx

@@ -12,6 +12,7 @@ import { stockAdjustments } from '../../redux/actions/products';
 import InputSpinner from '../../components/InputSpinner';
 import DetailsTable from '../../components/DetailsTable';
 import { Props as LabeledDataType } from '../../components/LabeledData/types';
+import { ContentContainer, ContentFooter, ContentBody, ContentHeader } from '../../components/ContentLayout';
 
 const reasonCodes = [
   {
@@ -162,11 +163,14 @@ const AdjustStock = () => {
   ];
 
   return (
-    <ScrollView style={styles.container}>
-      <DetailsTable data={renderData} />
-      <View style={styles.from}>
-        <InputSpinner title={'Quantity Adjusted'} value={quantityAdjusted} setValue={setQuantityAdjusted} />
-        <View style={styles.dropDownDivider} />
+    <ContentContainer>
+      <ContentHeader>
+        <DetailsTable data={renderData} />
+      </ContentHeader>
+      <ContentBody>
+        <View style={styles.inputSpinner}>
+          <InputSpinner title={'Quantity Adjusted'} value={quantityAdjusted} setValue={setQuantityAdjusted} />
+        </View>
         <DropDown
           label="Reason Code"
           mode="outlined"
@@ -178,11 +182,11 @@ const AdjustStock = () => {
           onDismiss={() => setShowDropDown(false)}
         />
         <InputBox value={comments} disabled={false} editable={false} label="Comments" onChange={setComments} />
-      </View>
-      <View style={styles.bottom}>
+      </ContentBody>
+      <ContentFooter>
         <Button disabled={!comments || !reasonCode} title="Adjust Stock" onPress={onSave} />
-      </View>
-    </ScrollView>
+      </ContentFooter>
+    </ContentContainer>
   );
 };
 

src/screens/AdjustStock/styles.ts

@@ -1,67 +1,10 @@
 import { StyleSheet } from 'react-native';
-import { ratio } from '../../constants';
-import Theme from '../../utils/Theme';
 
 export default StyleSheet.create({
-  container: {
+  inputSpinner: {
     display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    paddingVertical: 10,
-    paddingHorizontal: 20
-  },
-  arrowDownIcon: {
-    height: 15,
-    width: 15
-  },
-  select: {
-    width: '100%',
-    borderWidth: 2,
-    height: 40,
-    alignSelf: 'center',
-    borderColor: 'grey',
-    backgroundColor: 'white',
-    borderRadius: 5,
-    marginTop: 10
-  },
-  from: {
-    flex: 1
-  },
-  bottom: {
-    width: '100%',
-    alignItems: 'center',
     justifyContent: 'center',
-    height: ratio.height * 100
-  },
-  itemView: {
-    marginTop: 5
-  },
-  rowItem: {
-    flexDirection: 'row',
-    borderColor: Theme.colors.background,
-    marginTop: 1,
-    padding: 2,
-    marginStart: 4,
-    width: '100%',
-    alignItems: 'center'
-  },
-  columnItem: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    width: '50%'
-  },
-  label: {
-    fontSize: 12,
-    color: Theme.colors.placeholder
-  },
-  value: {
-    fontSize: 16,
-    color: Theme.colors.text,
-    marginTop: 10,
-    width: '90%'
-  },
-  dropDownDivider: {
+    alignItems: 'center',
     marginBottom: 30
   }
 });

src/screens/AppInfo/AppInfoScreen.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { View, Text, Image } from 'react-native';
-import Styles from './Styles';
+import Styles from './styles';
 import DeviceInfo from 'react-native-device-info';
 import { BUILD_NUMBER } from '@env';
 

src/screens/ChooseCurrentLocation/index.tsx

@@ -135,7 +135,7 @@ class ChooseCurrentLocation extends React.Component<Props, State> {
     return (
       <View style={styles.container}>
         {/*<Header title="Choose Location" backButtonVisible={false} />*/}
-        <ScrollView style={styles.scrollView}>
+        <ScrollView>
           <List.AccordionGroup>
             {_.map(_.keys(this.state.orgNameAndLocationsDictionary), (orgName: string) => {
               return (

src/screens/ChooseCurrentLocation/styles.ts

@@ -5,6 +5,5 @@ export default StyleSheet.create({
     display: 'flex',
     flexDirection: 'column',
     flex: 1
-  },
-  scrollView: {}
+  }
 });

src/screens/Dashboard/index.tsx

@@ -6,18 +6,20 @@ import { Card } from 'react-native-paper';
 import dashboardData from './dashboardData';
 import EmptyView from '../../components/EmptyView';
 class Dashboard extends React.Component<Props> {
-  renderItem = (item: any, index: any) => {
+  renderItem = (item: ListRenderItemInfo<any>) => {
+    const cardItem = item.item;
+    const cardIndex = item.index;
     return (
       <TouchableOpacity
-        key={index}
+        key={cardIndex}
         style={styles.cardContainer}
         onPress={() => {
-          this.props.navigation.navigate(item.navigationScreenName);
+          this.props.navigation.navigate(cardItem.navigationScreenName);
         }}
       >
         <Card style={styles.card}>
-          <Image style={styles.cardImage} resizeMode="contain" source={item.icon} />
-          <Text style={styles.cardLabel}>{item.screenName}</Text>
+          <Image style={styles.cardImage} resizeMode="contain" source={cardItem.icon} />
+          <Text style={styles.cardLabel}>{cardItem.screenName}</Text>
         </Card>
       </TouchableOpacity>
     );
@@ -31,7 +33,7 @@ class Dashboard extends React.Component<Props> {
           horizontal={false}
           numColumns={3}
           ListEmptyComponent={<EmptyView />}
-          renderItem={(item: ListRenderItemInfo<any>) => this.renderItem(item.item, item.index)}
+          renderItem={this.renderItem}
         />
       </View>
     );