From f20e4280fc8b259d9aa50e080f19161a9ea81dfd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Valderrama?= Date: Wed, 22 Jul 2026 14:44:26 +0200 Subject: [PATCH] :bug: Fix theme-aware illustration in nitrate modal (#10773) --- .../images/assets/nitrate-welcome-light.svg | 1 + .../resources/images/assets/nitrate-welcome.svg | 2 +- .../main/ui/ds/foundations/assets/raw_svg.cljs | 1 + frontend/src/app/main/ui/icons.cljs | 1 + .../src/app/main/ui/nitrate/nitrate_form.cljs | 6 ++++-- .../src/app/main/ui/nitrate/nitrate_form.scss | 16 ++++++++++++++++ 6 files changed, 24 insertions(+), 3 deletions(-) create mode 100644 frontend/resources/images/assets/nitrate-welcome-light.svg diff --git a/frontend/resources/images/assets/nitrate-welcome-light.svg b/frontend/resources/images/assets/nitrate-welcome-light.svg new file mode 100644 index 0000000000..2ee4fbd363 --- /dev/null +++ b/frontend/resources/images/assets/nitrate-welcome-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/assets/nitrate-welcome.svg b/frontend/resources/images/assets/nitrate-welcome.svg index ef9296dbcc..2956031d64 100644 --- a/frontend/resources/images/assets/nitrate-welcome.svg +++ b/frontend/resources/images/assets/nitrate-welcome.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs index f30c5e5bc4..e856a2a1c5 100644 --- a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs +++ b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs @@ -22,6 +22,7 @@ (def ^:svg-id logo-subscription "logo-subscription") (def ^:svg-id logo-subscription-light "logo-subscription-light") (def ^:svg-id nitrate-welcome "nitrate-welcome") +(def ^:svg-id nitrate-welcome-light "nitrate-welcome-light") (def ^:svg-id marketing-arrows "marketing-arrows") (def ^:svg-id marketing-exchange "marketing-exchange") (def ^:svg-id marketing-file "marketing-file") diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index 1ef023a079..5a68b70933 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -21,6 +21,7 @@ (def ^:icon logo-subscription (icon-xref :logo-subscription)) (def ^:icon logo-subscription-light (icon-xref :logo-subscription-light)) (def ^:icon nitrate-welcome (icon-xref :nitrate-welcome)) +(def ^:icon nitrate-welcome-light (icon-xref :nitrate-welcome-light)) (def ^:icon brand-openid (icon-xref :brand-openid)) (def ^:icon brand-github (icon-xref :brand-github)) diff --git a/frontend/src/app/main/ui/nitrate/nitrate_form.cljs b/frontend/src/app/main/ui/nitrate/nitrate_form.cljs index 24361df2c3..65d0cd528c 100644 --- a/frontend/src/app/main/ui/nitrate/nitrate_form.cljs +++ b/frontend/src/app/main/ui/nitrate/nitrate_form.cljs @@ -48,8 +48,10 @@ :size "m"}]] [:div {:class (stl/css :modal-success-content)} [:div {:class (stl/css :modal-start)} - ;; TODO this svg is a placeholder. Use the proper one when created - [:> raw-svg* {:id "nitrate-welcome"}]] + [:> raw-svg* {:id "nitrate-welcome-light" + :class (stl/css :welcome-illustration-light)}] + [:> raw-svg* {:id "nitrate-welcome" + :class (stl/css :welcome-illustration-dark)}]] [:div {:class (stl/css :modal-end)} [:div {:class (stl/css :modal-title)} diff --git a/frontend/src/app/main/ui/nitrate/nitrate_form.scss b/frontend/src/app/main/ui/nitrate/nitrate_form.scss index 74872c0265..5de76305e5 100644 --- a/frontend/src/app/main/ui/nitrate/nitrate_form.scss +++ b/frontend/src/app/main/ui/nitrate/nitrate_form.scss @@ -101,6 +101,22 @@ block-size: auto; } +.welcome-illustration-light { + display: none; + + :global(.light) & { + display: block; + } +} + +.welcome-illustration-dark { + display: block; + + :global(.light) & { + display: none; + } +} + .radio-btns { display: flex; flex-direction: column;