Hubert / Fixing design real account form (#6541)

* removing buggy code

* fixing form input alignment and fixing js styling code causing bugs.

* some fixes

* adding functionality to center text in select inputs

* fixing form, aligning everything left

* fixing also realws form

* styling on select fix

* centering text only on real account creation mobile

* removing text indent, breaking on safari

* refactoring code

Co-authored-by: Hubert Koster <hubertkoster@Huberts-MacBook-Pro.local>

Author: hubert-deriv

src/javascript/app/common/content_visibility.js

@@ -202,16 +202,23 @@ const ContentVisibility = (() => {
     };
 
     const centerSelect = ($el) => {
-        const option_width = getTextWidth($el.children(':selected').html());
-        const empty_space = '280' - option_width; // in mobile all select drop-downs are hardcoded to be at 280px in css
-        $el.css('text-indent', (empty_space / 2) - 7); // 7px is for the drop-down arrow
+        const option_width = getTextWidth($el.children(':selected').text());
+        const center_option_text = option_width / 2;
+        $el.css('text-indent', `calc(50% - ${center_option_text}px)`);
     };
 
     const centerAlignSelect = (should_init) => {
         $(window).off('resize', centerAlignSelect);
-        $center_select_m = ((typeof should_init === 'boolean' && should_init) || !$center_select_m) ? $('.center-select-m') : $center_select_m;
+        $('#frm_real #trading_experience_form select, #frm_real #financial_info_form select').addClass('center-select-m');
+        $center_select_m = ((typeof should_init === 'boolean' && should_init) || !$center_select_m) ? $('#frm_real .center-select-m') : $center_select_m;
 
         if ($(window).width() <= 480) {
+            const financial_form_selects = $('#frm_real select');
+            financial_form_selects.get().forEach((element) => {
+                const option_width = getTextWidth($(element).children(':selected').text());
+                const center_option_text = option_width / 2;
+                $(element).css('text-indent', `calc(50% - ${center_option_text}px)`);
+            });
             $center_select_m.on('change', function() {
                 centerSelect($(this));
             });

src/sass/app/websocket_pages.scss

@@ -91,10 +91,51 @@
     }
 }
 
-#financial-form {
+#financial-form, .realws-content {
+    #lbl_residence {
+        text-align: left;
+        margin-left: 0.5rem;
+    }
+    #date_of_birth {
+        margin: 0;
+        text-indent: 0;
+    }
+    input:not([type=checkbox]), .select-dropdown, #citizen {
+        width: 260px;
+    }
+    #citizen, #address_postcode {
+        box-sizing: unset;
+        -webkit-box-sizing: unset;
+    }
+
     @media screen and (max-width: 480px) {
-        div.select {
-            width: calc(100% - 3rem);
+        select, div.select {
+            width: 100%;
+            height: 2rem;
+        }
+        .place_of_birth_container .gr-8 {
+            text-align: left;
+        }
+        div.select:after {
+            top: 12px;
+        }
+        input:not([type=checkbox]), #citizen {
+            width: calc(100% - 1.2rem);
+            height: 1.5rem;
+            text-align: left;
+        }
+        #source_of_wealth {
+            min-width: 0;
+        }
+        .select2-container {
+            width: 100% !important;
+        }
+        .select2-selection {
+            text-align: left;
+        }
+        div.select + span {
+            width: 100%;
+            height: 1.9rem;
         }
     }
 }
@@ -335,12 +376,27 @@
 }
 
 .realws-content {
-    div.select-dropdown {
-        width: 100%;
+    #lbl_residence {
+        margin-left: 0.5rem;
+        text-align: left;
+    }
+    #date_of_birth {
+        margin: 0;
+        text-indent: 0;
     }
 
     @media screen and (max-width: 480px) {
-        width: 280px !important;
+        #lbl_residence {
+            text-align: center;
+            margin-left: -0.5rem;
+        }
+        #address_form #address_postcode {
+            width: calc(100% - 1.2rem);
+            height: 1.5rem;
+        }
+        #secret_answer, .select2-selection, input:not([type=checkbox]) {
+            text-align: center;
+        }
     }
 }
 

src/templates/_common/components/forms_common_rows.jsx

@@ -72,7 +72,9 @@ export const Residence = ({ className, row_class, row_id }) => (
         className={className || ''}
         label={it.L('Country of residence')}
     >
-        <label id='lbl_residence' />
+        <div id='residence_container'>
+            <label id='lbl_residence' />
+        </div>
     </FormRow>
 );
 
@@ -158,7 +160,7 @@ export const Phone = ({ hint, row_class, row_id }) => (
 );
 
 export const SecretQuestion = () => (
-    <FormRow type='select' id='secret_question' label={it.L('Secret question')}>
+    <FormRow type='select' id='secret_question' className='center-select-m' label={it.L('Secret question')}>
         <option value='Favourite dish'>{it.L('Favourite dish')}</option>
         <option value="Mother's maiden name">{it.L('Mother\'s maiden name')}</option>
         <option value='Name of your pet'>{it.L('Name of your pet')}</option>

src/templates/app/new_account/financial.jsx

@@ -43,7 +43,9 @@ const Financial = () => (
                     <LastName className='input-disabled' />
                     <DateOfBirth className='input-disabled' />
                     <Citizenship />
-                    <FormRow type='select' id='place_of_birth' label={it.L('Place of birth')} attributes={{ single: 'single' }} />
+                    <div className='place_of_birth_container'>
+                        <FormRow type='select' id='place_of_birth' label={it.L('Place of birth')} attributes={{ single: 'single' }} />
+                    </div>
                     <Residence />
                     <AccountOpeningReason />
                     <Phone />

src/templates/app/new_account/real.jsx

@@ -37,7 +37,9 @@ const Real = () => (
                 <LastName className='input-disabled' />
                 <DateOfBirth className='input-disabled' />
                 <Citizenship row_class='invisible' />
-                <FormRow type='select' id='place_of_birth' label={it.L('Place of birth')} attributes={{ single: 'single' }} />
+                <div className='place_of_birth_container'>
+                    <FormRow type='select' id='place_of_birth' label={it.L('Place of birth')} attributes={{ single: 'single' }} />
+                </div>
                 <Residence />
                 <Phone />
                 <AccountOpeningReason />