Ui-Redesign (#203)

* new ui design

* improving ui design

* adding new screenshots

* upgrade dependencies

ui/src/components/version/VersionBanner.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Banner, Descriptions } from '@douyinfe/semi-ui';
+import { Collapse, Descriptions } from '@douyinfe/semi-ui';
 import { useSelector } from '../../services/state/store.js';
 import { MarkdownRender } from '@douyinfe/semi-ui';
 
@@ -8,12 +8,9 @@ import './VersionBanner.less';
 export default function VersionBanner() {
   const versionUpdate = useSelector((state) => state.versionUpdate.versionUpdate);
   return (
-    <Banner
-      className="versionBanner"
-      type="success"
-      icon={null}
-      description={
-        <div style={{ overflow: 'auto' }}>
+    <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>
@@ -29,9 +26,9 @@ export default function VersionBanner() {
               <small>Release Notes</small>
             </b>
           </p>
-          <MarkdownRender raw={versionUpdate.body} style={{ height: '200px' }} />
+          <MarkdownRender raw={versionUpdate.body} />
         </div>
-      }
-    />
+      </Collapse.Panel>
+    </Collapse>
   );
 }

ui/src/components/version/VersionBanner.less

@@ -1,3 +1,7 @@
 .versionBanner {
-  margin-bottom: 1rem;
+  background: rgba(var(--semi-teal-1), 1);
+
+  &__content {
+    overflow: auto;
+  }
 }