@@ -51,16 +51,16 @@ export const useTableColumns = (
5151 title = { `Open feed ${ cell . getValue < string > ( ) } page in new tab` }
5252 placement = 'top-start'
5353 >
54- < div
55- className = { 'navigable-list-item' }
54+ < Box
55+ sx = { { cursor : 'pointer' , '&:hover' : { textDecoration : 'underline' , color : '#000' } } }
5656 onClick = { ( ) => {
5757 const url = `/feeds/${ cell . getValue < string > ( ) } ` ;
5858 window . open ( url , '_blank' ) ;
5959 } }
6060 >
6161 { renderedCellValue } { ' ' }
6262 < OpenInNew sx = { { verticalAlign : 'middle' } } fontSize = 'small' />
63- </ div >
63+ </ Box >
6464 </ Tooltip >
6565 ) ,
6666 } ,
@@ -157,20 +157,15 @@ export const useTableColumns = (
157157 Cell : ( { cell } : { cell : MRT_Cell < GTFSFeedMetrics > } ) => (
158158 < div >
159159 { cell . getValue < string [ ] > ( ) ?. map ( ( error , index ) => (
160- < div
160+ < Box
161161 key = { index }
162- style = { {
163- cursor : 'pointer' ,
164- marginBottom : 2 ,
165- padding : 1 ,
166- } }
167- className = { 'navigable-list-item' }
162+ sx = { { cursor : 'pointer' , marginBottom : '2px' , padding : '1px' , '&:hover' : { textDecoration : 'underline' , color : '#000' } } }
168163 onClick = { ( ) => {
169164 router . push ( `/metrics/gtfs/notices?noticeCode=${ error } ` ) ;
170165 } }
171166 >
172167 { error }
173- </ div >
168+ </ Box >
174169 ) ) }
175170 </ div >
176171 ) ,
@@ -180,9 +175,9 @@ export const useTableColumns = (
180175 Header : (
181176 < span >
182177 Notice Severity :
183- < span className = 'notice-severity-error notice-severity-label' >
178+ < Box component = ' span' sx = { { borderRadius : '5px' , padding : '5px' , marginLeft : '5px' , marginBottom : '2px' , width : 'fit-content' , backgroundColor : '#d54402' , color : 'white' } } >
184179 ERROR
185- </ span >
180+ </ Box >
186181 </ span >
187182 ) ,
188183 Footer : ( ) => (
@@ -199,20 +194,15 @@ export const useTableColumns = (
199194 Cell : ( { cell } : { cell : MRT_Cell < GTFSFeedMetrics > } ) => (
200195 < div >
201196 { cell . getValue < string [ ] > ( ) ?. map ( ( warning , index ) => (
202- < div
197+ < Box
203198 key = { index }
204- style = { {
205- cursor : 'pointer' ,
206- marginBottom : 2 ,
207- padding : 1 ,
208- } }
209- className = { 'navigable-list-item' }
199+ sx = { { cursor : 'pointer' , marginBottom : '2px' , padding : '1px' , '&:hover' : { textDecoration : 'underline' , color : '#000' } } }
210200 onClick = { ( ) => {
211201 router . push ( `/metrics/gtfs/notices?noticeCode=${ warning } ` ) ;
212202 } }
213203 >
214204 { warning }
215- </ div >
205+ </ Box >
216206 ) ) }
217207 </ div >
218208 ) ,
@@ -222,9 +212,9 @@ export const useTableColumns = (
222212 Header : (
223213 < span >
224214 Notice Severity :
225- < span className = 'notice-severity-warning notice-severity-label' >
215+ < Box component = ' span' sx = { { borderRadius : '5px' , padding : '5px' , marginLeft : '5px' , marginBottom : '2px' , width : 'fit-content' , backgroundColor : '#f3c280' , color : 'black' } } >
226216 WARNING
227- </ span >
217+ </ Box >
228218 </ span >
229219 ) ,
230220 Footer : ( ) => (
@@ -241,28 +231,23 @@ export const useTableColumns = (
241231 Header : (
242232 < span >
243233 Notice Severity :
244- < span className = 'notice-severity-info notice-severity-label' >
234+ < Box component = ' span' sx = { { borderRadius : '5px' , padding : '5px' , marginLeft : '5px' , marginBottom : '2px' , width : 'fit-content' , backgroundColor : '#badfb7' , color : 'black' } } >
245235 INFO
246- </ span >
236+ </ Box >
247237 </ span >
248238 ) ,
249239 Cell : ( { cell } : { cell : MRT_Cell < GTFSFeedMetrics > } ) => (
250240 < div >
251241 { cell . getValue < string [ ] > ( ) ?. map ( ( info , index ) => (
252- < div
242+ < Box
253243 key = { index }
254- style = { {
255- cursor : 'pointer' ,
256- marginBottom : 2 ,
257- padding : 1 ,
258- } }
259- className = { 'navigable-list-item' }
244+ sx = { { cursor : 'pointer' , marginBottom : '2px' , padding : '1px' , '&:hover' : { textDecoration : 'underline' , color : '#000' } } }
260245 onClick = { ( ) => {
261246 router . push ( `/metrics/gtfs/notices?noticeCode=${ info } ` ) ;
262247 } }
263248 >
264249 { info }
265- </ div >
250+ </ Box >
266251 ) ) }
267252 </ div >
268253 ) ,
@@ -313,10 +298,9 @@ export const useTableColumns = (
313298 { group }
314299 </ div >
315300 { features . map ( ( featureData , index ) => (
316- < div
301+ < Box
317302 key = { index }
318- style = { { cursor : 'pointer' , marginLeft : '10px' } }
319- className = { 'navigable-list-item' }
303+ sx = { { cursor : 'pointer' , marginLeft : '10px' , '&:hover' : { textDecoration : 'underline' , color : '#000' } } }
320304 onClick = { ( ) => {
321305 router . push (
322306 `/metrics/gtfs/features?featureName=${ featureData . feature } ` ,
@@ -332,7 +316,7 @@ export const useTableColumns = (
332316 < IconButton > { componentDecorator . icon } </ IconButton >
333317 </ Tooltip >
334318 ) }
335- </ div >
319+ </ Box >
336320 ) ) }
337321 </ div >
338322 ) ;
0 commit comments