refactor: batch 3

src/faq/KugouFAQ.tsx

@@ -1,31 +1,25 @@
-import { Alert, AlertIcon, Container, Flex, List, ListItem, Text } from '@chakra-ui/react';
 import { Header4 } from '~/components/HelpText/Headers';
 import { SegmentKeyImportInstructions } from './SegmentKeyImportInstructions';
 import { KugouAllInstructions } from '~/features/settings/panels/Kugou/KugouAllInstructions.tsx';
+import { RiErrorWarningLine } from 'react-icons/ri';
 
 export function KugouFAQ() {
   return (
     <>
       <Header4>解锁失败</Header4>
-      <List spacing={2}>
-        <ListItem>
-          <Text>
-            酷狗现在对部分用户推送了 <code>kgg</code> 加密格式（安卓、Windows 客户端）。
-          </Text>
-          <Text>根据平台不同，你需要提取密钥数据库。</Text>
+      <p>
+        酷狗现在对部分用户推送了 <code>kgg</code> 加密格式（安卓、Windows 客户端）。
+      </p>
+      <p>根据平台不同，你需要提取密钥数据库。</p>
 
-          <Container p={2}>
-            <Alert status="warning" borderRadius={5}>
-              <AlertIcon />
-              <Flex flexDir="column">
-                <Text>安卓用户提取密钥需要 root 权限，或注入文件提供器。</Text>
-              </Flex>
-            </Alert>
-          </Container>
+      <div className="p-2 @container">
+        <div className="alert alert-warning">
+          <RiErrorWarningLine className="size-6" />
+          <p>安卓用户提取密钥需要 root 权限，或注入文件提供器。</p>
+        </div>
+      </div>
 
-          <SegmentKeyImportInstructions tab="酷狗密钥" clientInstructions={<KugouAllInstructions />} />
-        </ListItem>
-      </List>
+      <SegmentKeyImportInstructions tab="酷狗密钥" clientInstructions={<KugouAllInstructions />} />
     </>
   );
 }