Merge pull request binary-com#3 from khalid-deriv/p2p

Buy/sell responsive design fix
khalid-deriv · Feb 8, 2022 · f0cedc6 · f0cedc6
2 parents 908ff98 + 1b000cf
commit f0cedc6
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 23 deletions.
diff --git a/packages/p2p/src/components/buy-sell/buy-sell-header.jsx b/packages/p2p/src/components/buy-sell/buy-sell-header.jsx
@@ -66,7 +66,7 @@ const BuySellHeader = ({ is_visible, table_type, setTableType }) => {
                         className='buy-sell__header-row--filter'
                         icon='IcFilter'
                         onClick={() => buy_sell_store.setIsFilterModalOpen(true)}
-                        size={42}
+                        size={40}
                     />
                 </div>
             </div>

diff --git a/packages/p2p/src/components/buy-sell/buy-sell-header.scss b/packages/p2p/src/components/buy-sell/buy-sell-header.scss
@@ -60,6 +60,9 @@
         flex-direction: row;
 
         @include mobile {
+            display: grid;
+            grid-template-columns: 1fr 50px 50px;
+            column-gap: 1rem;
             border-top: 1px solid var(--general-section-1);
         }
 
@@ -70,6 +73,12 @@
             display: flex;
             margin-left: 0.8rem;
             padding: 1.3rem;
+
+            @include mobile {
+                grid-column: 3;
+                justify-self: center;
+                margin-right: 2rem;
+            }
         }
     }
 }

diff --git a/packages/p2p/src/components/buy-sell/buy-sell-row.jsx b/packages/p2p/src/components/buy-sell/buy-sell-row.jsx
@@ -79,7 +79,7 @@ const BuySellRow = ({ row: advert }) => {
                         <Text as='div' color='profit-success' line_height='m' size='s' weight='bold'>
                             {price_display} {local_currency}
                         </Text>
-                        <Text as='div' color='general' line_height='m' size='xxs'>
+                        <Text as='div' color='less-prominent' line_height='m' size='xxs'>
                             <Localize
                                 i18n_default_text='Limit {{ min_order }}–{{ max_order }} {{ currency }}'
                                 values={{
@@ -90,7 +90,7 @@ const BuySellRow = ({ row: advert }) => {
                             />
                         </Text>
                     </div>
-                    <div>
+                    <div className='buy-sell-row__payment-methods-list'>
                         {payment_method_names
                             ? payment_method_names.map((payment_method, key) => {
                                   return (
@@ -103,6 +103,7 @@ const BuySellRow = ({ row: advert }) => {
                     </div>
                     {!is_my_advert && (
                         <Button
+                            className='buy-sell-row__button'
                             is_disabled={general_store.is_barred}
                             large
                             onClick={() => buy_sell_store.setSelectedAdvert(advert)}

diff --git a/packages/p2p/src/components/buy-sell/buy-sell-row.scss b/packages/p2p/src/components/buy-sell/buy-sell-row.scss
@@ -2,7 +2,7 @@
     @include mobile {
         border-bottom: 1px solid var(--general-section-1);
         padding: 1.6rem;
-        height: 150px;
+        height: 200px;
         display: flex;
         flex-direction: column;
     }
@@ -29,6 +29,21 @@
         display: flex;
         flex-direction: row;
         justify-content: space-between;
+
+        @include mobile {
+            display: grid;
+            grid-template-columns: 3fr 1fr;
+            grid-template-rows: 2fr 1fr;
+        }
+    }
+
+    &__payment-methods-list {
+        @include mobile {
+            grid-column: 1 / 3;
+            grid-row: 2;
+            display: flex;
+            margin-left: 4rem;
+        }
     }
 
     &__no-match {
@@ -42,26 +57,42 @@
     &__payment-method {
         display: flex;
         flex-wrap: wrap;
+        align-items: center;
+        border: 1px solid var(--border-normal);
+        border-radius: 0.4rem;
+        display: flex;
+        flex-direction: row;
+        padding: 0 0.8rem;
+        margin: 0.25rem;
+        width: fit-content;
 
-        &--label {
-            align-items: center;
-            border: 1px solid var(--border-normal);
-            border-radius: 0.4rem;
-            display: flex;
-            flex-direction: row;
-            padding: 0 0.8rem;
-            margin: 0.25rem;
-            width: fit-content;
+        @include mobile {
+            padding: 0.8rem;
+        }
+
+        @media (max-width: 320px) {
+            padding: 0.4rem;
+            font-size: 9px;
         }
     }
 
+    &__button {
+        align-self: flex-start;
+    }
+
     &__rate {
+        grid-column: 1;
+        grid-row: 1;
         display: flex;
         flex-direction: column;
 
         > :last-child {
             margin-top: 0.8rem;
         }
+
+        @include mobile {
+            margin-left: 4rem;
+        }
     }
 
     &__table-cell {

diff --git a/packages/p2p/src/components/buy-sell/search-box.scss b/packages/p2p/src/components/buy-sell/search-box.scss
@@ -4,17 +4,13 @@
 
     @include mobile {
         margin: 0.8rem 0 1rem 1.6rem;
-        width: 25rem;
+        width: 95%;
 
         .dc-input {
             height: 4rem;
         }
     }
 
-    @media (max-width: 320px) {
-        width: 14rem;
-    }
-
     &__cross-icon {
         cursor: pointer;
     }
@@ -32,6 +28,8 @@
                 width: unset;
 
                 @include mobile {
+                    grid-column: 1;
+                    width: 100%;
                     padding: 0 2.8rem 0 0.4rem;
                 }
             }

diff --git a/packages/p2p/src/components/buy-sell/sort-dropdown.scss b/packages/p2p/src/components/buy-sell/sort-dropdown.scss
@@ -9,8 +9,8 @@
 
     @include mobile {
         height: 4rem;
-        margin: 0.8rem 1.6rem 1rem 0;
-        width: 16rem;
+        width: 4rem;
+        margin: 0.5rem;
 
         .dc-dropdown__display {
             height: 4rem;
@@ -50,9 +50,10 @@
         padding: 0.8rem;
 
         @include mobile {
-            height: 3.2rem;
-            margin: 0.8rem 1.6rem 1rem 0;
-            width: 3.2rem;
+            grid-column: 2;
+            justify-self: center;
+            height: 4rem;
+            width: 4rem;
         }
     }
 }