Skip to content

Commit 59fc4b1

Browse files
adamrefaeyadamrefaey
authored
Merge pull request #143 from ModusCreateOrg/ADE-200
[ADE-200] Create splash screen
2 parents a8af8dd + 30e9d30 commit 59fc4b1

File tree

8 files changed

+137
-9
lines changed

8 files changed

+137
-9
lines changed

‎frontend/src/assets/Splash.png‎

1.11 MB
Loading

‎frontend/src/common/components/Router/AppRouter.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import VerificationPage from 'pages/Auth/Verify/VerificationPage';
1111
import OAuthRedirectHandler from 'pages/Auth/OAuth/OAuthRedirectHandler';
1212
import ForgotPasswordPage from 'pages/Auth/ForgotPassword/ForgotPasswordPage';
1313
import ResetPasswordPage from 'pages/Auth/ResetPassword/ResetPasswordPage';
14+
import SplashPage from 'pages/Auth/Splash/SplashPage';
1415

1516
/**
1617
* The application router. This is the main router for the Ionic React
@@ -40,10 +41,11 @@ const AppRouter = (): JSX.Element => {
4041
<Route exact path="/auth/signout" render={() => <SignOutPage />} />
4142
<Route exact path="/auth/forgot-password" render={() => <ForgotPasswordPage />} />
4243
<Route exact path="/auth/reset-password" render={() => <ResetPasswordPage />} />
44+
<Route exact path="/auth/splash" render={() => <SplashPage />} />
4345
<Route exact path="/">
44-
<Redirect to="/tabs" />
46+
<Redirect to="/auth/splash" />
4547
</Route>
46-
<Route render={() => <Redirect to="/tabs" />} />
48+
<Route render={() => <Redirect to="/auth/splash" />} />
4749
</IonRouterOutlet>
4850
</IonReactRouter>
4951
);

‎frontend/src/common/utils/i18n/resources/en/common.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22
"app": {
33
"name": "MEDReport AI"
44
},
5+
"splash": {
6+
"background-alt": "Application background",
7+
"logo-alt": "MEDReport AI logo"
8+
},
9+
"signin": {
10+
"logo-alt": "MEDReport AI logo"
11+
},
512
"confirm-prompt": "Are you sure?",
613
"created": "created",
714
"deleted": "deleted",

‎frontend/src/pages/Auth/SignIn/SignInPage.scss‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,27 @@
11
.ls-signin-page {
2-
--ion-background-color: #1a233f;
2+
--ion-background-color: transparent;
33

44
&__background {
55
width: 100%;
66
height: 100%;
77
display: flex;
88
flex-direction: column;
99
align-items: center;
10+
justify-content: flex-start;
1011
padding: 2rem 1.5rem;
12+
background-color: #1c1e2e;
13+
background-image: url('../../../../src/assets/Splash.png');
14+
background-size: cover;
15+
background-position: center;
16+
position: relative;
1117
}
1218

1319
&__logo-container {
1420
display: flex;
1521
align-items: center;
1622
justify-content: center;
1723
margin-bottom: 2.5rem;
24+
margin-top: 2rem;
1825
}
1926

2027
&__logo {
@@ -35,7 +42,8 @@
3542
background-color: white;
3643
border-radius: 1.5rem;
3744
padding: 2.5rem 2rem;
38-
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
45+
box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 15%);
46+
z-index: 1;
3947
}
4048

4149
&__header {

‎frontend/src/pages/Auth/SignIn/SignInPage.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import './SignInPage.scss';
55
import { PropsWithTestId } from 'common/components/types';
66
import ProgressProvider from 'common/providers/ProgressProvider';
77
import SignInForm from './components/SignInForm';
8-
import logo from 'assets/logo_ls.png';
8+
import logo from '../../../assets/logo_ls.png';
99

1010
/**
1111
* Properties for the `SignInPage` component.
@@ -23,10 +23,14 @@ const SignInPage = ({ testid = 'page-signin' }: SignInPageProps): JSX.Element =>
2323
return (
2424
<IonPage className="ls-signin-page" data-testid={testid}>
2525
<ProgressProvider>
26-
<IonContent fullscreen className="ion-padding">
26+
<IonContent fullscreen className="ion-no-padding">
2727
<div className="ls-signin-page__background">
2828
<div className="ls-signin-page__logo-container">
29-
<IonImg src={logo} alt="Logo" className="ls-signin-page__logo" />
29+
<IonImg
30+
src={logo}
31+
alt={t('signin.logo-alt', { ns: 'common' })}
32+
className="ls-signin-page__logo"
33+
/>
3034
<span className="ls-signin-page__logo-text">{t('app.name', { ns: 'common' })}</span>
3135
</div>
3236

‎frontend/src/pages/Auth/Splash/SplashPage.scss‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
.ls-splash-page {
2+
--ion-background-color: transparent;
3+
4+
&__container {
5+
width: 100%;
6+
height: 100%;
7+
display: flex;
8+
align-items: center;
9+
justify-content: center;
10+
position: relative;
11+
overflow: hidden;
12+
background-color: #101828; /* Dark background color as fallback */
13+
}
14+
15+
&__background {
16+
position: absolute;
17+
top: 0;
18+
left: 0;
19+
width: 100%;
20+
height: 100%;
21+
object-fit: cover;
22+
z-index: 0;
23+
}
24+
25+
&__logo-container {
26+
display: flex;
27+
flex-direction: column;
28+
align-items: center;
29+
justify-content: center;
30+
z-index: 2; /* Increased z-index to appear above the overlay */
31+
padding: 2rem;
32+
animation: fade-in 1s ease-in;
33+
}
34+
35+
&__logo {
36+
width: 120px;
37+
height: auto;
38+
margin-bottom: 1rem;
39+
}
40+
41+
&__app-name {
42+
color: white;
43+
font-size: 2rem;
44+
font-weight: 600;
45+
text-align: center;
46+
}
47+
}
48+
49+
@keyframes fade-in {
50+
from {
51+
opacity: 0;
52+
}
53+
54+
to {
55+
opacity: 1;
56+
}
57+
}

‎frontend/src/pages/Auth/Splash/SplashPage.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { IonContent, IonPage } from '@ionic/react';
2+
import { useEffect } from 'react';
3+
import { useIonRouter } from '@ionic/react';
4+
import { useTranslation } from 'react-i18next';
5+
6+
import './SplashPage.scss';
7+
import splashBg from '../../../../src/assets/Splash.png';
8+
import { PropsWithTestId } from 'common/components/types';
9+
10+
/**
11+
* Properties for the `SplashPage` component.
12+
*/
13+
interface SplashPageProps extends PropsWithTestId {}
14+
15+
/**
16+
* The `SplashPage` renders the initial splash screen with the app logo.
17+
* It automatically redirects to the login page after a short delay.
18+
*
19+
* @param {SplashPageProps} props - Component properties.
20+
* @returns {JSX.Element} JSX
21+
*/
22+
const SplashPage = ({ testid = 'page-splash' }: SplashPageProps): JSX.Element => {
23+
const router = useIonRouter();
24+
const { t } = useTranslation();
25+
26+
useEffect(() => {
27+
// Redirect to login page after a delay
28+
const timer = setTimeout(() => {
29+
router.push('/auth/signin', 'forward', 'replace');
30+
}, 2000);
31+
32+
return () => clearTimeout(timer);
33+
}, [router]);
34+
35+
return (
36+
<IonPage className="ls-splash-page" data-testid={testid}>
37+
<IonContent fullscreen className="ion-no-padding">
38+
<div className="ls-splash-page__container">
39+
<img
40+
src={splashBg}
41+
alt={t('splash.background-alt', { ns: 'common' })}
42+
className="ls-splash-page__background"
43+
/>
44+
<div className="ls-splash-page__logo-container"></div>
45+
</div>
46+
</IonContent>
47+
</IonPage>
48+
);
49+
};
50+
51+
export default SplashPage;

‎frontend/src/theme/theme-overrides.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,7 @@ ion-content {
6464

6565
/* Background for the entire app */
6666
body,
67-
ion-app,
68-
ion-content {
67+
ion-app {
6968
background: url('../assets/Reports_bg.png') no-repeat center center fixed !important;
7069
background-size: cover !important;
7170
}

0 commit comments

Comments
 (0)