[DDW-453] Earned delegation rewards "export CSV" button update styles

CHANGELOG.md

@@ -5,6 +5,7 @@ Changelog
 
 ### Chores
 
+- Updated header section styles of delegation rewards screen ([PR 2509](https://github.com/input-output-hk/daedalus/pull/2509))
 - Reduced the clock drift tolerance to 4,5 seconds ([PR 2510](https://github.com/input-output-hk/daedalus/pull/2510))
 - Updates Catalyst Fund4 dates ([PR 2495](https://github.com/input-output-hk/daedalus/pull/2495))
 - Updated `cardano-wallet` to revision `7df30796` ([PR 2495](https://github.com/input-output-hk/daedalus/pull/2495))

source/renderer/app/components/staking/layouts/StakingWithNavigation.js

@@ -1,6 +1,7 @@
 // @flow
 import React, { Component, createRef } from 'react';
 import type { ElementRef, Node } from 'react';
+import classnames from 'classnames';
 import { observer } from 'mobx-react';
 import StakingNavigation from '../navigation/StakingNavigation';
 import styles from './StakingWithNavigation.scss';
@@ -13,35 +14,18 @@ type Props = {
   isIncentivizedTestnet: boolean,
 };
 
-type State = {
-  scrollTop: number,
-};
-
 type ContextValue = {
-  scrollTop: number,
   scrollElementRef: ?ElementRef<*>,
 };
 
 export const StakingPageScrollContext = React.createContext<ContextValue>({
-  scrollTop: 0,
   scrollElementRef: null,
 });
 
 @observer
-export default class StakingWithNavigation extends Component<Props, State> {
+export default class StakingWithNavigation extends Component<Props> {
   stakingPageRef = createRef<*>();
 
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      scrollTop: 0,
-    };
-  }
-
-  handleScroll = (evt: SyntheticEvent<HTMLElement>) => {
-    this.setState({ scrollTop: evt.currentTarget.scrollTop });
-  };
-
   render() {
     const {
       children,
@@ -50,13 +34,13 @@ export default class StakingWithNavigation extends Component<Props, State> {
       isActiveNavItem,
       isIncentivizedTestnet,
     } = this.props;
-    const { scrollTop } = this.state;
+    const componentStyles = classnames([styles.component, styles[activeItem]]);
 
     return (
       <StakingPageScrollContext.Provider
-        value={{ scrollTop, scrollElementRef: this.stakingPageRef }}
+        value={{ scrollElementRef: this.stakingPageRef }}
       >
-        <div className={styles.component}>
+        <div className={componentStyles}>
           <div className={styles.navigation}>
             <StakingNavigation
               isActiveNavItem={isActiveNavItem}
@@ -67,7 +51,6 @@ export default class StakingWithNavigation extends Component<Props, State> {
           </div>
           <div
             className={styles.page}
-            onScroll={this.handleScroll}
             ref={(ref) => {
               this.stakingPageRef.current = ref;
             }}

source/renderer/app/components/staking/layouts/StakingWithNavigation.scss

@@ -2,6 +2,12 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+
+  &.rewards {
+    .page {
+      overflow-y: hidden;
+    }
+  }
 }
 
 .navigation {

source/renderer/app/components/staking/rewards/StakingRewards.js

@@ -94,6 +94,7 @@ type Props = {
 type State = {
   rewardsOrder: string,
   rewardsSortBy: string,
+  contentScrollTop: number,
 };
 
 @observer
@@ -111,6 +112,7 @@ export default class StakingRewards extends Component<Props, State> {
     this.state = {
       rewardsOrder: REWARD_ORDERS.DESCENDING,
       rewardsSortBy: REWARD_FIELDS.DATE,
+      contentScrollTop: 0,
     };
   }
 
@@ -167,9 +169,13 @@ export default class StakingRewards extends Component<Props, State> {
     });
   };
 
+  handleContentScroll = (evt: SyntheticEvent<HTMLElement>) => {
+    this.setState({ contentScrollTop: evt.currentTarget.scrollTop });
+  };
+
   render() {
     const { rewards, isLoading, onLearnMoreClick } = this.props;
-    const { rewardsOrder, rewardsSortBy } = this.state;
+    const { rewardsOrder, rewardsSortBy, contentScrollTop } = this.state;
     const { intl } = this.context;
     const noRewards = !isLoading && ((rewards && !rewards.length) || !rewards);
     const showRewards = rewards && rewards.length > 0 && !isLoading;
@@ -192,10 +198,14 @@ export default class StakingRewards extends Component<Props, State> {
         title: intl.formatMessage(messages.tableHeaderReward),
       },
     ];
+    const headerWrapperClasses = classNames([
+      styles.headerWrapper,
+      contentScrollTop > 10 ? styles.headerWrapperWithShadow : null,
+    ]);
 
     return (
       <div className={styles.component}>
-        <div className={styles.headerWrapper}>
+        <div className={headerWrapperClasses}>
           <div className={styles.title}>
             {intl.formatMessage(messages.title)}
           </div>
@@ -205,101 +215,109 @@ export default class StakingRewards extends Component<Props, State> {
             </div>
           )}
         </div>
+        <div
+          className={styles.contentWrapper}
+          onScroll={this.handleContentScroll}
+        >
+          <BorderedBox>
+            {noRewards && (
+              <div className={styles.noRewardsLabel}>
+                {intl.formatMessage(messages.noRewards)}
+              </div>
+            )}
 
-        <BorderedBox>
-          {noRewards && (
-            <div className={styles.noRewardsLabel}>
-              {intl.formatMessage(messages.noRewards)}
-            </div>
-          )}
+            {sortedRewards && (
+              <table>
+                <thead>
+                  <tr>
+                    {map(availableTableHeaders, (tableHeader) => {
+                      const isSorted = tableHeader.name === rewardsSortBy;
+                      const sortIconClasses = classNames([
+                        styles.sortIcon,
+                        isSorted ? styles.sorted : null,
+                        isSorted && rewardsOrder === 'asc'
+                          ? styles.ascending
+                          : null,
+                      ]);
 
-          {sortedRewards && (
-            <table>
-              <thead>
-                <tr>
-                  {map(availableTableHeaders, (tableHeader) => {
-                    const isSorted = tableHeader.name === rewardsSortBy;
-                    const sortIconClasses = classNames([
-                      styles.sortIcon,
-                      isSorted ? styles.sorted : null,
-                      isSorted && rewardsOrder === 'asc'
-                        ? styles.ascending
-                        : null,
-                    ]);
+                      return (
+                        <th
+                          key={tableHeader.name}
+                          onClick={() =>
+                            this.handleRewardsSort(tableHeader.name)
+                          }
+                        >
+                          {tableHeader.title}
+                          <SVGInline
+                            svg={sortIcon}
+                            className={sortIconClasses}
+                          />
+                        </th>
+                      );
+                    })}
+                  </tr>
+                </thead>
+                <tbody>
+                  {map(sortedRewards, (reward, key) => {
+                    const rewardDate = get(reward, REWARD_FIELDS.DATE, '');
+                    const rewardPoolTicker = get(
+                      reward,
+                      [REWARD_FIELDS.POOL, REWARD_FIELDS.TICKER],
+                      ''
+                    );
+                    const rewardPoolName = get(
+                      reward,
+                      [REWARD_FIELDS.POOL, REWARD_FIELDS.NAME],
+                      ''
+                    );
+                    const rewardWallet = get(
+                      reward,
+                      REWARD_FIELDS.WALLET_NAME,
+                      ''
+                    );
+                    const isRestoring = get(reward, REWARD_FIELDS.IS_RESTORING);
+                    const rewardAmount = get(
+                      reward,
+                      REWARD_FIELDS.REWARD
+                    ).toFormat(DECIMAL_PLACES_IN_ADA);
 
                     return (
-                      <th
-                        key={tableHeader.name}
-                        onClick={() => this.handleRewardsSort(tableHeader.name)}
-                      >
-                        {tableHeader.title}
-                        <SVGInline svg={sortIcon} className={sortIconClasses} />
-                      </th>
+                      <tr key={key}>
+                        <td>{rewardDate}</td>
+                        <td>
+                          <p>
+                            <span className={styles.stakePoolReference}>
+                              [{rewardPoolTicker}]
+                            </span>{' '}
+                            {rewardPoolName}
+                          </p>
+                        </td>
+                        <td>{rewardWallet}</td>
+                        <td>{isRestoring ? '-' : `${rewardAmount} ADA`}</td>
+                      </tr>
                     );
                   })}
-                </tr>
-              </thead>
-              <tbody>
-                {map(sortedRewards, (reward, key) => {
-                  const rewardDate = get(reward, REWARD_FIELDS.DATE, '');
-                  const rewardPoolTicker = get(
-                    reward,
-                    [REWARD_FIELDS.POOL, REWARD_FIELDS.TICKER],
-                    ''
-                  );
-                  const rewardPoolName = get(
-                    reward,
-                    [REWARD_FIELDS.POOL, REWARD_FIELDS.NAME],
-                    ''
-                  );
-                  const rewardWallet = get(
-                    reward,
-                    REWARD_FIELDS.WALLET_NAME,
-                    ''
-                  );
-                  const isRestoring = get(reward, REWARD_FIELDS.IS_RESTORING);
-                  const rewardAmount = get(
-                    reward,
-                    REWARD_FIELDS.REWARD
-                  ).toFormat(DECIMAL_PLACES_IN_ADA);
-
-                  return (
-                    <tr key={key}>
-                      <td>{rewardDate}</td>
-                      <td>
-                        <p>
-                          <span className={styles.stakePoolReference}>
-                            [{rewardPoolTicker}]
-                          </span>{' '}
-                          {rewardPoolName}
-                        </p>
-                      </td>
-                      <td>{rewardWallet}</td>
-                      <td>{isRestoring ? '-' : `${rewardAmount} ADA`}</td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          )}
+                </tbody>
+              </table>
+            )}
 
-          {isLoading && (
-            <div className={styles.loadingSpinnerWrapper}>
-              <LoadingSpinner />
+            {isLoading && (
+              <div className={styles.loadingSpinnerWrapper}>
+                <LoadingSpinner />
+              </div>
+            )}
+          </BorderedBox>
+          <div className={styles.note}>
+            <div className={styles.asterisk}>*</div>
+            <div className={styles.noteContent}>
+              <FormattedHTMLMessage {...messages.note} />
+              <Link
+                className={styles.externalLink}
+                onClick={onLearnMoreClick}
+                label={intl.formatMessage(messages.learnMoreButtonLabel)}
+                skin={LinkSkin}
+              />
             </div>
-          )}
-        </BorderedBox>
-
-        <div className={styles.note}>
-          <div className={styles.asterisk}>*</div>
-          <div className={styles.noteContent}>
-            <FormattedHTMLMessage {...messages.note} />
-            <Link
-              className={styles.externalLink}
-              onClick={onLearnMoreClick}
-              label={intl.formatMessage(messages.learnMoreButtonLabel)}
-              skin={LinkSkin}
-            />
           </div>
         </div>
       </div>

source/renderer/app/components/staking/rewards/StakingRewards.scss

@@ -1,11 +1,18 @@
 @import '../../../themes/mixins/link';
+
 .component {
-  padding: 20px 0 20px 20px;
+  height: 100%;
+  padding: 0 0 20px 20px;
 
   .headerWrapper {
+    align-items: center;
     display: flex;
+    justify-content: space-between;
     line-height: 1.38;
-    margin: 0 20px 10px;
+    margin: 0 0 0 -20px;
+    padding: 10px 40px;
+    position: relative;
+    transition: box-shadow 0.25s ease-out;
 
     & > .title {
       color: var(--theme-staking-font-color-lighter);
@@ -25,6 +32,16 @@
     }
   }
 
+  .headerWrapperWithShadow {
+    box-shadow: 0 2.5px 10px 0 rgba(0, 0, 0, 0.25);
+  }
+
+  .contentWrapper {
+    height: calc(100% - 53px);
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+
   .noRewardsLabel {
     color: var(--theme-staking-font-color-lighter);
     flex-grow: 1;