Fix the dock drawer header

Signed-off-by: Quentin Guidée <[email protected]>
vertex-center · Nov 9, 2023 · 500e60e · 500e60e
1 parent c71dfae
commit 500e60e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/src/components/Dock/DockDrawer.module.sass b/src/components/Dock/DockDrawer.module.sass
@@ -25,6 +25,14 @@
         overflow: scroll
         transition: all 0.15s ease-out
 
+.header
+    display: flex
+    flex-direction: row
+    align-items: center
+    gap: 10px
+    padding: 20px 30px
+    cursor: pointer
+
 .apps
     display: grid
     grid-template-columns: repeat(3, 1fr)
@@ -73,6 +81,7 @@
         align-items: center
         gap: 6px
         font-size: 17px
+        line-height: 1 !important
 
         & > :first-child
             margin-bottom: -2px

diff --git a/src/components/Dock/DockDrawer.tsx b/src/components/Dock/DockDrawer.tsx
@@ -1,12 +1,11 @@
 import styles from "./DockDrawer.module.sass";
 import classNames from "classnames";
-import { Caption, Title } from "../Text/Text";
+import { Caption } from "../Text/Text";
 import { Link } from "react-router-dom";
 import { Vertical } from "../Layouts/Layouts";
 import LogoIcon from "../Logo/LogoIcon";
 import { useApps } from "../../hooks/useApps";
-import Header from "../Header/Header";
-import { MaterialIcon } from "@vertex-center/components";
+import { Logo, MaterialIcon, Title } from "@vertex-center/components";
 
 type AppProps = {
     to: string;
@@ -23,7 +22,7 @@ function DrawerApp(props: AppProps) {
         <Link to={to} className={styles.app} onClick={onClick}>
             <MaterialIcon icon={icon} className={styles.appIcon} />
             <Vertical gap={8}>
-                <Title className={styles.appName}>
+                <Title variant="h4" className={styles.appName}>
                     <LogoIcon />
                     {name}
                 </Title>
@@ -49,7 +48,10 @@ export default function DockDrawer(props: Props) {
                 [styles.drawerOpen]: show,
             })}
         >
-            <Header title="Vertex" onClick={onClose} />
+            <div className={styles.header} onClick={onClose}>
+                <Logo />
+                <Title variant="h3">Vertex</Title>
+            </div>
             <div className={styles.apps}>
                 {[...(apps ?? [])]
                     ?.filter((app) => app.category !== "devtools")