chore: bumps and fixes

package.json

@@ -33,10 +33,9 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@ledgerhq/hw-transport-webhid": "^6.28.3",
     "@polkadot-cloud/assets": "^0.1.35",
-    "@polkadot-cloud/core": "^1.2.4",
-    "@polkadot-cloud/react": "^0.1.147",
-    "@polkadot-cloud/recipes": "^0.0.10",
-    "@polkadot-cloud/utils": "^0.0.25",
+    "@polkadot-cloud/core": "^1.3.2",
+    "@polkadot-cloud/react": "^0.5.2",
+    "@polkadot-cloud/utils": "^0.3.0",
     "@polkadot/keyring": "^12.6.2",
     "@polkadot/util": "^12.6.2",
     "@types/react": "^18.2.56",

src/Providers.tsx

@@ -1,11 +1,11 @@
 /* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors
 SPDX-License-Identifier: GPL-3.0-only */
 
-import { AnyJson, AnyObject } from "@polkadot-cloud/utils/types";
 import { ReactNode } from "react";
 import { ThemesProvider } from "./contexts/Theme";
 import { UIProvider } from "./contexts/UI";
 import { Theme } from "./Theme";
+import { AnyJson, AnyObject } from "@polkadot-cloud/react/types";
 
 /*
  * A hook that wraps multiple context providers to a component and makes each parent context accessible.

src/Router.tsx

@@ -2,9 +2,6 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { Route, Routes, useLocation } from "react-router-dom";
-import { Side } from "@polkadot-cloud/react/base/structure/Side";
-import { Body } from "@polkadot-cloud/react/base/structure/Body";
-import { Main } from "@polkadot-cloud/react/base/structure/Main";
 import { routes } from "./config/routes";
 import { Error } from "./Error";
 import { Menu } from "./Menu";
@@ -14,6 +11,9 @@ import { useEffect } from "react";
 import { useUi } from "./contexts/UI";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars } from "@fortawesome/free-solid-svg-icons";
+import { Body } from "./docs/lib/Structure/Body";
+import { Side } from "./docs/lib/Structure/Side";
+import { Main } from "./docs/lib/Structure/Main";
 
 export const Router = () => {
   const { sideMenuOpen } = useUi();

src/docs/lib/Demo/index.tsx

@@ -2,8 +2,6 @@
 SPDX-License-Identifier: GPL-3.0-only */
 
 import { useTheme } from "../../../contexts/Theme";
-// Import the base cloud-core styles to ensure the theme styles are applied instead of doc styles.
-import "@polkadot-cloud/core/css/styles/index.css";
 import { valEmpty } from "@polkadot-cloud/react/utils";
 // Import each supported theme here.
 import "@polkadot-cloud/core/accent/polkadot-relay.css";

src/docs/lib/Structure/Body/index.tsx

@@ -0,0 +1,14 @@
+// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { ComponentBase } from "@polkadot-cloud/react/types";
+
+/**
+ * @name Body
+ * @summary An element that houses Side and Main.
+ */
+export const Body = ({ children, style }: ComponentBase) => (
+  <div className="core-body" style={style}>
+    {children}
+  </div>
+);

src/docs/lib/Structure/Main/index.tsx

@@ -0,0 +1,19 @@
+// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { ComponentBase } from "@polkadot-cloud/react/types";
+import type { ForwardedRef } from "react";
+import { forwardRef } from "react";
+
+/**
+ * @name Main
+ * @summary A column flex wrapper that hosts the main page content.
+ */
+export const Main = forwardRef(
+  ({ children, style }: ComponentBase, ref?: ForwardedRef<HTMLDivElement>) => (
+    <div className="core-main" ref={ref} style={style}>
+      {children}
+    </div>
+  )
+);
+Main.displayName = "Main";

src/docs/lib/Structure/Side/index.tsx

@@ -0,0 +1,43 @@
+// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { appendOrEmpty } from "@polkadot-cloud/utils";
+import type { CSSProperties } from "react";
+import { ComponentBase } from "@polkadot-cloud/react/types";
+
+export type SideProps = ComponentBase & {
+  // whether the side menu should be open on smaller screens.
+  open: boolean;
+  // whether side menu is in minimised state.
+  minimised: boolean;
+  // optional width property to be applied to maximised side.
+  width?: string | number;
+};
+
+/**
+ * @name Side
+ * @summary An element that houses the side menu and transitions to a toggle-able fixed overlay
+ * on smaller screens.
+ * @summary Handles maximised and minimised transitions.
+ */
+export const Side = ({
+  children,
+  style,
+  open,
+  minimised,
+  width = "20rem",
+}: SideProps) => {
+  const vars = { "--core-side-width": width } as CSSProperties;
+
+  return (
+    <div
+      style={{ ...vars, ...style }}
+      className={`core-side${appendOrEmpty(!open, "hidden")}${appendOrEmpty(
+        minimised,
+        "minimised"
+      )}`}
+    >
+      {children}
+    </div>
+  );
+};

src/docs/lib/Structure/index.scss

@@ -0,0 +1,63 @@
+// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.page-padding {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+
+  /* NOTE: same as `PageWidthSmallThreshold` + 1 constant in `src/consts.ts`. */
+  @media (min-width: 826px) {
+    padding-left: 3.5rem;
+    padding-right: 3.5rem;
+  }
+
+  /* NOTE: same as `PageWidthSmallThreshold` + 1 constant in `src/consts.ts`. */
+  @media (min-width: 826px) {
+    padding: 0 5rem 0 2.5rem;
+  }
+}
+
+.core-body {
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+}
+
+.core-main {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  flex: 1;  
+}
+
+.core-side {
+  z-index: 7;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  flex: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: all 0.5s cubic-bezier(0.1, 1, 0.2, 1);
+
+  /* maximised by default, or minimised otherwise. */
+  min-width: var(--core-side-width);
+  max-width: var(--core-side-width);
+
+  &.minimised {
+    min-width: 75px;
+    max-width: 75px;
+  }
+
+  @media (max-width: 1150px) {
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    &.hidden {
+      left: calc(var(--core-side-width) * -1);
+    }
+  }
+}

src/hooks/useOutsideAlerter.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { AnyFunction } from "@polkadot-cloud/react/utils/types";
-import { AnyObject } from "@polkadot-cloud/utils/types";
+import { AnyObject } from "@polkadot-cloud/react/types";
 import { useEffect } from "react";
 
 /*

src/main.tsx

@@ -5,6 +5,8 @@ import "./theme/fonts.css";
 import "./theme/theme.css";
 import "./styles/index.scss";
 
+import "./docs/lib/Structure/index.scss";
+
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <App />
 );

src/styles/index.scss

@@ -3,48 +3,154 @@ SPDX-License-Identifier: GPL-3.0-only */
 
 @import "./app";
 
-html {
-  font-size: 10px;
+:root {
+  /* Button variables. */
+  --button-border-radius-small: 0.75rem;
+  --button-border-radius-large: 1.5rem;
+  --button-padding-small: 0.41rem 1rem;
+  --button-padding-large: 0.53rem 1rem;
+  --button-spacing-small: 0.125rem;
+  --button-spacing-large: 0.625rem;
+  --button-font-size-small: 1rem;
+  --button-font-size-large: 1.15rem;  
+
+  /* Transition variables. */
+  --transition-duration: 0.15s;
+
+  /* Miscellaneous variables. */
+  --opacity-disabled: 0.3;
+}
+
+/* Define global font sizes. */
 
-  @media (width >= 600px) {
-    font-size: 11.2px;
+html {
+  font-size: 10.5px;
+  @media (min-width: 600px) {
+    font-size: 11px;
   }
 }
 
+/* Every element conforms to border-box by default. */
+
+* {
+  box-sizing: border-box;
+}
+
+/* Body style. */
+
+body {
+  font-family: Inter, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
+  font-weight: normal;
+  margin: 0;
+}
+
+/* Header styling. */
+
 h1 {
   color: var(--text-color-primary);
-  margin: 0 0 0.4rem;
+  font-family: InterSemiBold, sans-serif;
+  font-size: 1.6rem;
+  line-height: 1.6rem;
+  font-weight: 600;
+  margin: 0;
 }
 
 h2 {
   color: var(--text-color-primary);
-  margin: 1rem 0;
+  font-family: InterSemiBold, sans-serif;
+  font-size: 1.4rem;
+  line-height: 1.6rem;
+  font-weight: 600;
+  margin: 0;
 }
 
 h3 {
   color: var(--text-color-primary);
-  margin: 1rem 0;
+  font-family: InterSemiBold, sans-serif;
+  font-size: 1.25rem;
+  line-height: 1.55rem;
+  font-weight: 500;
+  margin: 0;
 }
 
 h4 {
-  color: var(--text-color-primary);
-  margin: 1.25rem 0;
+  color: var(--text-color-secondary);
+  font-family: InterSemiBold, sans-serif;
+  font-size: 1.08rem;
+  line-height: 1.65rem;
+  font-weight: 500;
+  margin: 0;
 }
 
 h5 {
-  color: var(--text-color-primary);
-  margin: 1.25rem 0;
+  color: var(--text-color-secondary);
+  font-size: 0.92rem;
+  line-height: 1.02rem;
+  font-weight: 500;
+  margin: 0;
 }
 
+/* Pragraph style. */
+
 p {
   color: var(--text-color-secondary);
+  font-size: 1.04rem;
+  line-height: 1.5rem;
   margin: 0.75rem 0;
 }
 
+/* Anchor style. */
+
 a {
   color: var(--text-color-secondary);
+  text-decoration: none;
+  cursor: pointer;
 }
 
+/* Base button style. */
+
 button {
-  color: var(--text-color-secondary);
+  -webkit-tap-highlight-color: transparent;
+  font-family: Inter, sans-serif;
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+}
+
+/* Base input style. */
+
+input {
+  color: var(--text-color-primary);
+  font-family: Inter, sans-serif;
+  font-size: 1.1rem;
+  padding: 0.7rem 0;
+  background: none;
+  border: none;
+
+  &::placeholder {
+    color: #aaa;
+  }
+
+  &.underline {
+    border-bottom: 1px solid #ddd;
+  }
+}
+
+button:focus,
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+}
+
+/* Base SVG style. */
+
+path.primary,
+ellipse.primary {
+  fill: var(--text-color-primary);
 }