merge more recent master changes

src/apps/cms/config.json

@@ -1,7 +1,7 @@
 {
   "title": "Contractor Management",
   "logoLight": "cms-logo-light.svg",
-  "logoDark": "cms-logo-dark.svg",
+  "logoDark": "cms-logo-light.svg",
   "recordType": "invoice",
   "aboutContent": "about-politeia",
   "enableAdminInvite": true,

src/componentsv2/FormWrapper/FormWrapper.module.css

@@ -30,7 +30,7 @@
   width: 100%;
   display: flex;
   padding: 4rem 0;
-  border-top: 1px solid var(--color-gray-lighter);
+  border-top: 1px solid var(--separator-color);
   justify-content: space-between;
   flex-wrap: wrap;
 }

src/componentsv2/HeaderNav/HeaderNav.jsx

@@ -1,7 +1,8 @@
-import { Text, Dropdown, DropdownItem } from "pi-ui";
+import { Text, Dropdown, DropdownItem, Toggle, useTheme } from "pi-ui";
+import React, { useEffect, useMemo } from "react";
 import Link from "src/componentsv2/Link";
-import React, { useMemo } from "react";
 import { NavLink, withRouter } from "react-router-dom";
+import useLocalStorage from "src/hooks/utils/useLocalStorage";
 import ProposalCreditsIndicator from "../ProposalCreditsIndicator";
 import useNavigation from "src/hooks/api/useNavigation";
 import { useConfig } from "src/containers/Config";
@@ -12,6 +13,7 @@ const HeaderNav = ({ history }) => {
   const { user, username, onLogout } = useNavigation();
   const { navMenuPaths } = useConfig();
   const userIsAdmin = user && user.isadmin;
+  const { themeName, setThemeName } = useTheme();
 
   const menuItems = useMemo(
     () =>
@@ -33,18 +35,52 @@ const HeaderNav = ({ history }) => {
     history.push(`/user/${user.userid}`);
   }
 
+  const [darkThemeOnLocalStorage, setDarkThemeOnLocalStorage] = useLocalStorage(
+    "darkTheme",
+    false
+  );
+
+  useEffect(() => {
+    if (darkThemeOnLocalStorage && themeName === "light") {
+      setThemeName("dark");
+    }
+  }, [darkThemeOnLocalStorage, setThemeName, themeName]);
+
+  const onThemeToggleHandler = () => {
+    if (themeName === "light") {
+      setDarkThemeOnLocalStorage(true);
+      setThemeName("dark");
+    } else {
+      setThemeName("light");
+      setDarkThemeOnLocalStorage(false);
+    }
+  };
+
   return user && username ? (
     <div className={styles.loggedInContainer}>
-      <ConfigFilter showIf={config => config.enableCredits}>
+      <ConfigFilter showIf={(config) => config.enableCredits}>
         <ProposalCreditsIndicator user={user} />
       </ConfigFilter>
       <Dropdown
         className={styles.dropdown}
         itemsListClassName={styles.dropdownList}
-        title={username}
-      >
+        closeOnItemClick={false}
+        title={username}>
         {menuItems}
         <DropdownItem onClick={goToUserAccount}>Account</DropdownItem>
+        <DropdownItem>
+          <div className={styles.themeToggleWrapper}>
+            <Toggle
+              onToggle={onThemeToggleHandler}
+              toggled={themeName === "dark"}
+            />
+            <div
+              onClick={onThemeToggleHandler}
+              className={styles.themeToggleLabel}>
+              Dark Mode
+            </div>
+          </div>
+        </DropdownItem>
         <DropdownItem onClick={onLogout}>Logout</DropdownItem>
       </Dropdown>
     </div>
@@ -53,17 +89,15 @@ const HeaderNav = ({ history }) => {
       <NavLink
         className={styles.navLink}
         activeClassName={styles.activeNavLink}
-        to="/user/login"
-      >
+        to="/user/login">
         <Text className={`${styles.navLinkText} ${styles.rightGreyBorder}`}>
           Log in
         </Text>
       </NavLink>
       <NavLink
         className={styles.navLink}
         activeClassName={styles.activeNavLink}
-        to="/user/signup"
-      >
+        to="/user/signup">
         <Text className={styles.navLinkText}>Sign up</Text>
       </NavLink>
     </nav>

src/componentsv2/HeaderNav/HeaderNav.module.css

@@ -13,31 +13,43 @@
 .navLink {
   composes: navContainer;
   text-decoration: none !important;
-  color: var(--color-gray-dark) !important;
+  color: var(--tab-text-color) !important;
   border-bottom: 2px solid transparent;
 }
 
 .navLink:hover {
-  color: var(--color-primary-dark) !important;
+  color: var(--tab-hover-color) !important;
 }
 
 .navLinkText {
   padding: 0 2rem;
 }
 
 .rightGreyBorder {
-  border-right: 1px solid var(--color-gray-lighter);
+  border-right: 1px solid var(--separator-color);
 }
 
 .activeNavLink {
   color: var(--color-primary-dark);
-  border-bottom: 2px solid var(--color-yellow);
+  border-bottom: 4px solid var(--active-nav-border-color);
 }
 
 ul.dropdownList {
   width: unset;
 }
 
+.themeToggleWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 14rem;
+}
+
+.themeToggleLabel {
+  margin-left: 1rem;
+  margin-top: 0.3rem;
+}
+
 @media screen and (max-width: 1000px) {
   .loggedInContainer {
     width: 100%;

src/componentsv2/Join/Join.jsx

@@ -4,7 +4,8 @@ import { classNames } from "pi-ui";
 import styles from "./Join.module.css";
 
 const DefaultSeparator = () => (
-  <span className="margin-left-s margin-right-s color-gray">•</span>
+  <span className="text-secondary-color margin-left-s margin-right-s">
+      •</span>
 );
 
 export const Join = ({ children, SeparatorComponent, className }) => {

src/componentsv2/Logo/Logo.jsx

@@ -1,15 +1,18 @@
 import React from "react";
+import { useTheme } from "pi-ui";
 import PropTypes from "prop-types";
 import { useConfig } from "src/containers/Config";
 
 const Logo = ({ style }) => {
-  const { logoLight } = useConfig();
+  const { themeName } = useTheme();
+  const { logoLight, logoDark } = useConfig();
+  const logoSrc = themeName === "dark" ? logoDark : logoLight;
   return (
     <img
       role="presentation"
       alt="logo"
       style={style}
-      src={require(`src/assets/images/${logoLight}`)}
+      src={require(`src/assets/images/${logoSrc}`)}
     />
   );
 };

src/componentsv2/Markdown/styles.css

@@ -1,7 +1,7 @@
 .markdown-body {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
-  color: #24292e;
+  color: var(--text-color);
   font-family: "Source Sans Prop", sans-serif;
   font-size: var(--font-size-regular);
   line-height: 1.5;

src/componentsv2/Markdown/test/Markdown.test.js

@@ -1,5 +1,6 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
+import { defaultLightTheme, ThemeProvider, defaultDarkTheme } from "pi-ui";
 import { mount } from "enzyme";
 import { customRenderers } from "../helpers";
 
@@ -8,10 +9,14 @@ const maliciousBodyText =
 
 it("filter potencial 'XSS' attackers", () => {
   const wrapper = mount(
-    <ReactMarkdown
-      source={maliciousBodyText}
-      renderers={customRenderers(true)}
-    />
+    <ThemeProvider
+      themes={{ light: defaultLightTheme, dark: defaultDarkTheme }}
+      defaultThemeName="light">
+      <ReactMarkdown
+        source={maliciousBodyText}
+        renderers={customRenderers(true)}
+      />
+    </ThemeProvider>
   );
   wrapper.find("LinkRenderer").forEach((el) => {
     expect(["x-javascript:alert('XSS')", "javascript:void(0)"]).toContain(

src/componentsv2/MarkdownEditor/MarkdownEditor.jsx

@@ -19,7 +19,7 @@ const MarkdownEditor = React.memo(function MarkdownEditor({
 
   useEffect(() => {
     const textarea = document.getElementsByClassName("mde-text")[0];
-    if (!!textarea) {
+    if (textarea) {
       textarea.placeholder = placeholder;
     }
   }, [tab, placeholder]);

src/componentsv2/MarkdownEditor/styles.css

@@ -40,6 +40,10 @@
   margin-right: 0;
 }
 
+li.mde-header-item > button {
+  background: none;
+}
+
 .react-mde .grip {
   display: none;
 }
@@ -59,7 +63,9 @@
   border: 1px solid var(--color-gray-lighter);
   line-height: 1.5;
   font-size: var(--font-size-regular);
+  background: var(--card-background);
   -webkit-appearance: none;
+  color: var(--color-text);
 }
 
 .mde-text::placeholder {

src/componentsv2/ModalDiff/ModalDiff.jsx

@@ -55,7 +55,6 @@ const ModalDiff = ({
             {proposalDetails.version && (
               <Text
                 id={`proposal-${proposalDetails.proposalToken}-version`}
-                color="gray"
                 className={styles.version}
               >{`version ${proposalDetails.version}`}</Text>
             )}

src/componentsv2/ModalDiff/ModalDiff.module.css

@@ -7,3 +7,7 @@
   flex: 50%;
   justify-content: center;
 }
+
+.version {
+  color: var(--text-secondary-color);
+}

src/componentsv2/NavigationDrawer/NavigationDrawer.module.css

@@ -8,7 +8,7 @@
   opacity: 0.5;
   width: 400px;
   transform: translateX(410px);
-  background-color: var(--color-gray-lightest2);
+  background-color: var(--container-color);
   transition: all 0.2s;
   box-shadow: 0.5rem 2rem 2rem 0px var(--color-shadow-light);
 }
@@ -31,5 +31,6 @@
   justify-content: space-between;
   align-items: center;
   padding: 0 var(--container-padding-right) 0 var(--container-padding-left);
-  background-color: var(--color-white);
+  background-color: var(--card-background);
+  transition: background-color 0.5s ease;
 }

src/componentsv2/Proposal/Proposal.jsx

@@ -88,7 +88,7 @@ const Proposal = React.memo(function Proposal({
   };
   return (
     <>
-      <RecordWrapper>
+      <RecordWrapper className={ classNames(isAbandoned && styles.abandonedProposal)}>
         {({
           Author,
           Event,
@@ -137,7 +137,6 @@ const Proposal = React.memo(function Proposal({
                     <Text
                       id={`proposal-${proposalToken}-version`}
                       className={classNames(styles.version)}
-                      color="gray"
                       truncate
                     >{`version ${version}`}</Text>
                   )}
@@ -161,17 +160,17 @@ const Proposal = React.memo(function Proposal({
                       <Text
                         className={styles.timeLeft}
                         size="small"
-                        color="gray"
                       >
                         {`vote end${isVoteActive ? "s" : "ed"} ${voteTime}`}
                       </Text>
                     )}
                     {isVoteActive && (
                       <>
                         <Text
-                          className="hide-on-mobile"
+                          className={classNames(
+                            "hide-on-mobile",
+                            styles.blocksLeft)}
                           size="small"
-                          color="gray"
                         >
                           {`${voteBlocksLeft} blocks left`}
                         </Text>