Style second page

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' }}>

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