style: soften pending sync status

apps/web/src/components/EditorPane.tsx

@@ -923,7 +923,7 @@ const MobileNativeEditorPane = ({
     saveState === "error" || saveState === "conflict"
       ? "bg-rose-50 text-rose-700"
       : saveState === "queued"
-        ? "bg-amber-50 text-amber-700"
+        ? "bg-amber-50/60 text-amber-600/80"
         : saveState === "saving" || hasUnsavedChanges
           ? "bg-emerald-50 text-emerald-700"
           : "bg-slate-100 text-slate-500";
@@ -2448,7 +2448,7 @@ const RichEditorPane = ({
     saveState === "error" || saveState === "conflict"
       ? "bg-rose-50 text-rose-700"
       : saveState === "queued"
-        ? "bg-amber-50 text-amber-700"
+        ? "bg-amber-50/60 text-amber-600/80"
         : saveState === "saving" || hasUnsavedChanges
           ? "bg-emerald-50 text-emerald-700"
           : "bg-slate-100 text-slate-500";

apps/web/src/styles/globals.css

@@ -988,11 +988,19 @@ textarea {
 :root.dark [class*="hover:text-slate-900"]:hover,
 :root.dark [class*="focus:text-slate-900"]:focus { color: rgb(var(--slate-900-rgb)) !important; }
 
+:root.dark [class~="bg-amber-50/60"] {
+  background-color: rgb(69 26 3 / 72%) !important;
+}
+
 :root.dark [class~="bg-amber-50"],
 :root.dark [class~="bg-amber-50/95"] {
   background-color: #451a03 !important;
 }
 
+:root.dark [class~="text-amber-600/80"] {
+  color: rgb(252 211 77 / 80%) !important;
+}
+
 :root.dark [class~="text-amber-700"],
 :root.dark [class~="text-amber-800"] {
   color: #fcd34d !important;