Moving Catalog Details panel under TopBar (#4087)

* Moving Catalog Details panel under TopBar

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fine-tuning drawer height css rule

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+catalog/catalog-entity-details.module.css

@@ -19,25 +19,32 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
- .CatalogEntityDetails {
+.entityDetails {
-   .EntityMetadata {
+  /* Move Details panel under TopBar line */
-     margin-right: $margin;
+  height: calc(100% - var(--main-layout-header));
-   }
+  margin-top: var(--main-layout-header);
-   .EntityIcon.box.top.left {
+}
-     margin-right: $margin * 2;
 
-    .IconHint {
+.metadata {
-      text-align: center;
+  margin-right: var(--margin);
-      font-size: var(--font-size-small);
+}
-      text-transform: uppercase;
-      margin-top: $margin;
-      cursor: default;
-      user-select: none;
-      opacity: 0.5;
-    }
 
-    div * {
+.entityIcon {
-      font-size: 1.5em;
+  margin-right: calc(var(--margin) * 3);
+
+  .avatar {
+    :global(.MuiAvatar-root) {
+      font-size: 3ch;
     }
-   }
+  }
- }
+
+  .hint {
+    text-align: center;
+    font-size: var(--font-size-small);
+    text-transform: uppercase;
+    margin-top: var(--margin);
+    cursor: default;
+    user-select: none;
+    opacity: 0.5;
+  }
+}

src/renderer/components/+catalog/catalog-entity-details.tsx

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./catalog-entity-details.scss";
+import styles from "./catalog-entity-details.module.css";
 import React, { Component } from "react";
 import { observer } from "mobx-react";
 import { Drawer, DrawerItem } from "../drawer";
@@ -30,6 +30,7 @@ import { CatalogEntityDetailRegistry } from "../../../extensions/registries";
 import { HotbarIcon } from "../hotbar/hotbar-icon";
 import type { CatalogEntityItem } from "./catalog-entity-item";
 import { isDevelopment } from "../../../common/vars";
+import { cssNames } from "../../utils";
 
 interface Props<T extends CatalogEntity> {
   item: CatalogEntityItem<T> | null | undefined;
@@ -57,8 +58,8 @@ export class CatalogEntityDetails<T extends CatalogEntity> extends Component<Pro
     return (
       <>
         {showDetails && (
-          <div className="flex CatalogEntityDetails">
+          <div className="flex">
-            <div className="EntityIcon box top left">
+            <div className={styles.entityIcon}>
               <HotbarIcon
                 uid={item.id}
                 title={item.name}
@@ -70,14 +71,15 @@ export class CatalogEntityDetails<T extends CatalogEntity> extends Component<Pro
                 onClick={() => item.onRun()}
                 size={128}
                 data-testid="detail-panel-hot-bar-icon"
+                className={styles.avatar}
               />
               {item?.enabled && (
-                <div className="IconHint">
+                <div className={styles.hint}>
                   Click to open
                 </div>
               )}
             </div>
-            <div className="box grow EntityMetadata">
+            <div className={cssNames("box grow", styles.metadata)}>
               <DrawerItem name="Name">
                 {item.name}
               </DrawerItem>
@@ -114,7 +116,7 @@ export class CatalogEntityDetails<T extends CatalogEntity> extends Component<Pro
 
     return (
       <Drawer
-        className="CatalogEntityDetails"
+        className={styles.entityDetails}
         usePortal={true}
         open={true}
         title={title}

src/renderer/components/drawer/drawer.scss

@@ -30,6 +30,7 @@
   background: $contentColor;
   box-shadow: 0 0 $unit * 2 $boxShadow;
   z-index: $zIndex-drawer;
+  height: 100%;
 
   &.left {
     left: 0;
@@ -51,7 +52,6 @@
   &.right {
     top: 0;
     width: var(--size);
-    height: 100%;
   }
 
   &.top,