agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-05-23 17:19:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

[web] Add dark mode variants to AI paywall notifications (#33469)

Browse Source 
GitOrigin-RevId: 4c7b8fc0493b448fd565ac8b8521ee1777e60202
This commit is contained in:
Mathias Jakobsen
2026-05-06 19:44:56 +01:00
committed by Copybot
parent 76fbb56107
commit 0d40b7aca0
2 changed files with 23 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
services/web/frontend/js/shared/components/ai-paywall-notification.tsx
View File

@@ -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"
/>
</>
)

16
services/web/frontend/stylesheets/components/notifications.scss
View File

@@ -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;
}