diff --git a/src/app/components/auth-layout/AuthLayout.tsx b/src/app/components/auth-layout/AuthLayout.tsx index a57e7963..d90a6847 100644 --- a/src/app/components/auth-layout/AuthLayout.tsx +++ b/src/app/components/auth-layout/AuthLayout.tsx @@ -1,5 +1,5 @@ import React, { ReactNode } from 'react'; -import { Box, Header, Scroll, Text } from 'folds'; +import { Box, Header, Scroll } from 'folds'; import classNames from 'classnames'; import * as css from './styles.css'; @@ -12,11 +12,11 @@ export function AuthLogo({ large }: { large?: boolean }) { } type AuthLayoutProps = { - hideHeader?: boolean; center?: boolean; children?: ReactNode; + header?: ReactNode; }; -export function AuthLayout({ hideHeader, center, children }: AuthLayoutProps) { +export function AuthLayout({ center, header, children }: AuthLayoutProps) { return ( - {!hideHeader && ( + {header && (
- - - Cinny - + {header}
)} + {children} diff --git a/src/app/components/auth-layout/styles.css.ts b/src/app/components/auth-layout/styles.css.ts index 649c4beb..b359d09a 100644 --- a/src/app/components/auth-layout/styles.css.ts +++ b/src/app/components/auth-layout/styles.css.ts @@ -44,7 +44,8 @@ export const AuthLogo = recipe({ }); export const AuthHeader = style({ - padding: `0 ${config.space.S400}`, + paddingLeft: config.space.S400, + paddingRight: config.space.S300, borderBottomWidth: config.borderWidth.B300, }); diff --git a/src/app/pages/AccountSelector.tsx b/src/app/pages/AccountSelector.tsx index 9b012cce..303bcf8b 100644 --- a/src/app/pages/AccountSelector.tsx +++ b/src/app/pages/AccountSelector.tsx @@ -116,7 +116,7 @@ export function AccountSelector() { } return ( - + diff --git a/src/app/pages/auth/AuthRoot.tsx b/src/app/pages/auth/AuthRoot.tsx index afec36e4..cf6441be 100644 --- a/src/app/pages/auth/AuthRoot.tsx +++ b/src/app/pages/auth/AuthRoot.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect } from 'react'; -import { Box, Spinner, Text, color } from 'folds'; +import { Box, Chip, Icon, IconButton, Icons, Spinner, Text, color } from 'folds'; import { Outlet, generatePath, @@ -25,8 +25,10 @@ import { AuthFlowsLoader } from '../../components/AuthFlowsLoader'; import { AuthFlowsProvider } from '../../hooks/useAuthFlows'; import { AuthServerProvider } from '../../hooks/useAuthServer'; import { tryDecodeURIComponent } from '../../utils/dom'; -import { AuthLayout } from '../../components/auth-layout'; +import { AuthLayout, AuthLogo } from '../../components/auth-layout'; import { useUnauthThemeManager } from '../ThemeManager'; +import { useSessions } from '../../hooks/useSessions'; +import { getRootPath } from '../pathUtils'; const currentAuthPath = (pathname: string): string => { if (matchPath(LOGIN_PATH, pathname)) { @@ -67,6 +69,7 @@ export function AuthRoot() { const navigate = useNavigate(); const location = useLocation(); const { server: urlEncodedServer } = useParams(); + const sessions = useSessions(); const clientConfig = useClientConfig(); @@ -121,7 +124,27 @@ export function AuthRoot() { discoveryState.status === AsyncStatus.Success ? discoveryState.data.response : []; return ( - + + + + Cinny + + {sessions.length > 0 && ( + } + onClick={() => navigate(getRootPath())} + > + Accounts + + )} + + } + > Homeserver