From 4ce9956c9ad21588b735e0ab960044e7d0425d55 Mon Sep 17 00:00:00 2001
From: Abban Dunne <abban.dunne@wikimedia.de>
Date: Wed, 20 Nov 2024 12:53:59 +0100
Subject: [PATCH] Add swatch compatible info icons

All our desktop banners use info icon svgs. The existing
one isn't currently compatible with our new swatches.

This adds 2 new icons, 2 new css colour vars and replaces
the icons in the latest banner in each of the channels.
---
 .../content/BannerSlides.vue                       |  4 ++--
 .../C24_WMDE_Desktop_DE_13/content/BannerText.vue  |  4 ++--
 .../content/FallbackText.vue                       |  4 ++--
 .../content/BannerSlides.vue                       |  4 ++--
 .../content/BannerSlidesVar.vue                    |  4 ++--
 .../C24_WMDE_Desktop_EN_04/content/BannerText.vue  |  4 ++--
 .../content/BannerTextVar.vue                      |  4 ++--
 .../content/FallbackText.vue                       |  4 ++--
 .../C24_WMDE_iPad_DE_01/content/BannerSlides.vue   |  4 ++--
 .../content/BannerSlidesVar.vue                    |  4 ++--
 .../C24_WPDE_Desktop_01/content/BannerSlides.vue   |  4 ++--
 .../C24_WPDE_Desktop_01/content/BannerText.vue     |  4 ++--
 docs/2025PostCampaignCleanUp.md                    |  8 ++++++++
 src/components/Icons/InfoIconItalic.vue            |  8 ++++++++
 src/components/Icons/InfoIconStraight.vue          | 14 ++++++++++++++
 src/themes/Svingle/Message/Message.scss            |  6 ++++++
 src/themes/Svingle/swatches/color_dark.scss        |  3 +++
 src/themes/Svingle/swatches/color_light.scss       |  9 ++++++---
 src/themes/Treedip/swatches/color_dark.scss        |  3 +++
 src/themes/Treedip/swatches/color_light.scss       |  3 +++
 20 files changed, 75 insertions(+), 27 deletions(-)
 create mode 100644 src/components/Icons/InfoIconItalic.vue
 create mode 100644 src/components/Icons/InfoIconStraight.vue

diff --git a/banners/desktop/C24_WMDE_Desktop_DE_13/content/BannerSlides.vue b/banners/desktop/C24_WMDE_Desktop_DE_13/content/BannerSlides.vue
index 46790f372..f58d6dd7a 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_13/content/BannerSlides.vue
+++ b/banners/desktop/C24_WMDE_Desktop_DE_13/content/BannerSlides.vue
@@ -1,7 +1,7 @@
 <template>
 	<KeenSliderSlide :is-current="currentSlide === 0">
 		<div class="wmde-banner-message-title">
-			<InfoIcon fill="#990000" width="21.5" height="21.5" type="italic"/>
+			<InfoIconItalic class="wmde-banner-message-icon"/>
 			<strong>&nbsp;Wikipedia ist unverkäuflich</strong>
 		</div>
 		<div class="wmde-banner-message-date">
@@ -39,7 +39,7 @@ import { inject, onMounted, onUnmounted } from 'vue';
 import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import InfoIconItalic from '@src/components/Icons/InfoIconItalic.vue';
 
 interface Props {
 	currentSlide: number
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_13/content/BannerText.vue b/banners/desktop/C24_WMDE_Desktop_DE_13/content/BannerText.vue
index c004e00e4..9a13d9284 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_13/content/BannerText.vue
+++ b/banners/desktop/C24_WMDE_Desktop_DE_13/content/BannerText.vue
@@ -2,7 +2,7 @@
 	<div class="wmde-banner-message">
 		<div>
 			<div class="wmde-banner-message-title">
-				<InfoIcon fill="#990000" width="21.5" height="21.5" type="italic"/>
+				<InfoIconItalic class="wmde-banner-message-icon"/>
 				<strong>&nbsp;Wikipedia ist unverkäuflich</strong>
 			</div>
 			<div class="wmde-banner-message-date">
@@ -29,7 +29,7 @@ import { inject, onMounted, onUnmounted } from 'vue';
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import InfoIconItalic from '@src/components/Icons/InfoIconItalic.vue';
 
 const {
 	currentDayName,
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_13/content/FallbackText.vue b/banners/desktop/C24_WMDE_Desktop_DE_13/content/FallbackText.vue
index 5c14762e7..f3622de30 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_13/content/FallbackText.vue
+++ b/banners/desktop/C24_WMDE_Desktop_DE_13/content/FallbackText.vue
@@ -2,7 +2,7 @@
 	<div class="wmde-banner-message">
 		<div>
 			<p>
-				<InfoIcon fill="#990a00"/> <strong>An alle, die Wikipedia in Deutschland nutzen</strong>
+				<InfoIconItalic/> <strong>An alle, die Wikipedia in Deutschland nutzen</strong>
 			</p>
 			<p>
 				{{ campaignDaySentence }} Millionen Menschen nutzen Wikipedia, aber 99&nbsp;% spenden nicht – sie
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { inject } from 'vue';
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import InfoIconItalic from '@src/components/Icons/InfoIconItalic.vue';
 
 const {
 	campaignDaySentence
diff --git a/banners/english/C24_WMDE_Desktop_EN_04/content/BannerSlides.vue b/banners/english/C24_WMDE_Desktop_EN_04/content/BannerSlides.vue
index ac14de304..5c8240aab 100644
--- a/banners/english/C24_WMDE_Desktop_EN_04/content/BannerSlides.vue
+++ b/banners/english/C24_WMDE_Desktop_EN_04/content/BannerSlides.vue
@@ -2,7 +2,7 @@
 	<KeenSliderSlide :is-current="currentSlide === 0">
 		<p class="headline">
 			<strong>
-				<InfoIcon fill="#990a00"/>
+				<InfoIconStraight/>
 				{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }}: &#8220;Wikipedia still can't be
 				sold.&#8221; - An important update for readers in Germany.
 			</strong>
@@ -32,10 +32,10 @@
 <script setup lang="ts">
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
 import { inject, onMounted, onUnmounted } from 'vue';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
 import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
 
 interface Props {
 	currentSlide: number
diff --git a/banners/english/C24_WMDE_Desktop_EN_04/content/BannerSlidesVar.vue b/banners/english/C24_WMDE_Desktop_EN_04/content/BannerSlidesVar.vue
index 31c872b83..e24663cf5 100644
--- a/banners/english/C24_WMDE_Desktop_EN_04/content/BannerSlidesVar.vue
+++ b/banners/english/C24_WMDE_Desktop_EN_04/content/BannerSlidesVar.vue
@@ -2,7 +2,7 @@
 	<KeenSliderSlide :is-current="currentSlide === 0">
 		<p class="headline">
 			<strong>
-				<InfoIcon fill="#990a00"/>
+				<InfoIconStraight/>
 				{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }}: “The internet we were promised“
 				- An important update for readers in Germany.
 			</strong>
@@ -36,7 +36,7 @@ import { inject, onMounted, onUnmounted } from 'vue';
 import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
 
 interface Props {
 	currentSlide: number
diff --git a/banners/english/C24_WMDE_Desktop_EN_04/content/BannerText.vue b/banners/english/C24_WMDE_Desktop_EN_04/content/BannerText.vue
index 7129d9b38..169e01b48 100644
--- a/banners/english/C24_WMDE_Desktop_EN_04/content/BannerText.vue
+++ b/banners/english/C24_WMDE_Desktop_EN_04/content/BannerText.vue
@@ -3,7 +3,7 @@
 		<div>
 			<p>
 				<strong>
-					<InfoIcon fill="#990a00"/>
+					<InfoIconStraight/>
 					{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }}: &#8220;Wikipedia still
 					can't be sold.&#8221; - An important update for readers in Germany.
 				</strong>
@@ -32,9 +32,9 @@
 <script setup lang="ts">
 import { inject, onMounted, onUnmounted } from 'vue';
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
 
 const { currentDayName, currentDate, getCurrentDateAndTime }: DynamicContent = inject( 'dynamicCampaignText' );
 const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
diff --git a/banners/english/C24_WMDE_Desktop_EN_04/content/BannerTextVar.vue b/banners/english/C24_WMDE_Desktop_EN_04/content/BannerTextVar.vue
index e719d6b08..62b22623b 100644
--- a/banners/english/C24_WMDE_Desktop_EN_04/content/BannerTextVar.vue
+++ b/banners/english/C24_WMDE_Desktop_EN_04/content/BannerTextVar.vue
@@ -3,7 +3,7 @@
 		<div>
 			<p>
 				<strong>
-					<InfoIcon fill="#990a00"/>
+					<InfoIconStraight/>
 					{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }}: “The internet we were
 					promised“ - An important update for readers in Germany.
 				</strong>
@@ -33,7 +33,7 @@ import { inject, onMounted, onUnmounted } from 'vue';
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
 
 const { currentDayName, currentDate, getCurrentDateAndTime }: DynamicContent = inject( 'dynamicCampaignText' );
 const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
diff --git a/banners/english/C24_WMDE_Desktop_EN_04/content/FallbackText.vue b/banners/english/C24_WMDE_Desktop_EN_04/content/FallbackText.vue
index 60a58e80d..4ef374d0a 100644
--- a/banners/english/C24_WMDE_Desktop_EN_04/content/FallbackText.vue
+++ b/banners/english/C24_WMDE_Desktop_EN_04/content/FallbackText.vue
@@ -2,7 +2,7 @@
 	<div class="wmde-banner-message">
 		<div>
 			<p>
-				<InfoIcon fill="#990a00"/> <strong>Please don't ignore this 1-minute read</strong>
+				<InfoIconStraight/> <strong>Please don't ignore this 1-minute read</strong>
 			</p>
 			<p>
 				This {{ currentDayName }}, {{ liveDateAndTime.currentDate }} at {{ liveDateAndTime.currentTime }}, please
@@ -17,8 +17,8 @@
 <script setup lang="ts">
 import { inject, onMounted, onUnmounted } from 'vue';
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
 
 const {
 	currentDayName,
diff --git a/banners/pad/C24_WMDE_iPad_DE_01/content/BannerSlides.vue b/banners/pad/C24_WMDE_iPad_DE_01/content/BannerSlides.vue
index 3403b0366..cab10a4a7 100644
--- a/banners/pad/C24_WMDE_iPad_DE_01/content/BannerSlides.vue
+++ b/banners/pad/C24_WMDE_iPad_DE_01/content/BannerSlides.vue
@@ -1,7 +1,7 @@
 <template>
 	<KeenSliderSlide :is-current="currentSlide === 0">
 		<p>
-			<InfoIcon/>
+			<InfoIconStraight/>
 			{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }} - An alle, die Wikipedia in
 			Deutschland nutzen: Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht
 			weg! Am heutigen {{ currentDayName }}, den {{ currentDate }}, bitten wir Sie, die Unabhängigkeit von
@@ -31,10 +31,10 @@
 <script setup lang="ts">
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
 import { inject, onMounted, onUnmounted } from 'vue';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
 import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
 
 interface Props {
 	currentSlide: number
diff --git a/banners/pad/C24_WMDE_iPad_DE_01/content/BannerSlidesVar.vue b/banners/pad/C24_WMDE_iPad_DE_01/content/BannerSlidesVar.vue
index 94adea29d..73e0dfe27 100644
--- a/banners/pad/C24_WMDE_iPad_DE_01/content/BannerSlidesVar.vue
+++ b/banners/pad/C24_WMDE_iPad_DE_01/content/BannerSlidesVar.vue
@@ -1,7 +1,7 @@
 <template>
 	<KeenSliderSlide :is-current="currentSlide === 0">
 		<p>
-			<InfoIcon/>
+			<InfoIconStraight/>
 			{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }} - An alle, die Wikipedia in
 			Deutschland nutzen: Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht
 			weg! Am heutigen {{ currentDayName }}, den {{ currentDate }}, bitten wir Sie, die Unabhängigkeit von
@@ -31,10 +31,10 @@
 <script setup lang="ts">
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
 import { inject, onMounted, onUnmounted } from 'vue';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
 import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
 
 interface Props {
 	currentSlide: number
diff --git a/banners/wpde_desktop/C24_WPDE_Desktop_01/content/BannerSlides.vue b/banners/wpde_desktop/C24_WPDE_Desktop_01/content/BannerSlides.vue
index 283fedb35..b773ef38d 100644
--- a/banners/wpde_desktop/C24_WPDE_Desktop_01/content/BannerSlides.vue
+++ b/banners/wpde_desktop/C24_WPDE_Desktop_01/content/BannerSlides.vue
@@ -1,7 +1,7 @@
 <template>
 	<KeenSliderSlide :is-current="currentSlide === 0">
 		<p class="headline">
-			<InfoIcon fill="#990a00"/>
+			<InfoIconStraight/>
 			<strong> An alle, die Wikipedia in Deutschland nutzen </strong>
 		</p>
 		<p>
@@ -37,9 +37,9 @@
 <script setup lang="ts">
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
 import { inject, onMounted, onUnmounted } from 'vue';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
 import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
 
 interface Props {
 	currentSlide: number
diff --git a/banners/wpde_desktop/C24_WPDE_Desktop_01/content/BannerText.vue b/banners/wpde_desktop/C24_WPDE_Desktop_01/content/BannerText.vue
index f578ec24e..de3b8d7d3 100644
--- a/banners/wpde_desktop/C24_WPDE_Desktop_01/content/BannerText.vue
+++ b/banners/wpde_desktop/C24_WPDE_Desktop_01/content/BannerText.vue
@@ -2,7 +2,7 @@
 	<div class="wmde-banner-message">
 		<div>
 			<p>
-                <InfoIcon fill="#990a00"/> An diesem {{ currentDayName }}, den {{ liveDateAndTime.currentDate }}, um
+                <InfoIconStraight/> An diesem {{ currentDayName }}, den {{ liveDateAndTime.currentDate }}, um
 				{{ liveDateAndTime.currentTime }} sind Sie gefragt:
 			</p>
 			<p>
@@ -24,9 +24,9 @@
 <script setup lang="ts">
 import { inject, onMounted, onUnmounted } from 'vue';
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
 
 const {
 	currentDayName,
diff --git a/docs/2025PostCampaignCleanUp.md b/docs/2025PostCampaignCleanUp.md
index 54c32e67c..877ee77ef 100644
--- a/docs/2025PostCampaignCleanUp.md
+++ b/docs/2025PostCampaignCleanUp.md
@@ -105,6 +105,14 @@ into the `MainDonationForm` messages.
 - `src/components/DonationForm/Forms/messages/MainDonationForm.*.ts`
 - `banners/*/*/messages.ts`
 
+## Delete Info Icon
+
+The `InfoIcon.vue` class is not compatible with the swatches. In the "starting" banners (With the "test number" `_00`) of 2025, all remaining instances of the class should be replaced with `InfoIconStraight.vue` or `InfoIconItalic.vue` and the old component should be deleted.
+
+### Files to look at:
+
+- `src/components/Icons/InfoIcon.vue`
+
 ## Remove deprecated urgencyMessageDaysLeft parameter from DynamicTextPlugin
 
 This was hardcoded in our banner entry points and is now moved into the campaign configuration. Deleting it from the plugin constructor items would cause backwards breaking changes so it is deprecated instead and should be removed in 2025.
diff --git a/src/components/Icons/InfoIconItalic.vue b/src/components/Icons/InfoIconItalic.vue
new file mode 100644
index 000000000..634ff9985
--- /dev/null
+++ b/src/components/Icons/InfoIconItalic.vue
@@ -0,0 +1,8 @@
+<template>
+	<!-- eslint-disable max-len -->
+	<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
+		style="fill-rule: evenodd;clip-rule: evenodd;stroke-linejoin: round;stroke-miterlimit: 2;">
+		<circle cx="8" cy="8" r="8" style="fill: var( --info-icon-background );"/>
+		<path d="M9.195,1.782C9.559,1.782 9.865,1.908 10.114,2.16C10.363,2.412 10.487,2.716 10.487,3.074C10.487,3.431 10.361,3.736 10.109,3.988C9.857,4.24 9.553,4.366 9.195,4.366C8.844,4.366 8.542,4.24 8.29,3.988C8.038,3.736 7.912,3.431 7.912,3.074C7.912,2.716 8.037,2.412 8.286,2.16C8.535,1.908 8.838,1.782 9.195,1.782ZM9.74,5.825L7.938,12.074C7.839,12.431 7.789,12.666 7.789,12.777C7.789,12.841 7.815,12.901 7.868,12.957C7.921,13.013 7.977,13.041 8.035,13.041C8.135,13.041 8.234,12.997 8.334,12.909C8.598,12.692 8.914,12.299 9.283,11.731L9.582,11.907C8.697,13.448 7.757,14.218 6.761,14.218C6.38,14.218 6.077,14.111 5.851,13.897C5.625,13.684 5.513,13.413 5.513,13.084C5.513,12.868 5.563,12.592 5.662,12.258L6.884,8.057C7.001,7.653 7.06,7.348 7.06,7.143C7.06,7.014 7.004,6.9 6.893,6.8C6.781,6.701 6.629,6.651 6.436,6.651C6.348,6.651 6.242,6.654 6.119,6.66L6.233,6.308L9.213,5.825L9.74,5.825Z" style="fill: var( --info-icon-color );fill-rule: nonzero;"/>
+	</svg>
+</template>
diff --git a/src/components/Icons/InfoIconStraight.vue b/src/components/Icons/InfoIconStraight.vue
new file mode 100644
index 000000000..12c760f4d
--- /dev/null
+++ b/src/components/Icons/InfoIconStraight.vue
@@ -0,0 +1,14 @@
+<template>
+	<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_2840_305)">
+			<circle cx="8" cy="8" r="8" style="fill: var( --info-icon-background );"/>
+			<path d="M8.8 5.73334V11.7173H10.2667V13.0667H5.96933V11.7173H7.33334V7.2H5.86667V5.73334H8.8ZM7.33334
+				2.8H8.8V4.26667H7.33334V2.8Z" style="fill: var( --info-icon-color );"/>
+		</g>
+		<defs>
+			<clipPath id="clip0_2840_305">
+				<rect width="16" height="16" fill="white"/>
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/themes/Svingle/Message/Message.scss b/src/themes/Svingle/Message/Message.scss
index 54f08cb75..44d3bc626 100644
--- a/src/themes/Svingle/Message/Message.scss
+++ b/src/themes/Svingle/Message/Message.scss
@@ -35,6 +35,12 @@ $font-sizes: ( breakpoints.$extra-small: 18px ) !default;
 			font-weight: bold;
 		}
 
+		&-icon {
+			position: relative;
+			width: 20px;
+			height: 20px;
+		}
+
 		&-date {
 			text-align: center;
 			padding-bottom: 15px;
diff --git a/src/themes/Svingle/swatches/color_dark.scss b/src/themes/Svingle/swatches/color_dark.scss
index 2557cb5df..dc103cd6b 100644
--- a/src/themes/Svingle/swatches/color_dark.scss
+++ b/src/themes/Svingle/swatches/color_dark.scss
@@ -44,6 +44,9 @@ $blue800: #20303f;
 	--message-color: #{$white};
 	--message-border: #{$red600};
 
+	--info-icon-background: #{$red600};
+	--info-icon-color: #{$white};
+
 	--color-error: #{$red100};
 	--button-close-fill: #{$grey600};
 	--button-background: #{$blue700};
diff --git a/src/themes/Svingle/swatches/color_light.scss b/src/themes/Svingle/swatches/color_light.scss
index af7c99c8d..e647c7e0e 100644
--- a/src/themes/Svingle/swatches/color_light.scss
+++ b/src/themes/Svingle/swatches/color_light.scss
@@ -1,6 +1,3 @@
-$yellow100: #ffee00;
-$yellow200: #ffef9d;
-
 $white: #ffffff;
 $black: #000000;
 
@@ -23,6 +20,9 @@ $blue600: #4465a7;
 $blue650: #3366cc;
 $blue700: #2a4b8d;
 
+$yellow100: #ffee00;
+$yellow200: #ffef9d;
+
 @mixin swatch(
 	$slider: false,
 	$progress-bar: false,
@@ -46,6 +46,9 @@ $blue700: #2a4b8d;
 	--message-color: #{$white};
 	--message-border: #{$red600};
 
+	--info-icon-background: #{$red600};
+	--info-icon-color: #{$white};
+
 	--message-link: #{$yellow100};
 	--message-link-hover: #{$yellow200};
 
diff --git a/src/themes/Treedip/swatches/color_dark.scss b/src/themes/Treedip/swatches/color_dark.scss
index 12f119c28..c86efdda2 100644
--- a/src/themes/Treedip/swatches/color_dark.scss
+++ b/src/themes/Treedip/swatches/color_dark.scss
@@ -39,6 +39,9 @@ $blue800: #20303f;
 	--message-background: #{$grey700};
 	--message-border: #{$red600};
 
+	--info-icon-background: #{$red600};
+	--info-icon-color: #{$white};
+
 	--color-error: #{$red100};
 	--button-close-fill: #{$grey600};
 	--button-background: #{$blue700};
diff --git a/src/themes/Treedip/swatches/color_light.scss b/src/themes/Treedip/swatches/color_light.scss
index 6f4da0bf2..686e9be46 100644
--- a/src/themes/Treedip/swatches/color_light.scss
+++ b/src/themes/Treedip/swatches/color_light.scss
@@ -35,6 +35,9 @@ $blue700: #2a4b8d;
 	--message-background: #{$white};
 	--message-border: #{$red600};
 
+	--info-icon-background: #{$red600};
+	--info-icon-color: #{$white};
+
 	--color-error: #{$red600};
 	--button-close-fill: #{$grey600};
 	--button-background: #{$blue700};