[DDW-587] UI bottom content progress

input-output-hk · Jun 8, 2021 · de5df21 · de5df21
1 parent 79ce927
commit de5df21
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 22 deletions.
diff --git a/source/renderer/app/components/wallet/summary/WalletSummaryAsset.js b/source/renderer/app/components/wallet/summary/WalletSummaryAsset.js
@@ -2,6 +2,7 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
+import { Button } from 'react-polymorph/lib/components/Button';
 import classNames from 'classnames';
 import { get } from 'lodash';
 import SVGInline from 'react-svg-inline';
@@ -124,19 +125,20 @@ export default class WalletSummaryAsset extends Component<Props, State> {
               </dd>
             </dl>
             <div className={styles.footerButtons}>
-              <button onClick={() => onAssetSettings({ asset })}>
-                Settings
-              </button>
-              <button
+              <Button
+                className={classNames(['flat', styles.button])}
+                label={'Settings'}
+                onClick={() => onAssetSettings({ asset })}
+              />
+              <Button
                 className={classNames([
                   'primary',
-                  styles.assetSendButton,
+                  styles.button,
                   asset.quantity.isZero() ? styles.disabled : null,
                 ])}
                 onClick={() => onOpenAssetSend(asset)}
-              >
-                {intl.formatMessage(messages.tokenSendButton)}
-              </button>
+                label={intl.formatMessage(messages.tokenSendButton)}
+              />
             </div>
           </div>
         </div>

diff --git a/source/renderer/app/components/wallet/summary/WalletSummaryAsset.scss b/source/renderer/app/components/wallet/summary/WalletSummaryAsset.scss
@@ -25,37 +25,34 @@
 }
 .arrow {
   bottom: 10px;
-  display: none;
-  height: 20px;
+  height: 22px;
   opacity: 0.3;
   position: absolute;
   right: 12px;
   text-align: center;
   width: 12px;
   z-index: 1;
+  top: 7px;
 
   > svg {
     height: 7px;
     width: 12px;
+    margin-top: 8px;
 
     path {
       stroke: var(--theme-transactions-arrow-stroke-color);
     }
   }
-
+  .header:hover & {
+    opacity: 0.5;
+  }
   &.isExpanded {
-    display: block;
     transform: rotate(180deg);
-    opacity: 0.1;
-  }
-  .header:hover & {
-    display: block;
-    opacity: 0.3;
   }
 }
 .content {
   display: none;
-  margin: 13px 12px 15px;
+  margin: 13px 12px 20px;
 }
 .footer {
   border-top: 1px solid var(--theme-wallet-settings-section-separator-color);
@@ -67,7 +64,8 @@
 
   dl {
     line-height: 1;
-    padding-left: 8px;
+    padding: 9px 0 0 8px;
+    width: calc(100% - 264px);
   }
 
   dt {
@@ -86,7 +84,19 @@
     font-size: 12px;
     line-height: 16px;
     margin-left: 10px;
-    max-height: 48px;
-    overflow-y: auto;
+    background: lightblue;
+    width: calc(100% - 74px);
+    word-wrap: break-word;
+    word-break: break-all;
+    white-space: normal;
+  }
+
+  .footerButtons {
+    white-space: nowrap;
+    .button {
+      height: 36px;
+      margin-left: 12px;
+      width: 120px;
+    }
   }
 }
diff --git a/source/renderer/app/components/wallet/summary/WalletSummaryAssets.js b/source/renderer/app/components/wallet/summary/WalletSummaryAssets.js
@@ -107,6 +107,10 @@ export default class WalletSummaryAssets extends Component<Props, State> {
           <BorderedBox className={styles.search}>SEARCH</BorderedBox>
         )}
         <BorderedBox>
+          <div className={styles.assetsColumns}>
+            <span>Token</span>
+            <span>Amount</span>
+          </div>
           {assets.map((asset) => (
             <WalletSummaryAsset
               key={asset.uniqueId}

diff --git a/source/renderer/app/components/wallet/summary/WalletSummaryAssets.scss b/source/renderer/app/components/wallet/summary/WalletSummaryAssets.scss
@@ -20,7 +20,6 @@
 }
 
 .component {
-  /* background-color: pink; */
   padding: 20px;
 
   .assetsLeftContainer {
@@ -85,6 +84,20 @@
   margin-bottom: 20px;
 }
 
+.assetsColumns {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 42px 10px 12px;
+  span {
+    color: var(--theme-bordered-box-text-color);
+    font-family: var(--font-semibold);
+    font-size: 10px;
+    line-height: 2;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+  }
+}
+
 .assetAmount {
   color: var(--theme-bordered-box-text-color);
   font-family: var(--font-light);