Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mahdi.aryayi / Fix design bugs #447

Merged
merged 6 commits into from
Oct 14, 2019
Merged

Mahdi.aryayi / Fix design bugs #447

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9f9c97e
Updated button styling
Oct 7, 2019
fdb7355
Hiding Verification menu on settings
Oct 9, 2019
d6008fe
Added note to confirm button
Oct 9, 2019
2df38e9
Applied fixes in PR review
Oct 10, 2019
b5c7045
Changed text color form sass variable to css variable
Oct 10, 2019
90f6370
Returned text of button to submit
Oct 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 19 additions & 17 deletions packages/trader/src/App/Components/Elements/SideMenu/side-menu-headers.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,25 @@ const SubHeaderLayout = ({ children }) => <div className='side-menu__sub-header-

const MainHeaders = ({ items, handleSubroute, active_title }) => (
<>
{items.map(item => (
<div key={item.title} className='side-menu'>
<VerticalTabHeader
item={item}
className={classNames('side-menu__header', {
'side-menu__header--active' : item.title === active_title,
'side-menu__header--disabled': item.is_disabled,
})}
onChange={handleSubroute}
>
<Icon
icon='IconChevronRight'
className='side-menu__icon'
/>
</VerticalTabHeader>
</div>
))}
{items
.filter(item => !item.is_hidden)
.map(item => (
<div key={item.title} className='side-menu'>
<VerticalTabHeader
item={item}
className={classNames('side-menu__header', {
'side-menu__header--active' : item.title === active_title,
'side-menu__header--disabled': item.is_disabled,
negarn marked this conversation as resolved.
Show resolved Hide resolved
})}
onChange={handleSubroute}
>
<Icon
icon='IconChevronRight'
className='side-menu__icon'
/>
</VerticalTabHeader>
</div>
))}
</>
);

Expand Down
1 change: 0 additions & 1 deletion packages/trader/src/App/Components/Elements/VerticalTabs/vertical-tab-content-container.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ class VerticalTabContentContainer extends React.PureComponent {
/>
}
</div>

</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/trader/src/Modules/Account/Containers/account.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ class Account extends React.Component {
// TODO: modify account route to support disabled
this.props.routes.forEach((menu_item) => {
if (menu_item.title === 'Verification') {
menu_item.is_disabled = !is_high_risk_client;
menu_item.is_hidden = !is_high_risk_client;
}
if (menu_item.title === 'Profile') {
menu_item.subroutes.forEach(route => {
Expand Down
9 changes: 8 additions & 1 deletion packages/trader/src/Modules/Account/Sections/Profile/PersonalDetails/personal-details.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// import PropTypes from 'prop-types';
import React from 'react';
import { Formik, Field } from 'formik';
import classNames from 'classnames';
import {
Autocomplete,
Checkbox,
Expand Down Expand Up @@ -585,8 +586,14 @@ class PersonalDetailsForm extends React.Component {
</FormBody>
<FormFooter>
{status && status.msg && <FormSubmitErrorMessage message={status.msg} />}
<div className='account-form__footer-note'>
{ localize('Please make sure your information is correct or it may affect your trading experience.') }
</div>
<Button
className='account-form__footer-btn btn--primary--default'
className={classNames('account-form__footer-btn', {
'btn--primary--default': !is_submit_success,
'btn--primary--green' : is_submit_success,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mahdiaryayi-fs ahh just one more suggestion: could you make this changes in the <Button /> component itself? this should be applied to all usages of Button, not only on this page 😄

Copy link
Contributor Author

@mahdiaryayi-fs mahdiaryayi-fs Oct 13, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kelly-binary I checked <Button /> use cases in deriv trader. The component is style agnostic. We are passing different classNames in different cases. If I add this logic by adding btn--primary--default and btn--primary--green inside <Button />, it doesn't work in other places that we are not using primary button classes and it may cause styling conflict.

})}
type='submit'
is_disabled={isSubmitting || (
this.props.is_virtual ?
Expand Down
10 changes: 10 additions & 0 deletions packages/trader/src/sass/app/modules/account.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,10 +134,20 @@
border-width: 1px;
background-color: var(--general-main-1);

&-note {
color: var(--text-prominent);
font-size: var(--text-size-xxs);
height: 4rem;
line-height: 1.5;
text-align: right;
width: 27.6rem;
}
&-btn {
height: 4em;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
min-width: 6.4em;
}
}
}
Expand Down