diff --git a/src/assets/img/IGN.svg b/src/assets/img/IGN.svg new file mode 100644 index 0000000..a88acb8 --- /dev/null +++ b/src/assets/img/IGN.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/img/logo.png b/src/assets/img/logo.png deleted file mode 100644 index 5e6f6dd..0000000 Binary files a/src/assets/img/logo.png and /dev/null differ diff --git a/src/features/auth/pages/Login/LoginPage.module.css b/src/features/auth/pages/Login/LoginPage.module.css index b8982b5..4fff187 100644 --- a/src/features/auth/pages/Login/LoginPage.module.css +++ b/src/features/auth/pages/Login/LoginPage.module.css @@ -20,10 +20,10 @@ width: 100%; max-width: 600px; margin: 0 auto; + padding-top: 4.5rem; display: flex; flex-direction: column; align-items: center; - justify-content: center; gap: 3rem; text-align: center; } @@ -36,25 +36,27 @@ display: flex; flex-direction: column; align-items: center; - gap: 0.7rem; width: 100%; max-width: 17rem; } .title { - margin: 0; + color: var(--Content-Neutral-Primary, var(--gray-12, #2A2826)); + text-align: center; + + /* Headings/Hero */ + font-family: "Fira Sans"; font-size: 1.5rem; + font-style: normal; font-weight: 600; - line-height: 1.2; - color: #2a2826; - font-family:"Fira Sans"; + line-height: normal; } .subtitle { margin: 0; font-size: 1.0625rem; font-weight: 400; - line-height: 1.35; + line-height: normal; color: #2a2826; } @@ -62,17 +64,22 @@ display: flex; flex-direction: column; align-items: stretch; + padding: 1.6875rem 0.625rem 0.6875rem 0.625rem; gap: 1.5rem; width: 100%; - max-width: 18.625rem; + max-width: 18.625rem; } .actionButton { - width: 100% !important; - margin: 0 !important; - min-height: 44px; - font-size: 0.875rem; - font-weight: 600; + display: flex; + height: 2.75rem; + + justify-content: center; + align-items: center; + gap: var(--Spacing-2xs, 0.25rem); + align-self: stretch; + border-radius: 6.25rem; + background: var(--Dark-green, #26A581); } .outlineButton { @@ -87,12 +94,35 @@ border: 1px solid rgba(42, 40, 38, 0.2); border-radius: 100px; background: transparent; - color: var(--color-primary); + color: var(--green-5, #229574); font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; + + + /* display: flex; + height: 2.75rem; + padding: 0.6875rem 0.625rem; + justify-content: center; + align-items: center; + gap: var(--Spacing-2xs, 0.25rem); + align-self: stretch; + border-radius: 6.25rem; + border: 1px solid var(--gray-1, rgba(42, 40, 38, 0.20)); + + color: var(--green-5, #229574); + + + /* Appli - Btn label */ + /* font-family: "Open Sans"; + font-size: 0.875rem; + font-style: normal; + font-weight: 600; + line-height: normal; */ + + } .outlineButton:hover { @@ -110,7 +140,7 @@ } .forgotPasswordLink { - display: inline-flex; + /* display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; @@ -120,7 +150,24 @@ font-weight: 400; text-decoration: underline; text-underline-offset: 0.2rem; - text-decoration-thickness: from-font; + text-decoration-thickness: from-font; */ + + color: var(--Content-Neutral-Primary, var(--gray-12, #2A2826)); +text-align: center; + + +/* Body/Small */ +font-family: "Open Sans"; +font-size: 0.8125rem; +font-style: normal; +font-weight: 400; +line-height: normal; +text-decoration-line: underline; +text-decoration-style: solid; +text-decoration-skip-ink: auto; +text-decoration-thickness: 4.5%; /* 0.585px */ +text-underline-offset: 21%; /* 2.73px */ +text-underline-position: from-font; } .forgotPasswordIcon { diff --git a/src/features/auth/pages/Login/LoginPage.tsx b/src/features/auth/pages/Login/LoginPage.tsx index 045fd1e..5779b97 100644 --- a/src/features/auth/pages/Login/LoginPage.tsx +++ b/src/features/auth/pages/Login/LoginPage.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; - +import { AppLogo } from '@/shared/ui/AppLogo'; import { useAuth } from '@/features/auth/hooks/useAuth'; import { EXTERNAL_LINKS } from '@/shared/constants/externalLinks'; import IconExternalLink from '@/shared/assets/icons/icon-external-link.svg?react'; @@ -63,7 +63,9 @@ export function LoginPage() { return (
+
+

Bienvenue

Connectez vous pour accéder à votre espace personnel diff --git a/src/shared/assets/thumbnails/thumbnail-geodesie1.jpg b/src/shared/assets/thumbnails/thumbnail-geodesie1.jpg new file mode 100644 index 0000000..8c6d251 Binary files /dev/null and b/src/shared/assets/thumbnails/thumbnail-geodesie1.jpg differ diff --git a/src/shared/assets/thumbnails/thumbnail-rgp1.jpg b/src/shared/assets/thumbnails/thumbnail-rgp1.jpg new file mode 100644 index 0000000..4e54a8a Binary files /dev/null and b/src/shared/assets/thumbnails/thumbnail-rgp1.jpg differ diff --git a/src/shared/assets/thumbnails/thumbnail-rgp3.jpg b/src/shared/assets/thumbnails/thumbnail-rgp3.jpg new file mode 100644 index 0000000..e7a9aa3 Binary files /dev/null and b/src/shared/assets/thumbnails/thumbnail-rgp3.jpg differ diff --git a/src/shared/ui/AppLogo/AppLogo.module.css b/src/shared/ui/AppLogo/AppLogo.module.css index bbac695..d034924 100644 --- a/src/shared/ui/AppLogo/AppLogo.module.css +++ b/src/shared/ui/AppLogo/AppLogo.module.css @@ -3,11 +3,17 @@ object-fit: contain; margin-left: auto; margin-right: auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .sm { - width: 80px; - height: 80px; + width: 5.25rem; + height: 5.625rem; + padding: 0.75rem; + aspect-ratio: 14/15; } .md { diff --git a/src/shared/ui/AppLogo/AppLogo.tsx b/src/shared/ui/AppLogo/AppLogo.tsx index 7135707..103085f 100644 --- a/src/shared/ui/AppLogo/AppLogo.tsx +++ b/src/shared/ui/AppLogo/AppLogo.tsx @@ -1,4 +1,4 @@ -import logo from '@/assets/img/logo.png'; +import logo from '@/assets/img/IGN.svg'; import styles from './AppLogo.module.css';