From 7a9cb953bf43646c0099edae51279bd5f7223453 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 4 Dec 2024 22:22:01 +0200
Subject: [PATCH] style(next): add a warning animation for the sync status
 indicator when the sync fails

---
 src/public/stylesheets/theme-next.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css
index 6336b1b14..862d95586 100644
--- a/src/public/stylesheets/theme-next.css
+++ b/src/public/stylesheets/theme-next.css
@@ -144,6 +144,8 @@
    --launcher-pane-button-hover-background: white;
    --launcher-pane-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, .075);
 
+   --sync-status-error-pulse-color: #ff5528;
+
    --root-background: var(--left-pane-background-color);
 
    --gutter-color: transparent;
@@ -287,6 +289,8 @@
         --launcher-pane-button-hover-background: #ffffff1c;
         --launcher-pane-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, .2);
 
+        --sync-status-error-pulse-color: #f47871;
+
         --root-background: var(--left-pane-background-color);
 
         --gutter-color: transparent;
@@ -455,6 +459,19 @@
     background: unset;
 }
 
+@keyframes sync-status-pulse {
+    from {
+        color: currentColor
+    } to {
+        color: var(--pulse-color);
+    }
+}
+
+#launcher-pane .sync-status-disconnected-with-changes {
+    --pulse-color: var(--sync-status-error-pulse-color);
+    animation: sync-status-pulse 1s ease-in-out alternate-reverse infinite;
+}
+
 #launcher-pane.horizontal .launcher-button {
     font-size: var(--launcher-pane-horizontal-icon-size);
 }