From 0d40b7aca0d82f8616f657cf8a58f7f69f56d740 Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Wed, 6 May 2026 19:44:56 +0100
Subject: [PATCH] [web] Add dark mode variants to AI paywall notifications
 (#33469)

GitOrigin-RevId: 4c7b8fc0493b448fd565ac8b8521ee1777e60202
---
 .../components/ai-paywall-notification.tsx       |  8 +++++++-
 .../stylesheets/components/notifications.scss    | 16 ++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/services/web/frontend/js/shared/components/ai-paywall-notification.tsx b/services/web/frontend/js/shared/components/ai-paywall-notification.tsx
index 2cb58c8044..809821b05a 100644
--- a/services/web/frontend/js/shared/components/ai-paywall-notification.tsx
+++ b/services/web/frontend/js/shared/components/ai-paywall-notification.tsx
@@ -91,6 +91,8 @@ function AiPaywallNotification({
           featureLocation === 'workbench' ? chattingMessage : assistMessage
         }
         isDismissible={false}
+        customIcon={null}
+        className="ai-paywall-notification"
       />
     )
   }
@@ -141,7 +143,7 @@ function AiPaywallNotification({
             source={featureLocation}
           />
         }
-        className="ai-upgrade-paywall-btn"
+        className="ai-upgrade-paywall-btn ai-paywall-notification"
       />
     </>
   )
@@ -173,6 +175,7 @@ function GroupsPaywall({
         content={message}
         isDismissible={false}
         customIcon={null}
+        className="ai-paywall-notification"
       />
     </>
   )
@@ -204,6 +207,7 @@ function CommonsPaywall({
         content={message}
         isDismissible={false}
         customIcon={null}
+        className="ai-paywall-notification"
       />
     </>
   )
@@ -243,6 +247,8 @@ function FairUseLimit({
         title={title}
         content={message}
         isDismissible={false}
+        customIcon={null}
+        className="ai-paywall-notification"
       />
     </>
   )
diff --git a/services/web/frontend/stylesheets/components/notifications.scss b/services/web/frontend/stylesheets/components/notifications.scss
index f317ff4475..616fa012a9 100644
--- a/services/web/frontend/stylesheets/components/notifications.scss
+++ b/services/web/frontend/stylesheets/components/notifications.scss
@@ -47,6 +47,10 @@
 }
 
 :root {
+  --notification-ai-paywall-background: var(--bg-info-03);
+  --notification-ai-paywall-color: var(--content-primary);
+  --notification-ai-paywall-border-color: var(--blue-60);
+
   @include light-notification;
 
   // Until we roll out dark mode notifications, make sure we show buttons in
@@ -56,6 +60,10 @@
   }
 
   @include theme('default') {
+    --notification-ai-paywall-background: var(--bg-dark-secondary);
+    --notification-ai-paywall-color: var(--content-primary-dark);
+    --notification-ai-paywall-border-color: var(--blue-30);
+
     .project-ds-nav-page {
       .notification {
         @include dark-notification;
@@ -337,3 +345,11 @@
 .form-messages-bottom-margin > :last-child {
   margin-bottom: var(--spacing-06);
 }
+
+.ai-paywall-notification {
+  // Override notification styles. !important is needed so that it binds
+  // stronger than the notification variant styles.
+  border: 2px solid var(--notification-ai-paywall-border-color) !important;
+  background-color: var(--notification-ai-paywall-background) !important;
+  color: var(--notification-ai-paywall-color) !important;
+}