fix(mdx-styles): re-design InlineCode, Code and Divider (#751)

- Remove all border radius.
- Make `InlineCode` looks lightweight.

issue #700
issue #701

components/CodeBlocks/Code.module.css

@@ -3,7 +3,6 @@
   @apply mt-0 mb-9;
   @apply px-5 pb-1 pt-10;
   @apply bg-dark;
-  @apply rounded-md;
 
   /* TODO: @sabertazimi - Add language specific syntax highlight */
   @apply text-light;

components/CodeBlocks/InlineCode.module.css

@@ -1,15 +1,12 @@
 .code {
   /* Add `!important` to override `antd` styles */
-  @apply py-0.5 px-2 !important;
-  @apply font-normal !important;
-  @apply leading-6 !important;
+  @apply px-1.5 py-px !important;
+  @apply border border-solid border-secondary !important;
   @apply break-words !important;
-  @apply border border-solid rounded-lg !important;
-  @apply shadow-md !important;
-  @apply font-mono !important;
-  @apply text-light !important;
-  @apply bg-primary !important;
-  @apply border-secondary !important;
+  @apply font-mono font-normal leading-6 !important;
+  @apply text-dark !important;
+  @apply bg-transparent !important;
+  @apply shadow-xl !important;
 
   font-size: var(--font-size) !important;
 }

components/MDX/Divider.tsx

@@ -1,7 +1,7 @@
 import Divider from '@components/Divider';
 
 const MDXDivider = (): JSX.Element => (
-  <Divider className="mx-0 my-12 h-1 rounded-full bg-gradient-primary" />
+  <Divider className="mx-0 my-12 h-1 bg-gradient-primary" />
 );
 
 export default MDXDivider;

components/MDX/__snapshots__/MDX.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Divider should render correctly (snapshot) 1`] = `
 <div>
   <div
-    class="ant-divider ant-divider-horizontal mx-0 my-12 h-1 rounded-full bg-gradient-primary"
+    class="ant-divider ant-divider-horizontal mx-0 my-12 h-1 bg-gradient-primary"
     role="separator"
   />
 </div>