[DDW-496] Scrollable dialogs improvement (#2285)

* [DDW-496]: Update scroll view layout of modal dialog component * [DDW-496]: Update changelog * [DDW-496] Merges develop * [DDW-496]: Adjust wallet create modal styles * [DDW-496]: Adjust dialog scrollbar styles * [DDW-496]: Adjust wallet restore dialog styles * [DDW-496]: Adjust wallet delegation dialog styles * [DDW-496]: Adjust change password dialog styles * [DDW-496]: Update translations * [DDW-496] Fix scrollbar issues Co-authored-by: Aleksandar Djordjevic <aca_eliminator@hotmail.com> Co-authored-by: Nikola Glumac <niglumac@gmail.com>
input-output-hk · Jan 14, 2021 · 0a7fe82 · 0a7fe82
1 parent fe2321b
commit 0a7fe82
Show file tree

Hide file tree

Showing 27 changed files with 136 additions and 124 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,7 +10,8 @@ Changelog
 
 ### Chores
 
-- Disabled and hided copy and paste context menu items on some scenarios ([PR 2300](https://github.com/input-output-hk/daedalus/pull/2300))
+- Improved scrollable dialogs ([PR 2285](https://github.com/input-output-hk/daedalus/pull/2285))
+- Disabled and hid copy and paste context menu items on some scenarios ([PR 2300](https://github.com/input-output-hk/daedalus/pull/2300))
 - Applied validation to spending password to be not longer than 255 characters ([PR 2287](https://github.com/input-output-hk/daedalus/pull/2287))
 - Update `axios` package ([PR 2291](https://github.com/input-output-hk/daedalus/pull/2291))
 

diff --git a/source/renderer/app/components/layout/SidebarLayout.scss b/source/renderer/app/components/layout/SidebarLayout.scss
@@ -33,10 +33,6 @@
   overflow-x: hidden;
   overflow-y: overlay;
   position: relative;
-  &::-webkit-scrollbar-button {
-    display: block;
-    height: 7px;
-  }
 }
 
 .content {

diff --git a/source/renderer/app/components/layout/VerticalFlexContainer.scss b/source/renderer/app/components/layout/VerticalFlexContainer.scss
@@ -4,9 +4,4 @@
   height: 100%;
   overflow-y: overlay;
   position: relative;
-
-  &::-webkit-scrollbar-button {
-    display: block;
-    height: 7px;
-  }
 }
diff --git a/source/renderer/app/components/news/NewsFeed.scss b/source/renderer/app/components/news/NewsFeed.scss
@@ -111,6 +111,10 @@
       }
     }
 
+    *::-webkit-scrollbar-button {
+      display: none;
+    }
+
     *::-webkit-scrollbar-track {
       margin-bottom: 11px;
       margin-top: 25px;
@@ -122,6 +126,7 @@
           --theme-splash-network-scrollbar-thumb-background
         );
         min-height: 150px;
+
         &:hover {
           background-color: var(
             --theme-splash-network-scrollbar-thumb-background-hover

diff --git a/source/renderer/app/components/profile/terms-of-use/TermsOfUseForm.scss b/source/renderer/app/components/profile/terms-of-use/TermsOfUseForm.scss
@@ -6,10 +6,6 @@
   overflow-x: hidden;
   overflow-y: overlay;
   padding: 20px;
-  &::-webkit-scrollbar-button {
-    display: block;
-    height: 7px;
-  }
 }
 
 .centeredBox {

diff --git a/source/renderer/app/components/settings/SettingsLayout.scss b/source/renderer/app/components/settings/SettingsLayout.scss
@@ -12,10 +12,6 @@
   overflow-x: hidden;
   overflow-y: overlay;
   padding: 20px 20px 20px 0;
-  &::-webkit-scrollbar-button {
-    display: block;
-    height: 7px;
-  }
 }
 
 .settingsPane {

diff --git a/...er/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js b/...er/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js
@@ -326,7 +326,7 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
         backButton={<DialogBackButton onBack={onBack} />}
       >
         <BackToTopButton
-          scrollableElementClassName="Dialog_content"
+          scrollableElementClassName="Dialog_contentWrapper"
           buttonTopPosition={100}
           scrollTopToActivate={100}
         />

diff --git a/.../app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.scss b/.../app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.scss
@@ -10,14 +10,6 @@
     .Dialog_subtitle {
       color: var(--theme-delegation-steps-choose-wallet-steps-indicator-color);
     }
-
-    .Dialog_content {
-      padding: 0 25px 4px 4px;
-    }
-
-    .Dialog_actions button {
-      margin-top: 10px !important;
-    }
   }
 
   .stakePoolsListWrapper {
@@ -26,7 +18,6 @@
 
   .content {
     color: var(--theme-delegation-steps-choose-stake-pool-title-color);
-    margin-bottom: 20px;
 
     .description {
       font-family: var(--font-medium);

diff --git a/...e/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsIntroDialog.scss b/...e/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsIntroDialog.scss
@@ -2,8 +2,14 @@
 @import '../../../themes/mixins/link';
 
 .delegationStepsIntroDialogWrapper {
+  :global {
+    .Dialog_title {
+      margin-bottom: 20px;
+    }
+  }
   .content {
     color: var(--theme-delegation-steps-intro-content-text-color);
+    margin-top: 0;
 
     .link {
       font-size: 16px;

diff --git a/source/renderer/app/components/staking/rewards/StakingRewardsForIncentivizedTestnet.scss b/source/renderer/app/components/staking/rewards/StakingRewardsForIncentivizedTestnet.scss
@@ -78,7 +78,7 @@
     font-family: var(--font-regular);
     font-size: 14px;
     line-height: 1.43;
-    padding: 10px 20px;
+    padding: 10px 20px 0;
 
     p {
       margin-bottom: 3px;

diff --git a/source/renderer/app/components/status/DaedalusDiagnostics.scss b/source/renderer/app/components/status/DaedalusDiagnostics.scss
@@ -57,6 +57,11 @@
 
 .table {
   width: calc(50% - 15px);
+
+  &:nth-child(2) {
+    margin-bottom: 30px;
+  }
+
   @media (max-width: 1000px) {
     width: 100%;
 
@@ -65,12 +70,6 @@
     }
   }
 
-  @media (max-height: 800px) {
-    &:nth-child(2) {
-      margin-bottom: 70px;
-    }
-  }
-
   .layoutRow {
     display: flex;
     justify-content: space-between;

diff --git a/source/renderer/app/components/wallet/receive/VirtualAddressesList.scss b/source/renderer/app/components/wallet/receive/VirtualAddressesList.scss
@@ -3,6 +3,10 @@
   width: 100%;
   width: -webkit-calc(100% + 20px);
 
+  *::-webkit-scrollbar-button {
+    display: none;
+  }
+
   :global(.ReactVirtualized__Grid__innerScrollContainer) {
     overflow: visible !important;
   }
@@ -12,6 +16,7 @@
   overflow-x: hidden !important;
   padding-right: 2px;
   will-change: none !important;
+
   &:focus {
     outline: 0;
   }

diff --git a/source/renderer/app/components/wallet/receive/WalletReceiveRandom.scss b/source/renderer/app/components/wallet/receive/WalletReceiveRandom.scss
@@ -7,10 +7,7 @@
   overflow-x: hidden;
   overflow-y: overlay;
   padding: 20px;
-  &::-webkit-scrollbar-button {
-    display: block;
-    height: 7px;
-  }
+
   @media (max-width: 1000px) {
     min-height: 600px;
   }

diff --git a/source/renderer/app/components/wallet/receive/WalletReceiveSequential.scss b/source/renderer/app/components/wallet/receive/WalletReceiveSequential.scss
@@ -9,10 +9,7 @@
   overflow-x: hidden;
   overflow-y: overlay;
   padding: 20px;
-  &::-webkit-scrollbar-button {
-    display: block;
-    height: 7px;
-  }
+
   @media (max-width: 1000px) {
     min-height: 600px;
   }

diff --git a/source/renderer/app/components/wallet/settings/ChangeSpendingPasswordDialog.scss b/source/renderer/app/components/wallet/settings/ChangeSpendingPasswordDialog.scss
@@ -4,14 +4,6 @@
 .dialog {
   font-family: var(--font-light);
 
-  :global .Dialog_title {
-    margin-bottom: 0;
-  }
-
-  :global .Dialog_content {
-    padding-top: 25px;
-  }
-
   .spendingPasswordFields {
     transition: all 400ms ease;
 
@@ -30,13 +22,14 @@
 
     .spendingPasswordField {
       display: flex;
+      position: relative;
 
       > span {
         height: 12px;
         left: 145px;
         outline: none;
         position: absolute;
-        top: 54px;
+        top: 4px;
         width: 12px;
       }
 

diff --git a/...renderer/app/components/wallet/transactions/render-strategies/VirtualTransactionList.scss b/...renderer/app/components/wallet/transactions/render-strategies/VirtualTransactionList.scss
@@ -14,6 +14,14 @@
     height: calc(100% - 190px);
   }
 
+  *::-webkit-scrollbar-button {
+    display: none;
+  }
+
+  *::-webkit-scrollbar-track {
+    margin-bottom: 12px;
+  }
+
   :global(.ReactVirtualized__Grid__innerScrollContainer) {
     overflow: visible !important;
   }

diff --git a/source/renderer/app/components/wallet/utxo/WalletUtxo.scss b/source/renderer/app/components/wallet/utxo/WalletUtxo.scss
@@ -15,6 +15,7 @@
 }
 
 .borderedBox {
+  margin-bottom: 20px;
   padding: 30px;
 }
 

diff --git a/source/renderer/app/components/wallet/wallet-create/WalletCreateDialog.scss b/source/renderer/app/components/wallet/wallet-create/WalletCreateDialog.scss
@@ -1,11 +1,3 @@
-.component {
-  :global {
-    .Dialog_title {
-      margin-bottom: 0;
-    }
-  }
-}
-
 // Temporary. Can be deleted.
 .content {
   align-items: center;

diff --git a/source/renderer/app/components/wallet/wallet-restore/widgets/WalletRestoreDialog.js b/source/renderer/app/components/wallet/wallet-restore/widgets/WalletRestoreDialog.js
@@ -1,24 +1,31 @@
 // @flow
 import React, { Component } from 'react';
 import type { Node } from 'react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import DialogCloseButton from '../../../widgets/DialogCloseButton';
 import Dialog from '../../../widgets/Dialog';
 import DialogBackButton from '../../../widgets/DialogBackButton';
 import WalletRestoreSteps from './WalletRestoreSteps';
 import styles from './WalletRestoreDialog.scss';
+import { RESTORE_WALLET_STEPS } from '../../../../config/walletRestoreConfig';
 import type { DialogActionItems } from '../../../widgets/Dialog';
+import type { RestoreWalletStep } from '../../../../types/walletRestoreTypes';
 
 const messages = defineMessages({
   dialogTitle: {
     id: 'wallet.restore.dialog.title',
     defaultMessage: '!!!Restore a wallet',
-    description: 'Title "Create a new wallet" in the wallet create form.',
+    description: 'Title "Create a new wallet" in the wallet restore form.',
   },
   dialogTitleSuccess: {
     id: 'wallet.restore.dialog.titleSuccess',
     defaultMessage: '!!!Restore a wallet',
-    description: 'Title "Create a new wallet" in the wallet create form.',
+    description: 'Title "Create a new wallet" in the wallet restore form.',
+  },
+  stepsCounter: {
+    id: 'wallet.restore.dialog.stepsCounter',
+    defaultMessage: '!!!Step {currentStep} of {totalSteps}',
+    description: 'Step couters in the wallet restore dialog.',
   },
 });
 
@@ -35,18 +42,34 @@ export default class WalletRestoreDialog extends Component<Props> {
     intl: intlShape.isRequired,
   };
 
+  get filteredSteps(): Array<RestoreWalletStep> {
+    return RESTORE_WALLET_STEPS.filter((stepId) => stepId !== 'success');
+  }
+
   render() {
     const { intl } = this.context;
     const { actions, children, stepNumber, onClose, onBack } = this.props;
     const hasStep = stepNumber !== undefined;
     const title = hasStep
       ? intl.formatMessage(messages.dialogTitle)
       : intl.formatMessage(messages.dialogTitleSuccess);
+    const currentStep = (stepNumber || 0) + 1;
+    const totalSteps = this.filteredSteps.length;
+    const subTitle = (
+      <FormattedHTMLMessage
+        {...messages.stepsCounter}
+        values={{
+          currentStep,
+          totalSteps,
+        }}
+      />
+    );
 
     return (
       <Dialog
         className={styles.component}
         title={title}
+        subtitle={subTitle}
         actions={actions}
         closeOnOverlayClick={false}
         onClose={onClose}

diff --git a/source/renderer/app/components/wallet/wallet-restore/widgets/WalletRestoreSteps.js b/source/renderer/app/components/wallet/wallet-restore/widgets/WalletRestoreSteps.js
@@ -1,6 +1,6 @@
 // @flow
 import React, { Component } from 'react';
-import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
+import { defineMessages, intlShape } from 'react-intl';
 import { Stepper } from 'react-polymorph/lib/components/Stepper';
 import { StepperSkin } from 'react-polymorph/lib/skins/simple/StepperSkin';
 import styles from './WalletRestoreSteps.scss';
@@ -12,25 +12,20 @@ type Props = {
 };
 
 const messages = defineMessages({
-  stepsCounter: {
-    id: 'wallet.restore.dialog.stepsCounter',
-    defaultMessage: '!!!Step {currentStep} of {totalSteps}',
-    description: 'Step couters in the wallet create dialog.',
-  },
   typeStep: {
     id: 'wallet.restore.dialog.typeStep',
     defaultMessage: '!!!Type',
-    description: 'Step "Type" in the wallet create dialog.',
+    description: 'Step "Type" in the wallet restore dialog.',
   },
   mnemonicsStep: {
     id: 'wallet.restore.dialog.mnemonicsStep',
     defaultMessage: '!!!Recovery Phrase',
-    description: 'Step "Recovery Phrase" in the wallet create dialog.',
+    description: 'Step "Recovery Phrase" in the wallet restore dialog.',
   },
   configurationStep: {
     id: 'wallet.restore.dialog.configurationStep',
     defaultMessage: '!!!Configuration',
-    description: 'Step "Configuration" in the wallet create dialog.',
+    description: 'Step "Configuration" in the wallet restore dialog.',
   },
 });
 
@@ -52,18 +47,8 @@ export default class WalletRestoreSteps extends Component<Props> {
   render() {
     const { stepNumber } = this.props;
     const currentStep = stepNumber + 1;
-    const totalSteps = this.filteredSteps.length;
     return (
       <div className={styles.component}>
-        <div className={styles.stepCounter}>
-          <FormattedHTMLMessage
-            {...messages.stepsCounter}
-            values={{
-              currentStep,
-              totalSteps,
-            }}
-          />
-        </div>
         <Stepper
           steps={this.stepsList}
           activeStep={currentStep}

diff --git a/source/renderer/app/components/wallet/wallet-restore/widgets/WalletRestoreSteps.scss b/source/renderer/app/components/wallet/wallet-restore/widgets/WalletRestoreSteps.scss
@@ -8,11 +8,3 @@
     }
   }
 }
-
-.stepCounter {
-  font-family: var(--font-regular);
-  font-size: 12px;
-  line-height: 1.83;
-  margin-bottom: 5px;
-  text-align: center;
-}