Merge branch 'develop' into chore/ddw-427-issues-on-redeem-rewards-sc…

…reen
input-output-hk · Nov 24, 2020 · c8bf601 · c8bf601
2 parents c5f802d + c654c86
commit c8bf601
Show file tree

Hide file tree

Showing 58 changed files with 1,373 additions and 1,436 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,10 +15,15 @@ Changelog
 
 ### Chores
 
+- Implemented Smart Tooltips across whole application ([PR 2243](https://github.com/input-output-hk/daedalus/pull/2243))
 - Updated `cardano-wallet` to version `2020-11-17` ([PR 2246](https://github.com/input-output-hk/daedalus/pull/2246))
 - Implemented a tool for quickly copying css properties on theme files ([PR 2196](https://github.com/input-output-hk/daedalus/pull/2196))
 - Hid hardware wallet restoration support ([PR 2237](https://github.com/input-output-hk/daedalus/pull/2237))
 
+### Fixes
+
+- Fixed Newsfeed drop shadow when there is an update item ([PR 2242](https://github.com/input-output-hk/daedalus/pull/2242))
+
 ## 2.4.1
 
 ### Fixes

diff --git a/package.json b/package.json
@@ -219,7 +219,7 @@
     "react-intl": "2.7.2",
     "react-lottie": "1.2.3",
     "react-markdown": "4.3.1",
-    "react-polymorph": "0.9.7-rc.5",
+    "react-polymorph": "0.9.7-rc.6",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "react-svg-inline": "2.1.1",

diff --git a/source/renderer/app/components/news/NewsFeed.js b/source/renderer/app/components/news/NewsFeed.js
@@ -92,7 +92,7 @@ export default class NewsFeed extends Component<Props, State> {
 
     if (this.scrollableDomElement) {
       const { scrollTop } = this.scrollableDomElement;
-      const hasShadow = scrollTop > 3;
+      const hasShadow = scrollTop > 0.5;
       if (currentHasShadow !== hasShadow) {
         this.setState({
           hasShadow,
@@ -134,12 +134,24 @@ export default class NewsFeed extends Component<Props, State> {
 
     const newsFeedHeaderStyles = classNames([
       styles.newsFeedHeader,
+      hasShadow && !hasUpdateItem ? styles.hasShadow : null,
+    ]);
+
+    const newsFeedContainerStyles = classNames([
+      styles.newsFeedContainer,
+      !hasUpdateItem ? styles.noUpdateItem : null,
       hasShadow ? styles.hasShadow : null,
     ]);
 
     const newsFeedListStyles = classNames([
       styles.newsFeedList,
       hasUpdateItem ? styles.hasUpdate : null,
+      hasShadow ? styles.hasShadow : null,
+    ]);
+
+    const newsFeedUpdateStyles = classNames([
+      styles.updateItem,
+      hasShadow ? styles.hasShadow : null,
     ]);
 
     return (
@@ -157,9 +169,9 @@ export default class NewsFeed extends Component<Props, State> {
             <SVGInline svg={closeCrossThin} />
           </button>
         </div>
-        <div className={styles.newsFeedContainer}>
+        <div className={newsFeedContainerStyles}>
           {hasUpdateItem && (
-            <>
+            <div className={newsFeedUpdateStyles}>
               {
                 <UpdateItem
                   key={update.id}
@@ -174,14 +186,15 @@ export default class NewsFeed extends Component<Props, State> {
                   isUpdatePostponed={isUpdatePostponed}
                 />
               }
-              <hr className={styles.separator} />
-            </>
+            </div>
           )}
           {items.length > 0 && (
             <div className={newsFeedListStyles}>
+              {hasUpdateItem && <hr className={styles.separator} />}
               {items.map((newsItem) => (
                 <NewsItem
                   key={newsItem.id}
+                  hasUpdateItem={hasUpdateItem}
                   newsItem={newsItem}
                   isNewsFeedOpen={isNewsFeedOpen}
                   onMarkNewsAsRead={onMarkNewsAsRead}

diff --git a/source/renderer/app/components/news/NewsFeed.scss b/source/renderer/app/components/news/NewsFeed.scss
@@ -32,7 +32,7 @@
     z-index: 1;
 
     &.hasShadow {
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+      box-shadow: var(--theme-news-feed-header-box-shadow-color);
     }
 
     .newsFeedTitle {
@@ -98,8 +98,36 @@
     overflow: hidden;
     padding: 20px;
 
-    &::-webkit-scrollbar-track {
-      margin: 13px 0;
+    &.noUpdateItem {
+      padding: 0 20px;
+
+      *::-webkit-scrollbar-track {
+        margin: 13px 0;
+      }
+
+      .newsFeedList {
+        height: calc(100% - 85px);
+        padding: 10px 20px 20px 0;
+      }
+    }
+
+    *::-webkit-scrollbar-track {
+      margin-bottom: 11px;
+      margin-top: 25px;
+    }
+
+    :global {
+      *::-webkit-scrollbar-thumb {
+        background-color: var(
+          --theme-splash-network-scrollbar-thumb-background
+        );
+        min-height: 150px;
+        &:hover {
+          background-color: var(
+            --theme-splash-network-scrollbar-thumb-background-hover
+          );
+        }
+      }
     }
 
     .newsFeedEmptyContainer,
@@ -133,8 +161,20 @@
       width: calc(100% - 20px);
 
       &.hasUpdate {
-        height: calc(100% - 220px);
-        margin-top: 115px;
+        height: calc(100% - 190px);
+        margin-top: 85px;
+      }
+    }
+
+    .updateItem {
+      box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
+      margin: -20px;
+      padding: 20px 20px 15px;
+
+      &.hasShadow {
+        background: var(--theme-news-feed-background-color);
+        box-shadow: var(--theme-news-feed-header-box-shadow-color);
+        z-index: 1;
       }
     }
   }
@@ -147,5 +187,7 @@
     border: 1px solid var(--theme-news-item-title-color);
     margin: 15px 0;
     opacity: 0.2;
+    transition: opacity 0.3s linear;
+    visibility: visible;
   }
 }
diff --git a/source/renderer/app/components/news/NewsItem.js b/source/renderer/app/components/news/NewsItem.js
@@ -20,6 +20,7 @@ type Props = {
   expandWithoutTransition?: boolean,
   isNewsFeedOpen: boolean,
   currentDateFormat: string,
+  hasUpdateItem?: boolean,
 };
 
 type State = {
@@ -101,12 +102,18 @@ export default class NewsItem extends Component<Props, State> {
   };
 
   render() {
-    const { newsItem, expandWithoutTransition, currentDateFormat } = this.props;
+    const {
+      newsItem,
+      expandWithoutTransition,
+      currentDateFormat,
+      hasUpdateItem,
+    } = this.props;
     const componentClasses = classNames([
       styles.component,
       newsItem.type ? styles[newsItem.type] : null,
       this.state.newsItemExpanded ? styles.expanded : null,
       newsItem.read ? styles.isRead : null,
+      !hasUpdateItem ? styles.noUpdateItem : null,
     ]);
     const { url = '' } = newsItem.action;
     const title = this.generateTitleWithBadge(newsItem.title, newsItem.read);

diff --git a/source/renderer/app/components/news/NewsItem.scss b/source/renderer/app/components/news/NewsItem.scss
@@ -13,6 +13,10 @@
     margin-top: 10px;
   }
 
+  &.noUpdateItem {
+    margin-top: 10px;
+  }
+
   &.isRead {
     opacity: 0.5;
   }

diff --git a/source/renderer/app/components/staking/delegation-center/WalletRow.js b/source/renderer/app/components/staking/delegation-center/WalletRow.js
@@ -5,15 +5,13 @@ import { isNil, get, map } from 'lodash';
 import { defineMessages, intlShape, FormattedMessage } from 'react-intl';
 import SVGInline from 'react-svg-inline';
 import classnames from 'classnames';
-import { TooltipSkin } from 'react-polymorph/lib/skins/simple/TooltipSkin';
-import { Tooltip } from 'react-polymorph/lib/components/Tooltip';
+import { PopOver } from 'react-polymorph/lib/components/PopOver';
 import Wallet, { WalletDelegationStatuses } from '../../../domains/Wallet';
 import StakePool from '../../../domains/StakePool';
 import { getColorFromRange } from '../../../utils/colors';
 import adaIcon from '../../../assets/images/ada-symbol.inline.svg';
 import { DECIMAL_PLACES_IN_ADA } from '../../../config/numbersConfig';
 import styles from './WalletRow.scss';
-import tooltipStyles from './WalletRowTooltip.scss';
 import LoadingSpinner from '../../widgets/LoadingSpinner';
 import arrow from '../../../assets/images/collapse-arrow.inline.svg';
 
@@ -183,9 +181,8 @@ export default class WalletRow extends Component<Props> {
                     className={classnames([styles.ticker, 'tickerText'])}
                   >
                     {delegatedStakePoolId ? (
-                      <Tooltip
-                        skin={TooltipSkin}
-                        tip={
+                      <PopOver
+                        content={
                           <div className={styles.tooltipLabelWrapper}>
                             <span>
                               {intl.formatMessage(
@@ -212,7 +209,7 @@ export default class WalletRow extends Component<Props> {
                               )}
                           ]
                         </div>
-                      </Tooltip>
+                      </PopOver>
                     ) : (
                       notDelegatedText
                     )}
@@ -256,10 +253,9 @@ export default class WalletRow extends Component<Props> {
                         'tickerText',
                       ]);
                       return [
-                        <Tooltip
-                          skin={TooltipSkin}
+                        <PopOver
                           key="ticker"
-                          tip={
+                          content={
                             <div className={styles.tooltipLabelWrapper}>
                               <FormattedMessage
                                 {...messages.TooltipPoolTickerEpoch}
@@ -284,7 +280,7 @@ export default class WalletRow extends Component<Props> {
                                 }]`
                               : notDelegatedText}
                           </span>
-                        </Tooltip>,
+                        </PopOver>,
                         !isLast && (
                           <SVGInline
                             key="arrow"
@@ -329,15 +325,13 @@ export default class WalletRow extends Component<Props> {
               </div>
             </Fragment>
           ) : (
-            <Tooltip
-              skin={TooltipSkin}
-              themeOverrides={tooltipStyles}
-              tip={intl.formatMessage(messages.syncingTooltipLabel, {
+            <PopOver
+              content={intl.formatMessage(messages.syncingTooltipLabel, {
                 syncingProgress,
               })}
             >
               <LoadingSpinner medium />
-            </Tooltip>
+            </PopOver>
           )}
         </div>
       </div>

diff --git a/source/renderer/app/components/staking/delegation-center/WalletRow.scss b/source/renderer/app/components/staking/delegation-center/WalletRow.scss
@@ -61,13 +61,6 @@
       justify-content: flex-end;
       margin-bottom: 4px;
 
-      :global {
-        .SimpleTooltip_root {
-          margin-right: 0;
-          margin-top: 2px;
-        }
-      }
-
       .ticker {
         background-color: var(
           --theme-staking-wallet-row-ticker-background-color
@@ -110,12 +103,6 @@
         padding-top: 3px;
       }
 
-      > span :global {
-        .SimpleTooltip_root > div {
-          right: -80px;
-        }
-      }
-
       .tooltipLabelWrapper {
         font-family: var(--font-regular);
         font-size: 13px;

diff --git a/source/renderer/app/components/staking/delegation-center/WalletRowTooltip.scss b/source/renderer/app/components/staking/delegation-center/WalletRowTooltip.scss
diff --git a/source/renderer/app/components/staking/rewards/StakingRewardsForIncentivizedTestnet.js b/source/renderer/app/components/staking/rewards/StakingRewardsForIncentivizedTestnet.js
@@ -5,8 +5,7 @@ import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import SVGInline from 'react-svg-inline';
 import { get, map, orderBy } from 'lodash';
 import classNames from 'classnames';
-import { Tooltip } from 'react-polymorph/lib/components/Tooltip';
-import { TooltipSkin } from 'react-polymorph/lib/skins/simple/TooltipSkin';
+import { PopOver } from 'react-polymorph/lib/components/PopOver';
 import moment from 'moment';
 import { Button } from 'react-polymorph/lib/components/Button';
 import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
@@ -18,7 +17,6 @@ import sortIcon from '../../../assets/images/ascending.inline.svg';
 import downloadIcon from '../../../assets/images/download-ic.inline.svg';
 import type { RewardForIncentivizedTestnet } from '../../../api/staking/types';
 import styles from './StakingRewardsForIncentivizedTestnet.scss';
-import tooltipStyles from './StakingRewardsForIncentivizedTestnetTooltip.scss';
 
 const messages = defineMessages({
   title: {
@@ -254,18 +252,16 @@ export default class StakingRewardsForIncentivizedTestnet extends Component<
                             {isRestoring ? '-' : `${rewardAmount} ADA`}
                             {isRestoring && (
                               <div className={styles.syncingProgress}>
-                                <Tooltip
-                                  skin={TooltipSkin}
-                                  themeOverrides={tooltipStyles}
-                                  tip={intl.formatMessage(
+                                <PopOver
+                                  content={intl.formatMessage(
                                     messages.syncingTooltipLabel,
                                     {
                                       syncingProgress,
                                     }
                                   )}
                                 >
                                   <LoadingSpinner medium />
-                                </Tooltip>
+                                </PopOver>
                               </div>
                             )}
                           </td>

diff --git a/.../renderer/app/components/staking/rewards/StakingRewardsForIncentivizedTestnetTooltip.scss b/.../renderer/app/components/staking/rewards/StakingRewardsForIncentivizedTestnetTooltip.scss