From 3ee40dd6e32a57665f25cac1db721670d303f335 Mon Sep 17 00:00:00 2001
From: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Date: Sun, 13 Feb 2022 16:30:08 +0330
Subject: [PATCH] change social unlink button style

---
 .../Security/Passwords/deriv-password.jsx     | 26 +++++++++----------
 packages/account/src/Styles/account.scss      |  4 +++
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/account/src/Sections/Security/Passwords/deriv-password.jsx b/packages/account/src/Sections/Security/Passwords/deriv-password.jsx
index 04acb9f1279d..11c88aa09e27 100644
--- a/packages/account/src/Sections/Security/Passwords/deriv-password.jsx
+++ b/packages/account/src/Sections/Security/Passwords/deriv-password.jsx
@@ -28,7 +28,10 @@ const DerivPassword = ({ email, is_dark_mode_on, is_social_signup, social_identi
             <div className='account__passwords-wrapper'>
                 <React.Fragment>
                     <Text as='p' className='passwords-platform__desc' color='prominent' size='xs' weight='lighter'>
-                        <Localize i18n_default_text='Your Deriv password is for logging in to your Deriv account.' />
+                        <Localize
+                            i18n_default_text='Use the <0>Deriv password</0>  to log in yo Deriv.com, Deriv Go, Dtrader, SmartTrader, and DBot.'
+                            components={[<strong key={0} />]}
+                        />
                     </Text>
                     <Text as='p' className='passwords-platform__desc' color='prominent' size='xs' weight='lighter'>
                         <Localize i18n_default_text='Apps you can use with your Deriv login:' />
@@ -72,31 +75,28 @@ const DerivPassword = ({ email, is_dark_mode_on, is_social_signup, social_identi
                                     />
                                 </Text>
                             </div>
-                            <div className='account__passwords-linked'>
+                            <div
+                                className='account__passwords-linked'
+                                onClick={() => {
+                                    setIsUnlinkModalOpen(true);
+                                    setIsSentEmailModalOpen(true);
+                                }}
+                            >
                                 {social_identity_provider ? (
                                     <React.Fragment>
                                         <Icon icon={`IcStock${capitalized_identifier}`} size={16} />
                                         <Text size='xs'>
                                             <Localize
-                                                i18n_default_text='Linked with {{identifier_title}}'
+                                                i18n_default_text='Unlink from {{identifier_title}}'
                                                 values={{ identifier_title: capitalized_identifier }}
                                             />
                                         </Text>
+                                        <Icon icon='IcChevronRight' size={16} />
                                     </React.Fragment>
                                 ) : (
                                     ''
                                 )}
                             </div>
-                            <Button
-                                onClick={() => {
-                                    setIsUnlinkModalOpen(true);
-                                    setIsSentEmailModalOpen(true);
-                                }}
-                                type='button'
-                                text={localize('Unlink')}
-                                tertiary
-                                large
-                            />
                         </div>
                     </React.Fragment>
                 ) : (
diff --git a/packages/account/src/Styles/account.scss b/packages/account/src/Styles/account.scss
index 2002d0773997..006f6247cedf 100644
--- a/packages/account/src/Styles/account.scss
+++ b/packages/account/src/Styles/account.scss
@@ -623,6 +623,10 @@ $MIN_HEIGHT_FLOATING: calc(
             border-radius: $BORDER_RADIUS;
             width: fit-content;
             height: 4rem;
+            cursor: pointer;
+            &:hover {
+                background-color: var(--general-active);
+            }
         }
 
         @include mobile {