diff --git a/src/App.vue b/src/App.vue
index cc5ca25d2..9c9599718 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,10 +3,11 @@
<div class="layout-news" v-if="newsActive">
<div class="layout-news-container">
<a href="https://www.primefaces.org/store" target="_blank">
- <img class="layouts-news-mockup-image" src="./assets/images/topbar-freya-mockup.png">
+ <img class="layouts-news-mockup-image" src="./assets/images/topbar-primeblocks-device.png">
</a>
<a href="https://www.primefaces.org/store" target="_blank" tabindex="-1" style="text-decoration: none" class="layout-news-button">
LEARN MORE
+ <i class="pi pi-angle-right"></i>
</a>
<a tabindex="0" class="layout-news-close" @click="hideNews">
<i class="pi pi-times"></i>
diff --git a/src/assets/images/topbar-primeblocks-device.png b/src/assets/images/topbar-primeblocks-device.png
new file mode 100644
index 000000000..ff589d7b2
Binary files /dev/null and b/src/assets/images/topbar-primeblocks-device.png differ
diff --git a/src/assets/styles/app/_news.scss b/src/assets/styles/app/_news.scss
index 9fa816ff5..3d49bc10c 100644
--- a/src/assets/styles/app/_news.scss
+++ b/src/assets/styles/app/_news.scss
@@ -4,7 +4,8 @@
justify-content: center;
align-items: center;
margin-left: 250px;
- background-image: url("./assets/images/topbar-freya-bg.png");
+ background-image: linear-gradient(197.37deg, rgba(0, 120, 227, 0.07) -0.38%, rgba(165, 72, 181, 0) 101.89%), linear-gradient(115.93deg, rgba(62, 136, 246, 0.15) 4.86%, rgba(62, 180, 246, 0.0495) 38.05%, rgba(62, 235, 246, 0) 74.14%), radial-gradient(56.47% 76.87% at 6.92% 7.55%, rgba(62, 136, 246, 0.05) 0%, rgba(62, 158, 246, 0.013) 52.16%, rgba(62, 246, 246, 0) 100%), linear-gradient(306.53deg, rgba(163, 171, 217, 0.1) 19.83%, rgba(163, 171, 217, 0) 97.33%);
+ background-color: white;
.layout-news-container {
width: 100%;
@@ -16,16 +17,22 @@
font-weight: bold;
font-size: 20px;
+ a {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
img.layouts-news-mockup-image {
- max-width: 500px;
+ height: 70px;
}
.layout-news-button {
- border: 2px solid #ffffff;
- color: #ffffff;
+ border: 1px solid #283738;
+ color: #283738;
font-size: 15px;
- padding: 0.5em 1em;
- font-weight: bolder;
+ padding: 0.3em 0.3em 0.5em 1em;
+ font-weight: bold;
border-radius: 3px;
display: flex;
justify-content: center;