Deal with FB

apps/app/src/components/Me/BasicInfoSettings.tsx

@@ -49,7 +49,7 @@ export const BasicInfoSettings = (): JSX.Element => {
   return (
     <>
 
-      <div className="row mb-3">
+      <div className="row mt-3 mt-md-4">
         <label htmlFor="userForm[name]" className="text-start text-md-end col-md-3 col-form-label">{t('Name')}</label>
         <div className="col-md-6">
           <input
@@ -62,7 +62,7 @@ export const BasicInfoSettings = (): JSX.Element => {
         </div>
       </div>
 
-      <div className="row mb-3">
+      <div className="row mt-3">
         <label htmlFor="userForm[email]" className="text-start text-md-end col-md-3 col-form-label">{t('Email')}</label>
         <div className="col-md-6">
           <input
@@ -83,7 +83,7 @@ export const BasicInfoSettings = (): JSX.Element => {
         </div>
       </div>
 
-      <div className="row mb-3">
+      <div className="row mt-3">
         <label className="text-start text-md-end col-md-3 col-form-label">{t('Disclose E-mail')}</label>
         <div className="col-md-6 my-auto">
           <div className="form-check form-check-inline me-4">
@@ -111,7 +111,7 @@ export const BasicInfoSettings = (): JSX.Element => {
         </div>
       </div>
 
-      <div className="row mb-3">
+      <div className="row mt-3">
         <label className="text-start text-md-end col-md-3 col-form-label">{t('Language')}</label>
         <div className="col-md-6 my-auto">
           {
@@ -136,7 +136,7 @@ export const BasicInfoSettings = (): JSX.Element => {
           }
         </div>
       </div>
-      <div className="row">
+      <div className="row mt-3">
         <label htmlFor="userForm[slackMemberId]" className="text-start text-md-end col-md-3 col-form-label">{t('Slack Member ID')}</label>
         <div className="col-md-6">
           <input
@@ -150,7 +150,7 @@ export const BasicInfoSettings = (): JSX.Element => {
         </div>
       </div>
 
-      <div className="row my-5 my-md-4">
+      <div className="row mt-4">
         <div className="offset-4 col-5">
           <button
             data-testid="grw-besic-info-settings-update-button"

apps/app/src/components/Me/ProfileImageSettings.tsx

@@ -91,8 +91,8 @@ const ProfileImageSettings = (): JSX.Element => {
 
   return (
     <>
-      <div className="row justify-content-around">
-        <div className="col-md-3 mb-5 mb-md-0">
+      <div className="row justify-content-around mt-5 mt-md-4">
+        <div className="col-md-3">
           <h5>
             <div className="form-check radio-primary">
               <input
@@ -115,8 +115,8 @@ const ProfileImageSettings = (): JSX.Element => {
           <img src={generateGravatarSrc(currentUser.email)} className="rounded-pill" width="64" data-vrt-blackout-profile />
         </div>
 
-        <div className="col-md-7">
-          <h5 className="mb-3">
+        <div className="col-md-7 mt-5">
+          <h5>
             <div className="form-check radio-primary">
               <input
                 type="radio"
@@ -132,17 +132,17 @@ const ProfileImageSettings = (): JSX.Element => {
               </label>
             </div>
           </h5>
-          <div className="row mb-3">
+          <div className="row mt-3">
             <label className="col-md-6 col-lg-4 col-form-label text-start">
               { t('Current Image') }
             </label>
             <div className="col-md-6 col-lg-8">
-              <p><img src={uploadedPictureSrc ?? DEFAULT_IMAGE} className="picture picture-lg rounded-circle" id="settingUserPicture" /></p>
+              <p className="mb-0"><img src={uploadedPictureSrc ?? DEFAULT_IMAGE} className="picture picture-lg rounded-circle" id="settingUserPicture" /></p>
               {uploadedPictureSrc && <button type="button" className="btn btn-danger" onClick={deleteImageHandler}>{ t('Delete Image') }</button>}
             </div>
           </div>
-          <div className="row align-items-center">
-            <label className="col-md-6 col-lg-4 col-form-label text-start mb-3 mb-md-0">
+          <div className="row align-items-center mt-3 mt-md-5">
+            <label className="col-md-6 col-lg-4 col-form-label text-start mt-3 mt-md-0">
               {t('Upload new image')}
             </label>
             <div className="col-md-6 col-lg-8">
@@ -161,7 +161,7 @@ const ProfileImageSettings = (): JSX.Element => {
         showCropOption
       />
 
-      <div className="row my-5 my-md-4">
+      <div className="row mt-4">
         <div className="offset-4 col-5">
           <button type="button" className="btn btn-primary" onClick={submit}>
             {t('Update')}

apps/app/src/components/Me/UserSettings.tsx

@@ -11,11 +11,11 @@ const UserSettings = React.memo((): JSX.Element => {
   return (
     <div data-testid="grw-user-settings">
       <div className="mb-5">
-        <h4 className="border-bottom mt-4 mb-3 mb-md-5 pb-1">{t('Basic Info')}</h4>
+        <h2 className="border-bottom fs-4 mt-4 pb-1">{t('Basic Info')}</h2>
         <BasicInfoSettings />
       </div>
       <div className="mb-5">
-        <h4 className="border-bottom mt-4 mb-5 pb-1">{t('Set Profile Image')}</h4>
+        <h2 className="border-bottom fs-4 mt-3 mt-md-5 pb-1">{t('Set Profile Image')}</h2>
         <ProfileImageSettings />
       </div>
     </div>

apps/app/src/pages/me/[[...path]].page.tsx

@@ -123,7 +123,7 @@ const MePage: NextPageWithLayout<Props> = (props: Props) => {
       <div className="dynamic-layout-root">
         <header className="py-3">
           <div className="container">
-            <h3 className="title mt-5">{ targetPage.title }</h3>
+            <h1 className="title fs-3 mt-5">{ targetPage.title }</h1>
           </div>
         </header>