change topbar X to back button

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

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>

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>
   );
 });

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;
+  }
 }

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>
   );