[redesign] Governance views (#3467)

decred · Jun 4, 2021 · f42cbb6 · f42cbb6
1 parent 2812241
commit f42cbb6
Show file tree

Hide file tree

Showing 75 changed files with 2,108 additions and 1,280 deletions.
diff --git a/app/actions/ClientActions.js b/app/actions/ClientActions.js
@@ -655,6 +655,7 @@ export const setVoteChoicesAttempt = (agendaId, choiceId, passphrase) => (
       for (let i = 0; i < stakePools.length; i++) {
         dispatch(getVoteChoicesAttempt(stakePools[i]));
       }
+      dispatch(getVoteChoicesAttempt());
     })
     .catch((error) => dispatch({ error, type: SETVOTECHOICES_FAILED }));
 };

diff --git a/app/actions/GovernanceActions.js b/app/actions/GovernanceActions.js
@@ -616,9 +616,11 @@ export const getProposalDetails = (token) => async (dispatch, getState) => {
   }
 };
 
-export const viewProposalDetails = (token) => (dispatch) => {
+export const viewProposalDetails = (token) => (dispatch) =>
   dispatch(pushHistory(`/proposal/details/${token}`));
-};
+
+export const viewAgendaDetails = (name) => (dispatch) =>
+  dispatch(pushHistory(`/agenda/details/${name}`));
 
 export const UPDATEVOTECHOICE_ATTEMPT = "UPDATEVOTECHOICE_ATTEMPT";
 export const UPDATEVOTECHOICE_SUCCESS = "UPDATEVOTECHOICE_SUCCESS";

diff --git a/app/components/buttons/EyeFilterMenu/EyeFilterMenu.jsx b/app/components/buttons/EyeFilterMenu/EyeFilterMenu.jsx
@@ -63,6 +63,7 @@ const EyeFilterMenu = ({
       ref={wrapperRef}>
       <div className={styles.menuButton}>
         <InvisibleButton
+          ariaLabel="EyeFilterMenu"
           className={classNames(styles.buttonIcon, styles[type])}
           onClick={toggleMenuOpen}
         />

diff --git a/app/components/layout/StandalonePageBody/StandalonePageBody.module.css b/app/components/layout/StandalonePageBody/StandalonePageBody.module.css
@@ -8,5 +8,6 @@
 @media screen and (max-width: 1179px) {
   .body {
     padding-left: 20px;
+    padding-right: 20px;
   }
 }
diff --git a/app/components/layout/TabbedPage/TabbedPage.jsx b/app/components/layout/TabbedPage/TabbedPage.jsx
@@ -69,7 +69,8 @@ const TabbedPage = ({
   tabsClassName,
   tabContentClassName,
   onChange,
-  caret
+  caret,
+  activeCaretClassName
 }) => {
   const location = useSelector(sel.location);
   const uiAnimations = useSelector(sel.uiAnimations);
@@ -133,6 +134,7 @@ const TabbedPage = ({
           tabs={tabHeaders}
           tabsClassName={tabsClassName}
           caret={caret}
+          activeCaretClassName={activeCaretClassName}
         />
       </div>
 

diff --git a/app/components/shared/PoliteiaLink.jsx b/app/components/shared/PoliteiaLink.jsx
@@ -7,14 +7,17 @@ const PoliteiaLink = ({
   path,
   className,
   isTestnet,
-  CustomComponent
+  CustomComponent,
+  hrefProp
 }) => {
   const href = useMemo(
     () =>
-      `https://${isTestnet ? "test-proposals" : "proposals"}.decred.org${
-        path || ""
-      }`,
-    [isTestnet, path]
+      hrefProp
+        ? hrefProp
+        : `https://${isTestnet ? "test-proposals" : "proposals"}.decred.org${
+            path || ""
+          }`,
+    [isTestnet, path, hrefProp]
   );
   const onClickHandler = useCallback(() => wallet.openExternalURL(href), [
     href

diff --git a/app/components/shared/RoutedTabsHeader/RoutedTabsHeader.jsx b/app/components/shared/RoutedTabsHeader/RoutedTabsHeader.jsx
@@ -13,7 +13,12 @@ export const RoutedTab = (path, link, className, activeClassName) => ({
   activeClassName
 });
 
-const RoutedTabsHeader = ({ tabs, tabsClassName, caret }) => {
+const RoutedTabsHeader = ({
+  tabs,
+  tabsClassName,
+  caret,
+  activeCaretClassName
+}) => {
   const { uiAnimations, caretLeft, caretWidth, nodes } = useRoutedTabsHeader();
 
   const getAnimatedCaret = useCallback(() => {
@@ -26,12 +31,15 @@ const RoutedTabsHeader = ({ tabs, tabsClassName, caret }) => {
       <Motion style={caretStyle}>
         {(style) => (
           <div className={styles.tabCaret}>
-            <div className={styles.active} style={style} />
+            <div
+              className={classNames(styles.active, activeCaretClassName)}
+              style={style}
+            />
           </div>
         )}
       </Motion>
     );
-  }, [caretLeft, caretWidth]);
+  }, [caretLeft, caretWidth, activeCaretClassName]);
 
   const getStaticCaret = useCallback(() => {
     const style = {

diff --git a/app/components/shared/RoutedTabsHeader/RoutedTabsHeader.module.css b/app/components/shared/RoutedTabsHeader/RoutedTabsHeader.module.css
@@ -12,7 +12,7 @@
 }
 
 .tab a {
-  margin: 0 5px 0 5px;
+  margin: 0;
   color: var(--grey-7);
   text-decoration: none;
   font-size: 16px;
@@ -30,13 +30,13 @@
 .tabCaret {
   position: absolute;
   bottom: 0;
-  height: 5px;
+  height: 4px;
 }
 
 .tabCaret .active {
   background-color: var(--accent-color);
   position: absolute;
-  height: 5px;
+  height: 4px;
 }
 
 @media screen and (max-width: 768px) {

diff --git a/app/components/views/AgendaDetailsPage/AgendaDetails.jsx b/app/components/views/AgendaDetailsPage/AgendaDetails.jsx
@@ -0,0 +1,48 @@
+import { classNames } from "pi-ui";
+import styles from "./AgendaDetails.module.css";
+import { FormattedMessage as T } from "react-intl";
+import { useAgendaDetails } from "./hooks";
+import { VoteSection, AgendaCard } from "./helpers";
+
+const AgendaDetails = () => {
+  const {
+    agenda,
+    selectedChoice,
+    newSelectedChoice,
+    setNewSelectedChoice,
+    choices,
+    isLoading,
+    goBackHistory,
+    updatePreferences
+  } = useAgendaDetails();
+  return (
+    <div>
+      <div className={classNames(styles.cardWrapper)}>
+        <div
+          className={classNames(styles.backButton, "flex-centralize")}
+          onClick={goBackHistory}>
+          <div className={styles.backArrow}></div>
+        </div>
+        <AgendaCard {...{ agenda, selectedChoice }} />
+      </div>
+      <VoteSection
+        {...{
+          choices,
+          selected: newSelectedChoice,
+          setSelected: setNewSelectedChoice,
+          finished: agenda.finished,
+          isLoading,
+          updatePreferences
+        }}
+      />
+      <div className={styles.detailsText}>
+        <T
+          id="agenda.overviewDescription"
+          m="Once the majority of the PoW miners have upgraded (95% of the 1000 most recent blocks are at the latest version) and the majority of the PoS miners have upgraded (75% of the votes in a 2016 block interval), the voting process begins."
+        />
+      </div>
+    </div>
+  );
+};
+
+export default AgendaDetails;
diff --git a/app/components/views/AgendaDetailsPage/AgendaDetails.module.css b/app/components/views/AgendaDetailsPage/AgendaDetails.module.css
@@ -0,0 +1,74 @@
+.cardWrapper {
+  display: flex;
+}
+
+.backButton {
+  width: 40px;
+  background-color: var(--governance-nav-button-bg);
+  cursor: pointer;
+}
+
+.backButton:hover {
+  background-color: var(--grey-5);
+}
+
+.backArrow {
+  height: 10px;
+  width: 10px;
+  background-image: var(--menu-arrow-up);
+  background-position: 50% 5px;
+  background-repeat: no-repeat;
+  transform: rotate(-90deg);
+}
+
+.backButton:hover .backArrow {
+  background-image: var(--arrow-left-white);
+  transform: rotate(0);
+  background-position: 50% 0;
+}
+.column {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.detailsText {
+  font-family: var(--font-family-regular-semi-bold);
+  padding: 30px 40px;
+  background-color: var(--background-back-color);
+  margin: 5px 0 20px 0;
+  border-top: 1px solid var(--tabbed-page-header-bg);
+  width: 764px;
+  font-size: 16px;
+}
+
+.piButtonWrapper {
+  display: flex;
+  justify-content: flex-end;
+  width: 740px;
+}
+
+.loadingPage {
+  width: 100%;
+  text-align: center;
+}
+
+.piButton {
+  border: 0 !important;
+  text-decoration: none !important;
+  color: var(--color-white) !important;
+  font-weight: var(--font-weight-semi-bold) !important;
+}
+
+@media screen and (max-width: 1179px) {
+  .detailsText {
+    width: 674px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .detailsText {
+    padding-left: 20px;
+    width: 355px;
+  }
+}
diff --git a/app/components/views/AgendaDetailsPage/AgendaDetailsPage.jsx b/app/components/views/AgendaDetailsPage/AgendaDetailsPage.jsx
@@ -0,0 +1,13 @@
+import AgendaDetails from "./AgendaDetails";
+import { Header } from "./helpers";
+import { StandalonePage } from "layout";
+
+const AgendaDetailsPage = () => {
+  return (
+    <StandalonePage header={<Header />}>
+      <AgendaDetails />
+    </StandalonePage>
+  );
+};
+
+export default AgendaDetailsPage;
diff --git a/app/components/views/AgendaDetailsPage/helpers/AgendaCard/AgendaCard.jsx b/app/components/views/AgendaDetailsPage/helpers/AgendaCard/AgendaCard.jsx
@@ -0,0 +1,72 @@
+import styles from "./AgendaCard.module.css";
+import { classNames, Tooltip, StatusTag } from "pi-ui";
+import { FormattedMessage as T } from "react-intl";
+
+const AgendaCard = ({ agenda, selectedChoice, className }) => {
+  const inProgress = !agenda.finished;
+
+  return (
+    <div className={classNames(styles.overview, className)}>
+      <div className={styles.row}>
+        <div className="flex-column">
+          <div className={styles.titleText}>{agenda.name}</div>
+          <div className={styles.agendaId}>
+            <T
+              id="agenda.overview.idLabel"
+              m="Agenda ID: {name}"
+              values={{
+                name: <strong>{agenda.name}</strong>
+              }}
+            />
+          </div>
+          <div className={styles.description}>{`${agenda.description} `}</div>
+        </div>
+        <div className={classNames("flex-column", "align-end")}>
+          {!inProgress ? (
+            <Tooltip
+              contentClassName={styles.tooltipContent}
+              content={
+                <T
+                  id="agenda.card.finishedTooltip"
+                  m="This agenda has finished voting and {passed}."
+                  values={{ passed: agenda.passed ? "PASSED" : "NOT PASSED" }}
+                />
+              }>
+              <StatusTag
+                className={styles.statusTag}
+                type="greenCheck"
+                text="Finished"
+              />
+            </Tooltip>
+          ) : (
+            <Tooltip
+              contentClassName={styles.tooltipContent}
+              content={
+                <T
+                  id="agenda.card.inProgressTooltip"
+                  m="Voting is still in progress."
+                />
+              }>
+              <StatusTag
+                className={styles.statusTag}
+                type="bluePending"
+                text="In Progress"
+              />
+            </Tooltip>
+          )}
+          <div className={styles.preference}>
+            <T
+              id="agenda.card.preference"
+              m="Preference: {selectedChoice}"
+              values={{
+                selectedChoice: <span>{selectedChoice}</span>
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AgendaCard;