TabbedPage.module.css GovernancePage.module.css StandalonePage.module…

….css

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/TabbedPage/TabbedPage.jsx

@@ -12,12 +12,13 @@ import { usePrevious } from "hooks";
 import { RoutedTabsHeader, RoutedTab } from "shared";
 import { getStyles, getMatchedTab, willEnter, willLeave } from "./helpers";
 import TabbedPageTab from "./TabbedPageTab";
+import styles from "./TabbedPage.module.css";
 
 // returns the state.styles in a static container, without animations.
-const staticStyles = (styles) => (
+const staticStyles = (stylesObj) => (
   <>
-    {styles.map(({ key, data: { element } }) => (
-      <div className="tab-content visible" key={key}>
+    {stylesObj.map(({ key, data: { element } }) => (
+      <div className={classNames(styles.tabContent, styles.visible)} key={key}>
         {element}
       </div>
     ))}
@@ -26,9 +27,9 @@ const staticStyles = (styles) => (
 
 // returns the state.styles wrapped in a TransitionMotion, to show the
 // animations.
-const animatedStyles = (styles, dir) => (
+const animatedStyles = (stylesObj, dir) => (
   <TransitionMotion
-    styles={styles}
+    styles={stylesObj}
     willLeave={() => willLeave(dir)}
     willEnter={() => willEnter(dir)}>
     {(interpolatedStyles) => (
@@ -37,8 +38,8 @@ const animatedStyles = (styles, dir) => (
           ({ key, data: { element }, style: { left, opacity } }) => (
             <div
               className={classNames(
-                "tab-content",
-                Math.abs(left) < 0.1 && "visible"
+                styles.tabContent,
+                Math.abs(left) < 0.1 && styles.visible
               )}
               style={{
                 left,
@@ -103,21 +104,21 @@ function TabbedPage({ children, header, className, onChange, caret }) {
     <Route key={path} path={path} component={header} />
   ));
 
-  const styles = getStyles(matchedTab);
+  const tabStyles = getStyles(matchedTab);
 
   const tabContents = uiAnimations
-    ? animatedStyles(styles, dir)
-    : staticStyles(styles);
+    ? animatedStyles(tabStyles, dir)
+    : staticStyles(tabStyles);
 
   return (
-    <div className="tabbed-page">
-      <div className="tabbed-page-header">
+    <div>
+      <div className={styles.tabbedPageHeader}>
         {header}
         <Switch>{headers}</Switch>
         <RoutedTabsHeader tabs={tabHeaders} caret={caret} />
       </div>
 
-      <div className={classNames("tabbed-page-body", className)}>
+      <div className={classNames(styles.tabbedPageBody, className)}>
         {tabContents}
         {nonTabs}
       </div>

app/components/layout/TabbedPage/TabbedPage.module.css

@@ -0,0 +1,104 @@
+.tabbedPageBody {
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 163px;
+  bottom: 0;
+  left: 0;
+  background-color: var(--background-container);
+}
+
+.tabbedPageHeader {
+  background-color: var(--background-back-color);
+  padding: 43px 60px 0px 63px;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  left: 0px;
+  height: 114px;
+}
+
+.tabbedPageHeader > .tabs {
+  position: absolute;
+  bottom: 0px;
+  left: 100px;
+  white-space: nowrap;
+}
+
+.tabbedPageHeader > .tabs > .tab {
+  line-height: 35px;
+  margin-right: 55px;
+}
+
+.tabbedPageHeader > .tabs > .tab:last-of-type {
+  margin-right: 0;
+}
+
+.tabbedPageHeader > .tabs > .tabs-caret > {
+  position: absolute;
+  bottom: 0;
+  height: 5px;
+}
+
+.tabbedPageHeader > .tabs > .tabs-caret > .active {
+  background-color: var(--accent-color);
+  position: absolute;
+  height: 5px;
+}
+
+.tabContent {
+  position: absolute;
+  overflow-x: hidden;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  padding: 38px 80px 30px 63px;
+  background-color: var(--background-container);
+}
+
+.tabContent:not(.visible)::-webkit-scrollbar {
+  width: 5px;
+  background-color: transparent;
+}
+
+.tabContent:not(.visible)::-webkit-scrollbar-thumb {
+  background-color: transparent;
+}
+
+
+@media screen and (max-width: 1179px) {
+  .tabbedPageHeader {
+    padding-left: 20px;
+  }
+  .tabbedPageHeader > .tabs {
+    left: 55px;
+  }
+  .tabContent {
+    padding: 38px 20px 30px 20px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .tabbedPageBody {
+    top: 133px;
+  }
+
+  .tabbedPageHeader {
+    height: 82px;
+    padding-top: 30px;
+  }
+
+  .tabbedPageHeader > .tabs {
+    font-size: 13px;
+    left: 25px;
+    right: 20px;
+    .tab {
+      margin-right: 45px;
+    }
+  }
+
+  .tabContent {
+    padding: 0 10px 80px 10px;
+  }
+}

app/components/views/GovernancePage/GovernancePage.jsx

@@ -5,6 +5,7 @@ import ProposalsTab from "./Proposals/ProposalsTab";
 import VotingPrefsTab from "./Blockchain/Blockchain";
 import TabHeader from "./TabHeader/TabHeader";
 import { GOVERNANCE_ICON } from "constants";
+import styles from "./GovernancePage.module.css";
 
 const PageHeader = () => (
   <TitleHeader
@@ -14,7 +15,7 @@ const PageHeader = () => (
 );
 
 export default () => (
-  <TabbedPage className="governance" header={<PageHeader />}>
+  <TabbedPage className={styles.governance} header={<PageHeader />}>
     <Switch>
       <Redirect from="/governance" exact to="/governance/proposals" />
       <Redirect

app/components/views/GovernancePage/GovernancePage.module.css

@@ -0,0 +1,67 @@
+/*
+tabbed-page-body.governance {
+  //top: 157px;
+
+  .tab-content {
+    padding: 0;
+  }
+
+  .tabbed-page-body {
+    top: 174px;
+
+    .tab-content {
+      padding: 0;
+    }
+  }
+
+  .tabbed-page-header {
+    padding: 0;
+    height: 133px;
+    .tabs {
+      position: relative;
+      left: 0;
+      width: 100%;
+      height: 40px;
+      padding-left: 103px;
+      margin-bottom: 9px;
+      background-color: var(--tabbed-page-header-bg);
+
+      .tab {
+        margin-right: 20px;
+        a {
+          margin: 0;
+          border-radius: 5px;
+          span
+          {
+            color:var(--tabbed-page-header-text);
+          }
+          &.active {
+            background-color: var(--tabbed-page-header-active-bg);
+            padding: 3px 10px 3px 10px;
+          }
+        }
+      }
+    }
+  }
+}*/
+
+@media screen and (max-width: 768px) {
+  /*.tabbed-page-body.governance {
+    top: 112px;
+    .tabbed-page-body {
+      top: 250px;
+    }
+  }*/
+}
+
+@media screen and (max-width: 1179px) {
+  /*
+  .tabbed-page-body.governance .tabbed-page-header > .tabs {
+    padding-left: 35px;
+  }
+  */
+}
+
+.governance {
+  top: 157px;
+}