[DDW-754] Update Catalyst links (#2721)

* [DDW-754] Use updated react-polymorph

* [DDW-754] Update yarn lock

* [DDW-754] Add VotingFooterLinks component

* [DDW-754] Update theming of voting footer links

* [DDW-754] Translate voting footer links

* [DDW-754] Alphabetize CSS properties

* [DDW-754] Update catalyst links and translations

* [DDW-754] Adjust footer link font size

* [DDW-754] Move margin to button component in voting info

* [DDW-754] Update catalyst footer link divider

* [DDW-754] Update voting registration page to always display catalyst footer links

* [DDW-754] Update return condition for inner content of voting registration page

* [DDW-754] Updated CHANGELOG

* [DDW-754] Add footerl inks to voting story

* [DDW-754] Update delegation center padding if no scroll present

* [DDW-754] Vertically align no wallet component in delegation and voting pages

* [DDW-754] Vertically align no wallet component in delegation and voting pages

* [DDW-754] Adjust stakepool link font-size in popover

* [DDW-754] Update react-polymorph

Author: mchappell

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Features
 
+- Added Catalyst footer links ([PR 2721](https://github.com/input-output-hk/daedalus/pull/2721))
 - Fixed the Delegation popover timeout ([PR 2722](https://github.com/input-output-hk/daedalus/pull/2722))
 - Removed "Alonzo tada" icon and "Alonzo countdown" screen ([PR 2708](https://github.com/input-output-hk/daedalus/pull/2708))
 

package.json

@@ -228,7 +228,7 @@
     "react-intl": "2.7.2",
     "react-lottie": "1.2.3",
     "react-markdown": "4.3.1",
-    "react-polymorph": "1.0.0-next.1",
+    "react-polymorph": "1.0.1",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "react-svg-inline": "2.1.1",

source/renderer/app/components/staking/delegation-center/DelegationCenterNoWallets.scss

@@ -9,7 +9,7 @@
   line-height: 1.38;
   margin: 0 auto;
   max-width: 680px;
-  padding: 0 40px;
+  padding: 0 40px 0 60px;
   text-align: center;
   width: 100%;
 

source/renderer/app/components/staking/widgets/TooltipPool.scss

@@ -14,6 +14,9 @@ $tooltip-width: 280px;
   z-index: 1000;
 
   :global {
+    span.SimpleLink_root {
+      font-size: var(--rp-button-font-size);
+    }
     button.SimpleButton_root {
       background-color: var(
         --theme-staking-stake-pool-tooltip-delegate-button-background-color

source/renderer/app/components/voting/VotingFooterLinks.js

@@ -0,0 +1,77 @@
+// @flow
+import React from 'react';
+import { Link } from 'react-polymorph/lib/components/Link';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape, injectIntl } from 'react-intl';
+
+import styles from './VotingFooterLinks.scss';
+
+type FooterLink = {
+  url: string,
+  label: string,
+};
+
+type Props = {
+  onClickExternalLink: Function,
+  intl: intlShape.isRequired,
+};
+
+const messages = defineMessages({
+  newsletter: {
+    id: 'voting.catalystFooterLinks.newsletter',
+    defaultMessage: 'Newsletter',
+    description: '"Newsletter" link for Project Catalyst footer',
+  },
+  announcements: {
+    id: 'voting.catalystFooterLinks.announcements',
+    defaultMessage: 'Announcements Channel',
+    description: '"Announcements Channel" link for Project Catalyst footer',
+  },
+  community: {
+    id: 'voting.catalystFooterLinks.community',
+    defaultMessage: 'Community Chat',
+    description: '"Community Chat" link for Project Catalyst footer',
+  },
+  projects: {
+    id: 'voting.catalystFooterLinks.projects',
+    defaultMessage: 'Projects',
+    description: '"Projects" link for Project Catalyst footer',
+  },
+});
+
+export const VotingFooterLinks = injectIntl(
+  observer(({ onClickExternalLink, intl }: Props) => {
+    const links: FooterLink[] = [
+      {
+        url: 'https://bit.ly/3dSZJvx',
+        label: intl.formatMessage(messages.newsletter),
+      },
+      {
+        url: 'https://t.me/cardanocatalyst',
+        label: intl.formatMessage(messages.announcements),
+      },
+      {
+        url: 'https://t.me/ProjectCatalystChat',
+        label: intl.formatMessage(messages.community),
+      },
+      {
+        url: 'https://cardano.ideascale.com/',
+        label: intl.formatMessage(messages.projects),
+      },
+    ];
+
+    return (
+      <ul className={styles.component}>
+        {links.map((link) => (
+          <li key={link.url}>
+            <Link
+              className={styles.link}
+              label={link.label}
+              onClick={(event) => onClickExternalLink(link.url, event)}
+            />
+          </li>
+        ))}
+      </ul>
+    );
+  })
+);

source/renderer/app/components/voting/VotingFooterLinks.scss

@@ -0,0 +1,27 @@
+.component {
+  align-items: flex-end;
+  display: flex;
+  font-size: 14px;
+  justify-content: center;
+  padding: 0 0 20px 0;
+
+  li {
+    .link {
+      font-size: 14px;
+      line-height: 1.43;
+      opacity: 0.7;
+    }
+    .link:hover {
+      opacity: 1;
+    }
+  }
+
+  li:not(:first-child)::before {
+    background-color: var(--theme-voting-footer-separator-color);
+    content: '';
+    display: inline-flex;
+    height: 11px;
+    margin: 0 20px;
+    width: 1px;
+  }
+}

source/renderer/app/components/voting/VotingInfo.scss

@@ -1,11 +1,13 @@
 @import './votingConfig';
 
 .component {
+  flex: 1;
   padding: 20px;
   text-align: center;
 
   :global {
     button.SimpleButton_root {
+      margin-top: 30px;
       width: 415px;
     }
   }
@@ -18,7 +20,6 @@
   .bottomContent {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 30px;
 
     .leftContent {
       text-align: left;
@@ -35,7 +36,7 @@
         display: block;
         font-family: var(--font-light);
         line-height: 1.38;
-        margin: 0 20px 20px 0;
+        margin: 0;
 
         b {
           font-family: var(--font-medium);

source/renderer/app/components/voting/VotingNoWallets.scss

@@ -7,7 +7,7 @@
   height: 100%;
   justify-content: center;
   line-height: 1.38;
-  margin: 0 auto;
+  margin: 50px auto -40px auto;
   max-width: 680px;
   padding: 0 40px;
   text-align: center;

source/renderer/app/components/voting/VotingUnavailable.scss

@@ -7,6 +7,7 @@
   flex: 1;
   flex-direction: column;
   justify-content: center;
+  margin-bottom: -40px;
   padding: 20px;
   text-align: center;
 

source/renderer/app/containers/voting/VotingRegistrationPage.js

@@ -14,6 +14,7 @@ import VotingRegistrationDialog from '../../components/voting/voting-registratio
 import { ROUTES } from '../../routes-config';
 import type { InjectedProps } from '../../types/injectedPropsType';
 import VotingRegistrationDialogContainer from './dialogs/VotingRegistrationDialogContainer';
+import { VotingFooterLinks } from '../../components/voting/VotingFooterLinks';
 
 type Props = InjectedProps;
 
@@ -26,61 +27,67 @@ export default class VotingRegistrationPage extends Component<Props> {
     this.props.actions.router.goToRoute.trigger({ route: ROUTES.WALLETS.ADD });
   };
 
-  render() {
-    const { actions, stores } = this.props;
-    const { app, networkStatus, uiDialogs, wallets, voting, profile } = stores;
-    const { openExternalLink } = app;
+  getInnerContent = (isVotingRegistrationDialogOpen: boolean) => {
+    const { app, networkStatus, wallets, voting, profile } = this.props.stores;
     const { isSynced, syncPercentage } = networkStatus;
     const { isRegistrationEnded } = voting;
-    const { currentTimeFormat, currentDateFormat, currentLocale } = profile;
-
-    const isVotingRegistrationDialogOpen = uiDialogs.isOpen(
-      VotingRegistrationDialog
-    );
+    const { openExternalLink } = app;
 
     if (
       !IS_VOTING_REGISTRATION_AVAILABLE ||
       (!isSynced && !isVotingRegistrationDialogOpen)
     ) {
       return (
-        <Layout>
-          <VerticalFlexContainer>
-            <VotingUnavailable
-              syncPercentage={syncPercentage}
-              isVotingRegistrationAvailable={IS_VOTING_REGISTRATION_AVAILABLE}
-              onExternalLinkClick={openExternalLink}
-            />
-          </VerticalFlexContainer>
-        </Layout>
+        <VotingUnavailable
+          syncPercentage={syncPercentage}
+          isVotingRegistrationAvailable={IS_VOTING_REGISTRATION_AVAILABLE}
+          onExternalLinkClick={openExternalLink}
+        />
       );
     }
 
     if (!wallets.allWallets.length) {
       return (
-        <Layout>
-          <VotingNoWallets
-            onGoToCreateWalletClick={this.handleGoToCreateWalletClick}
-            minVotingFunds={VOTING_REGISTRATION_MIN_WALLET_FUNDS}
-          />
-        </Layout>
+        <VotingNoWallets
+          onGoToCreateWalletClick={this.handleGoToCreateWalletClick}
+          minVotingFunds={VOTING_REGISTRATION_MIN_WALLET_FUNDS}
+        />
       );
     }
 
+    const { currentTimeFormat, currentDateFormat, currentLocale } = profile;
+    return (
+      <VotingInfo
+        currentLocale={currentLocale}
+        currentDateFormat={currentDateFormat}
+        currentTimeFormat={currentTimeFormat}
+        isRegistrationEnded={isRegistrationEnded}
+        onRegisterToVoteClick={() =>
+          this.props.actions.dialogs.open.trigger({
+            dialog: VotingRegistrationDialog,
+          })
+        }
+        onExternalLinkClick={openExternalLink}
+      />
+    );
+  };
+
+  render() {
+    const { stores } = this.props;
+    const { app, uiDialogs } = stores;
+    const { openExternalLink } = app;
+
+    const isVotingRegistrationDialogOpen = uiDialogs.isOpen(
+      VotingRegistrationDialog
+    );
+
+    const innerContent = this.getInnerContent(isVotingRegistrationDialogOpen);
+
     return (
       <Layout>
         <VerticalFlexContainer>
-          <VotingInfo
-            currentLocale={currentLocale}
-            currentDateFormat={currentDateFormat}
-            currentTimeFormat={currentTimeFormat}
-            isRegistrationEnded={isRegistrationEnded}
-            onRegisterToVoteClick={() =>
-              actions.dialogs.open.trigger({
-                dialog: VotingRegistrationDialog,
-              })
-            }
-            onExternalLinkClick={openExternalLink}
-          />
+          {innerContent}
+          <VotingFooterLinks onClickExternalLink={openExternalLink} />
         </VerticalFlexContainer>
 
         {isVotingRegistrationDialogOpen && (