Skip to content

Commit e3912b7

Browse files
elainefan331elainefan331
committed
style: updated backgrounk and theme colors for landing page and slide-in panel
1 parent 5e27720 commit e3912b7

File tree

5 files changed

+141
-60
lines changed

5 files changed

+141
-60
lines changed

‎src/components/NodeInfoPanel.tsx‎

Lines changed: 33 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({ open, onClose, nodeData }
5656
const dbInfo = useAppSelector((state: RootState) => state.neurojson.dbInfo);
5757
// const drawerRef = useRef<HTMLDivElement>(null); // Reference to the Drawer content
5858
// const loading = useAppSelector((state: RootState) => state.neurojson.loading);
59-
// console.log("dbInfo", dbInfo);
59+
6060

6161
useEffect(() => {
6262
if (nodeData?.id) {
@@ -76,55 +76,56 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({ open, onClose, nodeData }
7676
"& .MuiDrawer-paper": {
7777
width: "30%",
7878
padding: "1rem",
79-
backgroundColor: Colors.lightGray,
80-
boxShadow: "-2px 0 8px rgba(0, 0, 0, 0.2)",
79+
boxShadow: `0px 0px 15px ${Colors.lightGray}`,
80+
backgroundColor: "rgba(97, 109, 243, 0.1)",
81+
backdropFilter: "blur(15px)",
8182
},
8283
}}
8384
>
8485
<Box>
8586
{nodeData? (
8687
<>
8788
{/* Close Button */}
88-
<Box display="flex" justifyContent="space-between" alignItems="center" paddingLeft={2}>
89-
<Typography variant="h6" sx={{color: Colors.primary.dark, fontWeight: "Bold"}}>{nodeData.name}</Typography>
90-
<IconButton onClick={onClose} sx={{color: Colors.primary.main}}>
89+
<Box display="flex" justifyContent="space-between" alignItems="center" paddingLeft={2} marginBottom={2}>
90+
<Typography variant="h6" sx={{color: Colors.orange, fontWeight: "Bold"}}>{nodeData.name}</Typography>
91+
<IconButton onClick={onClose} sx={{color: Colors.lightGray}}>
9192
<CloseIcon />
9293
</IconButton>
9394
</Box>
9495
{/* Node Metadata */}
9596
<Grid container spacing={2} sx={{pl: 2}}>
9697
<Grid item xs={12}>
97-
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Website</Typography>
98+
<Typography sx={{color: Colors.green, fontWeight: "Bold"}}>Website</Typography>
9899
<Typography>
99-
<a href={nodeData.url} target="_blank" style={{textDecoration: "none", color: Colors.textPrimary}}>{nodeData.url}</a>
100+
<a href={nodeData.url} target="_blank" style={{textDecoration: "none", color: Colors.lightGray}}>{nodeData.url}</a>
100101
</Typography>
101102
</Grid>
102103

103104
<Grid item xs={12}>
104-
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Number of Datasets</Typography>
105-
<Typography>{nodeData.datasets}</Typography>
105+
<Typography sx={{color: Colors.green, fontWeight: "Bold"}}>Number of Datasets</Typography>
106+
<Typography sx={{color: Colors.lightGray}}>{nodeData.datasets}</Typography>
106107
</Grid>
107108

108109
<Grid item xs={12}>
109-
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Data Types</Typography>
110-
<Typography>{nodeData.datatype.join(", ")}</Typography>
110+
<Typography sx={{color: Colors.green, fontWeight: "Bold"}}>Data Types</Typography>
111+
<Typography sx={{color: Colors.lightGray}}>{nodeData.datatype.join(", ")}</Typography>
111112
</Grid>
112113

113114
<Grid item xs={12}>
114-
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Data Standards</Typography>
115-
<Typography>{nodeData.standard.join(", ")}</Typography>
115+
<Typography sx={{color: Colors.green, fontWeight: "Bold"}}>Data Standards</Typography>
116+
<Typography sx={{color: Colors.lightGray}}>{nodeData.standard.join(", ")}</Typography>
116117
</Grid>
117118

118119
<Grid item xs={12}>
119-
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Upstream Contact</Typography>
120-
<a href={`mailto:${nodeData.support}`} style={{ textDecoration: "none", color: "blue"}}>
121-
<Typography>{nodeData.support}</Typography>
120+
<Typography sx={{color: Colors.green, fontWeight: "Bold"}}>Upstream Contact</Typography>
121+
<a href={`mailto:${nodeData.support}`} style={{ textDecoration: "none"}}>
122+
<Typography sx={{color: Colors.lightGray}}>{nodeData.support}</Typography>
122123
</a>
123124
</Grid>
124125

125126
<Grid item xs={12}>
126-
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>NeuroJSON-Cuated Datasets</Typography>
127-
{dbInfo?(<Typography>{dbInfo.doc_count - 1}</Typography>) : "Coming soon "}
127+
<Typography sx={{color: Colors.green, fontWeight: "Bold"}}>NeuroJSON-Cuated Datasets</Typography>
128+
{dbInfo?(<Typography sx={{color: Colors.lightGray}}>{dbInfo.doc_count - 1}</Typography>) : "Coming soon "}
128129
</Grid>
129130
</Grid>
130131
{/*database info card*/}
@@ -133,25 +134,25 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({ open, onClose, nodeData }
133134
<CardContent>
134135
<Grid container spacing={1}>
135136
<Grid item xs={12}>
136-
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>NeuroJSON.io Database Name</Typography>
137+
<Typography sx={{color: Colors.darkpurple, fontWeight: "Bold"}}>NeuroJSON.io Database Name</Typography>
137138
<Typography>{dbInfo.db_name}</Typography>
138139
</Grid>
139140
<Grid item xs={12}>
140-
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>REST-API URL</Typography>
141+
<Typography sx={{color: Colors.darkpurple, fontWeight: "Bold"}}>REST-API URL</Typography>
141142
<a href={`https://neurojson.io:7777/${dbInfo.db_name}`} target="_blank" rel="noopener noreferrer" style={{textDecoration: "none", color: Colors.textPrimary}}>
142143
{`https://neurojson.io:7777/${dbInfo.db_name}`}
143144
</a>
144145
</Grid>
145146
<Grid item xs={12}>
146-
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Database Creation Time</Typography>
147+
<Typography sx={{color: Colors.darkpurple, fontWeight: "Bold"}}>Database Creation Time</Typography>
147148
<Typography>{dateCoverter(dbInfo.instance_start_time)}</Typography>
148149
</Grid>
149150
<Grid item xs={12}>
150-
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>Searchable Database Size</Typography>
151+
<Typography sx={{color: Colors.darkpurple, fontWeight: "Bold"}}>Searchable Database Size</Typography>
151152
<Typography>{formatSize(dbInfo.sizes?.external)}</Typography>
152153
</Grid>
153154
<Grid item xs={12}>
154-
<Typography sx={{color: Colors.primary.main, fontWeight: "Bold"}}>DatabaseDisk Size (compressed)</Typography>
155+
<Typography sx={{color: Colors.darkpurple, fontWeight: "Bold"}}>DatabaseDisk Size (compressed)</Typography>
155156
<Typography>{formatSize(dbInfo.sizes?.file)}</Typography>
156157
</Grid>
157158
</Grid>
@@ -163,10 +164,10 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({ open, onClose, nodeData }
163164
variant="contained"
164165
fullWidth
165166
sx={{
166-
backgroundColor: Colors.primary.main,
167+
backgroundColor: Colors.orange,
167168
color: Colors.white,
168169
"&:hover": {
169-
backgroundColor: Colors.primary.dark,
170+
backgroundColor: Colors.darkorange,
170171
},
171172
}}
172173
onClick={() => navigate(`/databases/${nodeData.id}`)}
@@ -179,10 +180,10 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({ open, onClose, nodeData }
179180
variant="contained"
180181
fullWidth
181182
sx={{
182-
backgroundColor: Colors.primary.main,
183+
backgroundColor: Colors.orange,
183184
color: Colors.white,
184185
"&:hover": {
185-
backgroundColor: Colors.primary.dark,
186+
backgroundColor: Colors.darkorange,
186187
},
187188
}}
188189
>
@@ -194,10 +195,10 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({ open, onClose, nodeData }
194195
variant="contained"
195196
fullWidth
196197
sx={{
197-
backgroundColor: Colors.primary.main,
198+
backgroundColor: Colors.orange,
198199
color: Colors.white,
199200
"&:hover": {
200-
backgroundColor: Colors.primary.dark,
201+
backgroundColor: Colors.darkorange,
201202
},
202203
}}
203204
>
@@ -209,10 +210,10 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({ open, onClose, nodeData }
209210
variant="contained"
210211
fullWidth
211212
sx={{
212-
backgroundColor: Colors.primary.main,
213+
backgroundColor: Colors.orange,
213214
color: Colors.white,
214215
"&:hover": {
215-
backgroundColor: Colors.primary.dark,
216+
backgroundColor: Colors.darkorange,
216217
},
217218
}}
218219
onClick={() => window.open(`https://github.com/NeuroJSON-io/${nodeData.id}`, "_blank", "noopener noreferrer")}

0 commit comments

Comments
 (0)