Sticky banner js guides (#5705)

* added banner test * improved sticky banner - bring in front of cards and other banners - modify text * rm background from inline code * applied changes to previous sticky banners * added banner to all guides * changed color * rename guides staking -> nominator * added staking guides main page - added banner * added asset guides main menu page - redirects * broken link
w3f · Mar 21, 2024 · c5fc1b1 · c5fc1b1
1 parent 571d03d
commit c5fc1b1
Show file tree

Hide file tree

Showing 37 changed files with 456 additions and 288 deletions.
diff --git a/docs/learn/archive/learn-controller.md b/docs/learn/archive/learn-controller.md
@@ -7,7 +7,7 @@ keywords: [nominated proof of stake, staking, controller]
 slug: ../learn-controller
 ---
 
-<div className="sticky"> 
+<div className="sticky" style={{ zIndex: 1 }}> 
 <br />
 
 The content on this page is archived. Controller accounts are deprecated. For more information, see

diff --git a/docs/learn/archive/learn-governance.md b/docs/learn/archive/learn-governance.md
@@ -7,7 +7,7 @@ keywords: [governance, referenda, proposal, voting, endorse]
 slug: ../learn-governance
 ---
 
-<div className="sticky"> 
+<div className="sticky" style={{ zIndex: 1 }}> 
 <br />
 
 The content on this page is archived. For up-to-date information about governance, see the

diff --git a/docs/learn/archive/learn-launch.md b/docs/learn/archive/learn-launch.md
@@ -7,7 +7,7 @@ keyword: [launch, phases, polkadot, DOT, claim, token sale, redenomination]
 slug: ../learn-launch
 ---
 
-<div className="sticky"> 
+<div className="sticky" style={{ zIndex: 1 }}> 
 <br />
 
 The content on this page is archived.

diff --git a/docs/learn/archive/learn-redenomination.md b/docs/learn/archive/learn-redenomination.md
@@ -7,7 +7,7 @@ keywords: [DOT, redenomination]
 slug: ../learn-redenomination
 ---
 
-<div className="sticky"> 
+<div className="sticky" style={{ zIndex: 1 }}> 
 <br />
 
 The content on this page is archived.

diff --git a/docs/learn/archive/learn-treasury.md b/docs/learn/archive/learn-treasury.md
@@ -7,7 +7,7 @@ keywords: [treasury, funds, funding, tips, tipping]
 slug: ../learn-treasury
 ---
 
-<div className="sticky"> 
+<div className="sticky" style={{ zIndex: 1 }}> 
 <br />
 
 The content on this page is archived. For up-to-date information about treasury, see the

diff --git a/docs/learn/learn-archive.md b/docs/learn/learn-archive.md
@@ -9,7 +9,7 @@ slug: ../learn-archive
 
 import DocCardList from '@theme/DocCardList';
 
-<div className="sticky"> 
+<div className="sticky" style={{ zIndex: 1 }}> 
 <br />
 
 This section contains archived pages. The content in them no longer applies to Polkadot but can

diff --git a/docs/learn/learn-guides-accounts-multisig.md b/docs/learn/learn-guides-accounts-multisig.md
@@ -9,6 +9,15 @@ slug: ../learn-guides-accounts-multisig
 
 import RPC from "./../../components/RPC-Connection";
 
+<div className="sticky" style={{ zIndex: 1 }}> 
+<br />
+
+[Polkadot-JS](../general/polkadotjs-ui.md) is for developers and power users only. For more
+user-friendly tools see the [wallets](./wallets-index), [apps](./apps-index) and
+[dashboard](./dashboards-index) pages.
+
+</div>
+
 ## Creating a Multisig Account
 
 Check the "How to create a multisig account" section on

diff --git a/docs/learn/learn-guides-accounts-proxy-pure.md b/docs/learn/learn-guides-accounts-proxy-pure.md
@@ -9,6 +9,15 @@ slug: ../learn-guides-accounts-proxy-pure
 
 import RPC from "./../../components/RPC-Connection";
 
+<div className="sticky" style={{ zIndex: 1 }}> 
+<br />
+
+[Polkadot-JS](../general/polkadotjs-ui.md) is for developers and power users only. For more
+user-friendly tools see the [wallets](./wallets-index), [apps](./apps-index) and
+[dashboard](./dashboards-index) pages.
+
+</div>
+
 :::caution The Account Tab in the Polkadot-JS UI cannot handle complex proxy setups
 
 The Accounts Tab in the Polkadot-JS UI cannot handle complex proxy setups (e.g. a proxy -> multisig

diff --git a/docs/learn/learn-guides-accounts-proxy.md b/docs/learn/learn-guides-accounts-proxy.md
@@ -9,6 +9,15 @@ slug: ../learn-guides-accounts-proxy
 
 import RPC from "./../../components/RPC-Connection";
 
+<div className="sticky" style={{ zIndex: 1 }}> 
+<br />
+
+[Polkadot-JS](../general/polkadotjs-ui.md) is for developers and power users only. For more
+user-friendly tools see the [wallets](./wallets-index), [apps](./apps-index) and
+[dashboard](./dashboards-index) pages.
+
+</div>
+
 Proxies allow users to use an account (it can be in cold storage or a hot wallet) less frequently
 but actively participate in the network with the weight of the tokens in that account. Proxies are
 allowed to perform a limited amount of actions related to specific

diff --git a/docs/learn/learn-guides-accounts.md b/docs/learn/learn-guides-accounts.md
@@ -10,6 +10,15 @@ slug: ../learn-guides-accounts
 import RPC from "./../../components/RPC-Connection"; import Tabs from "@theme/Tabs"; import TabItem
 from "@theme/TabItem"; import DocCardList from '@theme/DocCardList';
 
+<div className="sticky" style={{ zIndex: 1 }}> 
+<br />
+
+[Polkadot-JS](../general/polkadotjs-ui.md) is for developers and power users only. For more
+user-friendly tools see the [wallets](./wallets-index), [apps](./apps-index) and
+[dashboard](./dashboards-index) pages.
+
+</div>
+
 <DocCardList />
 
 ## Account Address Format

diff --git a/docs/learn/learn-guides-assets-create.md b/docs/learn/learn-guides-assets-create.md
@@ -1,14 +1,23 @@
 ---
 id: learn-guides-assets-create
 title: Polkadot-JS Guides about Creating Assets
-sidebar_label: Asset Guides
+sidebar_label: Create Asset Guides
 description: Polkadot-JS Guides about Creating Assets.
 keywords: [asset hub, assets, statemine, statemint, polkadot-js]
 slug: ../learn-guides-assets-create
 ---
 
 import RPC from "./../../components/RPC-Connection";
 
+<div className="sticky" style={{ zIndex: 1 }}> 
+<br />
+
+[Polkadot-JS](../general/polkadotjs-ui.md) is for developers and power users only. For more
+user-friendly tools see the [wallets](./wallets-index), [apps](./apps-index) and
+[dashboard](./dashboards-index) pages.
+
+</div>
+
 The Asset Hub is a generic assets system parachain which provides functionality for deploying and
 transferring assets — both Fungible and Non-Fungible Tokens (NFTs). The native token of the Asset
 hub is {{ polkadot: DOT :polkadot }}{{ kusama: KSM :kusama }}. The Existential Deposit (ED),

diff --git a/docs/learn/learn-guides-assets-ledger.md b/docs/learn/learn-guides-assets-ledger.md
@@ -7,6 +7,15 @@ keywords: [asset hub, ledger, assets, statemine, statemint, polkadot-js]
 slug: ../learn-guides-assets-ledger
 ---
 
+<div className="sticky" style={{ zIndex: 1 }}> 
+<br />
+
+[Polkadot-JS](../general/polkadotjs-ui.md) is for developers and power users only. For more
+user-friendly tools see the [wallets](./wallets-index), [apps](./apps-index) and
+[dashboard](./dashboards-index) pages.
+
+</div>
+
 :::info
 
 Because of required WebUSB support, Ledger wallets currently only work on Chromium-based browsers

diff --git a/docs/learn/learn-guides-assets.md b/docs/learn/learn-guides-assets.md
@@ -0,0 +1,21 @@
+---
+id: learn-guides-assets
+title: Polkadot-JS Guides about Asset Hub
+sidebar_label: Asset Hub Guides
+description: Polkadot-JS Guides about Asset Hub.
+keywords: [asset hub, assets, statemine, statemint, polkadot-js]
+slug: ../learn-guides-assets
+---
+
+import DocCardList from '@theme/DocCardList';
+
+<div className="sticky" style={{ zIndex: 1 }}> 
+<br />
+
+[Polkadot-JS](../general/polkadotjs-ui.md) is for developers and power users only. For more
+user-friendly tools see the [wallets](./wallets-index), [apps](./apps-index) and
+[dashboard](./dashboards-index) pages.
+
+</div>
+
+<DocCardList />
diff --git a/docs/learn/learn-guides-bounties.md b/docs/learn/learn-guides-bounties.md
@@ -9,6 +9,15 @@ slug: ../learn-guides-bounties
 
 import RPC from "./../../components/RPC-Connection";
 
+<div className="sticky" style={{ zIndex: 1 }}> 
+<br />
+
+[Polkadot-JS](../general/polkadotjs-ui.md) is for developers and power users only. For more
+user-friendly tools see the [wallets](./wallets-index), [apps](./apps-index) and
+[dashboard](./dashboards-index) pages.
+
+</div>
+
 See [this page](./learn-polkadot-opengov-treasury.md#bounties) to learn about Bounties.
 
 :::info Notify the Polkadot Direction Channel

diff --git a/docs/learn/learn-guides-identity.md b/docs/learn/learn-guides-identity.md
@@ -9,6 +9,15 @@ slug: ../learn-guides-identity
 
 import RPC from "./../../components/RPC-Connection";
 
+<div className="sticky" style={{ zIndex: 1 }}> 
+<br />
+
+[Polkadot-JS](../general/polkadotjs-ui.md) is for developers and power users only. For more
+user-friendly tools see the [wallets](./wallets-index), [apps](./apps-index) and
+[dashboard](./dashboards-index) pages.
+
+</div>
+
 This is an advanced guide that is relevant for entities that would like to become registrars or
 would like to set sub-identities to an existing account with an identity. See
 [this page](./learn-identity.md) to learn about how to set an identity and have it verified.

diff --git a/docs/learn/learn-guides-ledger.md b/docs/learn/learn-guides-ledger.md
@@ -7,6 +7,15 @@ keywords: [ledger, polkadot-js]
 slug: ../learn-guides-ledger
 ---
 
+<div className="sticky" style={{ zIndex: 1 }}> 
+<br />
+
+[Polkadot-JS](../general/polkadotjs-ui.md) is for developers and power users only. For more
+user-friendly tools see the [wallets](./wallets-index), [apps](./apps-index) and
+[dashboard](./dashboards-index) pages.
+
+</div>
+
 ## Loading Your Account
 
 :::info