updated styling and display jobslist above clockin

components/time-ticket-items/clockedin-list-item.component.jsx

@@ -6,13 +6,14 @@ import { connect } from "react-redux";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import { DateTimeFormatter } from "../../util/DateFormater";
 import { setTmTicketJobId } from "../../redux/app/app.actions";
+import styles from "../styles";
 
 const mapDispatchToProps = (dispatch) => ({
   setTmTicketJobIdRedux: (jobId) => dispatch(setTmTicketJobId(jobId)),
 });
 
 export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) {
-  // console.log("makeNavToTimeTicketClockOff, handleRefresh:");
+  //  console.log("ClockedinListItem, ticket:",ticket);
   const { t } = useTranslation();
   const navigation = useNavigation();
 
@@ -28,7 +29,7 @@ export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) {
   );
 
   return (
-    <Card style={{ margin: 8 }}>
+    <Card key={ticket.id} style={{ margin: 8 }}>
       <Card.Title
         title={`${
           ticket.job.ro_number || t("general.labels.na")
@@ -51,8 +52,9 @@ export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) {
             : ticket.cost_center}
         </Text>
       </Card.Content>
-      <Card.Actions>
-        <Button mode="outlined" onPress={makeNavToTimeTicketClockOff} >
+      <Card.Actions style={{
+      justifyContent: 'center'}}>
+        <Button mode="outlined" style={styles.buttonBasicOutlined} onPress={makeNavToTimeTicketClockOff} >
           {t("clockedinlistitem.actions.clockout")}
         </Button>
       </Card.Actions>