[DDW-481] Layout adjustments

input-output-hk · Jan 18, 2021 · 929d350 · 929d350
1 parent a08cebb
commit 929d350
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 19 deletions.
diff --git a/source/renderer/app/components/settings/categories/StakePoolsSettings.js b/source/renderer/app/components/settings/categories/StakePoolsSettings.js
@@ -17,6 +17,12 @@ import type { SmashServerType } from '../../../types/stakingTypes';
 import LocalizableError from '../../../i18n/LocalizableError';
 
 const messages = defineMessages({
+  description: {
+    id: 'settings.stakePools.description',
+    defaultMessage:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ',
+    description: 'description for the Stake Pools settings page.',
+  },
   smashSelectLabel: {
     id: 'settings.stakePools.smash.select.label',
     defaultMessage: '!!!Off-chain metadata server (SMASH)',
@@ -150,6 +156,9 @@ export default class StakePoolsSettings extends Component<Props, State> {
 
     return (
       <div className={styles.component}>
+        <div className={styles.description}>
+          {intl.formatMessage(messages.description)}
+        </div>
         <Select
           label={intl.formatMessage(messages.smashSelectLabel)}
           value={smashServerType}

diff --git a/source/renderer/app/components/settings/categories/StakePoolsSettings.scss b/source/renderer/app/components/settings/categories/StakePoolsSettings.scss
@@ -3,6 +3,14 @@
 .component {
   margin-bottom: 20px;
 }
+.description {
+  color: var(--theme-support-settings-text-color);
+  display: block;
+  font-family: var(--font-light);
+  font-size: 16px;
+  line-height: 1.38;
+  margin-bottom: 20px;
+}
 .smashServerUrl {
   margin-top: 20px;
   :global {

diff --git a/source/renderer/app/components/staking/stake-pools/StakePools.js b/source/renderer/app/components/staking/stake-pools/StakePools.js
@@ -41,6 +41,11 @@ const messages = defineMessages({
     description:
       'Loading stake pool message for the Delegation center body section.',
   },
+  curatedBy: {
+    id: 'staking.stakePools.curatedBy',
+    defaultMessage: '!!!Curated by',
+    description: 'curatedBy message for the Delegation center body section.',
+  },
 });
 
 const SELECTED_INDEX_TABLE = 'selectedIndexTable';
@@ -191,7 +196,9 @@ export default class StakePools extends Component<Props, State> {
 
     const smashSettings = smashServer && (
       <button onClick={onSmashSettingsClick} className={styles.smashSettings}>
-        <span>&nbsp;- {smashServer}</span>
+        <span>
+          <em>{intl.formatMessage(messages.curatedBy)}</em> {smashServer}
+        </span>
         <SVGInline
           svg={smashSettingsIcon}
           className={styles.smashSettingsIcon}
@@ -243,7 +250,7 @@ export default class StakePools extends Component<Props, State> {
             {stakePoolsDelegatingList.length > 0 && (
               <Fragment>
                 <h2 className={styles.listTitle}>
-                  <span>
+                  <span className={styles.leftContent}>
                     {intl.formatMessage(messages.delegatingListTitle)}
                   </span>
                 </h2>
@@ -264,12 +271,15 @@ export default class StakePools extends Component<Props, State> {
             {isListView && (
               <Fragment>
                 <h2>
-                  <FormattedMessage
-                    {...listTitleMessage}
-                    values={{
-                      pools: filteredStakePoolsList.length,
-                    }}
-                  />
+                  <span className={styles.leftContent}>
+                    <FormattedMessage
+                      {...listTitleMessage}
+                      values={{
+                        pools: filteredStakePoolsList.length,
+                      }}
+                    />
+                    {tinyLoadingSpinner}
+                  </span>
                   {smashSettings}
                 </h2>
                 <StakePoolsTable
@@ -292,12 +302,15 @@ export default class StakePools extends Component<Props, State> {
             {isGridView && (
               <Fragment>
                 <h2>
-                  <FormattedMessage
-                    {...listTitleMessage}
-                    values={{
-                      pools: filteredStakePoolsList.length,
-                    }}
-                  />
+                  <span className={styles.leftContent}>
+                    <FormattedMessage
+                      {...listTitleMessage}
+                      values={{
+                        pools: filteredStakePoolsList.length,
+                      }}
+                    />
+                    {tinyLoadingSpinner}
+                  </span>
                   {smashSettings}
                 </h2>
                 <StakePoolsList

diff --git a/source/renderer/app/components/staking/stake-pools/StakePools.scss b/source/renderer/app/components/staking/stake-pools/StakePools.scss
@@ -27,15 +27,19 @@
 
   h2 {
     color: var(--theme-staking-stake-pools-title-color);
+    display: flex;
+    justify-content: space-between;
     line-height: 1.38;
     margin: 20px 0 10px;
-    padding-left: 20px;
-    > span:not(.SVGInline) {
-      opacity: 0.5;
-    }
+    padding: 0 20px;
+  }
+
+  .leftContent {
+    opacity: 0.5;
   }
 
   .smashSettings {
+    display: flex;
     cursor: pointer;
     font-size: 16px;
     > span:first-child {
@@ -48,6 +52,9 @@
       vertical-align: top;
       white-space: nowrap;
     }
+    em {
+      font-size: 13px;
+    }
     &:hover {
       svg {
         opacity: 1;

diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
@@ -462,6 +462,7 @@
   "staking.rewards.tableHeader.reward": "Reward",
   "staking.rewards.tableHeader.wallet": "Wallet",
   "staking.rewards.title": "Earned delegation rewards",
+  "staking.stakePools.curatedBy": "Curated by",
   "staking.stakePools.delegatingListTitle": "Staking pools you are delegating to",
   "staking.stakePools.learnMore": "Learn more",
   "staking.stakePools.listTitle": "Stake pools ({pools})",
@@ -996,4 +997,4 @@
   "wallet.transferFunds.dialog2.sourceWalletAmount.label": "{sourceWalletName} amount",
   "wallet.transferFunds.dialog2.title": "Transfer funds",
   "wallet.transferFunds.dialog2.total.label": "Total"
-}
+}