Fix Styling for kanban board, removed encrpytion for gmail as it was affecting connection

job-tracker-ui/src/components/Correspondence.tsx

@@ -59,7 +59,7 @@ function parseRawEmail(raw: string): {
   const to = headers["to"];
   const dateRaw = headers["date"];
 
-  let iso: string | undefined = undefined;
+  let iso: string | undefined;
   if (dateRaw) {
     const d = new Date(dateRaw);
     if (!Number.isNaN(+d)) iso = d.toISOString();
@@ -114,8 +114,12 @@ export default function Correspondence({ jobId }: { jobId: number }) {
         },
       });
       setGmailMessages(res.data);
-    } catch {
-      toast("Failed to load Gmail messages.", "error");
+    } catch (error: any) {
+      const message =
+        error?.response?.data && typeof error.response.data === "string"
+          ? error.response.data
+          : "Failed to load Gmail messages.";
+      toast(message, "error");
     } finally {
       setGmailMessagesLoading(false);
     }
@@ -284,10 +288,7 @@ export default function Correspondence({ jobId }: { jobId: number }) {
                       maxWidth: "80%",
                       borderRadius: 3,
                       p: 1.25,
-                      border: `1px solid ${alpha(
-                        accent,
-                        theme.palette.mode === "dark" ? 0.32 : 0.22,
-                      )}`,
+                      border: `1px solid ${alpha(accent, theme.palette.mode === "dark" ? 0.32 : 0.22)}`,
                       background: alpha(accent, theme.palette.mode === "dark" ? 0.14 : 0.1),
                       color: "text.primary",
                     }}
@@ -302,13 +303,10 @@ export default function Correspondence({ jobId }: { jobId: number }) {
                       {m.content}
                     </Typography>
 
-                    <Typography
-                      variant="caption"
-                      sx={{ display: "block", mt: 0.75, color: "text.secondary" }}
-                    >
+                    <Typography variant="caption" sx={{ display: "block", mt: 0.75, color: "text.secondary" }}>
                       {isMe ? "Me" : "Company"}
-                      {m.channel ? ` · ${m.channel}` : ""}
-                      {m.date ? ` · ${new Date(m.date).toLocaleString()}` : ""}
+                      {m.channel ? ` - ${m.channel}` : ""}
+                      {m.date ? ` - ${new Date(m.date).toLocaleString()}` : ""}
                     </Typography>
                   </Box>
                 </Box>
@@ -403,7 +401,11 @@ export default function Correspondence({ jobId }: { jobId: number }) {
                 <Box>
                   <Typography sx={{ fontWeight: 800 }}>Google Gmail</Typography>
                   <Typography variant="body2" sx={{ color: "text.secondary" }}>
-                    {gmailLoading ? "Checking connection..." : gmailStatus?.connected ? `Connected as ${gmailStatus.gmailAddress}` : "Connect your Gmail account to browse recent emails."}
+                    {gmailLoading
+                      ? "Checking connection..."
+                      : gmailStatus?.connected
+                        ? `Connected as ${gmailStatus.gmailAddress}`
+                        : "Connect your Gmail account to browse recent emails."}
                   </Typography>
                 </Box>
                 <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>