Finalize reverting

polkadot-ui · Feb 26, 2024 · 01edb7e · 01edb7e
1 parent d931f89
commit 01edb7e
Show file tree

Hide file tree

Showing 20 changed files with 61 additions and 26 deletions.
diff --git a/src/Header.tsx b/src/Header.tsx
@@ -3,29 +3,60 @@
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import IconSVG from "./svg/polkadot_pink.svg?react";
+import { useGlitch } from "react-powerglitch";
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
+import { useTheme } from "./contexts/Theme";
 
 export const Header = () => {
+  const { mode, toggleMode } = useTheme();
+
+  const glitch = useGlitch({
+    timing: {
+      duration: 5000,
+    },
+    glitchTimeSpan: {
+      start: 0.5,
+      end: 0.65,
+    },
+    shake: {
+      velocity: 2,
+      amplitudeX: 0.2,
+      amplitudeY: 0.2,
+    },
+  });
+
   return (
     <div className="app-header">
       <section>
-        <div className="icon">
+        <div className="icon" ref={glitch.ref}>
           <IconSVG />
         </div>
         <div className="title">
-          <h3>Polkadot UI Docs</h3>
+          <h3>Polkadot Cloud Docs</h3>
         </div>
       </section>
       <section>
+        <button
+          className={`link${mode === "light" ? " selected" : ``}`}
+          onClick={() => toggleMode("light")}
+        >
+          Light
+        </button>
+        <button
+          className={`link${mode === "dark" ? " selected" : ``}`}
+          onClick={() => toggleMode("dark")}
+        >
+          Dark
+        </button>
         <a
           href="https://github.com/polkadot-ui/library"
           target="_blank"
           rel="noreferrer"
         >
           <FontAwesomeIcon
             icon={faGithub}
-            transform="grow-12"
-            style={{ marginLeft: "0.25rem" }}
+            transform="grow-14"
+            style={{ marginLeft: "0.75rem" }}
           />
         </a>
       </section>

diff --git a/src/Theme.tsx b/src/Theme.tsx
@@ -2,17 +2,19 @@
 // SPDX-License-Identifier: MIT
 
 import { Router } from "./Router";
+import { useTheme } from "./contexts/Theme";
 
 // App-wide theme classes are inserted here.
 //
 // App-specific theming is added to `ThemeProvider`.
 // `@polkadot-ui/react` themes are added to `Entry`.
 export const Theme = () => {
+  const { mode } = useTheme();
   // NOTE: theme not currently in use. Defaulting to light mode.
   // const { mode } = useTheme();
 
   return (
-    <div className={`main theme-ui ui-theme-${"light"}`}>
+    <div className={`main theme-ui ui-theme-${mode}`}>
       <Router />
     </div>
   );

diff --git a/src/config/routes.tsx b/src/config/routes.tsx
@@ -72,7 +72,7 @@ const recipesRoutes = [
     path: "account-card",
     name: "Account card",
     element: <AccountCard />,
-  }
+  },
 ];
 
 // utils

diff --git a/src/docs/Components/Buttons/ButtonHelp.tsx b/src/docs/Components/Buttons/ButtonHelp.tsx
@@ -1,7 +1,7 @@
 /* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
 SPDX-License-Identifier: MIT */
 
-import { Button } from "@polkadot-ui/react"
+import { Button } from "@polkadot-ui/react";
 import { SimpleEditor } from "../../lib/SimpleEditor";
 import { Demo } from "../../lib/Demo";
 

diff --git a/src/docs/Components/Buttons/ButtonMono.tsx b/src/docs/Components/Buttons/ButtonMono.tsx
@@ -2,7 +2,7 @@
 SPDX-License-Identifier: MIT */
 
 import { faUser } from "@fortawesome/free-solid-svg-icons";
-import { Button } from "@polkadot-ui/react"
+import { Button } from "@polkadot-ui/react";
 import { SimpleEditor } from "../../lib/SimpleEditor";
 import { Demo } from "../../lib/Demo";
 

diff --git a/src/docs/Components/Buttons/ButtonMonoInvert.tsx b/src/docs/Components/Buttons/ButtonMonoInvert.tsx
@@ -2,7 +2,7 @@
 SPDX-License-Identifier: MIT */
 
 import { faUser } from "@fortawesome/free-solid-svg-icons";
-import { Button } from "@polkadot-ui/react"
+import { Button } from "@polkadot-ui/react";
 import { SimpleEditor } from "../../lib/SimpleEditor";
 import { Demo } from "../../lib/Demo";
 

diff --git a/src/docs/Components/Buttons/ButtonPrimary.tsx b/src/docs/Components/Buttons/ButtonPrimary.tsx
@@ -2,7 +2,7 @@
 SPDX-License-Identifier: MIT */
 
 import { faUser } from "@fortawesome/free-solid-svg-icons";
-import { Button } from "@polkadot-ui/react"
+import { Button } from "@polkadot-ui/react";
 import { SimpleEditor } from "../../lib/SimpleEditor";
 import { Demo } from "../../lib/Demo";
 

diff --git a/src/docs/Components/Buttons/ButtonPrimaryInvert.tsx b/src/docs/Components/Buttons/ButtonPrimaryInvert.tsx
@@ -1,7 +1,7 @@
 /* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
 SPDX-License-Identifier: MIT */
 
-import { Button } from "@polkadot-ui/react"
+import { Button } from "@polkadot-ui/react";
 import { SimpleEditor } from "../../lib/SimpleEditor";
 import { faUser } from "@fortawesome/free-solid-svg-icons";
 import { Demo } from "../../lib/Demo";

diff --git a/src/docs/Components/Buttons/ButtonSecondary.tsx b/src/docs/Components/Buttons/ButtonSecondary.tsx
@@ -2,7 +2,7 @@
 SPDX-License-Identifier: MIT */
 
 import { faUser } from "@fortawesome/free-solid-svg-icons";
-import { Button } from "@polkadot-ui/react"
+import { Button } from "@polkadot-ui/react";
 import { SimpleEditor } from "../../lib/SimpleEditor";
 import { Demo } from "../../lib/Demo";
 

diff --git a/src/docs/Components/Buttons/ButtonSubmit.tsx b/src/docs/Components/Buttons/ButtonSubmit.tsx
@@ -1,7 +1,7 @@
 /* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
 SPDX-License-Identifier: MIT */
 
-import { Button } from "@polkadot-ui/react"
+import { Button } from "@polkadot-ui/react";
 import { SimpleEditor } from "../../lib/SimpleEditor";
 import { faArrowAltCircleUp } from "@fortawesome/free-solid-svg-icons";
 import { Demo } from "../../lib/Demo";

diff --git a/src/docs/Components/Buttons/ButtonSubmitInvert.tsx b/src/docs/Components/Buttons/ButtonSubmitInvert.tsx
@@ -1,7 +1,7 @@
 /* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
 SPDX-License-Identifier: MIT */
 
-import { Button } from "@polkadot-ui/react"
+import { Button } from "@polkadot-ui/react";
 import { SimpleEditor } from "../../lib/SimpleEditor";
 import { faUser } from "@fortawesome/free-solid-svg-icons";
 import { Demo } from "../../lib/Demo";

diff --git a/src/docs/Components/Buttons/ButtonTab.tsx b/src/docs/Components/Buttons/ButtonTab.tsx
@@ -1,7 +1,7 @@
 /* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
 SPDX-License-Identifier: MIT */
 
-import { Button } from "@polkadot-ui/react"
+import { Button } from "@polkadot-ui/react";
 import { SimpleEditor } from "../../lib/SimpleEditor";
 import { Demo } from "../../lib/Demo";
 

diff --git a/src/docs/Components/Buttons/ButtonTertiary.tsx b/src/docs/Components/Buttons/ButtonTertiary.tsx
@@ -2,7 +2,7 @@
 SPDX-License-Identifier: MIT */
 
 import { faUser } from "@fortawesome/free-solid-svg-icons";
-import { Button } from "@polkadot-ui/react"
+import { Button } from "@polkadot-ui/react";
 import { SimpleEditor } from "../../lib/SimpleEditor";
 import { Demo } from "../../lib/Demo";
 

diff --git a/src/docs/Components/Buttons/ButtonText.tsx b/src/docs/Components/Buttons/ButtonText.tsx
@@ -1,7 +1,7 @@
 /* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
 SPDX-License-Identifier: MIT */
 
-import { Button } from "@polkadot-ui/react"
+import { Button } from "@polkadot-ui/react";
 import { SimpleEditor } from "../../lib/SimpleEditor";
 import { faUser } from "@fortawesome/free-solid-svg-icons";
 import { Demo } from "../../lib/Demo";

diff --git a/src/docs/Components/Overlay/main.tsx b/src/docs/Components/Overlay/main.tsx
@@ -141,6 +141,9 @@ export const Doc = ({ folder, npm }: DocProps) => {
         <li>
           <code>--background-modal</code>: Modal card background.
         </li>
+        <li>
+          <code>--transition-duration</code>: Duration of modal transitions.
+        </li>
         <li>
           <code>--accent-color-primary</code>: Default text color of modal links
           and butons.

diff --git a/src/docs/Experimental/AccountCard/AccountCardPageAdvancedExtraComponent.tsx b/src/docs/Experimental/AccountCard/AccountCardPageAdvancedExtraComponent.tsx
@@ -7,7 +7,7 @@ import {
   IconProps,
 } from "@polkadot-ui/react/complex/AccountCard";
 
-import { Button } from "@polkadot-ui/react"
+import { Button } from "@polkadot-ui/react";
 import { SimpleEditor } from "../../lib/SimpleEditor";
 import { Demo } from "../../lib/Demo";
 

diff --git a/src/docs/Experimental/AccountCard/AccountCardPageAdvancedExtraComponentDiff.tsx b/src/docs/Experimental/AccountCard/AccountCardPageAdvancedExtraComponentDiff.tsx
@@ -6,7 +6,7 @@ import {
   ExtraComponentProps,
   IconProps,
 } from "@polkadot-ui/react/complex/AccountCard";
-import { Button } from "@polkadot-ui/react"
+import { Button } from "@polkadot-ui/react";
 import { SimpleEditor } from "../../lib/SimpleEditor";
 import { Demo } from "../../lib/Demo";
 

diff --git a/src/docs/Experimental/Modal/ActionItemWithToggle.tsx b/src/docs/Experimental/Modal/ActionItemWithToggle.tsx
@@ -4,7 +4,7 @@ SPDX-License-Identifier: MIT */
 import { ActionItem } from "@polkadot-ui/react/base/modal/ActionItem";
 import { SimpleEditor } from "../../lib/SimpleEditor";
 import { useState } from "react";
-import { Button } from "@polkadot-ui/react"
+import { Button } from "@polkadot-ui/react";
 import { Demo } from "../../lib/Demo";
 
 export const ActionItemWithToggle = () => {

diff --git a/src/styles/app.scss b/src/styles/app.scss
@@ -58,7 +58,7 @@ SPDX-License-Identifier: MIT */
   display: flex;
   align-items: center;
   width: 100%;
-  height: 4rem;
+  height: 5.5rem;
   position: fixed;
   z-index: 10;
 
@@ -74,7 +74,7 @@ SPDX-License-Identifier: MIT */
 
     > button {
       margin-right: 1.5rem;
-      font-size: 1.1rem;
+      font-size: 1.25rem;
 
       &.selected {
         color: var(--accent-color-primary);
@@ -84,9 +84,8 @@ SPDX-License-Identifier: MIT */
     .icon {
       padding-left: 1.5rem;
       color: var(--accent-color-primary);
-      width: 4.75rem;
-      max-height: 3rem;
-      margin-right: 0.75rem;
+      width: 6.5rem;
+      max-height: 4.25rem;
 
       > svg {
         max-width: 90%;

diff --git a/src/styles/docs.scss b/src/styles/docs.scss
@@ -329,7 +329,7 @@ SPDX-License-Identifier: MIT */
     justify-content: flex-end;
     width: 100%;
     opacity: 0.75;
-    transition: opacity 0.15s;
+    transition: opacity var(--transition-duration);
 
     &:hover {
       opacity: 1;