fix: clean code activation and os card

src/pages/ValidatorOnboarding/Activation/Activation.tsx

@@ -2,45 +2,30 @@ import { useState, useEffect } from 'react'
 import { XStack, Stack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 import Confetti from 'react-confetti'
+
 import ActivationCard from './ActivationCard'
 import LinkWithArrow from '../../../components/General/LinkWithArrow'
 
-
-const styles = {
-  confettiContainer: {
-    position: 'relative' as const,
-    width: '100%',
-    height: '100%',
-  },
-  confettiCanvas: {
-    position: 'absolute' as const,
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    zIndex: 0,
-  },
-}
 type ActivationProps = {
-  validatorsValue: string;
+  validatorsValue: string
   executionSyncStatus1: {
-    text: string;
+    text: string
-    isGaugeIncluded: boolean;
+    isGaugeIncluded: boolean
-    gaugeColor: string;
+    gaugeColor: string
-    gaugeSynced: number;
+    gaugeSynced: number
-    gaugeTotal: number;
+    gaugeTotal: number
-  };
+  }
   executionSyncStatus2: {
-    text: string;
+    text: string
-    isGaugeIncluded: boolean;
+    isGaugeIncluded: boolean
-    gaugeColor: string;
+    gaugeColor: string
-    gaugeSynced: number;
+    gaugeSynced: number
-    gaugeTotal: number;
+    gaugeTotal: number
-  };
+  }
-  currentAPRValue: string;
+  currentAPRValue: string
-  estimatedActivationTimeValue: string;
+  estimatedActivationTimeValue: string
-  validatorQueueValue: string;
+  validatorQueueValue: string
-};
+}
 
 const Activation = ({
   validatorsValue,
@@ -79,16 +64,15 @@ const Activation = ({
           <YStack space={'$3'} marginTop={'10px'} width={'33%'}>
             <XStack space={'$3'} justifyContent={'space-between'}>
               <ActivationCard text="Validators" value={validatorsValue} />
-              <ActivationCard
+              <ActivationCard {...executionSyncStatus1} />
-                {...executionSyncStatus1}
+              <ActivationCard {...executionSyncStatus2} />
-              />
-              <ActivationCard
-                {...executionSyncStatus2}
-              />
             </XStack>
             <XStack space={'$3'}>
               <ActivationCard text="Current APR" value={currentAPRValue} />
-              <ActivationCard text="Estimated Activation Time" value={estimatedActivationTimeValue} />
+              <ActivationCard
+                text="Estimated Activation Time"
+                value={estimatedActivationTimeValue}
+              />
               <ActivationCard text="Validator Queue" value={validatorQueueValue} />
             </XStack>
           </YStack>
@@ -105,3 +89,19 @@ const Activation = ({
 }
 
 export default Activation
+
+const styles = {
+  confettiContainer: {
+    position: 'relative' as const,
+    width: '100%',
+    height: '100%',
+  },
+  confettiCanvas: {
+    position: 'absolute' as const,
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    zIndex: 0,
+  },
+}

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/osCard.stories.tsx

@@ -1,23 +1,20 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import osCard from './OsCard'
+import OsCard from './OsCard'
 
 const meta = {
-    title: 'ValidatorOnboarding/osCard',
+  title: 'ValidatorOnboarding/OsCard',
-    component: osCard,
+  component: OsCard,
-    parameters: {
-        layout: 'centered',
-    },
   tags: ['autodocs'],
-} satisfies Meta<typeof osCard>
+} satisfies Meta<typeof OsCard>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-        icon: "/icons/MAC.png",
+    icon: '/icons/MAC.png',
-        name: "Mac",
+    name: 'Mac',
-        isSelected: true
+    isSelected: true,
   },
 }