feat(keystore-card): create selected design

src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/MigratePanel.tsx

@@ -37,7 +37,7 @@ const MigratePanel = () => {
           </Text>
         </div>
       </YStack>
-      <KeystoreBackupsCard />
+      <KeystoreBackupsCard isSelected={true} />
       <div style={{ width: '100%' }}>
         {isVisibleWarning && (
           <InformationBox

src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreBackupsCard.stories.ts

@@ -17,3 +17,9 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {},
 }
+
+export const Selected: Story = {
+  args: {
+    isSelected: true,
+  },
+}

src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreBackupsCard.tsx

@@ -1,7 +1,11 @@
 import { Text } from '@status-im/components'
 import { XStack, YStack } from 'tamagui'
 
-const KeystoreBackupsCard = () => {
+type KeystoreBackupsCardProps = {
+  isSelected?: boolean
+}
+
+const KeystoreBackupsCard = ({ isSelected }: KeystoreBackupsCardProps) => {
   const downloadKeyFilesHandler = () => {
     const element = document.createElement('a')
     const file = new Blob([''], { type: 'text/plain' })
@@ -14,7 +18,8 @@ const KeystoreBackupsCard = () => {
   return (
     <YStack
       style={{
-        border: '1px solid #DCE0E5',
+        backgroundColor: isSelected ? '#f4f6fe' : '#fff',
+        border: `1px solid ${isSelected ? '#2A4AF566' : '#DCE0E5'}`,
         borderRadius: '16px',
         padding: '9px 16px',
         cursor: 'pointer',