Fix css

developer-docs-site/docs/basics/basics-gas-txn-fee.md

@@ -3,6 +3,7 @@ title: "Gas and transaction fees"
 slug: "basics-gas-txn-fee"
 hidden: false
 ---
+import BlockQuote from "@site/src/components/BlockQuote";
 
 When a transaction is executed in the Diem Payment Network (DPN), the network resources used are tracked and measured using gas.
 

developer-docs-site/docs/basics/basics-validator-nodes.md

@@ -3,6 +3,8 @@ title: "Validator nodes"
 slug: "basics-validator-nodes"
 hidden: false
 ---
+import BlockQuote from "@site/src/components/BlockQuote";
+
 A Diem node is a peer entity of the Diem ecosystem that tracks the [state](/reference/glossary#state) of the Diem Blockchain. Clients interact with the blockchain via Diem nodes. There are two types of nodes:
 * Validator nodes
 * [FullNodes](basics-fullnodes.md)

developer-docs-site/docs/reference/security.md

@@ -3,6 +3,8 @@ title: "Security"
 slug: "security"
 hidden: false
 ---
+import BlockQuote from "@site/src/components/BlockQuote";
+
 This document outlines security procedures and general policies for the Diem project.
 
 <BlockQuote type="info">

developer-docs-site/docs/tools/cli-reference.md

@@ -3,6 +3,8 @@ title: "CLI reference"
 slug: "cli-reference"
 hidden: false
 ---
+import BlockQuote from "@site/src/components/BlockQuote";
+
 This guide describes how to use the Diem command line interface (CLI) client to interact with the Diem Blockchain’s testnet. 
 
 The CLI is invoked as an interactive shell. It provides basic commands to simulate the creation of accounts, the minting of Diem Coins, performing transfers, and querying the blockchain. You can use the CLI client to interact with a validator node in different types of networks such as testnet, a local test validator network, or on a remote blockchain by specifying the node's hostname.

developer-docs-site/docs/tools/github-projects.mdx

@@ -3,6 +3,9 @@ title: "GitHub projects"
 slug: "github-projects"
 hidden: false
 ---
+import CardsWrapper from "@site/src/components/Cards/CardsWrapper";
+
+import SimpleTextCard from "@site/src/components/Cards/SimpleTextCard";
 
 ### Available Projects
 <CardsWrapper>
@@ -31,20 +34,6 @@ hidden: false
     overlay=""
     to="https://github.com/diem/client-sdk-python"
   />
-  <SimpleTextCard
-    icon="img/github.svg"
-    iconDark="img/github-dark.svg"
-    title="Java SDK"
-    overlay=""
-    to="https://github.com/diem/client-sdk-java"
-  />
-  <SimpleTextCard
-    icon="img/github.svg"
-    iconDark="img/github-dark.svg"
-    title="Go SDK"
-    overlay=""
-    to="https://github.com/diem/client-sdk-go"
-  />
 </CardsWrapper>
 
 ### Other
@@ -63,11 +52,4 @@ hidden: false
     overlay="Binary Canonical Serializer"
     to="https://github.com/diem/bcs"
   />
-  <SimpleTextCard
-    icon="img/github.svg"
-    iconDark="img/github-dark.svg"
-    title="Rosetta Proxy"
-    overlay=""
-    to="https://github.com/diem/rosetta-proxy"
-  />
 </CardsWrapper>

developer-docs-site/docs/tools/sdks.mdx

@@ -0,0 +1,26 @@
+---
+title: "SDKs"
+slug: "sdks"
+hidden: false
+---
+
+import CardsWrapper from "@site/src/components/Cards/CardsWrapper";
+
+import SimpleTextCard from "@site/src/components/Cards/SimpleTextCard";
+
+Our official SDKs are collections of development resources like libraries, code samples, and documentation curated to
+help you build your own projects on the Diem platform.
+
+Select a language to access its approved Diem resource package on GitHub:
+
+### Select a language:
+
+<CardsWrapper>
+  <SimpleTextCard
+    icon="img/github.svg"
+    iconDark="img/github-dark.svg"
+    title="Python SDK"
+    overlay=""
+    to="https://github.com/diem/client-sdk-python"
+  />
+</CardsWrapper>

developer-docs-site/docs/transactions/basics-life-of-txn.md

@@ -4,6 +4,8 @@ slug: "basics-life-of-txn"
 hidden: false
 sidebar_position: 1
 ---
+import BlockQuote from "@site/src/components/BlockQuote";
+
 To get a deeper understanding of the lifecycle of a Diem transaction (from an operational perspective), we will follow a transaction on its journey from being submitted to a Diem node to being committed to the Diem Blockchain. We will then “zoom-in” on the logical components of Diem nodes and take a look at its interactions with other components.
 
 #### Assumptions

developer-docs-site/docs/tutorials/tutorial-my-first-transaction.md

@@ -3,6 +3,8 @@ title: "My first transaction"
 slug: "tutorial-my-first-transaction"
 hidden: false
 ---
+import BlockQuote from "@site/src/components/BlockQuote";
+
 This document will guide you through executing your first transaction on the Diem Blockchain's [testnet](/reference/glossary#testnet). Before you proceed, we recommend that you read the following to familiarize yourself with the key concepts:
 
 

developer-docs-site/docs/tutorials/tutorial-run-local-validator-nw.md

@@ -3,6 +3,8 @@ title: "Run a local test validator network"
 slug: "tutorial-run-local-validator-nw"
 hidden: false
 ---
+import BlockQuote from "@site/src/components/BlockQuote";
+
 You can run a local test validator network to test and develop against a Diem Blockchain, including Move changes. This network is not part of the Diem Ecosystem and is only for testing and development purposes.
 
 You can also use the Diem CLI command dev to compile, publish, and execute Move programs on your local test validator network.

developer-docs-site/docusaurus.config.js

@@ -61,15 +61,15 @@ const config = {
             items: [
               {
                 label: 'Reddit',
-                href: 'https://todo.com/this',
+                href: 'https://www.reddit.com/r/aptoslabs/',
               },
               {
                 label: 'Discord',
                 href: 'https://discord.gg/zTDYBEud7U',
               },
               {
                 label: 'Twitter',
-                href: 'https://twitter.com/aptos_labs',
+                href: 'https://twitter.com/aptoslabs',
               },
             ],
           },

developer-docs-site/src/components/BlockQuote/index.js → developer-docs-site/src/components/BlockQuote/index.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import styles from './styles.module.css';
-import classnames from 'classnames';
+import clsx from 'clsx';
+import styles from './index.module.css';
 
 const BlockQuote = ({children, type = "info"}) => (
-  <blockquote className={classnames(styles.blockquote, styles[type])}>
+  <blockquote className={clsx(styles.blockquote, styles[type])}>
     {children}
   </blockquote>
 );
 
 BlockQuote.propTypes = {
   children: PropTypes.oneOfType([PropTypes.array, PropTypes.string]).isRequired,
-  type: PropTypes.oneOf(["info", "warning", "danger"]),
+  type: PropTypes.oneOf(["info", "warning", "danger", "note"]),
 };
 
 export default BlockQuote;

developer-docs-site/src/components/Cards/BaseContainer/index.js → developer-docs-site/src/components/Cards/BaseContainer/index.tsx

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
 
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import Link from '@docusaurus/Link';
-
-import classnames from 'classnames';
+import clsx from 'clsx';
 import styles from './styles.module.css';
 
 const BaseContainer = ({
@@ -18,15 +17,15 @@ const BaseContainer = ({
 
   return (
     <Link
-      className={classnames(styles.root, {
+      className={clsx(styles.root, {
         [styles.disabled]: to === undefined,
         [styles.hasShadow]: hasShadow,
         [styles.hasRoundedCorners]: hasRoundedCorners,
       })}
       to={to}
       target={isInternalUrl(to) ? '_self' : '_blank'}
     >
-      <div className={classnames(styles.children, className)}>{children}</div>
+      <div className={clsx(styles.children, className)}>{children}</div>
       {overlay &&
       <div className={styles.overlay}>
         <p>{overlay}</p>

developer-docs-site/src/components/Cards/BaseContainer/styles.module.css

@@ -1,4 +1,4 @@
-@value small-tablet-breakpoint-query from '~diem-docusaurus-components/src/variables.module.css';
+@value small-tablet-breakpoint-query from '../../variables.module.css';
 
 .root {
   --border-width: 1px;
@@ -16,7 +16,7 @@
 
 .root:hover {
   color: var(--doc-primary);
-  box-shadow: 0px 12px 15px 0px rgba(0,0,0,0.2);
+  box-shadow: 0 12px 15px 0 rgba(0,0,0,0.2);
   text-decoration: none;
 }
 
@@ -31,8 +31,8 @@
 }
 
 .overlay {
+  background-color: var(--ifm-color-primary-inverse);
   align-content: center;
-  background-color: var(--doc-component-background);
   bottom: 0;
   display: flex;
   left: 0;

developer-docs-site/src/components/Cards/CardsWrapper/index.js → developer-docs-site/src/components/Cards/CardsWrapper/index.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types'
 
 import styles from './styles.module.css';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 const CardsWrapper = ({cardsPerRow, children, title, justify = false}) => {
 
-  let classes = classnames(styles.root, styles[`rowOf${cardsPerRow}`], {
+  let classes = clsx(styles.root, styles[`rowOf${cardsPerRow}`], {
     [styles.justify]: justify,
   });
   return (

developer-docs-site/src/components/Cards/CardsWrapper/styles.module.css

@@ -1,7 +1,7 @@
-@value large-tablet-breakpoint-query from '~diem-docusaurus-components/src/variables.module.css';
-@value mobile-breakpoint-max-query from '~diem-docusaurus-components/src/variables.module.css';
-@value medium-tablet-breakpoint-max-query from '~diem-docusaurus-components/src/variables.module.css';
-@value small-tablet-breakpoint-max-query from '~diem-docusaurus-components/src/variables.module.css';
+@value large-tablet-breakpoint-query from '../../variables.module.css';
+@value mobile-breakpoint-max-query from '../../variables.module.css';
+@value medium-tablet-breakpoint-max-query from '../../variables.module.css';
+@value small-tablet-breakpoint-max-query from '../../variables.module.css';
 
 .root {
   --horizontal-spacing: 15px;