From b88937a964248a009c31cbfa6103f73c1a73ea1d Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Mon, 12 Sep 2022 18:11:58 +0800
Subject: [PATCH 1/2] fixed bugs for blocked user count in my profile

---
 .../my-profile-name/my-profile-name.jsx       | 16 +--
 .../src/components/my-profile/my-profile.scss | 97 +++++++++++++++----
 2 files changed, 86 insertions(+), 27 deletions(-)

diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/my-profile-name.jsx b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/my-profile-name.jsx
index cb05b3a4f5ba..fcb38d15e09e 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/my-profile-name.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/my-profile-name.jsx
@@ -10,6 +10,7 @@ import MyProfilePrivacy from '../my-profile-privacy';
 import StarRating from 'Components/star-rating';
 import RecommendedBy from 'Components/recommended-by';
 import BlockUserCount from 'Components/advertiser-page/block-user/block-user-count';
+import classNames from 'classnames';
 
 const MyProfileName = () => {
     const { general_store, my_profile_store } = useStores();
@@ -82,11 +83,6 @@ const MyProfileName = () => {
                                             recommended_count={recommended_count}
                                         />
                                     </div>
-                                    <DesktopWrapper>
-                                        <div className='my-profile-name--rating__row'>
-                                            <BlockUserCount />
-                                        </div>
-                                    </DesktopWrapper>
                                 </React.Fragment>
                             ) : (
                                 <div className='my-profile-name--rating__row'>
@@ -96,6 +92,9 @@ const MyProfileName = () => {
                                 </div>
                             )}
                             <DesktopWrapper>
+                                <div className='my-profile-name--rating__row'>
+                                    <BlockUserCount />
+                                </div>
                                 <Text
                                     className='my-profile-name--rating__row'
                                     color='less-prominent'
@@ -112,7 +111,12 @@ const MyProfileName = () => {
                                 </Text>
                             </DesktopWrapper>
                             <MobileWrapper>
-                                <div className='my-profile-name--row'>
+                                <div
+                                    className={classNames('my-profile-name--row', {
+                                        'my-profile-name--row--rated': rating_average,
+                                        'my-profile-name--row--no-rating': !rating_average,
+                                    })}
+                                >
                                     <div className='my-profile-name--rating__row'>
                                         <BlockUserCount />
                                     </div>
diff --git a/packages/p2p/src/components/my-profile/my-profile.scss b/packages/p2p/src/components/my-profile/my-profile.scss
index bee893b3ff41..36a1d3ce8f95 100644
--- a/packages/p2p/src/components/my-profile/my-profile.scss
+++ b/packages/p2p/src/components/my-profile/my-profile.scss
@@ -1,41 +1,96 @@
-.my-profile {
+.my-profile-name {
+    align-items: center;
     display: flex;
+    margin-bottom: 2.4rem;
+    width: 100%;
 
     @include mobile {
-        display: block;
+        margin: 0 0 2.4rem;
     }
 
-    &__content {
+    &__avatar {
+        @include mobile {
+            align-self: flex-start;
+            margin: 0 0 1;
+        }
+    }
+
+    &--column {
         display: flex;
         flex-direction: column;
-        flex: 1;
-        overflow-x: hidden;
+    }
 
-        &::-webkit-scrollbar {
-            display: none;
-        }
+    &__name {
+        padding-left: 0.8rem;
+        width: 100%;
 
-        & .p2p-toggle-container {
-            margin-bottom: 3.4rem;
+        @include mobile {
+            width: unset;
         }
+    }
+
+    &--privacy {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
+    }
+
+    &--rating {
+        display: flex;
+        flex-direction: row;
+        padding: 0.8rem 0;
 
-        @include tablet-up {
-            max-width: 100%;
-            min-width: 672px;
-        }
         @include mobile {
-            display: block;
-            padding: 0 1.6rem;
-            width: 100vw;
+            flex-flow: row wrap;
+        }
 
-            .dc-mobile-full-page-modal {
-                opacity: 1 !important;
+        &__row {
+            align-items: center;
+            border-right: 1px solid var(--general-section-1);
+            display: flex;
+            padding: 0 0.8rem;
+
+            &--last {
+                @include mobile {
+                    border-right: none;
+                }
+            }
+
+            &:first-child {
+                padding-left: unset;
+            }
+
+            &:last-child {
+                border-right: unset;
+            }
+
+            .filled-icons {
+                pointer-events: none;
             }
         }
+
+        &__text {
+            display: flex;
+            gap: 0.8rem;
+            margin-left: 0.4rem;
+        }
     }
 
-    &__navigation {
+    &--row {
         display: flex;
-        justify-content: space-between;
+        flex-direction: row;
+
+        &--no-rating {
+            @include mobile {
+                margin-left: 0.7rem;
+            }
+        }
+
+        &--rated {
+            @include mobile {
+                margin-top: 1rem;
+            }
+        }
     }
 }

From 186d002a539b603c3c9f6009ad745f23843e09f0 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Tue, 13 Sep 2022 09:17:40 +0800
Subject: [PATCH 2/2] reverted changes from my profile and change my profile
 name

---
 .../my-profile-name/my-profile-name.scss      | 13 ++-
 .../src/components/my-profile/my-profile.scss | 97 ++++---------------
 2 files changed, 32 insertions(+), 78 deletions(-)

diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/my-profile-name.scss b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/my-profile-name.scss
index ac57d8a4ee2a..36a1d3ce8f95 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/my-profile-name.scss
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/my-profile-name.scss
@@ -80,8 +80,17 @@
     &--row {
         display: flex;
         flex-direction: row;
-        @include mobile {
-            margin-top: 1rem;
+
+        &--no-rating {
+            @include mobile {
+                margin-left: 0.7rem;
+            }
+        }
+
+        &--rated {
+            @include mobile {
+                margin-top: 1rem;
+            }
         }
     }
 }
diff --git a/packages/p2p/src/components/my-profile/my-profile.scss b/packages/p2p/src/components/my-profile/my-profile.scss
index 36a1d3ce8f95..bee893b3ff41 100644
--- a/packages/p2p/src/components/my-profile/my-profile.scss
+++ b/packages/p2p/src/components/my-profile/my-profile.scss
@@ -1,96 +1,41 @@
-.my-profile-name {
-    align-items: center;
+.my-profile {
     display: flex;
-    margin-bottom: 2.4rem;
-    width: 100%;
 
     @include mobile {
-        margin: 0 0 2.4rem;
+        display: block;
     }
 
-    &__avatar {
-        @include mobile {
-            align-self: flex-start;
-            margin: 0 0 1;
-        }
-    }
-
-    &--column {
+    &__content {
         display: flex;
         flex-direction: column;
-    }
-
-    &__name {
-        padding-left: 0.8rem;
-        width: 100%;
+        flex: 1;
+        overflow-x: hidden;
 
-        @include mobile {
-            width: unset;
+        &::-webkit-scrollbar {
+            display: none;
         }
-    }
 
-    &--privacy {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        width: 100%;
-    }
-
-    &--rating {
-        display: flex;
-        flex-direction: row;
-        padding: 0.8rem 0;
-
-        @include mobile {
-            flex-flow: row wrap;
+        & .p2p-toggle-container {
+            margin-bottom: 3.4rem;
         }
 
-        &__row {
-            align-items: center;
-            border-right: 1px solid var(--general-section-1);
-            display: flex;
-            padding: 0 0.8rem;
-
-            &--last {
-                @include mobile {
-                    border-right: none;
-                }
-            }
-
-            &:first-child {
-                padding-left: unset;
-            }
-
-            &:last-child {
-                border-right: unset;
-            }
-
-            .filled-icons {
-                pointer-events: none;
-            }
+        @include tablet-up {
+            max-width: 100%;
+            min-width: 672px;
         }
+        @include mobile {
+            display: block;
+            padding: 0 1.6rem;
+            width: 100vw;
 
-        &__text {
-            display: flex;
-            gap: 0.8rem;
-            margin-left: 0.4rem;
+            .dc-mobile-full-page-modal {
+                opacity: 1 !important;
+            }
         }
     }
 
-    &--row {
+    &__navigation {
         display: flex;
-        flex-direction: row;
-
-        &--no-rating {
-            @include mobile {
-                margin-left: 0.7rem;
-            }
-        }
-
-        &--rated {
-            @include mobile {
-                margin-top: 1rem;
-            }
-        }
+        justify-content: space-between;
     }
 }