Skip to content

Commit 3af1d01

Browse files
elainefan331elainefan331
committed
feat: add hover underline and improve layout in NodeInfoPanel; refs #51 
1 parent 5462478 commit 3af1d01

File tree

1 file changed

+58
-49
lines changed

1 file changed

+58
-49
lines changed

‎src/components/NodeInfoPanel.tsx‎

Lines changed: 58 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,6 @@ interface NodeInfoPanelProps {
2525
nodeData: NodeObject | null;
2626
}
2727

28-
// helper functions
29-
3028
// covert the database size format
3129
const formatSize = (bytes?: number): string => {
3230
if (bytes === undefined) return "N/A";
@@ -64,8 +62,6 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
6462
const navigate = useNavigate();
6563
const dispatch = useAppDispatch();
6664
const dbInfo = useAppSelector((state: RootState) => state.neurojson.dbInfo);
67-
// const drawerRef = useRef<HTMLDivElement>(null); // Reference to the Drawer content
68-
// const loading = useAppSelector((state: RootState) => state.neurojson.loading);
6965

7066
useEffect(() => {
7167
if (nodeData?.id) {
@@ -83,7 +79,7 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
8379
sx={{
8480
zIndex: (theme) => theme.zIndex.modal + 10,
8581
"& .MuiDrawer-paper": {
86-
width: "30%",
82+
width: "25%",
8783
padding: "1rem",
8884
boxShadow: `0px 0px 15px ${Colors.lightGray}`,
8985
backgroundColor: "rgba(97, 109, 243, 0.1)",
@@ -104,7 +100,7 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
104100
>
105101
<Typography
106102
variant="h6"
107-
sx={{ color: Colors.orange, fontWeight: "Bold" }}
103+
sx={{ color: Colors.yellow, fontWeight: "Bold" }}
108104
>
109105
{nodeData.name}
110106
</Typography>
@@ -115,17 +111,30 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
115111
{/* Node Metadata */}
116112
<Grid container spacing={2} sx={{ pl: 2 }}>
117113
<Grid item xs={12}>
118-
<Typography sx={{ color: Colors.green, fontWeight: "Bold" }}>
114+
<Typography
115+
sx={{
116+
color: Colors.green,
117+
fontWeight: "Bold",
118+
}}
119+
>
119120
Website
120121
</Typography>
121-
<Typography>
122-
<a
123-
href={nodeData.url}
124-
target="_blank"
125-
style={{ textDecoration: "none", color: Colors.lightGray }}
126-
>
127-
{nodeData.url}
128-
</a>
122+
<Typography
123+
component="a"
124+
href={nodeData.url}
125+
target="_blank"
126+
rel="noopener noreferrer"
127+
sx={{
128+
display: "block",
129+
color: Colors.lightGray,
130+
textDecoration: "none",
131+
wordBreak: "break-word",
132+
":hover": {
133+
textDecoration: "underline",
134+
},
135+
}}
136+
>
137+
{nodeData.url}
129138
</Typography>
130139
</Grid>
131140

@@ -160,14 +169,21 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
160169
<Typography sx={{ color: Colors.green, fontWeight: "Bold" }}>
161170
Upstream Contact
162171
</Typography>
163-
<a
172+
<Typography
173+
component="a"
164174
href={`mailto:${nodeData.support}`}
165-
style={{ textDecoration: "none" }}
175+
sx={{
176+
color: Colors.lightGray,
177+
textDecoration: "none",
178+
wordBreak: "break-word",
179+
":hover": {
180+
textDecoration: "underline",
181+
},
182+
display: "block",
183+
}}
166184
>
167-
<Typography sx={{ color: Colors.lightGray }}>
168-
{nodeData.support}
169-
</Typography>
170-
</a>
185+
{nodeData.support}
186+
</Typography>
171187
</Grid>
172188

173189
<Grid item xs={12}>
@@ -202,17 +218,24 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
202218
>
203219
REST-API URL
204220
</Typography>
205-
<a
221+
222+
<Typography
223+
component="a"
206224
href={`https://neurojson.io:7777/${dbInfo.db_name}`}
207225
target="_blank"
208226
rel="noopener noreferrer"
209-
style={{
210-
textDecoration: "none",
227+
sx={{
211228
color: Colors.textPrimary,
229+
textDecoration: "none",
230+
":hover": {
231+
textDecoration: "underline",
232+
},
233+
wordBreak: "break-word",
234+
display: "block",
212235
}}
213236
>
214237
{`https://neurojson.io:7777/${dbInfo.db_name}`}
215-
</a>
238+
</Typography>
216239
</Grid>
217240
<Grid item xs={12}>
218241
<Typography
@@ -251,10 +274,10 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
251274
variant="contained"
252275
fullWidth
253276
sx={{
254-
backgroundColor: Colors.orange,
255-
color: Colors.white,
277+
color: Colors.lightGray,
278+
backgroundColor: Colors.purple,
256279
"&:hover": {
257-
backgroundColor: Colors.darkOrange,
280+
backgroundColor: Colors.secondaryPurple,
258281
},
259282
}}
260283
onClick={() => navigate(`/databases/${nodeData.id}`)}
@@ -267,12 +290,13 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
267290
variant="contained"
268291
fullWidth
269292
sx={{
270-
backgroundColor: Colors.orange,
271-
color: Colors.white,
293+
color: Colors.lightGray,
294+
backgroundColor: Colors.purple,
272295
"&:hover": {
273-
backgroundColor: Colors.darkOrange,
296+
backgroundColor: Colors.secondaryPurple,
274297
},
275298
}}
299+
onClick={() => navigate(`/search`)}
276300
>
277301
Search Subjects
278302
</Button>
@@ -282,25 +306,10 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
282306
variant="contained"
283307
fullWidth
284308
sx={{
285-
backgroundColor: Colors.orange,
286-
color: Colors.white,
287-
"&:hover": {
288-
backgroundColor: Colors.darkOrange,
289-
},
290-
}}
291-
>
292-
Advanced Search
293-
</Button>
294-
</Grid>
295-
<Grid item xs={12}>
296-
<Button
297-
variant="contained"
298-
fullWidth
299-
sx={{
300-
backgroundColor: Colors.orange,
301-
color: Colors.white,
309+
color: Colors.lightGray,
310+
backgroundColor: Colors.purple,
302311
"&:hover": {
303-
backgroundColor: Colors.darkOrange,
312+
backgroundColor: Colors.secondaryPurple,
304313
},
305314
}}
306315
onClick={() =>

0 commit comments

Comments
 (0)