improving version banner

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fredy",
-  "version": "20.0.3",
+  "version": "20.0.4",
   "description": "[F]ind [R]eal [E]states [d]amn eas[y].",
   "scripts": {
     "prepare": "husky",

ui/src/components/version/VersionBanner.jsx

@@ -3,36 +3,86 @@
  * Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
  */
 
-import { Collapse, Descriptions } from '@douyinfe/semi-ui-19';
+import { useState } from 'react';
+import { Banner, Button, Modal, Tag, Space, Typography, Descriptions, MarkdownRender } from '@douyinfe/semi-ui-19';
+import { IconAlertCircle, IconArrowRight } from '@douyinfe/semi-icons';
 import { useSelector } from '../../services/state/store.js';
-import { MarkdownRender } from '@douyinfe/semi-ui-19';
 
 import './VersionBanner.less';
 
+const { Text } = Typography;
+
 export default function VersionBanner() {
+  const [modalVisible, setModalVisible] = useState(false);
   const versionUpdate = useSelector((state) => state.versionUpdate.versionUpdate);
+
   return (
-    <Collapse>
-      <Collapse.Panel header="A new version of Fredy is available" itemKey="1" className="versionBanner">
-        <div className="versionBanner__content">
-          <p>A new version of Fredy is available. Update now to take advantage of the latest features and bug fixes.</p>
-          <Descriptions row size="small">
-            <Descriptions.Item itemKey="Your Version">{versionUpdate.localFredyVersion}</Descriptions.Item>
-            <Descriptions.Item itemKey="Latest Version">{versionUpdate.version}</Descriptions.Item>
-            <Descriptions.Item itemKey="Github Release">
-              <a href={versionUpdate.url} target="_blank" rel="noreferrer">
-                {versionUpdate.url}
-              </a>{' '}
-            </Descriptions.Item>
-          </Descriptions>
-          <p>
-            <b>
-              <small>Release Notes</small>
-            </b>
-          </p>
+    <>
+      <Banner
+        className="versionBanner"
+        type="warning"
+        bordered
+        closeIcon={null}
+        description={
+          <div className="versionBanner__bar">
+            <Space spacing={8} align="center">
+              <IconAlertCircle size="small" />
+              <Text strong size="small">
+                New version available
+              </Text>
+              <Tag color="amber" size="small" shape="circle">
+                {versionUpdate.version}
+              </Tag>
+              <Text type="tertiary" size="small">
+                Current: {versionUpdate.localFredyVersion}
+              </Text>
+            </Space>
+            <Button
+              theme="borderless"
+              size="small"
+              icon={<IconArrowRight />}
+              iconPosition="right"
+              onClick={() => setModalVisible(true)}
+            >
+              Release notes
+            </Button>
+          </div>
+        }
+      />
+      <Modal
+        title={
+          <Space spacing={8} align="center">
+            <Text strong>Fredy {versionUpdate.version}</Text>
+            <Tag color="amber" size="small">
+              New
+            </Tag>
+          </Space>
+        }
+        visible={modalVisible}
+        onCancel={() => setModalVisible(false)}
+        width={640}
+        footer={
+          <Space>
+            <Button onClick={() => setModalVisible(false)}>Close</Button>
+            <Button
+              type="primary"
+              icon={<IconArrowRight />}
+              iconPosition="right"
+              onClick={() => window.open(versionUpdate.url, '_blank')}
+            >
+              View on GitHub
+            </Button>
+          </Space>
+        }
+      >
+        <Descriptions row size="small" className="versionBanner__details">
+          <Descriptions.Item itemKey="Your Version">{versionUpdate.localFredyVersion}</Descriptions.Item>
+          <Descriptions.Item itemKey="Latest Version">{versionUpdate.version}</Descriptions.Item>
+        </Descriptions>
+        <div className="versionBanner__notes">
           <MarkdownRender raw={versionUpdate.body} />
         </div>
-      </Collapse.Panel>
-    </Collapse>
+      </Modal>
+    </>
   );
 }

ui/src/components/version/VersionBanner.less

@@ -1,7 +1,24 @@
 .versionBanner {
-  background: rgba(var(--semi-teal-1), 1);
+  margin-bottom: 0 !important;
 
-  &__content {
-    overflow: auto;
+  .semi-banner-body {
+    padding: 6px 16px;
   }
-}
+
+  &__bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &__details {
+    margin-bottom: 16px;
+  }
+
+  &__notes {
+    max-height: 400px;
+    overflow-y: auto;
+    padding-right: 4px;
+  }
+}