From 7f6732bd575e63f99a9063bfd060b9027e852a6d Mon Sep 17 00:00:00 2001
From: Anton Kulyk <kuliks.anton@gmail.com>
Date: Mon, 4 Apr 2022 17:05:31 +0100
Subject: [PATCH] Address nav cleanup feedback (#21447)

* Use `rem` for padding

* Extract `SidebarButton` component to its own dir
---
 .../SidebarButton/SidebarButton.styled.tsx    | 18 +++++++++++
 .../SidebarButton/SidebarButton.tsx           | 22 +++++++++++++
 .../nav/components/SidebarButton/index.ts     |  1 +
 .../metabase/nav/containers/AppBar.styled.tsx | 32 -------------------
 .../src/metabase/nav/containers/AppBar.tsx    |  3 +-
 .../BookmarkList/BookmarkList.styled.tsx      |  2 +-
 6 files changed, 44 insertions(+), 34 deletions(-)
 create mode 100644 frontend/src/metabase/nav/components/SidebarButton/SidebarButton.styled.tsx
 create mode 100644 frontend/src/metabase/nav/components/SidebarButton/SidebarButton.tsx
 create mode 100644 frontend/src/metabase/nav/components/SidebarButton/index.ts

diff --git a/frontend/src/metabase/nav/components/SidebarButton/SidebarButton.styled.tsx b/frontend/src/metabase/nav/components/SidebarButton/SidebarButton.styled.tsx
new file mode 100644
index 00000000000..a14351c1e04
--- /dev/null
+++ b/frontend/src/metabase/nav/components/SidebarButton/SidebarButton.styled.tsx
@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+
+import Icon from "metabase/components/Icon";
+
+import { color } from "metabase/lib/colors";
+import { space } from "metabase/styled-components/theme";
+
+export const SidebarIcon = styled(Icon)`
+  &:hover {
+    cursor: pointer;
+    color: ${color("brand")};
+  }
+`;
+
+export const SidebarButtonRoot = styled.div`
+  margin-left: ${space(1)};
+  margin-top: ${space(1)};
+`;
diff --git a/frontend/src/metabase/nav/components/SidebarButton/SidebarButton.tsx b/frontend/src/metabase/nav/components/SidebarButton/SidebarButton.tsx
new file mode 100644
index 00000000000..25434e0240d
--- /dev/null
+++ b/frontend/src/metabase/nav/components/SidebarButton/SidebarButton.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+import { SidebarButtonRoot, SidebarIcon } from "./SidebarButton.styled";
+
+interface SidebarButtonProps {
+  isSidebarOpen: boolean;
+  onClick: () => void;
+}
+
+function SidebarButton({ isSidebarOpen, onClick }: SidebarButtonProps) {
+  return (
+    <SidebarButtonRoot data-testid="sidebar-toggle-button">
+      <SidebarIcon
+        size={28}
+        name={isSidebarOpen ? "sidebar_open" : "sidebar_closed"}
+        onClick={onClick}
+      />
+    </SidebarButtonRoot>
+  );
+}
+
+export default SidebarButton;
diff --git a/frontend/src/metabase/nav/components/SidebarButton/index.ts b/frontend/src/metabase/nav/components/SidebarButton/index.ts
new file mode 100644
index 00000000000..6b596087d7b
--- /dev/null
+++ b/frontend/src/metabase/nav/components/SidebarButton/index.ts
@@ -0,0 +1 @@
+export { default } from "./SidebarButton";
diff --git a/frontend/src/metabase/nav/containers/AppBar.styled.tsx b/frontend/src/metabase/nav/containers/AppBar.styled.tsx
index 135c3d666ea..205babc16fb 100644
--- a/frontend/src/metabase/nav/containers/AppBar.styled.tsx
+++ b/frontend/src/metabase/nav/containers/AppBar.styled.tsx
@@ -1,8 +1,5 @@
-import React from "react";
 import styled from "@emotion/styled";
 
-import Icon from "metabase/components/Icon";
-
 import { color } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
 
@@ -32,32 +29,3 @@ export const LogoIconWrapper = styled.div`
     background-color: ${color("bg-light")};
   }
 `;
-
-const SidebarIcon = styled(Icon)`
-  &:hover {
-    cursor: pointer;
-    color: ${color("brand")};
-  }
-`;
-
-const SidebarButtonRoot = styled.div`
-  margin-left: ${space(1)};
-  margin-top: ${space(1)};
-`;
-
-interface SidebarButtonProps {
-  isSidebarOpen: boolean;
-  onClick: () => void;
-}
-
-export function SidebarButton({ isSidebarOpen, onClick }: SidebarButtonProps) {
-  return (
-    <SidebarButtonRoot data-testid="sidebar-toggle-button">
-      <SidebarIcon
-        size={28}
-        name={isSidebarOpen ? "sidebar_open" : "sidebar_closed"}
-        onClick={onClick}
-      />
-    </SidebarButtonRoot>
-  );
-}
diff --git a/frontend/src/metabase/nav/containers/AppBar.tsx b/frontend/src/metabase/nav/containers/AppBar.tsx
index e04cd920148..ca8be88c48a 100644
--- a/frontend/src/metabase/nav/containers/AppBar.tsx
+++ b/frontend/src/metabase/nav/containers/AppBar.tsx
@@ -7,6 +7,7 @@ import Tooltip from "metabase/components/Tooltip";
 import LogoIcon from "metabase/components/LogoIcon";
 
 import SearchBar from "metabase/nav/components/SearchBar";
+import SidebarButton from "metabase/nav/components/SidebarButton";
 import NewButton from "metabase/nav/containers/NewButton";
 import {
   SearchBarContainer,
@@ -16,7 +17,7 @@ import {
 import Database from "metabase/entities/databases";
 import { isSmallScreen } from "metabase/lib/dom";
 
-import { AppBarRoot, LogoIconWrapper, SidebarButton } from "./AppBar.styled";
+import { AppBarRoot, LogoIconWrapper } from "./AppBar.styled";
 
 type Props = {
   isSidebarOpen: boolean;
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/BookmarkList/BookmarkList.styled.tsx b/frontend/src/metabase/nav/containers/MainNavbar/BookmarkList/BookmarkList.styled.tsx
index fc74e6f5c16..2119a5d4907 100644
--- a/frontend/src/metabase/nav/containers/MainNavbar/BookmarkList/BookmarkList.styled.tsx
+++ b/frontend/src/metabase/nav/containers/MainNavbar/BookmarkList/BookmarkList.styled.tsx
@@ -6,7 +6,7 @@ import { space } from "metabase/styled-components/theme";
 import { SidebarLink } from "../SidebarItems";
 
 export const SidebarBookmarkItem = styled(SidebarLink)`
-  padding-left: 12px;
+  padding-left: 0.75rem;
 
   &:hover {
     button {
-- 
GitLab