[redesign][ln] connect page view (#3530)

app/components/buttons/Buttons.module.css

@@ -49,3 +49,11 @@
   background-image: var(--x-grey);
   padding: 0px;
 }
+
+.button {
+  cursor: pointer;
+}
+
+.button:hover {
+  opacity: 0.8;
+}

app/components/buttons/TextToggle/TextToggle.module.css

@@ -3,6 +3,10 @@
   height: 40px;
   float: right;
   text-align: left;
+  font-size: 13px;
+  line-height: 17px;
+  text-decoration: none;
+  text-transform: capitalize;
 }
 .textToggle::after {
   content: "";
@@ -18,16 +22,12 @@
   min-width: 104px;
   float: left;
   border: 1px var(--disabled-background-color) solid;
-  background-color: var(--background-container);
+  background-color: var(--text-toggle-bg);
   box-shadow: none;
-  color: var(--disabled-color);
   padding: 12px 18px;
-  font-size: 13px;
-  line-height: 17px;
-  text-align: center;
-  text-decoration: none;
-  text-transform: capitalize;
+  color: var(--disabled-color);
   cursor: pointer;
+  text-align: center;
 }
 .textToggleButtonActive {
   background-color: var(--background-back-color);

app/components/buttons/TextToggle/Toggle.jsx

@@ -1,11 +1,19 @@
 import styles from "./TextToggle.module.css";
 import { classNames } from "pi-ui";
 
-const Toggle = ({ leftText, rightText, activeButton, onClick }) => (
-  <div className={classNames(styles.textToggle, styles.isRow)}>
+const Toggle = ({
+  leftText,
+  rightText,
+  activeButton,
+  onClick,
+  className,
+  childClassName
+}) => (
+  <div className={classNames(styles.textToggle, styles.isRow, className)}>
     <div
       className={classNames(
         styles.textToggleButtonLeft,
+        childClassName,
         activeButton === "left" && styles.textToggleButtonActive
       )}
       onClick={activeButton == "right" ? () => onClick("left") : null}>
@@ -14,6 +22,7 @@ const Toggle = ({ leftText, rightText, activeButton, onClick }) => (
     <div
       className={classNames(
         styles.textToggleButtonRight,
+        childClassName,
         activeButton === "right" && styles.textToggleButtonActive
       )}
       onClick={activeButton == "left" ? () => onClick("right") : null}>

app/components/buttons/TextToggle/index.js

@@ -1,15 +1,33 @@
 import { useState } from "react";
 import Toggle from "./Toggle";
 
-const TextToggle = ({ activeButton, leftText, rightText, toggleAction }) => {
+const TextToggle = ({
+  activeButton,
+  leftText,
+  rightText,
+  toggleAction,
+  className,
+  childClassName
+}) => {
   const [active, setActive] = useState(activeButton);
 
   const onClick = (active) => {
     setActive(active);
     toggleAction(active);
   };
 
-  return <Toggle {...{ leftText, rightText, activeButton: active, onClick }} />;
+  return (
+    <Toggle
+      {...{
+        leftText,
+        rightText,
+        activeButton: active,
+        onClick,
+        className,
+        childClassName
+      }}
+    />
+  );
 };
 
 export default TextToggle;

app/components/buttons/index.js

@@ -1,4 +1,4 @@
-import { classNames } from "pi-ui";
+import { classNames, Icon } from "pi-ui";
 export { default as EyeFilterMenu } from "./EyeFilterMenu/EyeFilterMenu";
 export { default as EyeFilterMenuWithSlider } from "./EyeFilterMenu/EyeFilterMenuWithSlider/EyeFilterMenuWithSlider";
 export { default as HelpLink } from "./HelpLink/HelpLink";
@@ -90,6 +90,12 @@ const PoliteiaLinkButton = ({ children, onClick }) => (
   <span onClick={onClick}>{children}</span>
 );
 
+const InfoButton = ({ className, onClick }) => (
+  <span onClick={onClick} className={className}>
+    <Icon type="info" width={18} height={18} />
+  </span>
+);
+
 export const HelpLinkInfoModal = mbb(
   null,
   DocumentationInfoModal,
@@ -101,6 +107,11 @@ export const InfoDocModalButton = mbb(
   styles.infoModalButton,
   DocumentationInfoModal
 );
+export const PiUiInfoDocModalButton = mbb(
+  styles.button,
+  DocumentationInfoModal,
+  InfoButton
+);
 export const InfoDocFieldModalButton = mbb(
   styles.infoFieldModalButton,
   DocumentationInfoModal
@@ -112,6 +123,7 @@ export const InvisiblePassphraseModalButton = mbb(
   InvisibleButton
 );
 export const PassphraseModalButton = mbb(null, PassphraseModal, KeyBlueButton);
+export const PiUiPassphraseModalButton = mbb(null, PassphraseModal, PiUiButton);
 export const SetNewPassphraseModalButton = mbb(
   null,
   SetNewPassphraseModal,

app/components/shared/AnimatedContainer.jsx

@@ -0,0 +1,83 @@
+import { createElement as h, useState, useCallback } from "react";
+import { TransitionMotion } from "react-motion";
+import { spring } from "react-motion";
+
+const AnimatedContainer = ({ show, children, childrenClassName }) => {
+  const [childHeight, setChildHeight] = useState(0);
+  const childRef = useCallback(
+    (node) => {
+      if (node !== null && childHeight != node.clientHeight) {
+        setChildHeight(node.clientHeight);
+      }
+    },
+    [childHeight]
+  );
+
+  // "default" style when initializing the component
+  const getDefaultStyles = () => {
+    return [
+      {
+        key: "body",
+        style: {
+          height: 0,
+          opacity: 0
+        }
+      }
+    ];
+  };
+
+  // this returns the chosen style based on the passed props
+  const chosenStyles = () => {
+    if (show) {
+      return [
+        {
+          data: children,
+          key: "body",
+          style: {
+            height: spring(childHeight, {
+              stiffness: 180,
+              damping: 20
+            }),
+            opacity: spring(1)
+          }
+        }
+      ];
+    }
+    // if we do not return the children we return an empty div.
+    return [
+      {
+        data: <div />,
+        key: "body",
+        style: {
+          height: spring(0, { stiffness: 180, damping: 20 }),
+          opacity: spring(0)
+        }
+      }
+    ];
+  };
+
+  const defaultStyles = getDefaultStyles();
+  const choosenStyles = chosenStyles();
+  const tmProps = { defaultStyles, styles: choosenStyles };
+  const childrenMotion = (children) =>
+    h(
+      "div",
+      {},
+      children.map(({ key, style, data }) => {
+        const childProps = { ...{ key }, style };
+        return h(
+          "div",
+          childProps,
+          h(
+            "div",
+            { ref: (el) => el && childRef(el), className: childrenClassName },
+            data
+          )
+        );
+      })
+    );
+
+  return <>{h(TransitionMotion, tmProps, childrenMotion)}</>;
+};
+
+export default AnimatedContainer;

app/components/shared/VericalAccordion/VerticalAccordion.jsx

@@ -1,8 +1,6 @@
-import { createElement as h, useState, useCallback } from "react";
-import { TransitionMotion } from "react-motion";
-import { spring } from "react-motion";
 import { classNames } from "pi-ui";
 import styles from "./VerticalAccordion.module.css";
+import AnimatedContainer from "../AnimatedContainer";
 
 const VerticalAccordion = ({
   show,
@@ -16,81 +14,6 @@ const VerticalAccordion = ({
   activeArrowClassName,
   childrenClassName
 }) => {
-  const [childHeight, setChildHeight] = useState(0);
-  const childRef = useCallback(
-    (node) => {
-      if (node !== null && childHeight != node.clientHeight) {
-        setChildHeight(node.clientHeight);
-      }
-    },
-    [childHeight]
-  );
-
-  // "default" style when initializing the component
-  const getDefaultStyles = () => {
-    return [
-      {
-        key: "body",
-        style: {
-          height: 0,
-          opacity: 0
-        }
-      }
-    ];
-  };
-
-  // this returns the chosen style based on the passed props
-  const chosenStyles = () => {
-    if (show) {
-      return [
-        {
-          data: children,
-          key: "body",
-          style: {
-            height: spring(childHeight, {
-              stiffness: 180,
-              damping: 20
-            }),
-            opacity: spring(1)
-          }
-        }
-      ];
-    }
-    // if we do not return the children we return an empty div.
-    return [
-      {
-        data: <div />,
-        key: "body",
-        style: {
-          height: spring(0, { stiffness: 180, damping: 20 }),
-          opacity: spring(0)
-        }
-      }
-    ];
-  };
-
-  const childrenClassNames = show ? styles.active : "";
-  const defaultStyles = getDefaultStyles();
-  const choosenStyles = chosenStyles();
-  const tmProps = { defaultStyles, styles: choosenStyles };
-  const childrenMotion = (children) =>
-    h(
-      "div",
-      { className: childrenClassNames },
-      children.map(({ key, style, data }) => {
-        const childProps = { ...{ key }, style };
-        return h(
-          "div",
-          childProps,
-          h(
-            "div",
-            { ref: (el) => el && childRef(el), className: childrenClassName },
-            data
-          )
-        );
-      })
-    );
-
   return (
     <div
       className={classNames(
@@ -111,7 +34,7 @@ const VerticalAccordion = ({
           )}
         />
       </div>
-      {h(TransitionMotion, tmProps, childrenMotion)}
+      <AnimatedContainer {...{ children, childrenClassName, show }} />
     </div>
   );
 };

app/components/shared/index.js

@@ -30,3 +30,4 @@ export { default as SendTransaction } from "./SendTransaction/SendTransaction";
 export { default as Collapse } from "./Collapse";
 export { default as TicketAutoBuyerForm } from "./TicketAutoBuyerForm";
 export { default as PurchaseTicketsForm } from "./PurchaseTicketsForm";
+export { default as AnimatedContainer } from "./AnimatedContainer";