View on GitHub
File Changes
m
+2/-1
    "react/prefer-stateless-function": 0,
    "react/prop-types": "warn",
    "react/require-default-props": 0,
-
    "react/sort-comp": 0
+
    "react/sort-comp": 0,
+
    "jsx-a11y/anchor-is-valid": 0
  },
  "plugins": [
    "flowtype",
m
+4/-0

                      
### Features

                      
+
- Implemented React-Polymorph "Link" component ([PR 1799](https://github.com/input-output-hk/daedalus/pull/1799))
- Implemented Hardware wallets restoration ([PR 1801](https://github.com/input-output-hk/daedalus/pull/1801))
- Added Yoroi wallets restoration to the "Restore Wallet" dialog ([PR 1740](https://github.com/input-output-hk/daedalus/pull/1740))
- Implemented new menu shortcuts ([PR 1780](https://github.com/input-output-hk/daedalus/pull/1780))
- Implemented all notifications to be on the top of the app and in front of any other element ([PR 1748](https://github.com/input-output-hk/daedalus/pull/1748))
- Improved network screen with responsive main copy box ([PR 1797](https://github.com/input-output-hk/daedalus/pull/1797))

                      
### Fixes
+
- Fixed a typo in the Staking Pools section ([PR 1785](https://github.com/input-output-hk/daedalus/pull/1785))
- Fixed Daedalus ITN Terms of Service typo ([PR 1809](https://github.com/input-output-hk/daedalus/pull/1809))
- Fixed handling of duplicated wallet IDs when restoring both legacy and new wallets from the same wallet recovery phrase ([PR 1805](https://github.com/input-output-hk/daedalus/pull/1805))

                      
### Chores
+
- Updated checkboxes, radio buttons and switchers sizes and borders ([PR 1793](https://github.com/input-output-hk/daedalus/pull/1793))
- Updated `cardano-wallet` to revision `132a5faf8c076eb8e873857a15e80db56be7e6ca` ([PR 1740](https://github.com/input-output-hk/daedalus/pull/1740))

                      
## 2.0.0-ITN1

                      
### Chores

                      
+
- Updated newsfeed ([PR 1786](https://github.com/input-output-hk/daedalus/pull/1786))
- Changed Incentivized TestNet "Having trouble syncing" URL to point to one specific to TestNet ([PR 1795](https://github.com/input-output-hk/daedalus/pull/1795))
- Updated `cardano-wallet` to revision `d3d93ba3` ([PR 1784](https://github.com/input-output-hk/daedalus/pull/1784))
- Updated `cardano-wallet` to revision `e341d288` ([PR 1779](https://github.com/input-output-hk/daedalus/pull/1779))
m
+1/-1
    "react-intl": "2.7.2",
    "react-lottie": "1.2.3",
    "react-markdown": "3.1.0",
-
    "react-polymorph": "0.9.0-rc.26",
+
    "react-polymorph": "0.9.1",
    "react-router": "3.2.1",
    "react-svg-inline": "2.1.0",
    "react-virtualized": "9.21.0",
  type?: string = ''
): Promise<LegacyAdaWallet> => {
  const queryParams = {};
-

                      
  return request(
    {
      method: 'POST',
// @flow
import React, { Component } from 'react';
-
import SVGInline from 'react-svg-inline';
import { observer } from 'mobx-react';
import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
import ReactModal from 'react-modal';
-
import { Button } from 'react-polymorph/lib/components/Button';
import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
-
import linkNewWindow from '../../../assets/images/link-ic.inline.svg';
import styles from './ManualUpdate.scss';
+
import ButtonLink from '../../widgets/ButtonLink';

                      
const messages = defineMessages({
  title: {
            </p>
          </div>

                      
-
          <div>
-
            <Button
-
              className={styles.actionButton}
-
              label={
-
                <p>
-
                  <SVGInline
-
                    svg={linkNewWindow}
-
                    className={styles.linkNewWindow}
-
                  />
-
                  <span className={styles.btnLabel}>
-
                    {formatMessage(messages.actionButtonLabel)}
-
                  </span>
-
                </p>
-
              }
-
              onClick={() =>
-
                onExternalLinkClick(
-
                  formatMessage(messages.manualUpdateButtonUrl)
-
                )
-
              }
-
              skin={ButtonSkin}
-
            />
-
          </div>
+
          <ButtonLink
+
            className={styles.actionButton}
+
            onClick={() =>
+
              onExternalLinkClick(formatMessage(messages.manualUpdateButtonUrl))
+
            }
+
            skin={ButtonSkin}
+
            label={formatMessage(messages.actionButtonLabel)}
+
            linkProps={{
+
              className: styles.btnLabel,
+
            }}
+
          />
        </div>
      </ReactModal>
    );
        font-weight: 500;
        line-height: 1.36;
        margin: 0 auto;
-

                      
-
        .linkNewWindow {
-
          @include link(--theme-manual-update-overlay-button-icon-color);
-
          border-bottom: none;
-
          margin-right: 12px;
-
          svg {
-
            margin-left: 0;
-
            vertical-align: sub;
-
            width: 15px;
-
          }
-
        }
-

                      
        .btnLabel {
          color: var(--theme-manual-update-overlay-button-label-color);
+
          &:before {
+
            background-color: var(
+
              --theme-manual-update-overlay-button-label-color
+
            );
+
          }
        }

                      
        &:not(.disabled):hover {
          background-color: var(
            --theme-manual-update-overlay-button-background-color-hover
          );
-
          border: none;
          color: var(--theme-manual-update-overlay-button-text-color-hover);

                      
-
          .linkNewWindow {
-
            svg {
-
              g {
-
                stroke: var(
-
                  --theme-manual-update-overlay-button-icon-color-hover
-
                );
-
              }
-
            }
-
          }
-

                      
          .btnLabel {
            color: var(--theme-manual-update-overlay-button-label-color-hover);
+
            &:before {
+
              background-color: var(
+
                --theme-manual-update-overlay-button-label-color-hover
+
              );
+
            }
          }
        }
      }
import classNames from 'classnames';
import { Button } from 'react-polymorph/lib/components/Button';
import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
-

                      
+
import { Link } from 'react-polymorph/lib/components/Link';
+
import { LinkSkin } from 'react-polymorph/lib/skins/simple/LinkSkin';
import styles from './ReportIssue.scss';
import externalLinkIcon from '../../../assets/images/link-ic.inline.svg';

                      
    const downloadLogsButtonClasses = classNames([
      styles.downloadLogsButton,
      !isConnected ? styles.downloadLogsButtonConnecting : null,
+
      disableDownloadLogs ? styles.disabled : null,
    ]);

                      
    const syncIssueArticleUrl = isIncentivizedTestnet
          skin={ButtonSkin}
        />
        <br />
-
        <button
+

                      
+
        <Link
          className={downloadLogsButtonClasses}
-
          onClick={onDownloadLogs}
-
          disabled={disableDownloadLogs}
-
        >
-
          {intl.formatMessage(messages.reportIssueDownloadLogsLinkLabel)}
-
        </button>
+
          onClick={!disableDownloadLogs ? onDownloadLogs : null}
+
          hasIconAfter={false}
+
          label={intl.formatMessage(messages.reportIssueDownloadLogsLinkLabel)}
+
          skin={LinkSkin}
+
        />
      </div>
    );
  }
      color: var(--theme-report-issue-syncing-text-color);
    }
  }
+

                      
+
  .downloadLogsButton {
+
    border-color: var(--theme-report-issue-syncing-download-logs-text-color);
+
    color: var(--theme-report-issue-syncing-download-logs-text-color);
+
    display: inline-block;
+
    font-family: var(--font-regular);
+
    margin-bottom: 20px;
+
    opacity: 0.8;
+
    &.downloadLogsButtonConnecting {
+
      border-color: var(
+
        --theme-report-issue-syncing-download-logs-text-color-connecting
+
      );
+
      color: var(
+
        --theme-report-issue-syncing-download-logs-text-color-connecting
+
      );
+
    }
+
    &.disabled {
+
      border-color: transparent;
+
      cursor: default;
+
      text-decoration: none;
+
    }
+
  }
}

                      
.reportIssueText {
    }
  }
}
-

                      
-
.downloadLogsButton {
-
  border-bottom: 1px solid
-
    var(--theme-report-issue-syncing-download-logs-text-color);
-
  color: var(--theme-report-issue-syncing-download-logs-text-color);
-
  cursor: pointer;
-
  font-family: var(--font-regular);
-
  font-size: 14px;
-
  line-height: 1.36;
-
  margin-bottom: 20px;
-
  opacity: 0.8;
-
  &:disabled {
-
    border-bottom-color: transparent;
-
    cursor: default;
-
    text-decoration: none;
-
  }
-
}
-

                      
-
.downloadLogsButtonConnecting {
-
  border-bottom: 1px solid
-
    var(--theme-report-issue-syncing-download-logs-text-color-connecting);
-
  color: var(--theme-report-issue-syncing-download-logs-text-color-connecting);
-
}
import SVGInline from 'react-svg-inline';
import { observer } from 'mobx-react';
import { defineMessages, intlShape, FormattedMessage } from 'react-intl';
+
import classNames from 'classnames';
+
import { Link } from 'react-polymorph/lib/components/Link';
+
import { LinkSkin } from 'react-polymorph/lib/skins/simple/LinkSkin';
import attentionIcon from '../../../assets/images/attention-big-light.inline.svg';
-
import externalLinkIcon from '../../../assets/images/link-ic.inline.svg';
import { ALLOWED_TIME_DIFFERENCE } from '../../../config/timingConfig';
import humanizeDurationByLocale from '../../../utils/humanizeDurationByLocale';
import styles from './SystemTimeError.scss';
    const supportPortalLinkUrl = intl.formatMessage(
      messages.supportPortalLinkUrl
    );
+

                      
    const supportPortalLink = (
-
      <a
-
        className={styles.supportPortalLinkUrl}
-
        href={supportPortalLinkUrl}
+
      <Link
+
        className={styles.supportPortalLink}
        onClick={event => onExternalLinkClick(supportPortalLinkUrl, event)}
-
      >
-
        {intl.formatMessage(messages.supportPortalLink)}
-
        <SVGInline svg={externalLinkIcon} />
-
      </a>
+
        label={intl.formatMessage(messages.supportPortalLink)}
+
        skin={LinkSkin}
+
      />
    );

                      
    const isNTPServiceReachable = !!localTimeDifference;
              />
            </p>

                      
-
            <button
-
              className={styles.checkLink}
+
            <Link
+
              className={classNames([
+
                styles.checkLink,
+
                isCheckingSystemTime ? styles.disabled : null,
+
              ])}
              onClick={() => onCheckTheTimeAgain()}
-
              disabled={isCheckingSystemTime}
-
            >
-
              {intl.formatMessage(messages.onCheckTheTimeAgainLink)}
-
            </button>
+
              label={intl.formatMessage(messages.onCheckTheTimeAgainLink)}
+
              hasIconAfter={false}
+
              skin={LinkSkin}
+
            />
          </div>
        ) : (
          <div>
              />
            </p>

                      
-
            <button
+
            <Link
              className={styles.checkLink}
              onClick={() => onContinueWithoutClockSyncCheck()}
-
            >
-
              {intl.formatMessage(messages.onContinueWithoutClockSyncCheckLink)}
-
            </button>
+
              label={intl.formatMessage(
+
                messages.onContinueWithoutClockSyncCheckLink
+
              )}
+
              hasIconAfter={false}
+
              skin={LinkSkin}
+
            />
          </div>
        )}
      </div>
    opacity: 0.8;
  }

                      
-
  a {
-
    @include link(--theme-system-error-overlay-support-link-icon-color);
+
  .supportPortalLink {
    border-bottom: 1px solid var(--theme-system-error-overlay-text-color);
    color: var(--theme-system-error-overlay-text-color);
+
    font-size: 16px;
+
    line-height: 1.38;
+

                      
+
    &:after {
+
      background-color: var(
+
        --theme-system-error-overlay-support-link-icon-color
+
      );
+
    }
  }

                      
  .checkLink {
    border-bottom: 1px solid var(--theme-system-error-overlay-text-color);
    color: var(--theme-system-error-overlay-text-color);
    cursor: pointer;
+
    display: inline-block;
+
    font-family: var(--font-regular);
    font-size: 14px;
    line-height: 1.36;
    margin-top: 30px;
    opacity: 0.8;

                      
-
    &:disabled {
+
    &.disabled {
      cursor: default;
      text-decoration: none;
      @include animated-ellipsis($width: 16px);
import { observer } from 'mobx-react';
import { get } from 'lodash';
import ReactMarkdown from 'react-markdown';
-
import SVGInline from 'react-svg-inline';
+
import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
import News from '../../domains/News';
import DialogCloseButton from '../widgets/DialogCloseButton';
import closeCrossThin from '../../assets/images/close-cross-thin.inline.svg';
-
import externalLinkIcon from '../../assets/images/link-ic.inline.svg';
+
import ButtonLink from '../widgets/ButtonLink';
import styles from './AlertsOverlay.scss';

                      
type State = {
  }

                      
  onClose = () => {
-
    const { alerts } = this.props;
+
    const { alerts, onMarkNewsAsRead, onCloseOpenAlert } = this.props;
    if (alerts.length <= 1) {
-
      this.props.onMarkNewsAsRead([alerts[0].date]);
-
      this.props.onCloseOpenAlert();
+
      onMarkNewsAsRead([alerts[0].id]);
+
      onCloseOpenAlert();
      this.setState({ showOverlay: false });
      return;
    }
-
    this.props.onMarkNewsAsRead([alerts[0].date]);
+
    onMarkNewsAsRead([alerts[0].id]);
  };

                      
  onProceedNewsAction = (event: SyntheticMouseEvent<HTMLElement>) => {
  renderAction = (action: Object) => {
    if (action && (action.url || action.event)) {
      return (
-
        <button className={styles.actionBtn} onClick={this.onProceedNewsAction}>
-
          {action.label}
-
          {action.url && <SVGInline svg={externalLinkIcon} />}
-
        </button>
+
        <ButtonLink
+
          className={styles.actionBtn}
+
          onClick={this.onProceedNewsAction}
+
          skin={ButtonSkin}
+
          label={action.label}
+
          linkProps={{
+
            className: styles.externalLink,
+
            hasIconBefore: false,
+
            hasIconAfter: action.url && true,
+
          }}
+
        />
      );
    }
    return null;
          >
            <ReactMarkdown escapeHtml={false} source={content} />
          </div>
+

                      
          {this.renderAction(action)}
        </div>
      )
-
.actionBtn {
-
  background-color: rgba(45, 45, 45, 0.1);
-
  border: 1px solid #2d2d2d;
-
  border-radius: 5px;
-
  box-sizing: border-box;
-
  color: #2d2d2d;
-
  font-family: var(--font-medium);
-
  font-size: 14px;
-
  font-weight: 500;
-
  line-height: 1.36;
-
  margin-bottom: 22.5px;
-
  min-height: 50px;
-
  width: 360px;
-
  svg {
-
    height: 13px;
-
    margin: -1px 5px;
-
    width: 13px;
-

                      
-
    g {
-
      path {
-
        stroke: #2d2d2d;
-
      }
-
    }
-
  }
-
  &:hover {
-
    background-color: #2d2d2d;
-
    color: #fff;
-
    cursor: pointer;
-
    svg {
-
      g {
-
        path {
-
          stroke: #fff;
-
        }
-
      }
-
    }
-
  }
-
}
-

                      
-
.closeButton {
-
  cursor: pointer;
-
  display: flex;
-
  justify-content: flex-end;
-
  position: fixed;
-
  right: 10px;
-
  top: 10px;
-
  z-index: 4;
-

                      
-
  span {
-
    border-radius: 50%;
-
    height: 44px;
-
    width: 44px;
-

                      
-
    &:hover {
-
      background-color: rgba(0, 0, 0, 0.16);
-
      border-radius: 50%;
-
    }
-
  }
-

                      
-
  svg {
-
    height: 12px;
-
    margin-top: 16px;
-
    width: 12px;
-

                      
-
    polygon {
-
      fill: #2d2d2d;
-
    }
-
    path {
-
      stroke: #2d2d2d;
-
    }
-
  }
-
}
-

                      
.component {
  align-items: center;
  background-color: rgba(255, 185, 35, 0.98);
  top: 0px;
  width: 100vw;
  z-index: 22;
-
}

                      
-
.content {
-
  background-color: rgba(45, 45, 45, 0.1);
-
  font-size: 16px;
-
  line-height: 1.2;
-
  margin-bottom: 30px;
-
  max-height: 464px;
-
  max-width: 600px;
-
  min-width: 600px;
-
  opacity: 0.8;
-
  overflow-y: scroll;
-
  padding: 12px 20px;
-
  word-break: break-word;
-
  &::-webkit-scrollbar-thumb {
-
    background-color: rgba(45, 45, 45, 0.3);
-
    min-height: 60px;
-
    outline: none;
-
    width: 4px;
+
  .actionBtn {
+
    background-color: rgba(45, 45, 45, 0.1);
+
    border: 1px solid #2d2d2d;
+
    border-radius: 5px;
+
    box-sizing: border-box;
+
    line-height: 1.36;
+
    margin-bottom: 22.5px;
+
    min-height: 50px;
+
    width: 360px;
+

                      
+
    .externalLink {
+
      color: #2d2d2d;
+
      font-family: var(--font-medium);
+
      &:after {
+
        background-color: #2d2d2d;
+
      }
+
    }

                      
    &:hover {
-
      background-color: rgba(45, 45, 45, 0.5);
+
      background-color: #2d2d2d;
+
      .externalLink {
+
        color: #fff;
+
        &:after {
+
          background-color: #fff;
+
        }
+
      }
    }
  }

                      
-
  h1,
-
  h2 {
-
    font-family: var(--font-medium);
-
    margin-bottom: 6px;
-
  }
+
  .closeButton {
+
    cursor: pointer;
+
    display: flex;
+
    justify-content: flex-end;
+
    position: fixed;
+
    right: 10px;
+
    top: 10px;
+
    z-index: 4;
+

                      
+
    span {
+
      border-radius: 50%;
+
      height: 44px;
+
      width: 44px;
+

                      
+
      &:hover {
+
        background-color: rgba(0, 0, 0, 0.16);
+
        border-radius: 50%;
+
      }
+
    }
+

                      
+
    svg {
+
      height: 12px;
+
      margin-top: 16px;
+
      width: 12px;

                      
-
  h1 {
-
    font-size: 18px;
+
      polygon {
+
        fill: #2d2d2d;
+
      }
+
      path {
+
        stroke: #2d2d2d;
+
      }
+
    }
  }

                      
-
  h2 {
+
  .content {
+
    background-color: rgba(45, 45, 45, 0.1);
    font-size: 16px;
-
  }
+
    line-height: 1.2;
+
    margin-bottom: 30px;
+
    max-height: 464px;
+
    max-width: 600px;
+
    min-width: 600px;
+
    opacity: 0.8;
+
    overflow-y: scroll;
+
    padding: 12px 20px;
+
    word-break: break-word;
+
    &::-webkit-scrollbar-thumb {
+
      background-color: rgba(45, 45, 45, 0.3);
+
      min-height: 60px;
+
      outline: none;
+
      width: 4px;
+

                      
+
      &:hover {
+
        background-color: rgba(45, 45, 45, 0.5);
+
      }
+
    }

                      
-
  * + h2 {
-
    margin-top: 16px;
-
  }
+
    h1,
+
    h2 {
import { observer } from 'mobx-react';
import { get } from 'lodash';
import ReactMarkdown from 'react-markdown';
-
import SVGInline from 'react-svg-inline';
+
import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
import News from '../../domains/News';
-
import externalLinkIcon from '../../assets/images/link-ic.inline.svg';
+
import ButtonLink from '../widgets/ButtonLink';
import styles from './IncidentOverlay.scss';

                      
type Props = {
  renderAction = (action: Object) => {
    if (action && (action.url || action.event)) {
      return (
-
        <button className={styles.actionBtn} onClick={this.onProceedNewsAction}>
-
          {action.label}
-
          {action.url && <SVGInline svg={externalLinkIcon} />}
-
        </button>
+
        <ButtonLink
+
          className={styles.actionBtn}
+
          onClick={this.onProceedNewsAction}
+
          skin={ButtonSkin}
+
          label={action.label}
+
          linkProps={{
+
            className: styles.externalLink,
+
            hasIconBefore: false,
+
            hasIconAfter: action.url && true,
+
          }}
+
        />
      );
    }
    return null;
-
.actionBtn {
-
  background-color: rgba(0, 0, 0, 0.1);
-
  border: 1px solid #fff;
-
  border-radius: 5px;
-
  box-sizing: border-box;
-
  color: #fff;
-
  font-family: var(--font-medium);
-
  font-size: 14px;
-
  font-weight: 500;
-
  line-height: 1.36;
-
  margin-bottom: 22.5px;
-
  min-height: 50px;
-
  width: 360px;
-
  svg {
-
    height: 13px;
-
    margin: -1px 5px;
-
    width: 13px;
-

                      
-
    g {
-
      path {
-
        stroke: #fff;
-
      }
-
    }
-
  }
-

                      
-
  &:hover {
-
    background-color: #fff;
-
    color: #ab1700;
-
    cursor: pointer;
-
    svg {
-
      g {
-
        path {
-
          stroke: #ab1700;
-
        }
-
      }
-
    }
-
  }
-
}
-

                      
.component {
  align-items: center;
  background-color: rgba(171, 23, 0, 0.98);
  top: 0px;
  width: 100vw;
  z-index: 22;
-
}

                      
-
.content {
-
  background-color: rgba(0, 0, 0, 0.1);
-
  font-size: 16px;
-
  line-height: 1.2;
-
  margin-bottom: 30px;
-
  max-height: 464px;
-
  max-width: 600px;
-
  min-width: 600px;
-
  opacity: 0.8;
-
  overflow-y: scroll;
-
  padding: 12px 20px;
-
  word-break: break-word;
-
  &::-webkit-scrollbar-thumb {
-
    background-color: rgba(255, 255, 255, 0.3);
-
    outline: none;
-
    width: 4px;
+
  .actionBtn {
+
    background-color: rgba(0, 0, 0, 0.1);
+
    border: 1px solid #fff;
+
    border-radius: 5px;
+
    box-sizing: border-box;
+
    line-height: 1.36;
+
    margin-bottom: 22.5px;
+
    min-height: 50px;
+
    width: 360px;

                      
    &:hover {
-
      background-color: rgba(255, 255, 255, 0.5);
+
      background-color: #fff;
+
      color: #ab1700;
+
      cursor: pointer;
+
      svg {
+
        g {
+
          path {
+
            stroke: #ab1700;
+
          }
+
        }
+
      }
    }
-
  }

                      
-
  h1,
-
  h2 {
-
    font-family: var(--font-medium);
-
    margin-bottom: 6px;
-
  }
+
    .externalLink {
+
      color: #fff;
+
      font-family: var(--font-medium);
+
      &:after {
+
        background-color: #fff;
+
      }
+
    }

                      
-
  h1 {
-
    font-size: 18px;
+
    &:hover {
+
      background-color: #fff;
+
      .externalLink {
+
        color: #ab1700;
+
        &:after {
+
          background-color: #ab1700;
+
        }
+
      }
+
    }
  }

                      
-
  h2 {
+
  .content {
+
    background-color: rgba(0, 0, 0, 0.1);
    font-size: 16px;
-
  }
+
    line-height: 1.2;
+
    margin-bottom: 30px;
+
    max-height: 464px;
+
    max-width: 600px;
+
    min-width: 600px;
+
    opacity: 0.8;
+
    overflow-y: scroll;
+
    padding: 12px 20px;
+
    word-break: break-word;
+
    &::-webkit-scrollbar-thumb {
+
      background-color: rgba(255, 255, 255, 0.3);
+
      outline: none;
+
      width: 4px;
+

                      
+
      &:hover {
+
        background-color: rgba(255, 255, 255, 0.5);
+
      }
+
    }

                      
-
  * + h2 {
-
    margin-top: 16px;
-
  }
+
    h1,
+
    h2 {
+
      font-family: var(--font-medium);
+
      margin-bottom: 6px;
+
    }

                      
-
  ol,
-
  ul {
-
    list-style: disc;
-
    margin-left: 20px;
-
  }
+
    h1 {
+
      font-size: 18px;
+
    }

                      
-
  ol {
-
    list-style-type: decimal;
-
  }
+
    h2 {
+
      font-size: 16px;
+
    }

                      
-
  p,
-
  li {
-
    color: rgba(255, 255, 255, 0.7);
-
    font-family: var(--font-regular);
-
    font-size: 14px;
-
    line-height: 1.5;
-
    margin-bottom: 6px;
+
    * + h2 {
+
      margin-top: 16px;
+
    }

                      
-
    strong {
-
      color: rgba(255, 255, 255, 1);
-
      font-weight: 500;
+
    ol,
+
    ul {
+
      list-style: disc;
+
      margin-left: 20px;
    }
-
  }

                      
-
  a {
-
    border-bottom: 1px solid #fff;
-
    color: #fff;
-
    text-decoration: none;
-
  }
+
    ol {
+
      list-style-type: decimal;
+
    }

                      
-
  em {
-
    font-style: italic;
+
    p,
+
    li {
+
      color: rgba(255, 255, 255, 0.7);
            <div className={styles.newsFeedItemsContainer}>
              {news.all.map(newsItem => (
                <NewsItem
-
                  key={newsItem.date}
+
                  key={newsItem.id}
                  newsItem={newsItem}
                  isNewsFeedOpen={isNewsFeedOpen}
                  onMarkNewsAsRead={onMarkNewsAsRead}
import ReactMarkdown from 'react-markdown';
import moment from 'moment';
import { get } from 'lodash';
-
import SVGInline from 'react-svg-inline';
import AnimateHeight from 'react-animate-height';
+
import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
import News, { NewsTypes } from '../../domains/News';
-
import externalLinkIcon from '../../assets/images/link-ic.inline.svg';
+
import ButtonLink from '../widgets/ButtonLink';
import styles from './NewsItem.scss';

                      
type Props = {
      event.preventDefault();
      this.props.onOpenExternalLink(linkUrl);
    } else {
-
      const { type, date } = this.props.newsItem;
+
      const { type, id } = this.props.newsItem;
      const { newsItemCollapsible } = this.state;
      if (type === NewsTypes.INFO || type === NewsTypes.ANNOUNCEMENT) {
        if (newsItemCollapsible) {
        }
      }
      if (NewsTypes.ALERT && this.props.onOpenAlert) {
-
        this.props.onOpenAlert(date);
+
        this.props.onOpenAlert(id);
      }
-
      this.props.onMarkNewsAsRead(date);
+
      this.props.onMarkNewsAsRead(id);
    }
  }

                      
      this.state.newsItemExpanded ? styles.expanded : null,
      newsItem.read ? styles.isRead : null,
    ]);
-
    const { url } = newsItem.action;
+
    const { url = '' } = newsItem.action;
    const title = this.generateTitleWithBadge(newsItem.title, newsItem.read);

                      
    return (
                ]}
              />
            </div>
-
            <button
+
            <ButtonLink
              className={styles.newsItemActionBtn}
-
              onClick={this.onProceedNewsAction.bind(this)}
-
            >
-
              {newsItem.action.label}
-
              {url && <SVGInline svg={externalLinkIcon} />}
-
            </button>
+
              onClick={e => this.onProceedNewsAction(e)}
+
              skin={ButtonSkin}
+
              label={newsItem.action.label}
+
              linkProps={{
+
                className: styles.externalLink,
+
                hasIconBefore: false,
+
                hasIconAfter: url.length > 0,
+
              }}
+
            />
          </AnimateHeight>
        </div>
      </div>
    background-color: var(--theme-news-item-action-button-background-color);
    border: solid 1px var(--theme-news-item-action-button-border-color);
    border-radius: 2px;
-
    color: var(--theme-news-item-action-button-color);
    cursor: pointer;
-
    font-family: var(--font-regular);
-
    font-size: 14px;
-
    font-weight: 500;
+
    height: 32px;
    line-height: 20px;
    margin: 20px 0 0 0;
    padding: 5px 10px;
    text-align: center;
    width: 100%;

                      
-
    svg {
-
      height: 13px;
-
      margin: -1px 5px;
-
      width: 13px;
-

                      
-
      g {
-
        path {
-
          stroke: var(--theme-news-item-action-button-color);
-
        }
+
    .externalLink {
+
      color: var(--theme-news-item-action-button-color);
+
      font-family: var(--font-medium);
+
      &:after {
+
        background-color: var(--theme-news-item-action-button-color);
      }
    }

                      
    &:hover {
      background-color: var(
        --theme-news-item-action-button-background-color-hover
      );
-
      color: var(--theme-news-item-action-button-color-hover);
-

                      
-
      svg {
-
        g {
-
          path {
-
            stroke: var(--theme-news-item-action-button-color-hover);
-
          }
+
      .externalLink {
+
        color: var(--theme-news-item-action-button-color-hover);
+
        &:after {
+
          background-color: var(--theme-news-item-action-button-color-hover);
        }
      }
    }
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
-
import SVGInline from 'react-svg-inline';
import { Button } from 'react-polymorph/lib/components/Button';
import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
-
import externalLinkIcon from '../../assets/images/link-ic.inline.svg';
+
import ButtonLink from '../widgets/ButtonLink';
import styles from './LegacyNotification.scss';
import Wallet from '../../domains/Wallet';

                      
          </p>
        </div>
        <div className={styles.actions}>
-
          <Button
+
          <ButtonLink
            className={styles.actionLearnMore}
-
            label={
-
              <p>
-
                {intl.formatMessage(messages.actionLearnMore)}
-
                <SVGInline
-
                  svg={externalLinkIcon}
-
                  className={styles.externalLinkIcon}
-
                />
-
              </p>
-
            }
            onClick={this.onLearnMore}
            skin={ButtonSkin}
+
            label={intl.formatMessage(messages.actionLearnMore)}
+
            linkProps={{
+
              className: styles.externalLink,
+
              hasIconBefore: false,
+
              hasIconAfter: true,
+
            }}
          />
          {
            <Button
    background-color: var(
      --theme-legacy-notification-learn-more-button-background-color
    );
-
    color: var(--theme-legacy-notification-learn-more-button-text-color);
    padding: 0 42px;

                      
    &:hover {
      ) !important;
    }

                      
-
    .externalLinkIcon {
-
      @include link(--theme-legacy-notification-learn-more-button-text-color);
-
      border-bottom: none;
-

                      
-
      svg {
-
        margin-bottom: 1px;
-
        margin-left: 5px;
+
    .externalLink {
+
      color: var(--theme-legacy-notification-learn-more-button-text-color);
+
      &:after {
+
        background-color: var(
+
          --theme-legacy-notification-learn-more-button-text-color
+
        );
+
        height: 14px;
+
        -webkit-mask-size: 14px, 14px;
+
        mask-size: 14px, 14px;
        vertical-align: sub;
        width: 14px;
      }
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { defineMessages, intlShape, FormattedMessage } from 'react-intl';
-
import SVGInline from 'react-svg-inline';
+
import classNames from 'classnames';
+
import { Link } from 'react-polymorph/lib/components/Link';
+
import { LinkSkin } from 'react-polymorph/lib/skins/simple/LinkSkin';
import styles from './SupportSettings.scss';
import globalMessages from '../../../i18n/global-messages';
-
import externalLinkIcon from '../../../assets/images/link-ic.inline.svg';

                      
const messages = defineMessages({
  faqTitle: {
    const faqLinkUrl = intl.formatMessage(globalMessages.faqLinkUrl);

                      
    const faqLink = (
-
      <a
-
        className={styles.externalLinkNotWrapped}
-
        href={faqLinkUrl}
+
      <Link
+
        className={styles.externalLink}
        onClick={event => onExternalLinkClick(faqLinkUrl, event)}
-
      >
-
        {intl.formatMessage(messages.faqLink)}
-
        <SVGInline svg={externalLinkIcon} />
-
      </a>
+
        label={intl.formatMessage(messages.faqLink)}
+
        skin={LinkSkin}
+
      />
    );

                      
+
    const downloadLogsClasses = classNames([
+
      styles.externalLink,
+
      disableDownloadLogs ? styles.disabled : null,
+
    ]);
+

                      
    const stepsDownloadLogsLink = (
-
      <button onClick={onDownloadLogs} disabled={disableDownloadLogs}>
-
        {intl.formatMessage(messages.stepsDownloadLogsLink)}
-
      </button>
+
      <Link
+
        className={downloadLogsClasses}
+
        onClick={onDownloadLogs}
+
        hasIconAfter={false}
+
        label={intl.formatMessage(messages.stepsDownloadLogsLink)}
+
        skin={LinkSkin}
+
      />
    );

                      
    const reportProblemLink = (
-
      <span
+
      <Link
        className={styles.externalLink}
-
        role="presentation"
        onClick={onSupportRequestClick}
-
      >
-
        {intl.formatMessage(messages.stepsReportProblemLink)}
-
        <SVGInline svg={externalLinkIcon} />
-
      </span>
+
        label={intl.formatMessage(messages.stepsReportProblemLink)}
+
        skin={LinkSkin}
+
      />
    );

                      
    return (
Diff too large – View on GitHub