web/storagenode: add banner with info on storagenode payout changes

Closes https://github.com/storj/storj/issues/5712

Change-Id: I037adb2af756d44f87e6f5ee38c0f9bd8033809d

web/storagenode/src/app/components/SNOContentFilling.vue

@@ -4,6 +4,23 @@
 <template>
     <div class="info-area">
         <SatelliteSelection />
+        <div class="info-area__announcement">
+            <LargeInfoIcon
+                class="info-area__announcement__image"
+                alt="Announcement image"
+            />
+            <p class="info-area__announcement__info">
+                Please read the information on the
+                <a
+                    class="info-area__announcement__info__link"
+                    href="https://www.storj.io/s/storage-node-pricing-update-2023"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                >
+                    forum
+                </a> regarding the Storage Node payout changes.
+            </p>
+        </div>
         <div v-if="isDisqualifiedInfoShown" class="info-area__disqualified-info">
             <LargeDisqualificationIcon
                 class="info-area__disqualified-info__image"
@@ -181,6 +198,7 @@ import WalletArea from '@/app/components/WalletArea.vue';
 
 import LargeSuspensionIcon from '@/../static/images/largeSuspend.svg';
 import LargeDisqualificationIcon from '@/../static/images/largeDisqualify.svg';
+import LargeInfoIcon from '@/../static/images/LargeInfo.svg';
 import BlueArrowRight from '@/../static/images/BlueArrowRight.svg';
 
 // @vue/component
@@ -199,6 +217,7 @@ import BlueArrowRight from '@/../static/images/BlueArrowRight.svg';
         LargeDisqualificationIcon,
         LargeSuspensionIcon,
         BlueArrowRight,
+        LargeInfoIcon,
     },
 })
 export default class SNOContentFilling extends Vue {
@@ -487,6 +506,32 @@ export default class SNOContentFilling extends Vue {
             }
         }
 
+        &__announcement {
+            display: flex;
+            align-items: center;
+            padding: 20px 27px 20px 25px;
+            background-color: var(--block-background-color);
+            border-radius: 12px;
+            width: calc(100% - 52px);
+            margin-top: 17px;
+            color: var(--regular-text-color);
+
+            &__image {
+                min-height: 35px;
+                min-width: 38px;
+                margin-right: 17px;
+            }
+
+            &__info {
+                font-size: 14px;
+                line-height: 21px;
+
+                &__link {
+                    color: var(--navigation-link-color);
+                }
+            }
+        }
+
         &__title {
             font-size: 18px;
             line-height: 57px;

web/storagenode/static/images/LargeInfo.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 40 40" version="1.1">
+    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(35.294118%,40%,48.627451%);fill-opacity:1;" d="M 20 0 C 31.046875 0 40 8.953125 40 20 C 40 31.046875 31.046875 40 20 40 C 8.953125 40 0 31.046875 0 20 C 0 8.953125 8.953125 0 20 0 Z M 20 0 "/>
+    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 20 17.785156 C 18.777344 17.785156 17.777344 18.851562 17.777344 20.152344 L 17.777344 29.632812 C 17.777344 29.75 17.785156 29.878906 17.800781 29.996094 C 17.960938 31.125 18.886719 32 20 32 C 21.21875 32 22.21875 30.933594 22.21875 29.632812 L 22.21875 20.160156 C 22.21875 18.851562 21.21875 17.785156 20 17.785156 Z M 20 17.785156 "/>
+    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 20 15.476562 C 21.71875 15.476562 23.109375 14.085938 23.109375 12.367188 C 23.109375 10.644531 21.71875 9.257812 20 9.257812 C 18.277344 9.257812 16.890625 10.644531 16.890625 12.367188 C 16.882812 14.085938 18.273438 15.476562 20 15.476562 Z M 20 15.476562 "/>
+</svg>