feat: change logo

Author: andreaskienle

public/co-logo-orchestrating.png

@@ -1,9 +1,9 @@
 {
-  "Login": {
-    "welcomeMessage": "Welcome to openMCP UI",
-    "description": "Your place to manage your openMCPs, see your installed components and managed resources!",
-    "learnMore": "Learn more in our documentation",
-    "signInButton": "Sign in"
+  "SignInPage": {
+    "welcomeMessage": "Welcome to ManagedControlPlane UI",
+    "subtitle": "Your central hub to orchestrate control planes, components, and managed resources",
+    "learnMoreLink": "Learn about ManagedControlPlanes",
+    "signInButton": "Sign In"
   },
   "Entities": {
     "ManagedControlPlane": "Managed Control Plane",

public/locales/en.json

@@ -3,7 +3,7 @@ import { useAuthOnboarding } from './spaces/onboarding/auth/AuthContextOnboardin
 import '@ui5/webcomponents-icons/dist/AllIcons.d.ts';
 import { useEffect } from 'react';
 import { useFrontendConfig } from './context/FrontendConfigContext.tsx';
-import LoginView from './views/Login.tsx';
+import { SignInPage } from './spaces/onboarding/pages/SignInPage/SignInPage.tsx';
 import { BusyIndicator } from '@ui5/webcomponents-react';
 import * as Sentry from '@sentry/react';
 
@@ -22,7 +22,7 @@ function App() {
   }
 
   if (!auth.isAuthenticated) {
-    return <LoginView />;
+    return <SignInPage />;
   }
 
   Sentry.setUser({

src/App.tsx

@@ -0,0 +1,21 @@
+.container {
+  height: 100vh;
+}
+
+.cardContent {
+  padding: 2rem 3rem;
+}
+
+.heading {
+  margin-bottom: 0.75rem;
+}
+
+.description {
+  font-size: 1.25em;
+}
+
+.logo {
+  width: 240px;
+  height: 290px;
+  margin: 3rem;
+}

src/assets/images/co-logo-orchestrating-dark.png

@@ -0,0 +1,60 @@
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import * as Sentry from '@sentry/react';
+
+import { Button, Card, FlexBox, Text, Title } from '@ui5/webcomponents-react';
+import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
+
+import { useAuthOnboarding } from '../../auth/AuthContextOnboarding';
+import { useLink } from '../../../../lib/shared/useLink';
+import { useTheme } from '../../../../hooks/useTheme';
+
+import LogoLight from '../../../../assets/images/co-logo-orchestrating.png';
+import LogoDark from '../../../../assets/images/co-logo-orchestrating-dark.png';
+
+import styles from './SignInPage.module.css';
+
+export function SignInPage() {
+  const auth = useAuthOnboarding();
+  const { documentationHomepage } = useLink();
+  const { t } = useTranslation();
+  const { isDarkTheme } = useTheme();
+
+  useEffect(() => {
+    Sentry.addBreadcrumb({
+      category: 'auth',
+      message: 'Visit SignInPage',
+      level: 'info',
+    });
+  }, []);
+  return (
+    <FlexBox className={styles.container} justifyContent="Center" alignItems="Center" direction="Column">
+      <FlexBox direction="Column" gap="1em">
+        <Card>
+          <FlexBox alignItems="Center" direction="Column" className={styles.cardContent}>
+            <Title level="H1" size="H2" className={styles.heading}>
+              {t('SignInPage.welcomeMessage')}
+            </Title>
+
+            <Text className={styles.description}> {t('SignInPage.subtitle')}</Text>
+
+            <img className={styles.logo} src={isDarkTheme ? LogoDark : LogoLight} alt="" />
+
+            <FlexBox direction="Column" alignItems="Center" gap="1em">
+              <Button design={ButtonDesign.Emphasized} onClick={() => void auth.login()}>
+                {t('SignInPage.signInButton')}
+              </Button>
+            </FlexBox>
+          </FlexBox>
+        </Card>
+        <FlexBox justifyContent="End">
+          <a href={documentationHomepage} target="_blank" rel="noreferrer">
+            <Button tabIndex={-1} design="Transparent">
+              {t('SignInPage.learnMoreLink')}
+            </Button>
+          </a>
+        </FlexBox>
+      </FlexBox>
+    </FlexBox>
+  );
+}