Polish settings and auth UX

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 
-import { Box, Button, Paper, TextField, Typography } from "@mui/material";
+import { Alert, Box, Button, Paper, TextField, Typography } from "@mui/material";
 
 import { api } from "../api";
 import { useToast } from "../toast";
@@ -21,10 +21,19 @@ export default function RulesSettingsCard() {
   const { t } = useI18n();
   const [s, setS] = useState<RuleSettings | null>(null);
   const [saving, setSaving] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
 
   useEffect(() => {
-    api.get<RuleSettings>("/rules").then((r) => setS(r.data));
-  }, []);
+    api.get<RuleSettings>("/rules")
+      .then((r) => {
+        setS(r.data);
+        setLoadError(null);
+      })
+      .catch((e: any) => {
+        setS(null);
+        setLoadError(String(e?.response?.data || e?.message || t("rulesLoadFailed")));
+      });
+  }, [t]);
 
   const save = async () => {
     if (!s) return;
@@ -39,7 +48,16 @@ export default function RulesSettingsCard() {
     }
   };
 
-  if (!s) return null;
+  if (!s) {
+    return (
+      <Paper sx={{ mt: 2, p: 2 }}>
+        <Typography variant="h6" sx={{ mb: 1 }}>
+          {t("rulesTitle")}
+        </Typography>
+        {loadError ? <Alert severity="error">{loadError}</Alert> : <Typography sx={{ color: "text.secondary" }}>{t("rulesLoading")}</Typography>}
+      </Paper>
+    );
+  }
 
   const num = (k: keyof RuleSettings) => ({
     value: s[k],

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

@@ -41,7 +41,7 @@ function TabPanel({ value, index, children }: { value: number; index: number; ch
   return <Box sx={{ mt: 2 }}>{children}</Box>;
 }
 
-const ACCENTS = ["#15803d", "#16a34a", "#22c55e", "#0f766e", "#0f766e", "#65a30d"];
+const ACCENTS = ["#15803d", "#16a34a", "#22c55e", "#0f766e", "#2563eb", "#65a30d"];
 
 export default function SettingsView({
   pageSize,
@@ -221,9 +221,24 @@ export default function SettingsView({
       <TabPanel value={tab} index={2}>
         <Paper sx={{ p: 2, mt: 2 }}>
           <Typography sx={{ fontWeight: 950, mb: 0.5 }}>{t("settingsNotificationsTitle")}</Typography>
-          <Typography sx={{ color: "text.secondary" }}>
+          <Typography sx={{ color: "text.secondary", mb: 2 }}>
             {t("settingsNotificationsBody")}
           </Typography>
+
+          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2 }}>
+            <Paper sx={{ p: 2, borderRadius: 3 }}>
+              <Typography sx={{ fontWeight: 800, mb: 0.5 }}>{t("settingsNotificationsFollowUpsTitle")}</Typography>
+              <Typography variant="body2" sx={{ color: "text.secondary" }}>{t("settingsNotificationsFollowUpsBody")}</Typography>
+            </Paper>
+            <Paper sx={{ p: 2, borderRadius: 3 }}>
+              <Typography sx={{ fontWeight: 800, mb: 0.5 }}>{t("settingsNotificationsAccountTitle")}</Typography>
+              <Typography variant="body2" sx={{ color: "text.secondary" }}>{t("settingsNotificationsAccountBody")}</Typography>
+            </Paper>
+          </Box>
+
+          <Typography variant="caption" sx={{ color: "text.secondary", display: "block", mt: 2 }}>
+            {t("settingsNotificationsDeliveryNote")}
+          </Typography>
         </Paper>
       </TabPanel>