"feat: enhance user authentication flow with loading state, improved reducer handling, and login/logout actions"

03_source/mobile/src/pages/MyProfile/NotLoggedIn/index.tsx

@@ -56,6 +56,7 @@ import AboutPopover from '../../../components/AboutPopover';
 import paths from '../../../paths';
 import { getProfileById } from '../../../api/getProfileById';
 import { defaultMember, Member } from '../../MemberProfile/type';
+import SignUpPng from './SignUp.png';
 
 interface OwnProps {}
 
@@ -144,29 +145,53 @@ const MyProfile: React.FC<SpeakerListProps> = ({ speakers, speakerSessions }) =>
 
         <div
           style={{
-            height: '50vh',
+            height: '80vh',
+            //
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
+            //
+            gap: '2rem',
           }}
         >
-          <div>
-            not login yet, <br />
-            please login or sign up
-          </div>
           <div
             style={{
-              height: '50vh',
+              width: '95vw',
+              height: '95vw',
+              backgroundImage: `url(${SignUpPng})`,
+              backgroundSize: 'contain',
+              backgroundPosition: 'center',
+              backgroundRepeat: 'no-repeat',
+            }}
+          ></div>
+
+          <div
+            style={{
               display: 'flex',
               flexDirection: 'column',
               alignItems: 'center',
               justifyContent: 'center',
+              //
+              gap: '2rem',
             }}
           >
-            <IonButton disabled={disableForwardLoginButton} onClick={handleForwardLoginPage}>
-              Login
-            </IonButton>
+            <div>
+              not login yet, <br />
+              please login or sign up
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <IonButton disabled={disableForwardLoginButton} onClick={handleForwardLoginPage}>
+                Login
+              </IonButton>
+            </div>
           </div>
         </div>
       </IonContent>