From a1c10b4ea30d3d689f1cc6c5a4ce04284b2dfcc4 Mon Sep 17 00:00:00 2001
From: d11n <mail@dennisreimann.de>
Date: Mon, 5 Dec 2022 08:47:51 +0100
Subject: [PATCH] Fix store selector transition (#4400)

---
 .../Components/StoreSelector/Default.cshtml      |  2 +-
 BTCPayServer/wwwroot/main/layout.css             | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/BTCPayServer/Components/StoreSelector/Default.cshtml b/BTCPayServer/Components/StoreSelector/Default.cshtml
index 6ffccb695..88313dfba 100644
--- a/BTCPayServer/Components/StoreSelector/Default.cshtml
+++ b/BTCPayServer/Components/StoreSelector/Default.cshtml
@@ -41,7 +41,7 @@ else
     @if (Model.Options.Count > 0)
     {
         <div id="StoreSelectorDropdown" class="dropdown only-for-js">
-            <button id="StoreSelectorToggle" class="btn btn-secondary dropdown-toggle rounded-pill px-3 @(Model.CurrentStoreId == null ? "text-secondary" : "")" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <button id="StoreSelectorToggle" class="btn btn-secondary dropdown-toggle rounded-pill px-3 @(Model.CurrentStoreId == null ? "empty-state" : "")" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                 @if (!string.IsNullOrEmpty(Model.CurrentStoreLogoFileId))
                 {
                     <img class="logo" src="@(await FileService.GetFileUrl(Context.Request.GetAbsoluteRootUri(), Model.CurrentStoreLogoFileId))" alt="@Model.CurrentDisplayName" />
diff --git a/BTCPayServer/wwwroot/main/layout.css b/BTCPayServer/wwwroot/main/layout.css
index 0a0479ff6..03431c1e5 100644
--- a/BTCPayServer/wwwroot/main/layout.css
+++ b/BTCPayServer/wwwroot/main/layout.css
@@ -158,15 +158,29 @@
     background-color: var(--btcpay-header-bg);
 }
 
+#StoreSelectorToggle.empty-state {
+    color: var(--btcpay-body-text-muted);
+}
+
 #StoreSelectorToggle::after {
     content: none;
 }
 
+#StoreSelectorToggle,
+#StoreSelectorToggle .logo,
+#StoreSelectorToggle .icon {
+    transition: unset;
+    transition-property: color, border-color;
+    transition-timing-function: ease, ease;
+    transition-duration: var(--btcpay-transition-duration-fast), var(--btcpay-transition-duration-fast);
+}
+
 #StoreSelectorToggle .logo,
 #StoreSelectorToggle .icon {
     width: 1.5rem;
     height: 1.5rem;
-    transition: color 0.15s ease-in-out;
+    /* Fixes seemingly delayed icon animation */
+    -webkit-transition-duration: 0.05s, var(--btcpay-transition-duration-fast);
 }
 
 #StoreSelectorToggle .logo,