diff --git a/assets/css/sticky-header.css b/assets/css/sticky-header.css
index 464694d..c010792 100644
--- a/assets/css/sticky-header.css
+++ b/assets/css/sticky-header.css
@@ -57,6 +57,7 @@
display: flex; /* added for vertical centering */
align-items: center; /* centers content vertically */
justify-content: center; /* centers content horizontally */
+ opacity: 1 !important;
}
/* Profile button colors */
@@ -64,17 +65,55 @@
background-color: var(--profile-button-bg-color, #ffc107);
color: var(--profile-button-text-color, #000);
}
-.profile-button:hover {
- background-color: #e0a800;
-}
/* Logout button colors */
.logout-button {
background-color: var(--logout-button-bg-color, #d9534f);
color: var(--logout-button-text-color, #fff);
}
-.logout-button:hover {
- background-color: #c9302c;
+
+/* Logout button "logging out" state */
+.logout-button.is-logging-out {
+ position: relative;
+ opacity: 0.8;
+ cursor: wait;
+ padding-right: 26px; /* space for spinner */
+}
+
+/* Default: show "Logout", hide "Logging out..." */
+.logout-button .btn-text-logging-out {
+ display: none;
+}
+
+/* When logging out: swap labels */
+.logout-button.is-logging-out .btn-text-default {
+ display: none;
+}
+
+.logout-button.is-logging-out .btn-text-logging-out {
+ display: inline;
+}
+
+/* Simple spinner on the right side of the logout button */
+.logout-button.is-logging-out::after {
+ content: "";
+ position: absolute;
+ right: 8px;
+ top: 50%;
+ width: 14px;
+ height: 14px;
+ margin-top: -7px;
+ border-radius: 50%;
+ border: 2px solid currentColor;
+ border-top-color: transparent;
+ animation: cashtab-spin 0.8s linear infinite;
+}
+
+/* Spinner animation */
+@keyframes cashtab-spin {
+ to {
+ transform: rotate(360deg);
+ }
}
/* Prevent header from overlapping content */
@@ -95,4 +134,84 @@ body {
.profile-button, .logout-button {
margin: 4px 0;
}
+}
+
+/* --- Animated Slide Effect for Profile + Logout Buttons --- */
+
+/* Base animation wrapper */
+.paybutton-animated {
+ position: relative;
+ overflow: hidden;
+ z-index: 0;
+ transition: color 0.25s ease;
+ font-weight: bold; /*make text bold for better visibility*/
+}
+
+/* Text wrapper stays above the animated layer */
+.paybutton-animated span {
+ position: relative;
+ z-index: 1;
+}
+
+/* Animated overlay grows left to right */
+.paybutton-animated::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 0;
+ height: 100%;
+ z-index: 0;
+ transition: width 0.25s ease-out;
+}
+
+/* On hover, fill the whole button */
+.paybutton-animated:hover::before {
+ width: 100%;
+}
+
+/* --- Profile button animated variant --- */
+.profile-button.paybutton-animated {
+ border: 2px solid var(--profile-button-bg-color);
+ color: var(--profile-button-text-color);
+}
+
+.profile-button.paybutton-animated::before {
+ background-color: #808080;
+ opacity: 0.3;
+}
+
+/* --- Logout button animated variant --- */
+.logout-button.paybutton-animated {
+ border: 2px solid var(--logout-button-bg-color);
+ color: var(--logout-button-text-color, #fff);
+}
+
+.logout-button.paybutton-animated::before {
+ background-color: #808080;
+ opacity: 0.3;
+}
+
+/* --- Profile and Logout Button SVG Icon Style --- */
+.paybutton-animated .btn-icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 6px;
+ width: 16px;
+ height: 16px;
+ position: relative;
+ z-index: 1;
+}
+
+.paybutton-animated .btn-icon svg {
+ width: 100%;
+ height: 100%;
+ fill: currentColor; /* inherits text color */
+}
+
+/* Ensure text stays above animation layer */
+.paybutton-animated .btn-text {
+ position: relative;
+ z-index: 1;
}
\ No newline at end of file
diff --git a/assets/icons/logout.svg b/assets/icons/logout.svg
new file mode 100644
index 0000000..6acb19d
--- /dev/null
+++ b/assets/icons/logout.svg
@@ -0,0 +1,2 @@
+
+
diff --git a/assets/icons/profile.svg b/assets/icons/profile.svg
new file mode 100644
index 0000000..03626d9
--- /dev/null
+++ b/assets/icons/profile.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/js/paybutton-paywall-cashtab-login.js b/assets/js/paybutton-paywall-cashtab-login.js
index 7779ba1..55c9782 100644
--- a/assets/js/paybutton-paywall-cashtab-login.js
+++ b/assets/js/paybutton-paywall-cashtab-login.js
@@ -29,18 +29,31 @@ function handleLogin(address, txHash, loginToken) {
/**
* Handle user logout.
*/
-function handleLogout() {
+function handleLogout(logoutButton) {
+ if (logoutButton) {
+ // Disable the button and mark as logging out
+ logoutButton.disabled = true;
+ logoutButton.classList.add('is-logging-out');
+ }
+
jQuery.post(
PaywallAjax.ajaxUrl,
{
action: 'paybutton_logout',
security: PaywallAjax.nonce
- },
- function() {
- isLoggedIn = false;
- location.reload();
}
- );
+ )
+ .done(function () {
+ isLoggedIn = false;
+ location.reload();
+ })
+ .fail(function () {
+ if (logoutButton) {
+ logoutButton.disabled = false;
+ logoutButton.classList.remove('is-logging-out');
+ }
+ alert('Logout failed. Please try again.');
+ });
}
/**
diff --git a/paybutton.php b/paybutton.php
index 0c8b619..614e1c5 100644
--- a/paybutton.php
+++ b/paybutton.php
@@ -70,4 +70,4 @@
exit;
}
}
-});
+});
\ No newline at end of file
diff --git a/templates/public/sticky-header.php b/templates/public/sticky-header.php
index c6f2c52..dc55b15 100644
--- a/templates/public/sticky-header.php
+++ b/templates/public/sticky-header.php
@@ -8,6 +8,34 @@
// If no valid address is set, do not display the sticky header.
return;
}
+
+ $paybutton_svg_allowed = array(
+ 'svg' => array(
+ 'xmlns' => true,
+ 'viewbox' => true,
+ 'viewBox' => true,
+ 'width' => true,
+ 'height' => true,
+ 'fill' => true,
+ ),
+ 'path' => array(
+ 'd' => true,
+ 'fill' => true,
+ ),
+ 'circle' => array(
+ 'cx' => true,
+ 'cy' => true,
+ 'r' => true,
+ 'fill' => true,
+ ),
+ 'rect' => array(
+ 'x' => true,
+ 'y' => true,
+ 'width' => true,
+ 'height' => true,
+ 'fill' => true,
+ ),
+ );
?>
\ No newline at end of file