Merge pull request #1619 from oasisprotocol/matevz/fix/titles-example-core-icon

Bunch of UI fixes

Author: matevz

src/components/DocCardSection.module.css

@@ -96,7 +96,6 @@
 .cardItem a h3 {
   font-size: 1rem !important;
   margin: 0;
-  font-weight: 600 !important;
   color: var(--ifm-color-card-heading-secondary);
   transition: all .2s ease;
 }
@@ -237,4 +236,4 @@ html[data-theme='dark'] .cardItem::after {
     flex-direction: column;
     gap: 1.5rem;
   }
-}
+}

src/css/custom.css

@@ -17,17 +17,18 @@
   --ifm-code-font-size: 95%;
   --ifm-font-family-base: "Inter Variable", sans-serif;
   --ifm-font-family-monospace: "Roboto Mono", monospace;
+  --ifm-font-weight-bold: 640;
   --ifm-global-radius: 0;
   --ifm-alert-border-width: 5px;
-  --docusaurus-highlighted-code-line-bg: #dddfe1;
+  --docusaurus-highlighted-code-line-bg: #e8e8ff;
   --ifm-color-secondary-text: #71717A;
   --ifm-color-card-heading: #09090B;
   --ifm-color-card-heading-secondary: #18181B;
   --ifm-alert-foreground: #EF4444;
   --ifm-alert-background: #FEF2F2;
   --ifm-note-foreground: #71717A;
   --ifm-note-background: #F4F4F5;
-  --ifm-caution-foreground: #FB923C;
+  --ifm-caution-foreground: #FB843C;
   --ifm-caution-background: #FFF7ED;
   --ifm-info-foreground: #3B82F6;
   --ifm-info-background: #EFF6FF;
@@ -46,7 +47,7 @@ html[data-theme='dark'] {
   --ifm-color-primary-light: #00ffff;
   --ifm-color-primary-lighter: #00ffff;
   --ifm-color-primary-lightest: #00ffff;
-  --docusaurus-highlighted-code-line-bg: #646464;
+  --docusaurus-highlighted-code-line-bg: #343484;
   --ifm-color-secondary-text: #A1A1AA;
   --ifm-color-card-heading: #FAFAFA;
   --ifm-color-card-heading-secondary: #FAFAFA;
@@ -80,10 +81,15 @@ html[data-theme='dark'] {
   src: url("/static/fonts/RobotoMono-Regular.ttf") format("truetype");
 }
 
+/* https://github.com/facebook/docusaurus/issues/10652 */
+code {
+  vertical-align: baseline;
+}
+
 h1, h2, h3, h4, h5, h6 {
   font-family: "Inter Variable", sans-serif;
   letter-spacing: -0.04em;
-  font-weight: 600;
+  font-weight: 400;
 }
 
 article strong {

src/theme/Admonition/Types.tsx

@@ -1,22 +1,38 @@
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import DefaultAdmonitionTypes from '@theme-original/Admonition/Types';
+import Translate from "@docusaurus/Translate";
+import type {Props} from "@theme/Admonition/Type/Danger";
+import AdmonitionLayout from "@theme/Admonition/Layout";
+import clsx from "clsx";
 
-function ExampleAdmonition(props: any) {
+const infimaClassName = 'alert alert--example';
+
+const defaultProps = {
+  icon: <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="transparent">
+    <path d="M15.0002 12L6.62718 20.373C6.22935 20.7708 5.68979 20.9943 5.12718 20.9943C4.56457 20.9943 4.025 20.7708 3.62718 20.373C3.22936 19.9752 3.00586 19.4356 3.00586 18.873C3.00586 18.3104 3.22936 17.7708 3.62718 17.373L12.0002 9M18 15L22 11M21.5 11.5L19.586 9.58596C19.2109 9.21098 19.0001 8.70235 19 8.17196V6.99996L16.74 4.73996C15.6245 3.62515 14.115 2.99432 12.538 2.98396L9 2.95996L9.92 3.77996C10.5735 4.35935 11.0967 5.07066 11.4552 5.867C11.8137 6.66335 11.9994 7.52663 12 8.39996V9.99996L14 12H15.172C15.7024 12.0001 16.211 12.2109 16.586 12.586L18.5 14.5"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+    />
+  </svg>,
+  title: (
+    <Translate
+      id="theme.admonition.example"
+      description="The default label used for the Example admonition (:::example)">
+      example
+    </Translate>
+  ),
+};
+
+function ExampleAdmonition(props: Props): ReactNode {
   return (
-    <div className="theme-admonition theme-admonition-example alert alert--example" style={{ marginBottom: '1rem' }}>
-      <div style={{display: 'flex', textTransform: 'uppercase', alignItems: 'center', gap: '0.4rem', marginBottom: '0.3rem'}}>
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="transparent">
-            <path d="M15.0002 12L6.62718 20.373C6.22935 20.7708 5.68979 20.9943 5.12718 20.9943C4.56457 20.9943 4.025 20.7708 3.62718 20.373C3.22936 19.9752 3.00586 19.4356 3.00586 18.873C3.00586 18.3104 3.22936 17.7708 3.62718 17.373L12.0002 9M18 15L22 11M21.5 11.5L19.586 9.58596C19.2109 9.21098 19.0001 8.70235 19 8.17196V6.99996L16.74 4.73996C15.6245 3.62515 14.115 2.99432 12.538 2.98396L9 2.95996L9.92 3.77996C10.5735 4.35935 11.0967 5.07066 11.4552 5.867C11.8137 6.66335 11.9994 7.52663 12 8.39996V9.99996L14 12H15.172C15.7024 12.0001 16.211 12.2109 16.586 12.586L18.5 14.5" 
-                stroke="currentColor" 
-                stroke-width="2" 
-                stroke-linecap="round" 
-                stroke-linejoin="round"
-            />
-        </svg>
-        <h5 style={{marginBottom: '0'}}>{props.title}</h5>
-      </div>
-      <div>{props.children}</div>
-    </div>
+    <AdmonitionLayout
+      {...defaultProps}
+      {...props}
+      className={clsx(infimaClassName, props.className)}>
+      {props.children}
+    </AdmonitionLayout>
   );
 }