From d9e83acbae4756f1d41e0d131fc754c137f4d535 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Sat, 2 Jul 2022 01:36:54 +0800
Subject: [PATCH] style(console): improve styles in guides

---
 .../src/components/Markdown/index.module.scss |  4 ++++
 .../DetailsSummary/index.module.scss          |  5 +----
 .../src/mdx-components/Step/index.module.scss | 20 +++++++++++++++++--
 .../src/mdx-components/Tabs/index.module.scss |  2 +-
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/console/src/components/Markdown/index.module.scss b/packages/console/src/components/Markdown/index.module.scss
index 4c7da7f10..3a8ea324b 100644
--- a/packages/console/src/components/Markdown/index.module.scss
+++ b/packages/console/src/components/Markdown/index.module.scss
@@ -34,6 +34,10 @@
     font: var(--font-body-medium);
     color: var(--color-text-link);
     text-decoration: none;
+
+    &:hover {
+      border-bottom: 1px solid var(--color-text-link);
+    }
   }
 
   h1 {
diff --git a/packages/console/src/mdx-components/DetailsSummary/index.module.scss b/packages/console/src/mdx-components/DetailsSummary/index.module.scss
index c6c98b202..adc6bd6eb 100644
--- a/packages/console/src/mdx-components/DetailsSummary/index.module.scss
+++ b/packages/console/src/mdx-components/DetailsSummary/index.module.scss
@@ -4,6 +4,7 @@
   display: flex;
   flex-direction: column;
   background-color: var(--color-layer-light);
+  margin: _.unit(6) 0;
   border-radius: 8px;
 
   .summary {
@@ -41,7 +42,3 @@
     }
   }
 }
-
-.container + .container {
-  margin-top: _.unit(6);
-}
diff --git a/packages/console/src/mdx-components/Step/index.module.scss b/packages/console/src/mdx-components/Step/index.module.scss
index 2bcb7e94e..453b3d3b1 100644
--- a/packages/console/src/mdx-components/Step/index.module.scss
+++ b/packages/console/src/mdx-components/Step/index.module.scss
@@ -36,6 +36,10 @@
       height: auto;
       overflow: unset;
     }
+
+    > *:first-child {
+      margin-top: _.unit(6);
+    }
   }
 
   li {
@@ -71,17 +75,29 @@
     font: var(--font-body-medium);
     color: var(--color-text-link);
     text-decoration: none;
+
+    &:hover {
+      border-bottom: 1px solid var(--color-text-link);
+    }
   }
 
   h3 {
     font: var(--font-title-medium);
     color: var(--color-caption);
-    margin: _.unit(6) 0;
+    margin: _.unit(6) 0 _.unit(3);
   }
 
   p {
     font: var(--font-body-medium);
-    margin: _.unit(6) 0;
+    margin: _.unit(3) 0;
+  }
+
+  strong {
+    font: var(--font-label-large);
+  }
+
+  pre {
+    margin: _.unit(3) 0;
   }
 
   code:not(pre > code) {
diff --git a/packages/console/src/mdx-components/Tabs/index.module.scss b/packages/console/src/mdx-components/Tabs/index.module.scss
index 605f24da9..78a971534 100644
--- a/packages/console/src/mdx-components/Tabs/index.module.scss
+++ b/packages/console/src/mdx-components/Tabs/index.module.scss
@@ -2,7 +2,7 @@
 
 .container {
   width: 100%;
-  margin-top: _.unit(6);
+  margin-top: _.unit(3);
 
   ul {
     border-bottom: 1px solid var(--color-divider);