From b47bbab42815c7a8337ea44367d324097ce40c41 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 12 Aug 2020 16:14:24 +0200
Subject: [PATCH] Balance unit alignment (#3406)

* Balance unit alignment

* Small formatting updates
---
 packages/react-components/src/InputBalance.tsx | 17 ++++++++++++++---
 packages/react-query/src/FormatBalance.tsx     | 11 ++++++++---
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/react-components/src/InputBalance.tsx b/packages/react-components/src/InputBalance.tsx
index fb64ccae3b..165679ab87 100644
--- a/packages/react-components/src/InputBalance.tsx
+++ b/packages/react-components/src/InputBalance.tsx
@@ -105,9 +105,20 @@ export default React.memo(styled(InputBalance)`
   .ui.action.input.ui--Input > .buttons {
     align-items: stretch;
 
-    .ui.disabled.button.compact.floating.selection.dropdown.ui--SiDropdown {
-      border-style: solid;
-      opacity: 1 !important;
+    .ui--SiDropdown.ui.button.compact.floating.selection.dropdown {
+      &.disabled {
+        border-style: solid;
+        opacity: 1 !important;
+      }
+
+      > div.text:first-child {
+        font-size: 0.9em;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 0.5rem;
+        width: 3rem;
+      }
     }
   }
 `);
diff --git a/packages/react-query/src/FormatBalance.tsx b/packages/react-query/src/FormatBalance.tsx
index 506fac38ce..8f053f7bbe 100644
--- a/packages/react-query/src/FormatBalance.tsx
+++ b/packages/react-query/src/FormatBalance.tsx
@@ -28,16 +28,17 @@ const K_LENGTH = 3 + 1;
 function format (value: Compact<any> | BN | string, currency: string | null, withSi?: boolean, _isShort?: boolean, labelPost?: string): React.ReactNode {
   const [prefix, postfix] = formatBalance(value, { forceUnit: '-', withSi: false }).split('.');
   const isShort = _isShort || (withSi && prefix.length >= K_LENGTH);
+  const unitPost = currency ? <span className='ui--FormatBalance-unit'> {currency}</span> : '';
 
   if (prefix.length > M_LENGTH) {
-    const [major, rest] = formatBalance(value, { withUnit: !!currency }).split('.');
+    const [major, rest] = formatBalance(value, { withUnit: false }).split('.');
     const minor = rest.substr(0, 3);
     const unit = rest.substr(3);
 
-    return <>{major}.<span className='ui--FormatBalance-postfix'>{minor}</span>{unit}{labelPost || ''}</>;
+    return <>{major}.<span className='ui--FormatBalance-postfix'>{minor}</span>{unit}{unitPost}{labelPost || ''}</>;
   }
 
-  return <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && (<><span className='ui--FormatBalance-postfix'>{`000${postfix || ''}`.slice(-3)}</span></>)}{`${currency ? ` ${currency}` : ''}${labelPost || ''}`}</>;
+  return <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && (<><span className='ui--FormatBalance-postfix'>{`000${postfix || ''}`.slice(-3)}</span></>)}{unitPost}{labelPost || ''}</>;
 }
 
 function FormatBalance ({ children, className = '', isShort, label, labelPost, value, withCurrency = true, withSi }: Props): React.ReactElement<Props> {
@@ -74,6 +75,10 @@ export default React.memo(styled(FormatBalance)`
     vertical-align: baseline;
   }
 
+  .ui--FormatBalance-unit {
+    font-size: 0.9em;
+  }
+
   .ui--FormatBalance-value {
     text-align: right;