From 78cfa6480157f1d6e071395a0d155fff282c7d04 Mon Sep 17 00:00:00 2001
From: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Date: Thu, 29 Jul 2021 11:14:08 +0300
Subject: [PATCH] change topbar X to back button

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
---
 .../cluster-manager/catalog-topbar.tsx        |  5 ++--
 .../cluster-manager/cluster-topbar.tsx        | 24 +++++++++----------
 .../components/layout/topbar.module.css       |  4 +++-
 src/renderer/components/layout/topbar.tsx     |  3 +--
 4 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/renderer/components/cluster-manager/catalog-topbar.tsx b/src/renderer/components/cluster-manager/catalog-topbar.tsx
index 7e70834ae3..87587f83cb 100644
--- a/src/renderer/components/cluster-manager/catalog-topbar.tsx
+++ b/src/renderer/components/cluster-manager/catalog-topbar.tsx
@@ -30,10 +30,9 @@ export function CatalogTopbar() {
     <TopBar label="Catalog">
       <div>
         <Icon
-          style={{ cursor: "default" }}
-          material="close"
+          material="chevron_left"
           onClick={() => navigate(welcomeURL())}
-          tooltip="Close Catalog"
+          tooltip="Back to Welcome"
         />
       </div>
     </TopBar>
diff --git a/src/renderer/components/cluster-manager/cluster-topbar.tsx b/src/renderer/components/cluster-manager/cluster-topbar.tsx
index 20a6120ba1..d6c3739a10 100644
--- a/src/renderer/components/cluster-manager/cluster-topbar.tsx
+++ b/src/renderer/components/cluster-manager/cluster-topbar.tsx
@@ -43,19 +43,17 @@ export const ClusterTopbar = observer((props: Props) => {
 
   return (
     <TopBar label={getCluster()?.name}>
-      <div>
-        <Icon
-          style={{ cursor: "default" }}
-          material="close"
-          onClick={() => {
-            navigate(`${catalogURL()}/${previousActiveTab.get()}`);
-          }}
-          tooltip={{
-            preferredPositions: TooltipPosition.BOTTOM_RIGHT,
-            children: "Back to Catalog"
-          }}
-        />
-      </div>
+      <Icon
+        interactive
+        material="chevron_left"
+        onClick={() => {
+          navigate(`${catalogURL()}/${previousActiveTab.get()}`);
+        }}
+        tooltip={{
+          preferredPositions: TooltipPosition.BOTTOM_RIGHT,
+          children: "Back to Catalog"
+        }}
+      />
     </TopBar>
   );
 });
diff --git a/src/renderer/components/layout/topbar.module.css b/src/renderer/components/layout/topbar.module.css
index da4bdcda99..443bd328e9 100644
--- a/src/renderer/components/layout/topbar.module.css
+++ b/src/renderer/components/layout/topbar.module.css
@@ -39,8 +39,10 @@
 
 .controls {
   align-self: flex-end;
-  padding-right: 1.5rem;
   align-items: center;
   display: flex;
   height: 100%;
+  > * {
+    -webkit-app-region: no-drag;
+  }
 }
diff --git a/src/renderer/components/layout/topbar.tsx b/src/renderer/components/layout/topbar.tsx
index 135407f7e1..36288d1c76 100644
--- a/src/renderer/components/layout/topbar.tsx
+++ b/src/renderer/components/layout/topbar.tsx
@@ -55,10 +55,9 @@ export const TopBar = observer(({ label, children, ...rest }: Props) => {
 
   return (
     <div className={styles.topBar} {...rest}>
-      <div className={styles.title} data-testid="topbarLabel">{label}</div>
+      <div className={styles.title} data-testid="topbarLabel">{children} {label}</div>
       <div className={styles.controls}>
         {renderRegisteredItems()}
-        {children}
       </div>
     </div>
   );