Fix banner mobile view

Author: GusevPM

components/LeftSidebar.vue

@@ -228,7 +228,7 @@ const handleNavigate = (url) => {
 				</Flex>
 			</Flex> -->
 
-			<AdvBanner :style="{ width: '100%' }" />
+			<AdvBanner />
 		</Flex>
 
 		<Flex direction="column" gap="16" style="margin-right: 20px">

components/shared/AdvBanner.vue

@@ -64,16 +64,17 @@ onMounted(() => {
 			:class="$style.ad_horizontal"
 		>
 			<Flex align="center" gap="12">
-				<Flex align="center" gap="6">
+				<Flex align="center" gap="8">
 					<Icon v-if="adv.icon" :name="adv.icon" size="14" color="brand" />
-					<Text size="13" weight="600" color="primary"> {{ adv.header }} </Text>
+
+					<Text size="13" weight="600" color="primary" :class="$style.text"> {{ adv.header }} </Text>
 				</Flex>
 
-				<Text size="13" weight="600" color="tertiary" height="140"> {{ adv.body }} </Text>
+				<Text size="13" weight="600" color="tertiary" height="140" :class="$style.text"> {{ adv.body }} </Text>
 			</Flex>
 
 			<Flex align="center" gap="8">
-				<Text size="13" weight="600" color="brand"> {{ adv.footer }} </Text>
+				<Text size="13" weight="600" color="brand" :class="$style.text"> {{ adv.footer }} </Text>
 
 				<Icon @click.prevent.stop="isDisplayed = false" name="close" size="16" color="secondary" :class="$style.close_icon" />
 			</Flex>
@@ -165,6 +166,10 @@ onMounted(() => {
 			transform: scale(1.1);
 		}
 	}
+
+	& .text {
+		line-height: 1.5;
+	}
 }
 
 @media (max-width: 500px) {

layouts/default.vue

@@ -11,7 +11,7 @@ import AdvBanner from "@/components/shared/AdvBanner.vue"
 
 			<Flex direction="column" align="center" :class="$style.content">
 				<Feed />
-				<AdvBanner orientation="horizontal" />
+				<AdvBanner advName="celenium_survey" orientation="horizontal" />
 				<ActionBar />
 
 				<Flex direction="column" align="center" wide :class="$style.container">

services/constants/advertising.js

@@ -6,33 +6,33 @@ const advertisements = [
 		header: 'Try out Celenium API',
 		body: 'The power of Celestia: Scalable, Secure and Modular Blockchain.',
 		footer: 'Get started',
-		weight: 0.2,
+		weight: 0.5,
 	},
 	{
 		name: 'celenium_survey',
 		link: 'https://t.co/4nBFExP2VR',
 		icon: 'validator',
 		header: 'Celenium survey',
-		body: 'Please take 5 minutes and answer a few questions.',
+		body: 'Please take 5 minutes of your time and answer a few questions.',
 		footer: 'Take the survey',
-		weight: 0.4,
+		weight: 1.1,
 	},
 	{
 		name: 'lumina',
 		modal: 'lightNode',
 		icon: 'lumina',
 		header: 'Your Own Node',
-		body: 'Launch a node directly in your browser or on your phone.',
+		body: 'Easily launch a node right in your browser or on your phone.',
 		footer: 'Run Light Node',
-		weight: 0.4,
+		weight: 0.5,
 	},
 ]
 
 export function getRandomAdv() {
     const randomNum = Math.random()
 
     let cumWeight = 0
-    for (let ad of advertisements) {
+    for (let ad of advertisements.filter(el => el.weight <= 1)) {
         cumWeight += ad.weight
         if (randomNum <= cumWeight) {
             return ad