diff --git a/superset-frontend/src/components/Menu/Menu.tsx b/superset-frontend/src/components/Menu/Menu.tsx index a3161b951a486..0fc0f8f1ab013 100644 --- a/superset-frontend/src/components/Menu/Menu.tsx +++ b/superset-frontend/src/components/Menu/Menu.tsx @@ -70,24 +70,34 @@ const StyledHeader = styled.header` } .navbar-nav > li > a { + border-bottom: none; + &:focus { + border-bottom: none; + } &:after { content: ''; position: absolute; bottom: -3px; - left: 0; - width: 100%; + left: 50%; + width: 0; height: 3px; background-color: ${({ theme }) => theme.colors.primary.base}; opacity: 0; - transition: opacity ${({ theme }) => theme.transitionTiming * 2}s; + transform: translateX(-50%); + transition: all ${({ theme }) => theme.transitionTiming}s !important; } - border-bottom: none; &:hover { + border-bottom: none; &:after { opacity: 1; + width: 100%; } } + &:hover, + &:focus { + margin: 0; + } } .nav > li > a { diff --git a/superset-frontend/src/components/NavDropdown/index.tsx b/superset-frontend/src/components/NavDropdown/index.tsx index 74e92124117e1..425d07494038d 100644 --- a/superset-frontend/src/components/NavDropdown/index.tsx +++ b/superset-frontend/src/components/NavDropdown/index.tsx @@ -28,10 +28,7 @@ const NavDropdown = styled(RBNavDropdown)` transition: background ${({ theme }) => theme.transitionTiming}s; } &.open > a { - background: linear-gradient( - ${({ theme }) => theme.colors.primary.light3}, - ${({ theme }) => theme.colors.primary.light5} - ) !important; + background: ${({ theme }) => theme.colors.primary.light4} !important; } .caret { display: none; @@ -67,8 +64,8 @@ const NavDropdown = styled(RBNavDropdown)` ${({ theme }) => theme.gridUnit * 4}px; transition: all ${({ theme }) => theme.transitionTiming}s; &:hover { - background: ${({ theme }) => theme.colors.primary.light3}; - color: black; + background: ${({ theme }) => theme.colors.primary.light4}; + color: ${({ theme }) => theme.colors.grayscale.dark1}; } } }