Skip to content

Commit

Permalink
Merge pull request binary-com#23 from utkarsha-deriv/utkarsha/tablet-…
Browse files Browse the repository at this point in the history 
…view-clean-code-pr

Utkarsha/tablet view clean code pr
  • Loading branch information
@amina-deriv
amina-deriv committed May 29, 2024
2 parents 8c602eb + b873a13 commit df7d449
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 30 deletions.
1 change: 0 additions & 1 deletion packages/account/src/Components/api-token/api-token-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { useStore } from '@deriv/stores';

const ApiTokenTable = () => {
const { api_tokens } = React.useContext<TApiContext>(ApiTokenContext);
const { ui } = useStore();
const { isDesktop } = useDevice();

const formatTokenScopes = (str: string) => {
Expand Down
9 changes: 5 additions & 4 deletions packages/account/src/Sections/Profile/PersonalDetails/personal-details-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import { getEmploymentStatusList } from 'Sections/Assessment/FinancialAssessment
import InputGroup from './input-group';
import { getPersonalDetailsInitialValues, getPersonalDetailsValidationSchema, makeSettingsRequest } from './validation';
import FormSelectField from 'Components/forms/form-select-field';
import { useDevice } from '@deriv-com/ui';

type TRestState = {
show_form: boolean;
Expand All @@ -45,6 +46,7 @@ export const PersonalDetailsForm = observer(({ history }: { history: BrowserHist
const [is_state_loading, setIsStateLoading] = React.useState(false);
const [is_btn_loading, setIsBtnLoading] = React.useState(false);
const [is_submit_success, setIsSubmitSuccess] = React.useState(false);
const { isDesktop } = useDevice();

const {
client,
Expand Down Expand Up @@ -74,7 +76,6 @@ export const PersonalDetailsForm = observer(({ history }: { history: BrowserHist
showPOAAddressMismatchFailureNotification,
} = notifications;

const { is_mobile } = ui;
const has_poa_address_mismatch = account_status?.status?.includes('poa_address_mismatch');
const [rest_state, setRestState] = React.useState<TRestState>({
show_form: true,
Expand Down Expand Up @@ -238,15 +239,15 @@ export const PersonalDetailsForm = observer(({ history }: { history: BrowserHist
dirty,
}) => (
<React.Fragment>
<LeaveConfirm onDirty={is_mobile ? showForm : undefined} />
<LeaveConfirm onDirty={isDesktop ? undefined : showForm} />
{show_form && (
<Form
noValidate
className='account-form account-form__personal-details'
onSubmit={handleSubmit}
data-testid='dt_account_personal_details_section'
>
<FormBody scroll_offset={is_mobile ? '199px' : '80px'}>
<FormBody scroll_offset={isDesktop ? '80px' : '199px'}>
<FormSubHeader title={localize('Details')} />
{!is_virtual && (
<React.Fragment>
Expand Down Expand Up @@ -661,7 +662,7 @@ export const PersonalDetailsForm = observer(({ history }: { history: BrowserHist
className='account-form__footer-note'
size='xxs'
color='prominent'
align={is_mobile ? 'center' : 'right'}
align={isDesktop ? 'right' : 'center'}
>
{localize(
'Please make sure your information is correct or it may affect your trading experience.'
Expand Down
40 changes: 16 additions & 24 deletions packages/account/src/Styles/account.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,7 @@ $MIN_HEIGHT_FLOATING: calc(
width: 100%;
margin-top: 0.3rem;

@include mobile {
@include mobile-screen {
border-top-color: var(--general-disabled);
}
}
Expand Down Expand Up @@ -296,7 +296,7 @@ $MIN_HEIGHT_FLOATING: calc(
margin-bottom: 1.6rem;
max-width: 67.2rem;

@include mobile {
@include mobile-or-tablet-screen {
margin-bottom: 2.4rem;
}
}
Expand Down Expand Up @@ -369,7 +369,7 @@ $MIN_HEIGHT_FLOATING: calc(
top: 1rem;
}

@include mobile {
@include mobile-or-tablet-screen {
.dc-checkbox {
&__box,
& .dc-icon {
Expand Down Expand Up @@ -415,7 +415,7 @@ $MIN_HEIGHT_FLOATING: calc(
}
}

@include mobile {
@include mobile-or-tablet-screen {
.account__scrollbars_container {
&--grid-layout {
display: flex;
Expand Down Expand Up @@ -460,7 +460,7 @@ $MIN_HEIGHT_FLOATING: calc(
}
}

@include desktop {
@include desktop-screen {
padding-bottom: 0;
}
}
Expand Down Expand Up @@ -849,14 +849,6 @@ $MIN_HEIGHT_FLOATING: calc(
}
}

.dashboard__message-content {
margin-top: 8rem;

@include mobile {
margin-top: 4rem;
}
}

.two-factor {
height: 100%;
width: 100%;
Expand Down Expand Up @@ -1064,7 +1056,7 @@ $MIN_HEIGHT_FLOATING: calc(
}

.leave-confirm {
@include mobile {
@include mobile-or-tablet-screen {
&__message-icon {
width: 93px;
}
Expand All @@ -1082,7 +1074,7 @@ $MIN_HEIGHT_FLOATING: calc(
.submit-success {
margin-top: 100px;

@include mobile {
@include mobile-or-tablet-screen {
&__message-icon {
width: 96px;
height: 90px;
Expand Down Expand Up @@ -1152,7 +1144,7 @@ $MIN_HEIGHT_FLOATING: calc(
}
}

@include mobile {
@include mobile-or-tablet-screen {
height: 100%;
margin: 0;
}
Expand Down Expand Up @@ -1186,7 +1178,7 @@ $MIN_HEIGHT_FLOATING: calc(
&-dashboard {
width: calc(100vw - 33rem);

@include mobile {
@include mobile-or-tablet-screen {
width: 100%;

button {
Expand All @@ -1200,7 +1192,7 @@ $MIN_HEIGHT_FLOATING: calc(
margin-top: 2.4rem;
align-self: center;

@include mobile {
@include mobile-or-tablet-screen {
width: 100%;
}
}
Expand All @@ -1221,7 +1213,7 @@ $MIN_HEIGHT_FLOATING: calc(
margin-right: 0.5em;
flex: 1;

@include mobile {
@include mobile-or-tablet-screen {
margin-bottom: 2.4rem;
}
}
Expand All @@ -1235,7 +1227,7 @@ $MIN_HEIGHT_FLOATING: calc(
margin-bottom: 4em; // The gap for the error message is dependent on the font-size, better to be `em` instead of `rem`
}

@include mobile {
@include mobile-or-tablet-screen {
min-width: 100%;
}
}
Expand Down Expand Up @@ -1496,7 +1488,7 @@ $MIN_HEIGHT_FLOATING: calc(
}

.dc-modal__container_sent-email__modal {
@include mobile {
@include mobile-or-tablet-screen {
height: 42rem !important;
overflow-y: scroll !important;
}
Expand Down Expand Up @@ -1554,7 +1546,7 @@ $MIN_HEIGHT_FLOATING: calc(
@include typeface(--paragraph-center-bold-red, none);
}

@include mobile {
@include mobile-or-tablet-screen {
width: 300px;
height: 272px;
}
Expand Down Expand Up @@ -2167,7 +2159,7 @@ $MIN_HEIGHT_FLOATING: calc(
&-img {
padding: 2.4rem 0;

@include mobile {
@include mobile-or-tablet-screen {
width: 100%;
height: auto;
}
Expand Down Expand Up @@ -2201,7 +2193,7 @@ $MIN_HEIGHT_FLOATING: calc(
position: relaitve;
background-color: var(--status-warning-transparent);

@include mobile {
@include mobile-or-tablet-screen {
width: 32.8rem;
margin: 1rem;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/sass/app/_common/components/account-common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -452,7 +452,7 @@
height: auto;
align-items: initial;
border-top: 2px solid var(--general-section-1);
gap: 16px;
width: 100vw;
}

@include tablet-screen {
Expand Down

0 comments on commit df7d449

Please sign in to comment.