Merge pull request #1362 from logto-io/charles-log-3363-improve-styles-in-ac-guide

style(console): improve styles in guides

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 {

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

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

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