feat: change page UI (#431)

Signed-off-by: zhaoxinxin <[email protected]>

Author: Liam-Zhao

src/components/clusters/index.tsx

@@ -463,7 +463,7 @@ export default function Clusters() {
           <Card className={styles.noData}>
             <Box component="img" className={styles.nodataIcon} src="/icons/cluster/scheduler/ic-content.svg" />
             <Typography variant="h6" className={styles.nodataText}>
-              No data
+              You have no clusters.
             </Typography>
           </Card>
         ) : Array.isArray(allClusters) && allClusters.length === 0 ? (

src/components/clusters/peers/inde.module.css

@@ -155,6 +155,11 @@
   width: 100%;
 }
 
+.visualizationWrapperCommit {
+  width: 100%;
+  margin-top: 2rem;
+}
+
 .pieWrapper {
   display: flex;
   align-items: center;

src/components/clusters/peers/index.tsx

@@ -674,7 +674,7 @@ export default function Peer() {
               </Card>
             </Box>
           </Box>
-          <Box className={styles.visualizationWrapper}>
+          <Box className={styles.visualizationWrapperCommit}>
             <Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', mb: '1rem' }}>
               <Box>
                 <FormControl sx={{ width: '10rem' }} size="small">