optimize(client): logo

optimize(client): optimize logo

README.md

@@ -1,3 +1,8 @@
+<picture>
+  <img alt="Rsdoctor Banner" width="100%" src="https://github.com/web-infra-dev/rsdoctor/assets/18437716/5ceefce9-7df0-4e95-8245-e165eaa3a4a9">
+</picture>
+
+
 # Rsdoctor
 
 English | [简体中文](./README.zh-CN.md)

README.zh-CN.md

@@ -1,3 +1,6 @@
+<picture>
+  <img alt="Rsdoctor Banner" width="100%" src="https://github.com/web-infra-dev/rsdoctor/assets/18437716/5ceefce9-7df0-4e95-8245-e165eaa3a4a9">
+</picture>
 
 # Rsdoctor
 

packages/client/src/index.tsx

@@ -2,7 +2,7 @@ import '@rsdoctor/components/i18n';
 import App from './App';
 import ReactDOM from 'react-dom/client';
 import './common/styles/base.scss';
-import icon from './common/imgs/icon.svg';
+import icon from './common/imgs/rsdoctor.png';
 
 const rootElement = document.getElementById('root');
 const root = ReactDOM.createRoot(rootElement!);

packages/components/src/components/Alert/package-relation.tsx

@@ -137,49 +137,37 @@ export const PackageRelationAlert: React.FC<PackageRelationAlertProps> = ({
             const parsedSizeStr = size.parsedSize ? formatSize(size.parsedSize) : null;
             const name = `${el.name}@${el.version}`;
             return (
-              <Row>
-                <Col span={3}>
-                  <Space key={el.version} style={{ wordBreak: 'break-all' }} align="center">
-                    <Typography.Text style={{ marginLeft: 4 }}>└</Typography.Text>
-                    <Bdg label={el.name} value={`v${el.version}`} tooltip={name} />
-
-                  </Space>
-                </Col>
-                <Col span={6}>
-                  <Space key={`${el.version}-2`} style={{ wordBreak: 'break-all' }} align="center">
-                  <Divider type="vertical" />
-                    <Bdg
-                      label={
-                        <div color={'rgb(255, 255, 255)'}>
-                          Source Size <InfoCircleOutlined />
-                        </div>
-                      }
-                      value={sizeStr}
-                      tooltip={`The bundle size of "${name}" is ${sizeStr}, this is source size.`}
-                      type="error"
-                    />
-                    <Bdg
-                      label="Bundled size"
-                      value={parsedSizeStr || 'CONCATENATED'}
-                      tooltip={`The bundle size of "${name}" is ${sizeStr}, this is after bundled, concatenated module cannot get bundled size. `}
-                      type="error"
-                    />
-                  </Space>
-                </Col>
-                <Col span={13}>
-                  <Space key={`${el.version}-3`} style={{ wordBreak: 'break-all' }} align="center">
-                    <Divider type="vertical" />
-                    <Typography.Paragraph
-                      style={{ marginBottom: 0, width: '50rem' }}
-                      copyable={{ text: el.root }}
-                      ellipsis={{ rows: 1, expandable: true, symbol: <ExpandAltOutlined />, tooltip: el.root }}
-                      code
-                    >
-                  {el.root}
-                    </Typography.Paragraph>
-                  </Space>
-                </Col>
-                </Row>
+              <Space key={el.version} style={{ wordBreak: 'break-all' }} align="center">
+                <Typography.Text style={{ marginLeft: 4 }}>└</Typography.Text>
+                <Bdg label={el.name} value={`v${el.version}`} tooltip={name} />
+              <Divider type="vertical" />
+                <Bdg
+                  label={
+                    <div color={'rgb(255, 255, 255)'}>
+                      Source Size <InfoCircleOutlined />
+                    </div>
+                  }
+                  value={sizeStr}
+                  tooltip={`The bundle size of "${name}" is ${sizeStr}, this is source size.`}
+                  type="error"
+                />
+                <Bdg
+                  label="Bundled size"
+                  value={parsedSizeStr || 'CONCATENATED'}
+                  tooltip={`The bundle size of "${name}" is ${sizeStr}, this is after bundled, concatenated module cannot get bundled size. `}
+                  type="error"
+                />
+
+                <Divider type="vertical" />
+                <Typography.Paragraph
+                  style={{ marginBottom: 0, width: '40vw' }}
+                  copyable={{ text: el.root }}
+                  ellipsis={{ rows: 1, expandable: true, symbol: <ExpandAltOutlined />, tooltip: el.root }}
+                  code
+                >
+              {el.root}
+                </Typography.Paragraph>
+              </Space>
             );
           })}
         </Space>

packages/components/src/components/Layout/header.tsx

@@ -10,7 +10,7 @@ import { OverlayAlertsWithButton } from '../Alerts';
 import { BuilderSelect } from './builder-select';
 import { Menus } from './menus';
 
-import icon from '../../common/imgs/icon.svg';
+import icon from '../../common/imgs/rsdoctor.png';
 import './header.sass';
 
 export const Header: React.FC = () => {
@@ -49,7 +49,7 @@ export const Header: React.FC = () => {
         <Col style={{ height: Size.NavBarHeight, lineHeight: `${Size.NavBarHeight + 2}px` }}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: '100%' }}>
             <img style={{ height: 30 }} src={icon} className="web-doctor-logo" alt="logo" />
-            <Typography.Text style={{ color: 'inherit', fontSize: 18, marginLeft: 4 }}>Rsdoctor</Typography.Text>
+            <Typography.Text style={{ color: 'inherit', fontSize: 18, marginLeft: 4, marginTop: 8 }}>Rsdoctor</Typography.Text>
             <BuilderSelect />
           </div>
         </Col>