fix(#725): Modify the color usage method

Author: xwj02155382

packages/studio-website/src/pages/instance/lists/empty.tsx

@@ -1,11 +1,12 @@
 import React, { memo } from 'react';
-import { Row, Col, Card, Result, Flex, ConfigProvider, Typography } from 'antd';
+import { Row, Col, Card, Result, Flex, ConfigProvider, Typography,theme } from 'antd';
 import { FormattedMessage } from 'react-intl';
 import FeatureCase from '../../../components/feature-case';
 import CreateInstance from '../create';
 
 const { Text, Title } = Typography;
 const ServerNotAvailable: React.FC = () => {
+  const { token } = theme.useToken();
   return (
     <ConfigProvider
       theme={{
@@ -27,7 +28,7 @@ const ServerNotAvailable: React.FC = () => {
                 <Title level={3}>
                   <FormattedMessage id="No graph available" />
                 </Title>
-                <Text style={{ fontSize: '16px',marginBottom: 30,marginTop:4 }}>
+                <Text style={{ marginBottom: 30,marginTop:4 }} type="secondary">
                   <FormattedMessage id="Please click the button below to 「Create instances」" />
                 </Text>
                 <FeatureCase match="MULTIPLE_GRAPHS">

packages/studio-website/src/pages/instance/lists/index.tsx

@@ -63,7 +63,7 @@ const InstanceCard: React.FC<IProps> = ({ changeCreateAction }) => {
   }, []);
 
 
-  if (isReady && !isServerAvailable) {
+  if (isReady && isServerAvailable) {
     return (
       <ServerNotAvailable />
     );

packages/studio-website/src/pages/instance/lists/server-not-available.tsx

@@ -1,17 +1,21 @@
 import React, { memo } from 'react';
-import { Row, Col, Card, Result,  Flex, ConfigProvider, Typography } from 'antd';
+import { Row, Col, Card, Result,  Flex, ConfigProvider, Typography, theme } from 'antd';
 import { FormattedMessage } from 'react-intl';
 
 const { Text, Title } = Typography;
+
 const ServerNotAvailable: React.FC = () => {
+
+
+const { token } = theme.useToken();
+const ColorText = (props) => <Text style={{ color: token.colorTextLightSolid }} >{props.children}</Text>;
   return (
     <ConfigProvider
       theme={{
         components: {
           Result: {
             paddingLG: 0,
             marginXS: 0,
-            iconFontSize: 20,
           },
         },
       }}
@@ -25,35 +29,33 @@ const ServerNotAvailable: React.FC = () => {
                 <Title level={3}>
                   <FormattedMessage id="No available Coordinator service" />
                 </Title>
-                <Text style={{ fontSize: '16px' }}>
+                <Text type="secondary">
                   <FormattedMessage id="Start the local service by following the steps below and then refresh this web page" />
                 </Text>
                 <Flex
                   vertical
                   style={{
-                    background: 'rgba(0, 0, 0, 0.7)',
+                    background: token.colorBgSpotlight,
                     flex: 1,
-                    borderRadius: '10px',
+                    borderRadius: token.borderRadius,
                     padding: '20px',
                     marginTop: '20px',
                   }}
                 >
-                  <Text style={{ color: 'rgba(255,255,255,.8)' }}>
-                    <FormattedMessage id="# Pull the GraphScope Interactive Docker image" />
-                  </Text>
-                  <Text style={{ color: 'rgba(255,255,255,.8)' }}>
-                    <FormattedMessage id="docker pull registry.cn-hongkong.aliyuncs.com/graphscope/interactive:0.29.3-arm64" />
-                  </Text>
+                  <ColorText>
+                    # Pull the GraphScope Interactive Docker image
+                  </ColorText>
+                  <ColorText>
+                   docker pull registry.cn-hongkong.aliyuncs.com/graphscope/interactive:0.29.3-arm64
+                  </ColorText>
                   <br />
-                  <Text style={{ color: 'rgba(255,255,255,.8)' }}>
-                    <FormattedMessage id="# Start the GraphScope Interactive service" />
-                  </Text>
-                  <Text style={{ color: 'rgba(255,255,255,.8)' }}>
-                    <FormattedMessage
-                      id="docker run -d --name gs -label flex=interactive - 8080:8080 - 7777:7777 - 10000:10000 -p
-7687:7687 registry.cn-hongkong.aliyuncs.com/graphscope/interactive:0.29.3-arm64-enable-coordinator"
-                    />
-                  </Text>
+                  <ColorText>
+                    # Start the GraphScope Interactive service
+                  </ColorText>
+                  <ColorText>
+                    docker run -d --name gs -label flex=interactive - 8080:8080 - 7777:7777 - 10000:10000 -p
+7687:7687 registry.cn-hongkong.aliyuncs.com/graphscope/interactive:0.29.3-arm64-enable-coordinator
+                  </ColorText>
                 </Flex>
               </Flex>
             </Flex>