diff --git a/client/modules/workspace/src/JobStatusNav/JobStatusNav.module.css b/client/modules/workspace/src/JobStatusNav/JobStatusNav.module.css index c30a7a446a..9d232488ef 100644 --- a/client/modules/workspace/src/JobStatusNav/JobStatusNav.module.css +++ b/client/modules/workspace/src/JobStatusNav/JobStatusNav.module.css @@ -6,3 +6,16 @@ .badge { margin: 0 10px; } + +.root:hover, +.root:focus, +.highlighted-row, +.highlighted-row:hover, +.highlighted-row:focus { + background-color: #cbdded; + text-decoration: none; +} + +.highlighted-row:hover { + cursor: unset; +} diff --git a/client/modules/workspace/src/JobStatusNav/JobStatusNav.tsx b/client/modules/workspace/src/JobStatusNav/JobStatusNav.tsx index 97bc7789ee..f0cc17749b 100644 --- a/client/modules/workspace/src/JobStatusNav/JobStatusNav.tsx +++ b/client/modules/workspace/src/JobStatusNav/JobStatusNav.tsx @@ -23,14 +23,21 @@ export const JobStatusNav: React.FC = () => { borderRight: '1px solid var(--global-color-primary--normal)', }; return ( -
- - - - Job Status -
+ + isActive ? styles['highlighted-row'] : styles.root + } + > +
+ + + + Job Status +
+
); }; diff --git a/client/src/styles.css b/client/src/styles.css index 2681655d02..dc3eefef48 100644 --- a/client/src/styles.css +++ b/client/src/styles.css @@ -132,7 +132,7 @@ } /* DO scroll app category menu */ -.ant-layout-sider-children > header + div + ul { +.ant-layout-sider-children > a + div + ul { overflow: auto; height: 100%; }