From 77aa0334d344fcc437fbae105dc8b3d2247217fd Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 25 Aug 2023 09:42:57 +0300
Subject: [PATCH 1/2] Style second page

---
 .../Advicsories/Advicsories.tsx               | 27 ++++++++-----------
 .../Advicsories/AdvisoriesContent.tsx         |  5 ++--
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx
index 8bf71b76..95a015c3 100644
--- a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx
+++ b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx
@@ -22,19 +22,16 @@ const advisoryTopics: AdvisoryTopicsType = {
 
 const Advicsories = () => {
   const [selectedTitle, setSelectedTitle] = useState('Bad Behaviour')
-  
+
   return (
     <>
       <ValidatorBoxWrapper>
-        <XStack
-          justifyContent={'space-between'}
-          className="layout-left"
-          space={10}
-          style={{ padding: '16px 32px' }}
-        >
-          <YStack>
-            <Stack>
-              <Text size={27}>Advisories</Text>
+        <XStack justifyContent={'space-between'} space={'$10'} style={{ padding: '16px 32px' }}>
+          <YStack justifyContent={'space-between'} space={'$2'}>
+            <Stack marginBottom="$6">
+              <Text size={27} weight={'semibold'}>
+                Advisories
+              </Text>
             </Stack>
             {Object.keys(advisoryTopics).map((title, index) => (
               <Stack
@@ -52,12 +49,10 @@ const Advicsories = () => {
               </Stack>
             ))}
           </YStack>
-          <YStack>
-            <AdvisoriesContent
-              title={selectedTitle}
-              content={advisoryTopics[selectedTitle]}
-            ></AdvisoriesContent>
-          </YStack>
+          <AdvisoriesContent
+            title={selectedTitle}
+            content={advisoryTopics[selectedTitle]}
+          ></AdvisoriesContent>
         </XStack>
       </ValidatorBoxWrapper>
       <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
diff --git a/src/pages/ValidatorOnboarding/Advicsories/AdvisoriesContent.tsx b/src/pages/ValidatorOnboarding/Advicsories/AdvisoriesContent.tsx
index b6405dd4..99620d2e 100644
--- a/src/pages/ValidatorOnboarding/Advicsories/AdvisoriesContent.tsx
+++ b/src/pages/ValidatorOnboarding/Advicsories/AdvisoriesContent.tsx
@@ -1,12 +1,13 @@
 import { Text } from '@status-im/components'
 import { Link } from 'react-router-dom'
+import { YStack } from 'tamagui'
 type AdvisoriesContentProps = {
   title: string
   content: string
 }
 const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => {
   return (
-    <>
+    <YStack justifyContent={'space-between'} space={'$2'}>
       <Text size={27}>{title}</Text>
       <Text size={13}>{content}</Text>
       <Text size={13}>
@@ -25,7 +26,7 @@ const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => {
           More on slashing risks
         </Link>
       </Text>
-    </>
+    </YStack>
   )
 }
 export default AdvisoriesContent

From 03416f47f2e537f2b7bd1e96ca1f53c7cc14541c Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 25 Aug 2023 11:23:15 +0300
Subject: [PATCH 2/2] Fix style

---
 .../Advicsories/Advicsories.tsx               | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx
index 441efdf2..d4dfde04 100644
--- a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx
+++ b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx
@@ -23,15 +23,12 @@ const Advicsories = () => {
   const [selectedTitle, setSelectedTitle] = useState('Bad Behaviour')
 
   return (
-    <XStack
-      justifyContent={'space-between'}
-      className="layout-left"
-      space={10}
-      style={{ padding: '16px 32px' }}
-    >
-      <YStack>
-        <Stack>
-          <Text size={27}>Advisories</Text>
+    <XStack justifyContent={'space-between'} space={'$10'} style={{ padding: '16px 32px' }}>
+      <YStack justifyContent={'space-between'} space={'$2'}>
+        <Stack marginBottom="$6">
+          <Text size={27} weight={'semibold'}>
+            Advisories
+          </Text>
         </Stack>
         {Object.keys(advisoryTopics).map((title, index) => (
           <Stack key={title} onPress={() => setSelectedTitle(title)} style={{ cursor: 'pointer' }}>
@@ -45,12 +42,10 @@ const Advicsories = () => {
           </Stack>
         ))}
       </YStack>
-      <YStack>
-        <AdvisoriesContent
-          title={selectedTitle}
-          content={advisoryTopics[selectedTitle]}
-        ></AdvisoriesContent>
-      </YStack>
+      <AdvisoriesContent
+        title={selectedTitle}
+        content={advisoryTopics[selectedTitle]}
+      ></AdvisoriesContent>
     </XStack>
   )
 }