fix(home): Show home page tabs as pills instead of links (#20257)

* fix(home): make to update the css style of links

* fix(home): make to fix lint issue

* fix(home): make to remove underline when tab is active

* fix(homes): make to fix the issue of tab

* fix(home): make to move styles to a tag

(cherry picked from commit a833674)

superset-frontend/src/components/Menu/index.tsx

@@ -25,8 +25,8 @@ const MenuItem = styled(AntdMenu.Item)`
   }
 
   &.ant-menu-item {
-    height: ${({ theme }) => theme.gridUnit * 7}px;
-    line-height: ${({ theme }) => theme.gridUnit * 7}px;
+    height: ${({ theme }) => theme.gridUnit * 8}px;
+    line-height: ${({ theme }) => theme.gridUnit * 8}px;
     a {
       border-bottom: none;
       transition: background-color ${({ theme }) => theme.transitionTiming}s;

superset-frontend/src/views/components/SubMenu.tsx

@@ -97,7 +97,8 @@ const StyledHeader = styled.div`
 
         a {
           margin: 0;
-          padding: ${({ theme }) => theme.gridUnit * 4}px;
+          padding: ${({ theme }) => theme.gridUnit * 2}px
+            ${({ theme }) => theme.gridUnit * 4}px;
           line-height: ${({ theme }) => theme.gridUnit * 5}px;
 
           &:hover {
@@ -112,7 +113,8 @@ const StyledHeader = styled.div`
       }
 
       &.active a {
-        text-decoration: underline;
+        background: ${({ theme }) => theme.colors.secondary.light4};
+        border-radius: ${({ theme }) => theme.borderRadius}px;
       }
     }
 
@@ -122,7 +124,8 @@ const StyledHeader = styled.div`
     li > a:hover,
     li > a:focus,
     li > div:hover,
-    div > div:hover {
+    div > div:hover,
+    div > a:hover {
       background: ${({ theme }) => theme.colors.secondary.light4};
       border-bottom: none;
       border-radius: ${({ theme }) => theme.borderRadius}px;