Ameerul /Bug 69674 Improve floating rate field to handle large rate v…

…alues (deriv-com#6286) * changed the margin-top for mobile view for buy-sell * merging upstream master * changed the payment methods list modal and wrapped the text for long bank names * reverted changes * changed floating rate field and ad type styling * removed code from other PR * changed input field value text * removed local currency from market rate * changed floating rate spec file * changed floating rate msg font size to small * fixed font size
adrienne-deriv · Oct 25, 2022 · 805c307 · 805c307
1 parent 2aef98b
commit 805c307
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/packages/p2p/src/components/floating-rate/__test__/floating-rate.spec.js b/packages/p2p/src/components/floating-rate/__test__/floating-rate.spec.js
@@ -39,6 +39,6 @@ describe('<FloatingRate/>', () => {
     it('should render the exchange rate in hint', () => {
         render(<FloatingRate fiat_currency='AED' local_currency='INR' />);
 
-        expect(screen.getByText('1 AED = 100.00 INR')).toBeInTheDocument();
+        expect(screen.getByText('1 AED = 100.00')).toBeInTheDocument();
     });
 });
diff --git a/packages/p2p/src/components/floating-rate/floating-rate.jsx b/packages/p2p/src/components/floating-rate/floating-rate.jsx
@@ -86,15 +86,14 @@ const FloatingRate = ({
                     </Text>
                     <Text
                         as='span'
-                        size='xs'
+                        size='xxs'
                         color='prominent'
                         weight='normal'
                         line_height='xs'
                         className='floating-rate__mkt-rate--msg'
                     >
                         1 {fiat_currency} ={' '}
-                        {removeTrailingZeros(formatMoney(local_currency, floating_rate_store.exchange_rate, true, 6))}{' '}
-                        {local_currency}
+                        {removeTrailingZeros(formatMoney(local_currency, floating_rate_store.exchange_rate, true, 6))}
                     </Text>
                 </div>
             </section>

diff --git a/packages/p2p/src/components/floating-rate/floating-rate.scss b/packages/p2p/src/components/floating-rate/floating-rate.scss
@@ -91,7 +91,6 @@
             height: 18px;
             left: 8px;
             top: 18px;
-            font-style: normal;
             flex: none;
             order: 2;
             flex-grow: 0;
@@ -143,6 +142,7 @@
             border: unset;
             background-color: unset;
             padding: unset;
+            font-size: small;
             &:focus {
                 border-color: unset;
             }

diff --git a/packages/p2p/src/components/my-ads/ad-type.scss b/packages/p2p/src/components/my-ads/ad-type.scss
@@ -1,15 +1,19 @@
 .ad-type {
     display: flex;
+    flex-direction: row;
     align-items: center;
-    justify-content: space-around;
+
+    @include mobile {
+        justify-content: flex-end;
+    }
 
     &__badge {
         align-items: center;
         border-radius: 0.4rem;
         border: 1px solid var(--border-normal);
         display: flex;
         flex-direction: row;
-        margin: 0.25rem;
+        margin: 0.3rem 0.5rem 0.3rem 0;
         padding: 0.1rem 0.8rem;
         width: fit-content;
     }