From e66f2f17f565085d7ccc4dad965d46213c169fef Mon Sep 17 00:00:00 2001
From: dat <dat.nguyen.supper@gmail.com>
Date: Tue, 11 Jul 2023 16:19:26 +0700
Subject: [PATCH] Onboarding - mobile views

---
 .../src/components/FieldAvatar/index.tsx      | 87 +++++++++--------
 .../components/modal-add-education/index.tsx  | 12 +--
 .../modal-add-education/styles.module.scss    |  4 +
 .../src/components/modal-add-work/index.tsx   | 14 ++-
 .../modal-add-work/styles.module.scss         | 33 -------
 .../components/modal-upload-photo/index.tsx   | 17 ++--
 .../modal-upload-photo/styles.module.scss     | 54 +++--------
 .../onboarding-base-modal/index.tsx           | 28 ++++++
 .../onboarding-base-modal/styles.module.scss  | 47 +++++++++
 .../src/pages/account-details/index.tsx       | 14 +--
 .../onboarding/src/pages/educations/index.tsx |  5 +-
 .../src/pages/onboarding/styles.module.scss   | 96 +++++++++++--------
 .../src/pages/personalization/index.tsx       | 65 ++++++-------
 src/apps/onboarding/src/pages/works/index.tsx |  5 +-
 .../onboarding/src/styles/global/_flex.scss   | 16 ++++
 .../onboarding/src/styles/global/_grid.scss   | 12 +++
 .../onboarding/src/styles/global/_index.scss  |  6 ++
 .../onboarding/src/styles/global/_layout.scss | 18 ++++
 18 files changed, 315 insertions(+), 218 deletions(-)
 create mode 100644 src/apps/onboarding/src/components/onboarding-base-modal/index.tsx
 create mode 100644 src/apps/onboarding/src/components/onboarding-base-modal/styles.module.scss

diff --git a/src/apps/onboarding/src/components/FieldAvatar/index.tsx b/src/apps/onboarding/src/components/FieldAvatar/index.tsx
index 8d9f86df7..60abda520 100644
--- a/src/apps/onboarding/src/components/FieldAvatar/index.tsx
+++ b/src/apps/onboarding/src/components/FieldAvatar/index.tsx
@@ -53,12 +53,51 @@ const FieldAvatar: FC<FieldAvatarProps> = (props: FieldAvatarProps) => {
         setIsPhotoEditMode(true)
     }
 
+    const bottomButtons = imgUrl ? (
+        <div className='d-flex gap-8 mobile-full-width'>
+            <Button
+                size='lg'
+                secondary
+                iconToLeft
+                icon={IconOutline.UploadIcon}
+                disabled={!props.memberInfo || isSaving}
+                onClick={showEditPhoto}
+                className='mt-16 mobile-flex-1'
+            >
+                change
+            </Button>
+            <Button
+                size='lg'
+                secondary
+                iconToLeft
+                icon={IconOutline.TrashIcon}
+                disabled={!props.memberInfo || isSaving}
+                onClick={handleRemovePhoto}
+                className='mt-16 mobile-flex-1'
+            >
+                delete
+            </Button>
+        </div>
+    ) : (
+        <Button
+            size='lg'
+            secondary
+            iconToLeft
+            icon={IconOutline.UploadIcon}
+            disabled={!props.memberInfo}
+            onClick={showEditPhoto}
+            className='mt-16 mobile-flex-1'
+        >
+            add image
+        </Button>
+    )
+
     return (
         <div
-            className={classNames(styles.container, props.className, 'd-flex flex-column gap-20 align-items-start')}
+            className={classNames(styles.container, props.className, 'd-flex flex-column align-items-start')}
         >
             <h3>Photo</h3>
-            <div className='d-flex gap-30'>
+            <div className='d-flex gap-30 mt-16'>
                 <div className={classNames(
                     'd-flex',
                     styles.blockImg,
@@ -78,46 +117,14 @@ const FieldAvatar: FC<FieldAvatarProps> = (props: FieldAvatarProps) => {
                         Make a great first impression to potential customers with a
                         professional photo that represents your style.
                     </span>
-                    {imgUrl ? (
-                        <div className='d-flex gap-8'>
-                            <Button
-                                size='lg'
-                                secondary
-                                iconToLeft
-                                icon={IconOutline.UploadIcon}
-                                disabled={!props.memberInfo || isSaving}
-                                onClick={showEditPhoto}
-                                className='mt-16'
-                            >
-                                change
-                            </Button>
-                            <Button
-                                size='lg'
-                                secondary
-                                iconToLeft
-                                icon={IconOutline.TrashIcon}
-                                disabled={!props.memberInfo || isSaving}
-                                onClick={handleRemovePhoto}
-                                className='mt-16'
-                            >
-                                delete
-                            </Button>
-                        </div>
-                    ) : (
-                        <Button
-                            size='lg'
-                            secondary
-                            iconToLeft
-                            icon={IconOutline.UploadIcon}
-                            disabled={!props.memberInfo}
-                            onClick={showEditPhoto}
-                            className='mt-16'
-                        >
-                            add image
-                        </Button>
-                    )}
+                    <div className='mobile-hide'>
+                        {bottomButtons}
+                    </div>
                 </div>
             </div>
+            <div className='desktop-hide full-width d-flex'>
+                {bottomButtons}
+            </div>
 
             {
                 isPhotoEditMode && props.memberInfo && (
diff --git a/src/apps/onboarding/src/components/modal-add-education/index.tsx b/src/apps/onboarding/src/components/modal-add-education/index.tsx
index 5b7cc5bb2..7dd42b0c4 100644
--- a/src/apps/onboarding/src/components/modal-add-education/index.tsx
+++ b/src/apps/onboarding/src/components/modal-add-education/index.tsx
@@ -3,11 +3,12 @@ import _ from 'lodash'
 import classNames from 'classnames'
 import moment from 'moment'
 
-import { BaseModal, Button, InputText } from '~/libs/ui'
+import { Button, InputText } from '~/libs/ui'
 
 import DateInput from '../DateInput'
 import EducationInfo, { emptyEducationInfo } from '../../models/EducationInfo'
 import FormField from '../FormField'
+import OnboardingBaseModal from '../onboarding-base-modal'
 
 import styles from './styles.module.scss'
 
@@ -59,7 +60,7 @@ const ModalAddEducation: FC<ModalAddEducationProps> = (props: ModalAddEducationP
     }, [props.editingEducation])
 
     return (
-        <BaseModal
+        <OnboardingBaseModal
             buttons={(
                 <div className='d-flex gap-16'>
                     <Button
@@ -97,12 +98,9 @@ const ModalAddEducation: FC<ModalAddEducationProps> = (props: ModalAddEducationP
                 </div>
             )}
             onClose={props.onClose || _.noop}
-            open
-            size='body'
             title={props.editingEducation ? 'Edit Education' : 'Add Education'}
-            classNames={{ modal: styles.infoModal }}
         >
-            <div className={classNames(styles.modalContent, 'd-flex flex-column align-items-start')}>
+            <div className={classNames(styles.modalContent, 'd-flex flex-column align-items-start mobile-gap-16')}>
                 <div className='full-width'>
                     <InputText
                         name='collegeName'
@@ -183,7 +181,7 @@ const ModalAddEducation: FC<ModalAddEducationProps> = (props: ModalAddEducationP
                     </div>
                 </div>
             </div>
-        </BaseModal>
+        </OnboardingBaseModal>
     )
 }
 
diff --git a/src/apps/onboarding/src/components/modal-add-education/styles.module.scss b/src/apps/onboarding/src/components/modal-add-education/styles.module.scss
index 070ddd645..32b5f54a0 100644
--- a/src/apps/onboarding/src/components/modal-add-education/styles.module.scss
+++ b/src/apps/onboarding/src/components/modal-add-education/styles.module.scss
@@ -4,6 +4,10 @@
     padding: 35px 32px 32px 32px !important;
     max-width: 600px !important;
 
+    @include ltemd {
+        max-width: 375px !important;
+    }
+
     :global(.react-responsive-modal-closeButton) {
         display: flex;
         right: 32px;
diff --git a/src/apps/onboarding/src/components/modal-add-work/index.tsx b/src/apps/onboarding/src/components/modal-add-work/index.tsx
index ba722e322..4bb0fa6c0 100644
--- a/src/apps/onboarding/src/components/modal-add-work/index.tsx
+++ b/src/apps/onboarding/src/components/modal-add-work/index.tsx
@@ -3,12 +3,13 @@ import _ from 'lodash'
 import classNames from 'classnames'
 import moment from 'moment'
 
-import { BaseModal, Button, InputSelect, InputText } from '~/libs/ui'
+import { Button, InputSelect, InputText } from '~/libs/ui'
 import { FormInputCheckbox } from '~/apps/self-service/src/components/form-elements'
 
 import { INDUSTRIES_OPTIONS } from '../../config'
 import DateInput from '../DateInput'
 import FormField from '../FormField'
+import OnboardingBaseModal from '../onboarding-base-modal'
 import WorkInfo, { emptyWorkInfo } from '../../models/WorkInfo'
 
 import styles from './styles.module.scss'
@@ -69,7 +70,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
     }, [props.editingWork])
 
     return (
-        <BaseModal
+        <OnboardingBaseModal
             buttons={(
                 <div className='d-flex gap-16'>
                     <Button
@@ -110,12 +111,9 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
                 </div>
             )}
             onClose={props.onClose || _.noop}
-            open
-            size='body'
             title={props.editingWork ? 'Edit Experience' : 'Add Experience'}
-            classNames={{ modal: styles.infoModal }}
         >
-            <div className={classNames(styles.modalContent, 'd-flex flex-column align-items-start')}>
+            <div className={classNames(styles.modalContent, 'd-flex flex-column align-items-start mobile-gap-16')}>
                 <div className='full-width'>
                     <InputText
                         name='company'
@@ -227,7 +225,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
                         </FormField>
                     </div>
                 </div>
-                <div className='mt-16'>
+                <div className='mt-16 mobile-mt-0'>
                     <FormInputCheckboxMiddleware
                         label='I am currently working in this role'
                         checked={workInfo.currentlyWorking}
@@ -241,7 +239,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
                     />
                 </div>
             </div>
-        </BaseModal>
+        </OnboardingBaseModal>
     )
 }
 
diff --git a/src/apps/onboarding/src/components/modal-add-work/styles.module.scss b/src/apps/onboarding/src/components/modal-add-work/styles.module.scss
index bc191d879..fced2c8eb 100644
--- a/src/apps/onboarding/src/components/modal-add-work/styles.module.scss
+++ b/src/apps/onboarding/src/components/modal-add-work/styles.module.scss
@@ -1,34 +1 @@
 @import '@libs/ui/styles/includes';
-
-.infoModal {
-    padding: 35px 32px 32px 32px !important;
-    max-width: 600px !important;
-
-    :global(.react-responsive-modal-closeButton) {
-        display: flex;
-        right: 32px;
-        top: 46px !important;
-
-        path {
-            color: $turq-160;
-        }
-    }
-
-    hr {
-        margin-top: 30px;
-    }
-
-    h3 {
-      font-family: $font-barlow;
-      color: $black-100;
-      font-size: 34px;
-      font-style: normal;
-      font-weight: 600;
-      line-height: 40px;
-      text-transform: none;
-    }
-
-    .modalContent {
-        width: 100%;
-    }
-}
diff --git a/src/apps/onboarding/src/components/modal-upload-photo/index.tsx b/src/apps/onboarding/src/components/modal-upload-photo/index.tsx
index 27494dbce..14205f886 100644
--- a/src/apps/onboarding/src/components/modal-upload-photo/index.tsx
+++ b/src/apps/onboarding/src/components/modal-upload-photo/index.tsx
@@ -3,10 +3,11 @@ import { DropzoneState, useDropzone } from 'react-dropzone'
 import _ from 'lodash'
 import classNames from 'classnames'
 
-import { BaseModal, Button } from '~/libs/ui'
+import { Button } from '~/libs/ui'
 import { updateMemberPhotoAsync } from '~/libs/core'
 
 import MemberInfo from '../../models/MemberInfo'
+import OnboardingBaseModal from '../onboarding-base-modal'
 
 import styles from './styles.module.scss'
 
@@ -63,7 +64,7 @@ const ModalUploadPhoto: FC<ModalUploadPhotoProps> = (props: ModalUploadPhotoProp
     }
 
     return (
-        <BaseModal
+        <OnboardingBaseModal
             buttons={(
                 <div className='d-flex gap-16'>
                     <Button
@@ -82,12 +83,14 @@ const ModalUploadPhoto: FC<ModalUploadPhotoProps> = (props: ModalUploadPhotoProp
                 </div>
             )}
             onClose={props.onClose || _.noop}
-            open
-            size='body'
             title='Profile Photo'
-            classNames={{ modal: styles.infoModal }}
         >
-            <div className={classNames(styles.modalContent, 'd-flex align-items-start')}>
+            <div
+                className={classNames(
+                    styles.modalContent,
+                    'd-flex mobile-flex-column align-items-start mobile-gap-16',
+                )}
+            >
                 {(!isSaving && !imgUrl) ? (
                     <div {...getRootProps()} className={styles.blockDropZone}>
                         <input {...getInputProps()} />
@@ -128,7 +131,7 @@ const ModalUploadPhoto: FC<ModalUploadPhotoProps> = (props: ModalUploadPhotoProp
                     </ul>
                 </div>
             </div>
-        </BaseModal>
+        </OnboardingBaseModal>
     )
 }
 
diff --git a/src/apps/onboarding/src/components/modal-upload-photo/styles.module.scss b/src/apps/onboarding/src/components/modal-upload-photo/styles.module.scss
index 70068533a..de697bdef 100644
--- a/src/apps/onboarding/src/components/modal-upload-photo/styles.module.scss
+++ b/src/apps/onboarding/src/components/modal-upload-photo/styles.module.scss
@@ -1,39 +1,7 @@
 @import '@libs/ui/styles/includes';
 
-.infoModal {
-    padding: 35px 32px 32px 32px !important;
-    max-width: 600px !important;
-
-    :global(.react-responsive-modal-closeButton) {
-        display: flex;
-        right: 32px;
-        top: 46px !important;
-
-        path {
-            color: $turq-160;
-        }
-    }
-
-    hr {
-        margin-top: 30px;
-    }
-
-    h3 {
-      font-family: $font-barlow;
-      color: $black-100;
-      font-size: 34px;
-      font-style: normal;
-      font-weight: 600;
-      line-height: 40px;
-      text-transform: none;
-    }
-
-    .modalContent {
-        width: 100%;
-    }
-}
-
-.blockDropZone {
+.blockDropZone,
+.blockPhoto {
     width: 256px;
     height: 256px;
     margin-right: 24px;
@@ -46,6 +14,13 @@
     flex-direction: column;
     background-color: rgba(224, 250, 243, 0.30);
 
+    @include ltemd {
+        width: 100%;
+        height: 343px;
+    }
+}
+
+.blockDropZone {
     .textDragAndDrop {
         font-size: 16px;
         font-style: normal;
@@ -79,13 +54,6 @@
 }
 
 .blockPhoto {
-    width: 256px;
-    height: 256px;
-    margin-right: 24px;
-    flex-shrink: 0;
-    border: 1px dashed $turq-160;
-    background-color: rgba(224, 250, 243, 0.30);
-
     img {
         width: 100%;
         height: 100%;
@@ -96,4 +64,8 @@
 .listRequirements {
     list-style: disc;
     padding-left: 24px;
+
+    @include ltemd {
+        margin-bottom: 21px;
+    }
 }
diff --git a/src/apps/onboarding/src/components/onboarding-base-modal/index.tsx b/src/apps/onboarding/src/components/onboarding-base-modal/index.tsx
new file mode 100644
index 000000000..642a908a2
--- /dev/null
+++ b/src/apps/onboarding/src/components/onboarding-base-modal/index.tsx
@@ -0,0 +1,28 @@
+import { FC, ReactNode } from 'react'
+import _ from 'lodash'
+
+import { BaseModal } from '~/libs/ui'
+
+import styles from './styles.module.scss'
+
+interface OnboardingBaseModalProps {
+    onClose?: () => void
+    children: React.ReactNode
+    title?: string | ReactNode
+    buttons?: ReactNode
+}
+
+const OnboardingBaseModal: FC<OnboardingBaseModalProps> = (props: OnboardingBaseModalProps) => (
+    <BaseModal
+        buttons={props.buttons}
+        onClose={props.onClose || _.noop}
+        open
+        size='body'
+        title={props.title}
+        classNames={{ modal: styles.infoModal }}
+    >
+        {props.children}
+    </BaseModal>
+)
+
+export default OnboardingBaseModal
diff --git a/src/apps/onboarding/src/components/onboarding-base-modal/styles.module.scss b/src/apps/onboarding/src/components/onboarding-base-modal/styles.module.scss
new file mode 100644
index 000000000..4582fba49
--- /dev/null
+++ b/src/apps/onboarding/src/components/onboarding-base-modal/styles.module.scss
@@ -0,0 +1,47 @@
+@import '@libs/ui/styles/includes';
+
+.infoModal {
+    padding: 35px 32px 32px 32px !important;
+    max-width: 600px !important;
+
+    @include ltemd {
+        max-width: 375px !important;
+        padding: 40px 16px 32px 16px !important;
+    }
+
+    :global(.react-responsive-modal-closeButton) {
+        display: flex;
+        right: 32px;
+        top: 46px !important;
+
+        path {
+            color: $turq-160;
+        }
+    }
+
+    hr {
+        margin-top: 30px;
+
+        @include ltemd {
+            margin-top: 32px;
+        }
+    }
+
+    h3 {
+      font-family: $font-barlow;
+      color: $black-100;
+      font-size: 34px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 40px;
+      text-transform: none;
+
+      @include ltemd {
+        font-size: 28px;
+      }
+    }
+
+    .modalContent {
+        width: 100%;
+    }
+}
diff --git a/src/apps/onboarding/src/pages/account-details/index.tsx b/src/apps/onboarding/src/pages/account-details/index.tsx
index 7b3fcb2f9..36e17f2bb 100644
--- a/src/apps/onboarding/src/pages/account-details/index.tsx
+++ b/src/apps/onboarding/src/pages/account-details/index.tsx
@@ -187,7 +187,7 @@ const PageAccountDetailsContent: FC<{
                     name='streetAddr1'
                     label='Address 1'
                     value={memberAddress?.streetAddr1 || ''}
-                    onChange={function (event?: string) {
+                    onChange={function onChange(event?: string) {
                         setMemberAddress({
                             ...(memberAddress || blankMemberAddress),
                             streetAddr1: event || '',
@@ -202,7 +202,7 @@ const PageAccountDetailsContent: FC<{
                     name='streetAddr2'
                     label='Address 2'
                     value={memberAddress?.streetAddr2 || ''}
-                    onChange={function (event?: string) {
+                    onChange={function onChange(event?: string) {
                         setMemberAddress({
                             ...(memberAddress || blankMemberAddress),
                             streetAddr2: event || '',
@@ -221,7 +221,7 @@ const PageAccountDetailsContent: FC<{
                             name='city'
                             label='City'
                             value={memberAddress?.city || ''}
-                            onChange={function (event?: string) {
+                            onChange={function onChange(event?: string) {
                                 setMemberAddress({
                                     ...(memberAddress || blankMemberAddress),
                                     city: event || '',
@@ -240,7 +240,7 @@ const PageAccountDetailsContent: FC<{
                             name='stateCode'
                             label='State / Province'
                             value={memberAddress?.stateCode || ''}
-                            onChange={function (event?: string) {
+                            onChange={function onChange(event?: string) {
                                 setMemberAddress({
                                     ...(memberAddress || blankMemberAddress),
                                     stateCode: event || '',
@@ -260,7 +260,7 @@ const PageAccountDetailsContent: FC<{
                             name='zip'
                             label='Zip / Postal Code'
                             value={memberAddress?.zip || ''}
-                            onChange={function (event?: string) {
+                            onChange={function onChange(event?: string) {
                                 setMemberAddress({
                                     ...(memberAddress || blankMemberAddress),
                                     zip: event || '',
@@ -277,7 +277,7 @@ const PageAccountDetailsContent: FC<{
                 <InputSelect
                     options={countryOptions}
                     value={connectInfo?.country || ''}
-                    onChange={function (event: any) {
+                    onChange={function onChange(event: any) {
                         setConnectInfo({
                             ...(connectInfo || blankConnectInfo),
                             country: event.target.value,
@@ -299,7 +299,7 @@ const PageAccountDetailsContent: FC<{
                     name='phoneNumber'
                     label='Phone Number'
                     value={connectInfo?.phoneNumber || ''}
-                    onChange={function (event?: string) {
+                    onChange={function onChange(event?: string) {
                         setConnectInfo({
                             ...(connectInfo || blankConnectInfo),
                             phoneNumber: event || '',
diff --git a/src/apps/onboarding/src/pages/educations/index.tsx b/src/apps/onboarding/src/pages/educations/index.tsx
index c7a95e45c..06ecd26ed 100644
--- a/src/apps/onboarding/src/pages/educations/index.tsx
+++ b/src/apps/onboarding/src/pages/educations/index.tsx
@@ -68,7 +68,10 @@ export const PageEducationsContent: FC<{
                 </span>
 
                 {(educations || []).length > 0 ? (
-                    <div className='d-grid grid-2-column gap-column-16 gap-row-8 full-width mt-24'>
+                    <div
+                        className={'d-grid grid-2-column mobile-grid-1-column '
+                            + ' gap-column-16 gap-row-8 mobile-gap-row-16 full-width mt-24 mobile-mt-8'}
+                    >
                         {(educations || []).map(education => (
                             <CardItem
                                 key={education.id}
diff --git a/src/apps/onboarding/src/pages/onboarding/styles.module.scss b/src/apps/onboarding/src/pages/onboarding/styles.module.scss
index ebc62e409..c9fe866b2 100644
--- a/src/apps/onboarding/src/pages/onboarding/styles.module.scss
+++ b/src/apps/onboarding/src/pages/onboarding/styles.module.scss
@@ -1,53 +1,67 @@
 @import '@libs/ui/styles/includes';
 
 .blockWrapper {
-  background-color: #EAF6FD;
-  padding: 64px;
-  min-height: 100%;
+    background-color: #EAF6FD;
+    padding: 64px;
+    min-height: 100%;
 
-  @include sm {
-    padding: 0;
-  }
+    @include ltemd {
+        padding: 50px 16px;
+    }
 }
 
 .container {
-  padding: 48px;
-  font-size: 16px;
-  line-height: 24px;
-  background-color: white;
-  width: 768px;
-  max-width: 100%;
-  min-height: calc(100% - 88px);
-  border-radius: 16px;
-  box-shadow: 0px 8px 24px 0px rgba(144, 144, 144, 0.15);
-
-  h2 {
-    font-family: $font-barlow;
-    color: $black-100;
-    font-size: 34px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 40px;
-    text-transform: none;
-  }
-
-  h3 {
-    font-family: $font-roboto;
-    color: $black-100;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 26px;
-    text-transform: none;
-  }
+    padding: 48px;
+    font-size: 16px;
+    line-height: 24px;
+    background-color: white;
+    width: 768px;
+    max-width: 100%;
+    min-height: calc(100% - 88px);
+    border-radius: 16px;
+    box-shadow: 0px 8px 24px 0px rgba(144, 144, 144, 0.15);
+
+    @include ltemd {
+        padding: 48px 16px;
+    }
+
+    h2 {
+        font-family: $font-barlow;
+        color: $black-100;
+        font-size: 34px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 40px;
+        text-transform: none;
+
+        @include ltemd {
+            font-size: 28px;
+        }
+    }
+
+    h3 {
+        font-family: $font-roboto;
+        color: $black-100;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 26px;
+        text-transform: none;
+    }
 }
 
 .textFooter {
-  color: $black-80;
-  margin-top: 64px;
+    color: $black-80;
+    margin-top: 64px;
+    text-align: center;
+
+    @include ltemd {
+        margin-top: 32px;
+        max-width: 284px;
+    }
 
-  a {
-    color: $turq-160;
-    font-weight: 500;
-  }
+    a {
+        color: $turq-160;
+        font-weight: 500;
+    }
 }
\ No newline at end of file
diff --git a/src/apps/onboarding/src/pages/personalization/index.tsx b/src/apps/onboarding/src/pages/personalization/index.tsx
index b55de90e8..352128022 100644
--- a/src/apps/onboarding/src/pages/personalization/index.tsx
+++ b/src/apps/onboarding/src/pages/personalization/index.tsx
@@ -71,39 +71,40 @@ const PagePersonalizationContent: FC<{
                     updateMemberPhotoUrl={props.updateMemberPhotoUrl}
                 />
 
-                <h3 className='mt-48'>Bio</h3>
+                <h3 className='mt-48 mobile-mt-32'>Bio</h3>
                 <span className='mt-8 color-black-60'>This is where we can really get to know you. </span>
-                <InputTextAutoSave
-                    name='title'
-                    label='Bio Title'
-                    value={personalizationInfo?.profileSelfTitle || ''}
-                    onChange={function onChange(value: string | undefined) {
-                        setPersonalizationInfo({
-                            ...(personalizationInfo || blankPersonalizationInfo),
-                            profileSelfTitle: value || '',
-                        })
-                    }}
-                    placeholder='Ex: I’m a creative rockstar'
-                    tabIndex={0}
-                    type='text'
-                    disabled={props.loadingMemberTraits}
-                    className='mt-16'
-                />
-
-                <InputTextareaAutoSave
-                    name='shortBio'
-                    label='Bio'
-                    value={personalizationInfo?.shortBio || ''}
-                    onChange={function onChange(value: string | undefined) {
-                        setPersonalizationInfo({
-                            ...(personalizationInfo || blankPersonalizationInfo),
-                            shortBio: value || '',
-                        })
-                    }}
-                    placeholder='Share something that makes you, you.'
-                    tabIndex={0}
-                    disabled={props.loadingMemberTraits}
-                />
+                <div className='d-flex flex-column mt-16 full-width mobile-gap-16'>
+                    <InputTextAutoSave
+                        name='title'
+                        label='Bio Title'
+                        value={personalizationInfo?.profileSelfTitle || ''}
+                        onChange={function onChange(value: string | undefined) {
+                            setPersonalizationInfo({
+                                ...(personalizationInfo || blankPersonalizationInfo),
+                                profileSelfTitle: value || '',
+                            })
+                        }}
+                        placeholder='Ex: I’m a creative rockstar'
+                        tabIndex={0}
+                        type='text'
+                        disabled={props.loadingMemberTraits}
+                    />
+
+                    <InputTextareaAutoSave
+                        name='shortBio'
+                        label='Bio'
+                        value={personalizationInfo?.shortBio || ''}
+                        onChange={function onChange(value: string | undefined) {
+                            setPersonalizationInfo({
+                                ...(personalizationInfo || blankPersonalizationInfo),
+                                shortBio: value || '',
+                            })
+                        }}
+                        placeholder='Share something that makes you, you.'
+                        tabIndex={0}
+                        disabled={props.loadingMemberTraits}
+                    />
+                </div>
             </div>
 
             <ProgressBar
diff --git a/src/apps/onboarding/src/pages/works/index.tsx b/src/apps/onboarding/src/pages/works/index.tsx
index 7c2ffd213..59b977bc1 100644
--- a/src/apps/onboarding/src/pages/works/index.tsx
+++ b/src/apps/onboarding/src/pages/works/index.tsx
@@ -69,7 +69,10 @@ export const PageWorksContent: FC<{
                     </span>
 
                     {(works || []).length > 0 ? (
-                        <div className='d-grid grid-2-column gap-column-16 gap-row-8 full-width mt-24'>
+                        <div
+                            className={'d-grid grid-2-column mobile-grid-1-column '
+                                + ' gap-column-16 gap-row-8 mobile-gap-row-16 full-width mt-24 mobile-mt-8'}
+                        >
                             {(works || []).map(work => (
                                 <CardItem
                                     key={work.id}
diff --git a/src/apps/onboarding/src/styles/global/_flex.scss b/src/apps/onboarding/src/styles/global/_flex.scss
index 8fa521057..f96c649d9 100644
--- a/src/apps/onboarding/src/styles/global/_flex.scss
+++ b/src/apps/onboarding/src/styles/global/_flex.scss
@@ -1,6 +1,11 @@
 .flex-1 {
   flex: 1 1 0%;
 }
+.mobile-flex-1 {
+  @include ltemd {
+    flex: 1 1 0%;
+  }
+}
 .flex-none {
   flex: none;
 }
@@ -10,6 +15,11 @@
 .gap-16 {
   gap: 16px;
 }
+.mobile-gap-16 {
+  @include ltemd {
+    gap: 16px;
+  }
+}
 .gap-20 {
   gap: 20px;
 }
@@ -83,6 +93,12 @@
     flex-direction: column;
   }
 
+  &.mobile-flex-column {
+    @include ltemd {
+      flex-direction: column;
+    }
+  }
+
   &.flex-row {
     flex-direction: row;
   }
diff --git a/src/apps/onboarding/src/styles/global/_grid.scss b/src/apps/onboarding/src/styles/global/_grid.scss
index 292cf4f15..95664b753 100644
--- a/src/apps/onboarding/src/styles/global/_grid.scss
+++ b/src/apps/onboarding/src/styles/global/_grid.scss
@@ -6,10 +6,22 @@
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.mobile-grid-1-column {
+  @include ltemd {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+}
+
 .gap-column-16 {
   column-gap: 16px;
 }
 
 .gap-row-8 {
   row-gap: 8px;
+}
+
+.mobile-gap-row-16 {
+  @include ltemd {
+    row-gap: 16px;
+  }
 }
\ No newline at end of file
diff --git a/src/apps/onboarding/src/styles/global/_index.scss b/src/apps/onboarding/src/styles/global/_index.scss
index 5e9ce5dac..aa8055051 100644
--- a/src/apps/onboarding/src/styles/global/_index.scss
+++ b/src/apps/onboarding/src/styles/global/_index.scss
@@ -11,4 +11,10 @@
 
 .full-width {
   width: 100%;
+}
+
+.mobile-full-width {
+  @include ltemd {
+    width: 100%;
+  }
 }
\ No newline at end of file
diff --git a/src/apps/onboarding/src/styles/global/_layout.scss b/src/apps/onboarding/src/styles/global/_layout.scss
index 4b2e4f677..759324815 100644
--- a/src/apps/onboarding/src/styles/global/_layout.scss
+++ b/src/apps/onboarding/src/styles/global/_layout.scss
@@ -22,6 +22,12 @@
   margin-top: 48px;
 }
 
+.mobile-mt-32 {
+  @include ltemd {
+    margin-top: 32px;
+  }
+}
+
 .mb-30 {
   margin-bottom: 30px;
 }
@@ -29,3 +35,15 @@
 .mb-24 {
   margin-bottom: 24px;
 }
+
+.mobile-mt-8 {
+  @include ltemd {
+    margin-top: 8px;
+  }
+}
+
+.mobile-mt-0 {
+  @include ltemd {
+    margin-top: 0;
+  }
+}