Assign distinct colors to different datatypes and update node color rendering

Author: elainefan331

src/components/NodeInfoPanel.tsx

@@ -191,15 +191,15 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
                   <Grid container spacing={1}>
                     <Grid item xs={12}>
                       <Typography
-                        sx={{ color: Colors.darkpurple, fontWeight: "Bold" }}
+                        sx={{ color: Colors.darkPurple, fontWeight: "Bold" }}
                       >
                         NeuroJSON.io Database Name
                       </Typography>
                       <Typography>{dbInfo.db_name}</Typography>
                     </Grid>
                     <Grid item xs={12}>
                       <Typography
-                        sx={{ color: Colors.darkpurple, fontWeight: "Bold" }}
+                        sx={{ color: Colors.darkPurple, fontWeight: "Bold" }}
                       >
                         REST-API URL
                       </Typography>
@@ -217,7 +217,7 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
                     </Grid>
                     <Grid item xs={12}>
                       <Typography
-                        sx={{ color: Colors.darkpurple, fontWeight: "Bold" }}
+                        sx={{ color: Colors.darkPurple, fontWeight: "Bold" }}
                       >
                         Database Creation Time
                       </Typography>
@@ -227,7 +227,7 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
                     </Grid>
                     <Grid item xs={12}>
                       <Typography
-                        sx={{ color: Colors.darkpurple, fontWeight: "Bold" }}
+                        sx={{ color: Colors.darkPurple, fontWeight: "Bold" }}
                       >
                         Searchable Database Size
                       </Typography>
@@ -237,7 +237,7 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
                     </Grid>
                     <Grid item xs={12}>
                       <Typography
-                        sx={{ color: Colors.darkpurple, fontWeight: "Bold" }}
+                        sx={{ color: Colors.darkPurple, fontWeight: "Bold" }}
                       >
                         DatabaseDisk Size (compressed)
                       </Typography>
@@ -255,7 +255,7 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
                           backgroundColor: Colors.orange,
                           color: Colors.white,
                           "&:hover": {
-                            backgroundColor: Colors.darkorange,
+                            backgroundColor: Colors.darkOrange,
                           },
                         }}
                         onClick={() => navigate(`/databases/${nodeData.id}`)}
@@ -271,7 +271,7 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
                           backgroundColor: Colors.orange,
                           color: Colors.white,
                           "&:hover": {
-                            backgroundColor: Colors.darkorange,
+                            backgroundColor: Colors.darkOrange,
                           },
                         }}
                       >
@@ -286,7 +286,7 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
                           backgroundColor: Colors.orange,
                           color: Colors.white,
                           "&:hover": {
-                            backgroundColor: Colors.darkorange,
+                            backgroundColor: Colors.darkOrange,
                           },
                         }}
                       >
@@ -301,7 +301,7 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
                           backgroundColor: Colors.orange,
                           color: Colors.white,
                           "&:hover": {
-                            backgroundColor: Colors.darkorange,
+                            backgroundColor: Colors.darkOrange,
                           },
                         }}
                         onClick={() =>

src/design/Layouts/FullScreen.tsx

@@ -46,18 +46,16 @@ const FullScreen = () => {
               >
                 <Typography
                   variant="h1"
-                  //   sx={{
-                  //     color: Colors.yellow,
-                  //     textTransform: "none",
-                  //   }}
+                  sx={{
+                    color: Colors.yellow,
+                  }}
                 >
                   NeuroJSON.io
                 </Typography>
                 <Typography
                   variant="h2"
                   sx={{
                     color: Colors.lightGray,
-                    textTransform: "none",
                   }}
                 >
                   Free Data Worth Sharing

src/design/theme.ts

@@ -24,12 +24,13 @@ export const Colors = {
   textPrimary: "#212121",
   textSecondary: "#494747",
   green: "#02DEC4",
-  darkgreen: "#49c6ae",
+  darkGreen: "#49c6ae",
   yellow: "#FFDD31",
+  lightYellow: "#FAEBD7",
   purple: "#5865F2",
-  darkpurple: "#282C56",
+  darkPurple: "#282C56",
   orange: "#FF9F2F",
-  darkorange: "#E88C25",
+  darkOrange: "#E88C25",
   primary,
   secondary,
 };
@@ -52,12 +53,12 @@ const theme = createTheme({
       fontFamily: "Raleway",
       fontWeight: 700,
       fontSize: "2rem",
-      color: Colors.yellow,
       textTransform: "none",
     },
     h2: {
       fontWeight: 600,
       fontSize: "1.75rem",
+      textTransform: "none",
       color: Colors.secondary.main,
     },
     body1: {