feat: enhance settings UI with update notifications and improved button styles

Added a new accent style for update-related buttons in the settings, improving visibility and user interaction. Updated the About and System tabs to display available updates with version information, enhancing user awareness of software updates. Adjusted the footnote prop in SettingsSection for better documentation clarity.

Author: adarshaacharya

apps/desktop/src/features/settings/_components/about-tab.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import appIcon from "../../../../src-tauri/icons/128x128@2x.png";
 import { useSettings } from "../../../shared/context/settings-context";
+import { useUpdater } from "../../../shared/context/updater-context";
 import { openExternalLink } from "../../../shared/lib/external-link";
 
 const REPO_URL = "https://github.com/adarshaacharya/sajilo";
@@ -23,7 +24,9 @@ function QuietLink({ label, href }: { label: string; href: string }) {
 
 export function AboutTab() {
   const { t } = useSettings();
+  const { state: updateState, update } = useUpdater();
   const [version, setVersion] = useState<string | null>(null);
+  const newVersion = updateState === "available" && update ? update.version : null;
 
   useEffect(() => {
     import("@tauri-apps/api/app")
@@ -40,8 +43,15 @@ export function AboutTab() {
       <p className="text-[11px] text-text-secondary">{t("about.tagline")}</p>
       <QuietLink label="sajilo.fyi" href={WEBSITE_URL} />
       {version && (
-        <p className="mt-0.5 text-[10px] text-text-muted">
-          {t("about.version")} {version}
+        <p className="mt-1 inline-flex items-center gap-1 rounded-full border border-accent/25 bg-accent/10 px-2 py-0.5 text-[10px] text-text-muted">
+          {t("about.version")}
+          <span className="font-medium tabular-nums text-accent">{version}</span>
+        </p>
+      )}
+      {newVersion && (
+        <p className="mt-1 inline-flex items-center gap-1 rounded-full bg-accent-fill px-2 py-0.5 text-[10px] text-accent-ink">
+          {t("settings.update-found")}
+          <span className="font-medium tabular-nums">{newVersion}</span>
         </p>
       )}
 

apps/desktop/src/features/settings/_components/settings-section.tsx

@@ -7,7 +7,8 @@ export function SettingsSection({
   children,
 }: {
   title: string;
-  footnote?: string;
+  /** Text, or a fragment when part of it needs its own emphasis. */
+  footnote?: ReactNode;
   children: ReactNode;
 }) {
   return (

apps/desktop/src/features/settings/_components/system-tab.tsx

@@ -73,16 +73,30 @@ export function SystemTab() {
     setMessage(t("settings.backup-imported"));
   };
 
+  // The version number is the part of this line a reader is actually looking
+  // for, so it is picked out rather than left to dissolve into grey.
+  const version = (value: string) => (
+    <span className="font-medium tabular-nums text-accent">{value}</span>
+  );
+
   const updateNote = {
     idle: null,
     checking: t("settings.update-checking"),
     "up-to-date": t("settings.update-up-to-date"),
-    available: update
-      ? `${t("settings.update-found")} ${update.version}`
-      : t("settings.update-checking"),
-    downloading: update
-      ? `${t("settings.update-available")} ${update.version}…`
-      : t("settings.update-checking"),
+    available: update ? (
+      <>
+        {t("settings.update-found")} {version(update.version)}
+      </>
+    ) : (
+      t("settings.update-checking")
+    ),
+    downloading: update ? (
+      <>
+        {t("settings.update-available")} {version(update.version)}…
+      </>
+    ) : (
+      t("settings.update-checking")
+    ),
     installed: t("settings.update-installed"),
     failed: updateError
       ? `${t("settings.update-failed")} — ${updateError}`
@@ -94,7 +108,11 @@ export function SystemTab() {
       {updaterEnabled && (
         <SettingsSection title={t("settings.updates")} footnote={updateNote ?? undefined}>
           {updateState === "installed" ? (
-            <button type="button" onClick={() => restartToUpdate()} className="settings-btn">
+            <button
+              type="button"
+              onClick={() => restartToUpdate()}
+              className="settings-btn settings-btn--accent"
+            >
               <Icon name="refresh" className="size-3 shrink-0" />
               {t("settings.update-restart")}
             </button>
@@ -103,7 +121,7 @@ export function SystemTab() {
               type="button"
               onClick={() => installUpdate()}
               disabled={!update}
-              className="settings-btn"
+              className="settings-btn settings-btn--accent"
             >
               <Icon name="refresh" className="size-3 shrink-0" />
               {t("settings.install-update")}

apps/desktop/src/index.css

@@ -491,6 +491,24 @@ html {
   background: var(--color-surface-hover);
 }
 
+/* An update waiting to be installed, or installed and waiting for a restart,
+   is the one thing in Settings asking to be clicked, so it is marked — but in
+   the same voice as the version pill in About: gold edge, gold text, the
+   faintest gold behind it. A solid fill would shout across a 380px popover
+   where nothing else does. Deliberately not used on "Check for updates",
+   which is routine. */
+.settings-btn--accent {
+  border-color: color-mix(in srgb, var(--color-accent-mark) 40%, transparent);
+  background: color-mix(in srgb, var(--color-accent-mark) 10%, transparent);
+  color: var(--color-accent);
+  font-weight: 500;
+}
+
+.settings-btn--accent:hover {
+  background: color-mix(in srgb, var(--color-accent-mark) 18%, transparent);
+  border-color: color-mix(in srgb, var(--color-accent-mark) 55%, transparent);
+}
+
 /* macOS NSSwitch — used in Settings, planner, VAT tool. */
 .mac-switch {
   position: relative;

apps/landing/style.css

@@ -321,9 +321,9 @@ img {
 
 .hero-copy h1 {
   font-family: var(--display);
-  font-weight: 700;
+  font-weight: 800;
   font-size: clamp(2.5rem, 4.2vw + 1rem, 4.25rem);
-  letter-spacing: -0.03em;
+  letter-spacing: -0.035em;
   line-height: 1.04;
   margin: 0 0 18px;
   text-wrap: balance;