From 8a50d2775764e8be384eb94e57e731b800d764eb Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Thu, 16 Nov 2023 15:03:38 +0800
Subject: [PATCH] fix(console): add a brief header to the organization guide in
 drawer view (#4895)

---
 .../src/components/Drawer/index.module.scss   |  4 +--
 .../src/pages/OrganizationDetails/index.tsx   |  6 ++--
 .../Introduction/components/User/index.tsx    |  2 +-
 .../Guide/Introduction/index.module.scss      | 28 +++++++++++--------
 .../Guide/Introduction/index.tsx              |  4 +--
 5 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/packages/console/src/components/Drawer/index.module.scss b/packages/console/src/components/Drawer/index.module.scss
index 33c410a66..70f7dc0f7 100644
--- a/packages/console/src/components/Drawer/index.module.scss
+++ b/packages/console/src/components/Drawer/index.module.scss
@@ -6,8 +6,8 @@
   right: 0;
   bottom: 0;
   width: 50%;
-  max-width: 900px;
-  min-width: 800px;
+  max-width: 960px;
+  min-width: 860px;
   outline: none;
   background: var(--color-base);
 
diff --git a/packages/console/src/pages/OrganizationDetails/index.tsx b/packages/console/src/pages/OrganizationDetails/index.tsx
index 6fd5f1535..1ac59d6fc 100644
--- a/packages/console/src/pages/OrganizationDetails/index.tsx
+++ b/packages/console/src/pages/OrganizationDetails/index.tsx
@@ -19,7 +19,7 @@ import TabNav, { TabNavItem } from '@/ds-components/TabNav';
 import useApi, { type RequestError } from '@/hooks/use-api';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
 
-import IntroductionAndPermissions from '../Organizations/Guide/Introduction';
+import Introduction from '../Organizations/Guide/Introduction';
 
 import Members from './Members';
 import Settings from './Settings';
@@ -89,12 +89,14 @@ function OrganizationDetails() {
             ]}
           />
           <Drawer
+            title="organizations.guide.title"
+            subtitle="organizations.guide.subtitle"
             isOpen={isGuideDrawerOpen}
             onClose={() => {
               setIsGuideDrawerOpen(false);
             }}
           >
-            <IntroductionAndPermissions isReadonly />
+            <Introduction isReadonly />
           </Drawer>
           <DeleteConfirmModal
             isOpen={isDeleteFormOpen}
diff --git a/packages/console/src/pages/Organizations/Guide/Introduction/components/User/index.tsx b/packages/console/src/pages/Organizations/Guide/Introduction/components/User/index.tsx
index c80419bb4..d6c7e53a7 100644
--- a/packages/console/src/pages/Organizations/Guide/Introduction/components/User/index.tsx
+++ b/packages/console/src/pages/Organizations/Guide/Introduction/components/User/index.tsx
@@ -29,7 +29,7 @@ function User({
   onMouseOut,
 }: Props) {
   return (
-    <Tooltip content={tooltip} placement="bottom">
+    <Tooltip content={tooltip}>
       <div
         className={classNames(
           styles.user,
diff --git a/packages/console/src/pages/Organizations/Guide/Introduction/index.module.scss b/packages/console/src/pages/Organizations/Guide/Introduction/index.module.scss
index 753594ae3..cee1680b8 100644
--- a/packages/console/src/pages/Organizations/Guide/Introduction/index.module.scss
+++ b/packages/console/src/pages/Organizations/Guide/Introduction/index.module.scss
@@ -1,17 +1,23 @@
 @use '@/scss/underscore' as _;
 
-.title {
-  font: var(--font-title-1);
-}
+.container {
+  .title {
+    font: var(--font-title-1);
+  }
 
-.sectionTitle {
-  font: var(--font-title-2);
-}
+  .sectionTitle {
+    font: var(--font-title-2);
+  }
 
-.description {
-  font: var(--font-body-2);
-}
+  .description {
+    font: var(--font-body-2);
+  }
 
-.panel {
-  flex: 1;
+  .panel {
+    flex: 1;
+  }
+
+  .compact {
+    padding: _.unit(6);
+  }
 }
diff --git a/packages/console/src/pages/Organizations/Guide/Introduction/index.tsx b/packages/console/src/pages/Organizations/Guide/Introduction/index.tsx
index bec18e8d7..596371c46 100644
--- a/packages/console/src/pages/Organizations/Guide/Introduction/index.tsx
+++ b/packages/console/src/pages/Organizations/Guide/Introduction/index.tsx
@@ -42,8 +42,8 @@ function Introduction({ isReadonly }: Props) {
   return (
     <>
       <OverlayScrollbar className={parentStyles.stepContainer}>
-        <div className={classNames(parentStyles.content)}>
-          <Card className={parentStyles.card}>
+        <div className={classNames(parentStyles.content, styles.container)}>
+          <Card className={classNames(parentStyles.card, isReadonly && styles.compact)}>
             <OrganizationIcon className={parentStyles.icon} />
             <FlexBox type="column" gap={24}>
               <div className={styles.title}>{t('guide.introduction.title')}</div>