[DDW] Fix minor UI/UX issues

input-output-hk · Jan 14, 2021 · 32ed222 · 32ed222
1 parent f0a7247
commit 32ed222
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git a/source/renderer/app/components/settings/SettingsLayout.js b/source/renderer/app/components/settings/SettingsLayout.js
@@ -7,10 +7,29 @@ import styles from './SettingsLayout.scss';
 type Props = {
   children: Node,
   menu: Node,
+  activePage: string,
 };
 
 @observer
 export default class SettingsLayout extends Component<Props> {
+  scrollableDomElement: ?HTMLElement = null;
+
+  componentDidMount() {
+    this.scrollableDomElement = document.querySelector(
+      '.SettingsLayout_settingsPaneWrapper'
+    );
+  }
+
+  componentDidUpdate(prevProps) {
+    const didActivePageChange = this.props.activePage !== prevProps.activePage;
+    if (
+      this.scrollableDomElement instanceof HTMLElement &&
+      didActivePageChange
+    ) {
+      this.scrollableDomElement.scrollTop = 0;
+    }
+  }
+
   render() {
     const { menu, children } = this.props;
     return (

diff --git a/source/renderer/app/components/wallet/transactions/WalletTransactionsList.scss b/source/renderer/app/components/wallet/transactions/WalletTransactionsList.scss
@@ -67,5 +67,5 @@
 
 .showMoreTransactionsButton {
   display: block !important;
-  margin: 30px auto;
+  margin: 30px auto 20px;
 }
diff --git a/source/renderer/app/containers/settings/Settings.js b/source/renderer/app/containers/settings/Settings.js
@@ -27,7 +27,8 @@ export default class Settings extends Component<InjectedContainerProps> {
 
   render() {
     const { isFlight } = global;
-    const { actions, children } = this.props;
+    const { actions, children, stores } = this.props;
+    const { location } = stores.router;
     const menu = (
       <SettingsMenu
         isFlight={isFlight}
@@ -37,7 +38,9 @@ export default class Settings extends Component<InjectedContainerProps> {
     );
     return (
       <Layout>
-        <SettingsLayout menu={menu}>{children}</SettingsLayout>
+        <SettingsLayout menu={menu} activePage={location.pathname}>
+          {children}
+        </SettingsLayout>
       </Layout>
     );
   }

diff --git a/storybook/stories/settings/utils/SettingsWrapper.js b/storybook/stories/settings/utils/SettingsWrapper.js
@@ -38,7 +38,9 @@ export default (story: Object, context: Object) => {
     <StoryDecorator>
       <StoryProvider>
         <StoryLayout activeSidebarCategory="/settings" {...context}>
-          <SettingsLayout menu={menu}>{storyWithKnobs}</SettingsLayout>
+          <SettingsLayout menu={menu} activePage="/settings">
+            {storyWithKnobs}
+          </SettingsLayout>
         </StoryLayout>
       </StoryProvider>
     </StoryDecorator>