Changes CircleCI env var handling

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 && (

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>
     )
 }
 

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;

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>
     )
 }
 

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%;
-    }
-}

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>
     )
 }
 

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;
+    }
 }