From 24ac0898afaaec6c30ffb1bafb52f123b022dac0 Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Fri, 17 Feb 2023 17:32:38 -0800
Subject: [PATCH] CEC-3577 Style tweak (#284)

---
 src/components/Cars/Status/TRexLogsTab.jsx |  2 +-
 src/components/Controls/TRexLogs/index.jsx | 76 +++++++++++-----------
 src/components/useStyles.jsx               |  4 ++
 3 files changed, 43 insertions(+), 39 deletions(-)

diff --git a/src/components/Cars/Status/TRexLogsTab.jsx b/src/components/Cars/Status/TRexLogsTab.jsx
index 8dc6260..4627025 100644
--- a/src/components/Cars/Status/TRexLogsTab.jsx
+++ b/src/components/Cars/Status/TRexLogsTab.jsx
@@ -19,7 +19,7 @@ const MainForm = () => {
 
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
-      <Typography variant="h6" className={classes.labelInline}>
+      <Typography variant="h6">
         T.Rex Logs
       </Typography>
       <TRexLogsTable vin={vin} token={token} classes={classes} />
diff --git a/src/components/Controls/TRexLogs/index.jsx b/src/components/Controls/TRexLogs/index.jsx
index ac6789f..678cbdf 100644
--- a/src/components/Controls/TRexLogs/index.jsx
+++ b/src/components/Controls/TRexLogs/index.jsx
@@ -1,47 +1,23 @@
 import React, { useEffect, useState } from "react";
 
-import api from "../../../services/vehiclesAPI";
 import {
   Table,
   TableBody,
   TableCell,
   TableFooter,
   TablePagination,
-  TableRow,
+  TableRow
 } from "@material-ui/core";
 import {
-  MuiPickersUtilsProvider,
-  KeyboardDatePicker,
+  KeyboardDatePicker, MuiPickersUtilsProvider
 } from '@material-ui/pickers';
 import clsx from "clsx";
+import api from "../../../services/vehiclesAPI";
 
-import { useStatusContext } from "../../Contexts/StatusContext";
-import { logger } from "../../../services/monitoring";
-import { TableHead } from "@mui/material";
 import DateFnsUtils from '@date-io/date-fns';
-
-const transformLogs = (logs) =>
-  logs.map((log) => {
-    const { level, timestamp, received_timestamp, line_number, filename, msg } = log;
-    //const trex_time = new Date(timestamp)
-    //const cloud_time = new Date(received_timestamp)
-    return {
-      level: level,
-      trex_timestamp: timestamp,
-      cloud_timestamp: received_timestamp,
-      line_number: line_number,
-      filename: filename,
-      msg: msg
-    };
-  })
-    .flat()
-
-const fromatDateForRequest = (date) => {
-  const getYear = date.toLocaleString("default", { year: "numeric" });
-  const getMonth = date.toLocaleString("default", { month: "2-digit" });
-  const getDay = date.toLocaleString("default", { day: "2-digit" });
-  return getYear + "-" + getMonth + "-" + getDay
-};
+import { TableHead } from "@mui/material";
+import { logger } from "../../../services/monitoring";
+import { useStatusContext } from "../../Contexts/StatusContext";
 
 const tableColumns = [
   {
@@ -75,9 +51,34 @@ const tableColumns = [
     width: "60%",
   },
 ];
+
+const transformLogs = (logs) =>
+  logs.map((log) => {
+    const { level, timestamp, received_timestamp, line_number, filename, msg } = log;
+    //const trex_time = new Date(timestamp)
+    //const cloud_time = new Date(received_timestamp)
+    return {
+      level: level,
+      trex_timestamp: timestamp,
+      cloud_timestamp: received_timestamp,
+      line_number: line_number,
+      filename: filename,
+      msg: msg
+    };
+  })
+    .flat()
+
+const fromatDateForRequest = (date) => {
+  const getYear = date.toLocaleString("default", { year: "numeric" });
+  const getMonth = date.toLocaleString("default", { month: "2-digit" });
+  const getDay = date.toLocaleString("default", { day: "2-digit" });
+  return getYear + "-" + getMonth + "-" + getDay
+};
+
 //read at least 30000 bytes per one API request
 const ONE_READ_SIZE = 30000
 const DEFAULT_PAGE_SIZE = 25
+
 const TRexLogsTable = ({ vin, token, classes }) => {
   const [allLogsFetched, setAllLogsFetched] = useState(false)
   const [blobSize, setBlobSize] = useState(0)
@@ -134,7 +135,7 @@ const TRexLogsTable = ({ vin, token, classes }) => {
         return
       }
       setTotal(0)
-      const msg = `Can not fetch logs for ${fromatDateForRequest(selectedDate)}`
+      const msg = `Cannot fetch logs for ${fromatDateForRequest(selectedDate)}`
       setMessage(msg)
       console.log(`${msg}, Cloud error:\n${fetched.error}`);
       return
@@ -188,7 +189,7 @@ const TRexLogsTable = ({ vin, token, classes }) => {
         style={{ tableLayout: "fixed", minWidth: "1400px" }}
       >
         <TableRow>
-          <TableCell>
+          <TableCell align="center">
             <MuiPickersUtilsProvider utils={DateFnsUtils}>
               <KeyboardDatePicker
                 disableToolbar
@@ -205,7 +206,7 @@ const TRexLogsTable = ({ vin, token, classes }) => {
               />
             </MuiPickersUtilsProvider>
             </TableCell>
-          <TableCell align="left">
+          <TableCell align="center">
               {getReadPercentage()}
             </TableCell>
         </TableRow>
@@ -213,13 +214,12 @@ const TRexLogsTable = ({ vin, token, classes }) => {
       <Table
         style={{ tableLayout: "fixed", minWidth: "1400px" }}
       >
-        <TableHead
-          classes={classes}>
-
+        <TableHead classes={classes}>
           <TableRow>
             {tableColumns.map((column) => (
-              <TableCell style={{ width: column.width }} align="center" key={column.label || "none"}>{column.label}</TableCell>
-            ))} </TableRow>
+              <TableCell style={{ width: column.width }} align="center" key={column.label || "none"} className={classes.tableHeader} >{column.label}</TableCell>
+            ))}
+          </TableRow>
         </TableHead >
         <TableBody>
           {logs.slice(-getDesiredSize(), (pageIndex === 0 ? undefined : -(pageSize * pageIndex))).map((log, i) => (
diff --git a/src/components/useStyles.jsx b/src/components/useStyles.jsx
index 3b3a752..1931093 100644
--- a/src/components/useStyles.jsx
+++ b/src/components/useStyles.jsx
@@ -285,6 +285,10 @@ const useStyles = makeStyles((theme) => ({
     color: "blue",
     textDecoration: "underline",
   },
+  tableHeader: {
+    textDecorationStyle: "solid",
+    fontWeight:500,
+  }
 }));
 
 export default useStyles;