From 9a9d65e3ade3aeb7cc6bf19c57cd8e08008a6988 Mon Sep 17 00:00:00 2001
From: geido <diegopucci.me@gmail.com>
Date: Thu, 7 Apr 2022 12:01:04 +0000
Subject: [PATCH 1/2] Enhance navbar styles

---
 .../src/assets/stylesheets/superset.less      |   9 +-
 .../src/views/CRUD/welcome/Welcome.tsx        |  42 ++--
 .../src/views/components/Menu.tsx             | 183 +++++++++---------
 3 files changed, 120 insertions(+), 114 deletions(-)

diff --git a/superset-frontend/src/assets/stylesheets/superset.less b/superset-frontend/src/assets/stylesheets/superset.less
index 97db49ec4463a..0cf419b30d190 100644
--- a/superset-frontend/src/assets/stylesheets/superset.less
+++ b/superset-frontend/src/assets/stylesheets/superset.less
@@ -539,12 +539,11 @@ td.filtered {
   width: 100% !important;
 }
 
-// Remove this when the jinja menu/navbar is replaced with react.
-// This style already exists in that view
+/*
+Hides the logo while loading the page.
+Emotion styles will take care of the correct styling
+*/
 .navbar-brand {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
   display: none;
 }
 
diff --git a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
index 056e02e8f6226..0689aab45eeea 100644
--- a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
@@ -113,23 +113,31 @@ const WelcomeContainer = styled.div`
 `;
 
 const WelcomeNav = styled.div`
-  height: 50px;
-  background-color: white;
-  .navbar-brand {
-    margin-left: ${({ theme }) => theme.gridUnit * 2}px;
-    font-weight: ${({ theme }) => theme.typography.weights.bold};
-  }
-  .switch {
-    float: right;
-    margin: ${({ theme }) => theme.gridUnit * 5}px;
-    display: flex;
-    flex-direction: row;
-    span {
-      display: block;
-      margin: ${({ theme }) => theme.gridUnit * 1}px;
-      line-height: 1;
+  ${({ theme }) => `
+    height: 50px;
+    background-color: ${theme.colors.grayscale.light5};
+    & > span {
+      display: flex;
+      float: left;
+      height: 50px;
+      font-size: ${theme.typography.sizes.l}px;
+      padding: ${theme.gridUnit * 4}px ${theme.gridUnit * 2 + 2}px;
+      line-height: ${theme.gridUnit * 5}px;
+      margin-left: ${theme.gridUnit * 2}px;
+      font-weight: ${theme.typography.weights.bold};
     }
-  }
+    .switch {
+      float: right;
+      margin: ${theme.gridUnit * 5}px;
+      display: flex;
+      flex-direction: row;
+      span {
+        display: block;
+        margin: ${theme.gridUnit * 1}px;
+        line-height: 1;
+      }
+    }
+  `}
 `;
 
 export const LoadingCards = ({ cover }: LoadingProps) => (
@@ -275,7 +283,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
   return (
     <WelcomeContainer>
       <WelcomeNav>
-        <span className="navbar-brand">Home</span>
+        <span>Home</span>
         {isFeatureEnabled(FeatureFlag.THUMBNAILS) ? (
           <div className="switch">
             <AntdSwitch checked={checked} onChange={handleToggle} />
diff --git a/superset-frontend/src/views/components/Menu.tsx b/superset-frontend/src/views/components/Menu.tsx
index 55d929e7b7bc4..3b67a954e7b0a 100644
--- a/superset-frontend/src/views/components/Menu.tsx
+++ b/superset-frontend/src/views/components/Menu.tsx
@@ -83,101 +83,100 @@ export interface MenuObjectProps extends MenuObjectChildProps {
 }
 
 const StyledHeader = styled.header`
-  background-color: white;
-  margin-bottom: 2px;
-  &:nth-last-of-type(2) nav {
-    margin-bottom: 2px;
-  }
-
-  .caret {
-    display: none;
-  }
-  .navbar-brand {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    /* must be exactly the height of the Antd navbar */
-    min-height: 50px;
-    padding: ${({ theme }) =>
-      `${theme.gridUnit}px ${theme.gridUnit * 2}px ${theme.gridUnit}px ${
-        theme.gridUnit * 4
-      }px`};
-    max-width: ${({ theme }) => `${theme.gridUnit * 37}px`};
-    img {
-      height: 100%;
-      object-fit: contain;
-    }
-  }
-  .navbar-brand-text {
-    border-left: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
-    border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
-    height: 100%;
-    color: ${({ theme }) => theme.colors.grayscale.dark1};
-    padding-left: ${({ theme }) => theme.gridUnit * 4}px;
-    padding-right: ${({ theme }) => theme.gridUnit * 4}px;
-    margin-right: ${({ theme }) => theme.gridUnit * 6}px;
-    font-size: ${({ theme }) => theme.gridUnit * 4}px;
-    float: left;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    span {
-      max-width: ${({ theme }) => theme.gridUnit * 58}px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    @media (max-width: 1127px) {
-      display: none;
-    }
-  }
-  .main-nav .ant-menu-submenu-title > svg {
-    top: ${({ theme }) => theme.gridUnit * 5.25}px;
-  }
-  @media (max-width: 767px) {
-    .navbar-brand {
-      float: none;
-    }
-  }
-  .ant-menu-horizontal .ant-menu-item {
-    height: 100%;
-    line-height: inherit;
-  }
-  .ant-menu > .ant-menu-item > a {
-    padding: ${({ theme }) => theme.gridUnit * 4}px;
-  }
-  @media (max-width: 767px) {
-    .ant-menu-item {
-      padding: 0 ${({ theme }) => theme.gridUnit * 6}px 0
-        ${({ theme }) => theme.gridUnit * 3}px !important;
-    }
-    .ant-menu > .ant-menu-item > a {
-      padding: 0px;
-    }
-    .main-nav .ant-menu-submenu-title > svg:nth-child(1) {
-      display: none;
-    }
-    .ant-menu-item-active > a {
-      &:hover {
-        color: ${({ theme }) => theme.colors.primary.base} !important;
-        background-color: transparent !important;
+  ${({ theme }) => `
+      background-color: ${theme.colors.grayscale.light5};
+      margin-bottom: 2px;
+      &:nth-last-of-type(2) nav {
+        margin-bottom: 2px;
       }
-    }
-  }
+      .caret {
+        display: none;
+      }
+      .navbar-brand {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        /* must be exactly the height of the Antd navbar */
+        min-height: 50px;
+        padding: ${theme.gridUnit}px ${theme.gridUnit * 2}px ${
+    theme.gridUnit
+  }px ${theme.gridUnit * 4}px;
+        max-width: ${theme.gridUnit * 37}px;
+        img {
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+      .navbar-brand-text {
+        border-left: 1px solid ${theme.colors.grayscale.light2};
+        border-right: 1px solid ${theme.colors.grayscale.light2};
+        height: 100%;
+        color: ${theme.colors.grayscale.dark1};
+        padding-left: ${theme.gridUnit * 4}px;
+        padding-right: ${theme.gridUnit * 4}px;
+        margin-right: ${theme.gridUnit * 6}px;
+        font-size: ${theme.gridUnit * 4}px;
+        float: left;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
 
-  .ant-menu-item a {
-    &:hover {
-      color: ${({ theme }) => theme.colors.grayscale.dark1};
-      background-color: ${({ theme }) => theme.colors.primary.light5};
-      border-bottom: none;
-      margin: 0;
-      &:after {
-        opacity: 1;
-        width: 100%;
+        span {
+          max-width: ${theme.gridUnit * 58}px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        @media (max-width: 1127px) {
+          display: none;
+        }
       }
-    }
-  }
+      .main-nav .ant-menu-submenu-title > svg {
+        top: ${theme.gridUnit * 5.25}px;
+      }
+      @media (max-width: 767px) {
+        .navbar-brand {
+          float: none;
+        }
+      }
+      .ant-menu-horizontal .ant-menu-item {
+        height: 100%;
+        line-height: inherit;
+      }
+      .ant-menu > .ant-menu-item > a {
+        padding: ${theme.gridUnit * 4}px;
+      }
+      @media (max-width: 767px) {
+        .ant-menu-item {
+          padding: 0 ${theme.gridUnit * 6}px 0
+            ${theme.gridUnit * 3}px !important;
+        }
+        .ant-menu > .ant-menu-item > a {
+          padding: 0px;
+        }
+        .main-nav .ant-menu-submenu-title > svg:nth-child(1) {
+          display: none;
+        }
+        .ant-menu-item-active > a {
+          &:hover {
+            color: ${theme.colors.primary.base} !important;
+            background-color: transparent !important;
+          }
+        }
+      }
+      .ant-menu-item a {
+        &:hover {
+          color: ${theme.colors.grayscale.dark1};
+          background-color: ${theme.colors.primary.light5};
+          border-bottom: none;
+          margin: 0;
+          &:after {
+            opacity: 1;
+            width: 100%;
+          }
+        }
+      }
+  `}
 `;
 const globalStyles = (theme: SupersetTheme) => css`
   .ant-menu-submenu.ant-menu-submenu-popup.ant-menu.ant-menu-light.ant-menu-submenu-placement-bottomLeft {

From ca80af9f0bb0137946b790f7f4351570a6565a20 Mon Sep 17 00:00:00 2001
From: geido <diegopucci.me@gmail.com>
Date: Fri, 8 Apr 2022 15:37:07 +0000
Subject: [PATCH 2/2] Clean up style

---
 .../src/views/CRUD/welcome/Welcome.tsx           | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
index 0689aab45eeea..2d564bc66fe9f 100644
--- a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
@@ -114,23 +114,19 @@ const WelcomeContainer = styled.div`
 
 const WelcomeNav = styled.div`
   ${({ theme }) => `
+    display: flex;
+    justify-content: space-between;
     height: 50px;
     background-color: ${theme.colors.grayscale.light5};
-    & > span {
-      display: flex;
-      float: left;
-      height: 50px;
+    .welcome-header {
       font-size: ${theme.typography.sizes.l}px;
       padding: ${theme.gridUnit * 4}px ${theme.gridUnit * 2 + 2}px;
-      line-height: ${theme.gridUnit * 5}px;
-      margin-left: ${theme.gridUnit * 2}px;
-      font-weight: ${theme.typography.weights.bold};
+      margin: 0 ${theme.gridUnit * 2}px;
     }
     .switch {
-      float: right;
-      margin: ${theme.gridUnit * 5}px;
       display: flex;
       flex-direction: row;
+      margin: ${theme.gridUnit * 4}px;
       span {
         display: block;
         margin: ${theme.gridUnit * 1}px;
@@ -283,7 +279,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
   return (
     <WelcomeContainer>
       <WelcomeNav>
-        <span>Home</span>
+        <h1 className="welcome-header">Home</h1>
         {isFeatureEnabled(FeatureFlag.THUMBNAILS) ? (
           <div className="switch">
             <AntdSwitch checked={checked} onChange={handleToggle} />