Merge pull request #29 from Cosmian/feat/login_page_redesign

Feat/login page redesign
Cosmian · Jun 13, 2024 · 6329696 · 6329696
2 parents 39dba32 + 5cee3d4
commit 6329696
Show file tree

Hide file tree

Showing 17 changed files with 212 additions and 52 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="https://raw.githubusercontent.com/Cosmian/Files/main/svg/cosmian-icon-color.svg" />
+    <link rel="icon" href="src/assets/favicons/cropped-favicon-cosmian-32x32.png" sizes="32x32" />
+    <link rel="icon" href="src/assets/favicons/cropped-favicon-cosmian-192x192.png" sizes="192x192" />
+    <link rel="apple-touch-icon" href="src/assets/favicons/cropped-favicon-cosmian-180x180.png" />
+    <meta name="msapplication-TileImage" content="src/assets/favicons/cropped-favicon-cosmian-270x270.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cosmian - Interactive tutorial</title>
   </head>

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.tsx b/src/App.tsx
@@ -35,7 +35,19 @@ const App = (): JSX.Element => {
   }
 
   if (!isAuthenticated) {
-    return <LoginPage loginWithRedirect={() => loginWithRedirect()} />;
+    return (
+      <LoginPage
+        loginWithRedirect={() => loginWithRedirect()}
+        signUpWithRedirect={() =>
+          // https://github.com/auth0/auth0-react/issues/571#issuecomment-1718878155
+          loginWithRedirect({
+            authorizationParams: {
+              screen_hint: "signup",
+            },
+          })
+        }
+      />
+    );
   }
 
   return <AppRouter />;

diff --git a/src/assets/Cosmian_Logo_black.svg b/src/assets/Cosmian_Logo_black.svg
diff --git a/src/assets/cosmian_logo.svg b/src/assets/cosmian_logo.svg
diff --git a/src/assets/endtoend-encryption-img.webp b/src/assets/endtoend-encryption-img.webp
diff --git a/src/assets/favicons/cropped-favicon-cosmian-180x180.png b/src/assets/favicons/cropped-favicon-cosmian-180x180.png
diff --git a/src/assets/favicons/cropped-favicon-cosmian-192x192.png b/src/assets/favicons/cropped-favicon-cosmian-192x192.png
diff --git a/src/assets/favicons/cropped-favicon-cosmian-270x270.png b/src/assets/favicons/cropped-favicon-cosmian-270x270.png
diff --git a/src/assets/favicons/cropped-favicon-cosmian-32x32.png b/src/assets/favicons/cropped-favicon-cosmian-32x32.png
diff --git a/src/assets/fonts/Poppins-Bold.ttf b/src/assets/fonts/Poppins-Bold.ttf
diff --git a/src/assets/fonts/Poppins-SemiBold.ttf b/src/assets/fonts/Poppins-SemiBold.ttf
diff --git a/src/assets/login_page_background_image.png b/src/assets/login_page_background_image.png
diff --git a/src/assets/logoCosmian.svg b/src/assets/logoCosmian.svg
diff --git a/src/component/Layout.tsx b/src/component/Layout.tsx
@@ -1,7 +1,7 @@
 import { CheckCircleOutlined, CloseCircleOutlined } from "@ant-design/icons/lib/icons";
 import { useAuth0 } from "@auth0/auth0-react";
 import { Tag } from "antd";
-import { Button, CosmianLogo, Header } from "cosmian_ui";
+import { Button, Header } from "cosmian_ui";
 import React, { useEffect, useState } from "react";
 import { IoLogOutOutline } from "react-icons/io5";
 import { LiaExternalLinkAltSolid } from "react-icons/lia";
@@ -12,6 +12,7 @@ import { findCurrentNavigationItem } from "../utils/navigationActions";
 import { FooterNavigation } from "./Footer";
 import { MainNavigation } from "./MainNavigation";
 import "./layout.less";
+import logo from "../assets/Cosmian_Logo_black.svg";
 
 const Layout = (): JSX.Element => {
   const steps = useBoundStore((state) => state.steps);
@@ -43,7 +44,7 @@ const Layout = (): JSX.Element => {
       <Header
         mainLogo={
           <Link to={window.location.origin}>
-            <CosmianLogo />
+            <img loading="lazy" decoding="async" src={logo} alt="Cosmian logo white" title="Cosmian Logo" />
           </Link>
         }
         title="Interactive tutorial"