Functional components/layout/* with css modules

app/components/layout/BlurableContainer/BlurableContainer.jsx

@@ -0,0 +1,14 @@
+import { classNames } from "pi-ui";
+import { useModalVisible } from "./hooks";
+import styles from "./BlurableContainer.module.css";
+
+const BlurableContainer = ({ className, children }) => {
+  const { modalVisible } = useModalVisible();
+  return (
+    <div className={classNames(className, modalVisible && styles.blur)}>
+      {children}
+    </div>
+  );
+};
+
+export default BlurableContainer;

app/components/layout/BlurableContainer/BlurableContainer.module.css

@@ -0,0 +1,3 @@
+.blur {
+  filter: blur(5px);
+}

app/components/layout/BlurableContainer/hooks.js

@@ -0,0 +1,10 @@
+import { useSelector } from "react-redux";
+import * as sel from "selectors";
+
+export const useModalVisible = () => {
+ const modalVisible = useSelector(sel.modalVisible);
+
+  return {
+    modalVisible
+  };
+};

app/components/layout/BlurableContainer/index.js

@@ -0,0 +1 @@
+export { default } from "./BlurableContainer";

app/components/layout/DescriptionHeader/DescriptionHeader.jsx

@@ -0,0 +1,11 @@
+import { classNames } from "pi-ui";
+import styles from "./DescriptionHeader.module.css";
+
+const DescriptionHeader = ({ description, actionButton, className }) => (
+  <div className={classNames(styles.header, className)}>
+    <div className={styles.actionButton}>{actionButton}</div>
+    {description}
+  </div>
+);
+
+export default DescriptionHeader;

app/components/layout/DescriptionHeader/DescriptionHeader.module.css

@@ -0,0 +1,17 @@
+.header {
+  white-space: pre-wrap;
+  color: var(--header-desc-lighter-color);
+  font-size: 13px;
+  float: left;
+  width: 100%;
+  margin-left: 40px;
+}
+
+.actionButton {
+  position: absolute;
+  right: 80px;
+}
+
+.actionButton > .button {
+  min-width: 76px;
+}

app/components/layout/DescriptionHeader/index.js

@@ -0,0 +1 @@
+export { default } from "./DescriptionHeader";

app/components/layout/StandaloneHeader/StandaloneHeader.jsx

@@ -0,0 +1,21 @@
+import { TitleHeader } from "../TitleHeader";
+import DescriptionHeader from "../DescriptionHeader";
+import styles from "./StandaloneHeader.module.css";
+
+const StandaloneHeader = ({
+  title,
+  description,
+  iconType,
+  actionButton
+}) => (
+  <div className={styles.header}>
+    <TitleHeader
+      title={title}
+      iconType={iconType}
+      optionalButton={actionButton}
+    />
+    <DescriptionHeader description={description} />
+  </div>
+);
+
+export default StandaloneHeader;

app/components/layout/StandaloneHeader/StandaloneHeader.module.css

@@ -0,0 +1,27 @@
+.header {
+  background-color: var(--background-back-color);
+  padding: 43px 60px 0px 63px;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  left: 0px;
+  height: 114px;
+}
+
+@media screen and (max-width: 1179px) {
+  .header {
+    padding-left: 20px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .header {
+    height: initial;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+    padding-bottom: 48px;
+    padding-top: 30px;
+  }
+}

app/components/layout/StandaloneHeader/index.js

@@ -0,0 +1 @@
+export { default } from "./StandaloneHeader";

app/components/layout/StandalonePage/StandalonePage.jsx

@@ -0,0 +1,20 @@
+import StandalonePageBody from "../StandalonePageBody";
+import { classNames } from "pi-ui";
+import styles from "./StandalonePage.module.css";
+
+const StandalonePage = ({ header, children, className }) => {
+  const body = header ? (
+    <StandalonePageBody>{children}</StandalonePageBody>
+  ) : (
+    children
+  );
+
+  return (
+    <div className={classNames(styles.page, className)}>
+      {header}
+      {body}
+    </div>
+  );
+};
+
+export default StandalonePage;

app/components/layout/StandalonePage/StandalonePage.module.css

@@ -0,0 +1,7 @@
+.page {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}

app/components/layout/StandalonePage/index.js

@@ -0,0 +1 @@
+export { default } from "./StandalonePage";

app/components/layout/StandalonePageBody/StandalonePageBody.jsx

@@ -0,0 +1,7 @@
+import styles from "./StandalonePageBody.module.css";
+
+const StandalonePageBody = ({ children }) => (
+  <div className={styles.body}>{children}</div>
+);
+
+export default StandalonePageBody;

app/components/layout/StandalonePageBody/StandalonePageBody.module.css

@@ -0,0 +1,23 @@
+.body {
+  overflow-x: hidden;
+  overflow-y: scroll;
+  position: absolute;
+  right: 0px;
+  top: 157px;
+  bottom: 0px;
+  left: 0px;
+  padding: 38px 60px 30px 63px;
+  background-color: var(--background-container);
+}
+
+@media screen and (max-width: 1179px) {
+  .body {
+    padding-left: 20px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .body {
+    top: 113px;
+  }
+}

app/components/layout/StandalonePageBody/index.js

@@ -0,0 +1 @@
+export { default } from "./StandalonePageBody";