Migrate "nav" from grid-styled (#20210)

frontend/src/metabase/nav/components/ProfileLink.jsx

 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { Box } from "grid-styled";
 
 import { t } from "ttag";
 import _ from "underscore";
@@ -85,7 +84,7 @@ export default class ProfileLink extends Component {
     // don't show trademark if application name is whitelabeled
     const showTrademark = t`Metabase` === "Metabase";
     return (
-      <Box>
+      <div>
         <EntityMenu
           tooltip={t`Settings`}
           items={this.generateOptionsForUser()}
@@ -139,7 +138,7 @@ export default class ProfileLink extends Component {
             )}
           </Modal>
         ) : null}
-      </Box>
+      </div>
     );
   }
 }

frontend/src/metabase/nav/components/SearchResults.jsx

 import React from "react";
 import PropTypes from "prop-types";
-import { Box } from "grid-styled";
 import { t } from "ttag";
 
 import { DEFAULT_SEARCH_LIMIT } from "metabase/lib/constants";
 import Search from "metabase/entities/search";
 import SearchResult from "metabase/search/components/SearchResult";
 import EmptyState from "metabase/components/EmptyState";
+import { EmptyStateContainer } from "./SearchResults.styled";
 
 const propTypes = {
   searchText: PropTypes.string,
@@ -32,9 +32,9 @@ export const SearchResults = ({ searchText }) => {
                 </li>
               ))
             ) : (
-              <Box mt={4} mb={3}>
+              <EmptyStateContainer>
                 <EmptyState message={t`Didn't find anything`} icon="search" />
-              </Box>
+              </EmptyStateContainer>
             )}
           </ul>
         );

frontend/src/metabase/nav/components/SearchResults.styled.tsx

+import styled from "styled-components";
+
+export const EmptyStateContainer = styled.div`
+  margin-top: 4rem;
+  margin-bottom: 2rem;
+`;

frontend/src/metabase/nav/containers/Navbar.jsx

@@ -6,7 +6,6 @@ import { connect } from "react-redux";
 import { push } from "react-router-redux";
 
 import { t } from "ttag";
-import { Flex, Box } from "grid-styled";
 
 import * as Urls from "metabase/lib/urls";
 import { color, darken } from "metabase/lib/colors";
@@ -42,6 +41,14 @@ const mapStateToProps = (state, props) => ({
 });
 
 import { getDefaultSearchColor } from "metabase/nav/constants";
+import {
+  EntityMenuContainer,
+  LogoIconContainer,
+  LogoLinkContainer,
+  NavRoot,
+  SearchBarContainer,
+  SearchBarContent,
+} from "./Navbar.styled";
 
 const mapDispatchToProps = {
   onChangeLocation: push,
@@ -110,16 +117,12 @@ export default class Navbar extends Component {
     const { hasDataAccess, hasNativeWrite } = this.props;
 
     return (
-      <Flex
+      <NavRoot
         // NOTE: DO NOT REMOVE `Nav` CLASS FOR NOW, USED BY MODALS, FULLSCREEN DASHBOARD, ETC
         // TODO: hide nav using state in redux instead?
         className="Nav relative bg-brand text-white z3 flex-no-shrink"
-        align="center"
-        style={{ backgroundColor: color("nav") }}
-        py={1}
-        pr={2}
       >
-        <Flex style={{ minWidth: 64 }} align="center" justify="center">
+        <LogoLinkContainer>
           <Link
             to="/"
             data-metabase-event={"Navbar;Logo"}
@@ -128,24 +131,20 @@ export default class Navbar extends Component {
             mx={1}
             hover={{ backgroundColor: getDefaultSearchColor() }}
           >
-            <Flex
-              style={{ minWidth: 32, height: 32 }}
-              align="center"
-              justify="center"
-            >
+            <LogoIconContainer>
               <LogoIcon dark height={32} />
-            </Flex>
+            </LogoIconContainer>
           </Link>
-        </Flex>
-        <Flex className="flex-full z1" pr={2} align="center">
-          <Box width={1} style={{ maxWidth: 500 }}>
+        </LogoLinkContainer>
+        <SearchBarContainer>
+          <SearchBarContent>
             <SearchBar
               location={this.props.location}
               onChangeLocation={this.props.onChangeLocation}
             />
-          </Box>
-        </Flex>
-        <Flex ml="auto" align="center" pl={[1, 2]} className="relative z2">
+          </SearchBarContent>
+        </SearchBarContainer>
+        <EntityMenuContainer>
           <EntityMenu
             className="hide sm-show mr1"
             trigger={
@@ -220,9 +219,9 @@ export default class Navbar extends Component {
             </Link>
           )}
           <ProfileLink {...this.props} />
-        </Flex>
+        </EntityMenuContainer>
         {this.renderModal()}
-      </Flex>
+      </NavRoot>
     );
   }
 

frontend/src/metabase/nav/containers/Navbar.styled.tsx

+import styled from "styled-components";
+import { color } from "metabase/lib/colors";
+import { breakpointMinSmall } from "metabase/styled-components/theme";
+
+export const NavRoot = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 1rem 0.5rem 0;
+  background-color: ${color("nav")};
+`;
+
+export const LogoLinkContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 4rem;
+`;
+
+export const LogoIconContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 2rem;
+  height: 2rem;
+`;
+
+export const SearchBarContainer = styled.div`
+  display: flex;
+  flex: 1 0 auto;
+  align-items: center;
+  padding-right: 1rem;
+  z-index: 1;
+`;
+
+export const SearchBarContent = styled.div`
+  width: 100%;
+  max-width: 500px;
+`;
+
+export const EntityMenuContainer = styled.div`
+  display: flex;
+  position: relative;
+  align-items: center;
+  margin-left: auto;
+  padding-left: 0.5rem;
+  z-index: 2;
+
+  ${breakpointMinSmall} {
+    padding-left: 1rem;
+  }
+`;