Hirad - Shon Tzu/Feature: Branding/87860 (#7583)

* fix: initializing

* fix: added the necessary icons

* fix: rebranding of traders-hub and onboarding

* fix: changed deriv logo in header

* fix: made changes according to recommendations

* fix: changed cfds and modals icons

* fix: added new icons for menu

* fix: fixing the prop types error

* Revert "fix: transfer_to_cashier_error (#7547)"

This reverts commit 50f384b.

* fix: cleaner rebranding attempt

* fix: trader hub header logo

* fix: dark mode in traders hub

* fix: made logo size in headers consistent

* fix: revert link_to back to href in platform-config that broke the navigation

* fix: remove unnecesary code in platform-config

* fix: one line

* fix: changed icon naming for dark and light mode and added PropTypes to components

* refactor: update the color using var keyword in the svg file to automatically support both colors

* fix: invisible icon text, use currentColor instead of var in svg

* revert: reverted last 2 commits that cause icon issues

* fix: testing the branch

* fix: removed the redundant smart trader

* fix: replacing the redundant icons

* fix: fixed all of the issues with rebranding icons

* fix: removed the duplicate icons

* fix: removed dark mode icons and used one icon for both light and dark mode

* fix: fixed the circle ci issues

* fix: change D initials to Deriv and swap colors for real and demo in traderhub dropdown

* refactor: change the wallet balance color based on account type(demo/real)

* refactor: removed unused code

* fix: made changes based on reviews

* refactor: removed unnecesary !important property

* fix: made changes according to the recommendations

* refactor: fixed dark mode handling for icons

* fix: removed all of the redundant icons

* fix: removed the redundant test case

* fix: made changes to dxtrade icon

* revert: reverted the test case for dark mode that was deleted

* fix: changed the color of cross icon in the onboarding page

* fix: pulled from main branch and rebuilt project

* fix: remove unused is_dark_mode props

* fix: remove mock connect store and props from test cases

* fix: fixed the code smell related to the cashier provider store

* fix: removed deriv-apps redundant icon

* fix: added description tags in icons for screenreader

* refactor: refactor based on review

* refactor: added comments on the purpose of the <desc> tag

* fix: forgot to change prop name

* fix: minified one icon

* fix: remove unnecesary curly braces

* Round-up patches based on review

refactor: added comments on the purpose of the <desc> tag
fix: forgot to change prop name
fix: minified one icon
fix: remove unnecesary curly braces

* fix: fix wrong colors in demo and real

* fix: fixed the alignment issue if deriv logo in traders-hub dashboard

* fix: update deriv icon in footer

* fix: update DerivX icon

* fix: added new icons to transfer page of cashier

* fix: udpate test cases

* fix: remove redundatnt test case

* fix: change account_type to all in test case

* fix: increased the floatPrecision of svg-loader

* fix: changed the icon of cashier transfer page for derivx

* fix: fix unit test in cfd-download-container

* feat: new branding for email and passwords page

* fix: update favicon

* fix: updated favicons in core

* fix: updated favicons in trader and cfd packages

* fix: remove -copy suffix from icon names

* revert: revert to old DerivX icon for non-tradershub pages

* fix: fixed the white line issue of icons by adding the new ones

* revert: undo favicon changes in cfd and trader packages

* fix: fixed the icon size of deriv logo in trader's hub

* fix: alignment of deriv logo in onboarding page

* remove comment

* style: use rem instead of %

* fix: update derivx logo in cashier page and trade modal

* fix: derivx icon in trade terminal

* fix: localize icon description

* fix: deriv logo alignment in onboarding page

* fix: fixed aliasing in smarttrader and binarybot icons

* fix: aliased icons in email-and-passwords page

* fix: options icon dark and light mode

* fix: derivx logo in trade modal, transfer modal, and cashier

* fix: minify icon

* fix: scaled down deriv logo in onboarding page

* fix: made latest changes for rebranding

* fix: finishing the improvement cards for rebranding

* fix: changed font colors

* fix: added the demo content to our label

* fix: removed the demo from deriv platforms

* fix: replaced account type and currency in the currency switcher

---------

Co-authored-by: shontzu-deriv <shon.tzu@regentmarkets.com>
Co-authored-by: Hirad <hirad@Hirads-MacBook-Pro.local>
Co-authored-by: Matin shafiei <matin@deriv.com>
Co-authored-by: shontzu <108507236+shontzu-deriv@users.noreply.github.com>

packages/account/src/Components/self-exclusion/__tests__/self-exclusion-article-content.spec.js

@@ -10,7 +10,7 @@ describe('<SelfExclusionArticleContent />', () => {
     let mock_context = {};
     const descr_text = 'About trading limits and self-exclusion';
     const eu_item =
-        'When you set your limits or self-exclusion, they will be aggregated across all your account types in DTrader and DBot. For example, the losses made on both platforms will add up and be counted towards the loss limit you set.';
+        'When you set your limits or self-exclusion, they will be aggregated across all your account types in Deriv Trader and Deriv Bot. For example, the losses made on both platforms will add up and be counted towards the loss limit you set.';
     const eu_uk_item =
         'These trading limits are optional, and you can strengthen them at any time. If you don’t wish to set a specific limit, leave the field blank. If you live in the United Kingdom, Customer Support can only remove or weaken your trading limits after 24 hours of receiving the request. If you live in the Isle of Man, Customer Support can only remove or weaken your trading limits after your trading limit period has expired.';
     const not_app_settings_eu_descr =

packages/account/src/Components/self-exclusion/__tests__/self-exclusion-article.spec.js

@@ -23,7 +23,7 @@ describe('<SelfExclusionArticle />', () => {
     const eu_item =
         /these trading limits and self-exclusion help you control the amount of money and time you spend on deriv.com and exercise/i;
     const non_eu_item =
-        /these self-exclusion limits help you control the amount of money and time you spend trading on dtrader, dbot, smarttrader and binary bot on deriv. the limits you set here will help you exercise/i;
+        /these self-exclusion limits help you control the amount of money and time you spend trading on deriv trader, deriv bot, smarttrader and binary bot on deriv. the limits you set here will help you exercise/i;
 
     beforeEach(() => {
         mock_platform_context = {

packages/account/src/Sections/Security/Passwords/deriv-password.jsx

@@ -6,10 +6,8 @@ import { Localize, localize } from '@deriv/translations';
 import FormSubHeader from 'Components/form-sub-header';
 import SentEmailModal from 'Components/sent-email-modal';
 import DerivComLogo from 'Assets/ic-brand-deriv-red.svg';
-import DerivGoLight from 'Assets/ic-brand-deriv-go-light.svg';
-import DerivGoDark from 'Assets/ic-brand-deriv-go-dark.svg';
 
-const DerivPassword = ({ email, is_dark_mode_on, is_social_signup, social_identity_provider }) => {
+const DerivPassword = ({ email, is_social_signup, social_identity_provider }) => {
     const [is_sent_email_modal_open, setIsSentEmailModalOpen] = React.useState(false);
 
     const onClickSendEmail = () => {
@@ -53,23 +51,35 @@ const DerivPassword = ({ email, is_dark_mode_on, is_social_signup, social_identi
                         />
                     </Text>
                     <div className='passwords-platform__logo-container'>
-                        <DerivComLogo className='passwords-platform__single-icon' />
+                        <DerivComLogo />
                         <Text line_height='l' size='xs' weight='bold'>
                             {brand_website_name}
                         </Text>
                     </div>
                     <div className='passwords-platform__icons'>
                         <Popover alignment='bottom' message={platform_name_trader}>
-                            <Icon icon={getPlatformSettings('trader').icon} size={32} />
+                            <Icon
+                                icon={`${getPlatformSettings('trader').icon  }-dashboard`}
+                                size={32}
+                                description='trader'
+                            />
                         </Popover>
                         <Popover alignment='bottom' message={platform_name_dbot}>
-                            <Icon icon={getPlatformSettings('dbot').icon} size={32} />
+                            <Icon icon={`${getPlatformSettings('dbot').icon  }-dashboard`} size={32} description='dbot' />
                         </Popover>
                         <Popover alignment='bottom' message={platform_name_smarttrader}>
-                            <Icon icon={getPlatformSettings('smarttrader').icon} size={32} />
+                            <Icon
+                                icon={`${getPlatformSettings('smarttrader').icon  }-dashboard`}
+                                size={32}
+                                description='smarttrader'
+                            />
                         </Popover>
                         <Popover alignment='bottom' message={platform_name_go}>
-                            {is_dark_mode_on ? <DerivGoDark /> : <DerivGoLight />}
+                            <Icon
+                                icon={`${getPlatformSettings('go').icon  }-dashboard`}
+                                size={32}
+                                description='derivgo'
+                            />
                         </Popover>
                     </div>
                 </React.Fragment>

packages/account/src/Sections/Security/Passwords/passwords-platform.jsx

@@ -54,7 +54,7 @@ const PasswordsPlatform = ({ email, has_dxtrade_accounts, has_mt5_accounts }) =>
                         </Text>
                         <div className='passwords-platform__content'>
                             <Popover alignment='bottom' message='Deriv MT5'>
-                                <Icon icon='IcBrandDmt5' size={32} />
+                                <Icon icon={`${getPlatformSettings('mt5').icon  }-dashboard`} size={32} />
                             </Popover>
                             <Button
                                 className='account__passwords-footer-btn'
@@ -77,7 +77,7 @@ const PasswordsPlatform = ({ email, has_dxtrade_accounts, has_mt5_accounts }) =>
                         </Text>
                         <div className='passwords-platform__content'>
                             <Popover alignment='bottom' message={platform_name_dxtrade}>
-                                <Icon icon={getPlatformSettings('dxtrade').icon} size={32} />
+                                <Icon icon={`${getPlatformSettings('dxtrade').icon  }-dashboard`} size={32} />
                             </Popover>
                             <Button
                                 className='account__passwords-footer-btn'

packages/account/src/Styles/account.scss

@@ -707,10 +707,6 @@ $MIN_HEIGHT_FLOATING: calc(
                 margin-top: 1.6rem;
             }
 
-            &__single-icon {
-                margin-right: 0.4rem;
-            }
-
             &__icons {
                 display: inline-grid;
                 grid-column-gap: 0.8rem;