adjusted UI styling and aligment of slide-in panel on home page

Author: elainefan331

src/components/NodeInfoPanel.tsx

@@ -54,8 +54,8 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({ open, onClose, nodeData }
     const navigate = useNavigate();
     const dispatch = useAppDispatch();
     const dbInfo = useAppSelector((state: RootState) => state.neurojson.dbInfo);
-    const loading = useAppSelector((state: RootState) => state.neurojson.loading);
-    console.log("dbInfo", dbInfo);
+    // const loading = useAppSelector((state: RootState) => state.neurojson.loading);
+    // console.log("dbInfo", dbInfo);
 
     useEffect(() => {
         if (nodeData?.id) {
@@ -82,45 +82,45 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({ open, onClose, nodeData }
                 {nodeData? (
                 <>
                 {/* Close Button */}
-                <Box display="flex" justifyContent="space-between" alignItems="center">
-                    <Typography variant="h6" sx={{color: Colors.primary.dark}}>{nodeData.name}</Typography>
+                <Box display="flex" justifyContent="space-between" alignItems="center" paddingLeft={2}>
+                    <Typography variant="h6" sx={{color: Colors.primary.dark, fontWeight: "Bold"}}>{nodeData.name}</Typography>
                     <IconButton onClick={onClose} sx={{color: Colors.primary.main}}>
                         <CloseIcon />
                     </IconButton>
                 </Box>
                 {/* Node Metadata */}
-                <Grid container spacing={2}>
+                <Grid container spacing={2} sx={{pl: 2}}>
                     <Grid item xs={12}>
-                        <Typography>Website</Typography>
+                        <Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Website</Typography>
                         <Typography>
-                            <a href={nodeData.url} target="_blank">{nodeData.url}</a>
+                            <a href={nodeData.url} target="_blank" style={{textDecoration: "none", color: Colors.textPrimary}}>{nodeData.url}</a>
                         </Typography>
                     </Grid>
 
                     <Grid item xs={12}>
-                        <Typography>Number of Datasets</Typography>
+                        <Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Number of Datasets</Typography>
                         <Typography>{nodeData.datasets}</Typography>
                     </Grid>
 
                     <Grid item xs={12}>
-                        <Typography>Data Types</Typography>
+                        <Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Data Types</Typography>
                         <Typography>{nodeData.datatype.join(", ")}</Typography>
                     </Grid>
 
                     <Grid item xs={12}>
-                        <Typography>Data Standards</Typography>
+                        <Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Data Standards</Typography>
                         <Typography>{nodeData.standard.join(", ")}</Typography>
                     </Grid>
 
                     <Grid item xs={12}>
-                        <Typography>Upstream Contact</Typography>
+                        <Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Upstream Contact</Typography>
                         <a href={`mailto:${nodeData.support}`} style={{ textDecoration: "none", color: "blue"}}>
                             <Typography>{nodeData.support}</Typography>
                         </a>
                     </Grid>
 
                     <Grid item xs={12}>
-                        <Typography>NeuroJSON-Cuated Datasets</Typography>
+                        <Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>NeuroJSON-Cuated Datasets</Typography>
                         {dbInfo?(<Typography>{dbInfo.doc_count - 1}</Typography>) : "Coming soon "}
                     </Grid>
                 </Grid>
@@ -130,25 +130,25 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({ open, onClose, nodeData }
                     <CardContent>
                         <Grid container spacing={1}>
                             <Grid item xs={12}>
-                                <Typography>NeuroJSON.io Database Name</Typography>
+                                <Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>NeuroJSON.io Database Name</Typography>
                                 <Typography>{dbInfo.db_name}</Typography>
                             </Grid>
                             <Grid item xs={12}>
-                                <Typography>REST-API URL</Typography>
-                                <a href={`https://neurojson.io:7777/${dbInfo.db_name}`} target="_blank" rel="noopener noreferrer">
+                                <Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>REST-API URL</Typography>
+                                <a href={`https://neurojson.io:7777/${dbInfo.db_name}`} target="_blank" rel="noopener noreferrer" style={{textDecoration: "none", color: Colors.textPrimary}}>
                                     {`https://neurojson.io:7777/${dbInfo.db_name}`}
                                 </a>
                             </Grid>
                             <Grid item xs={12}>
-                                <Typography>Database Creation Time</Typography>
+                                <Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Database Creation Time</Typography>
                                 <Typography>{dateCoverter(dbInfo.instance_start_time)}</Typography>
                             </Grid>
                             <Grid item xs={12}>
-                                <Typography>Searchable Database Size</Typography>
+                                <Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Searchable Database Size</Typography>
                                 <Typography>{formatSize(dbInfo.sizes?.external)}</Typography>
                             </Grid>
                             <Grid item xs={12}>
-                                <Typography>DatabaseDisk Size (compressed)</Typography>
+                                <Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>DatabaseDisk Size (compressed)</Typography>
                                 <Typography>{formatSize(dbInfo.sizes?.file)}</Typography>
                             </Grid>
                         </Grid>