diff --git a/packages/core/admin/admin/src/components/Theme/index.js b/packages/core/admin/admin/src/components/Theme/index.js index 92e479b9ec..313ccf3762 100644 --- a/packages/core/admin/admin/src/components/Theme/index.js +++ b/packages/core/admin/admin/src/components/Theme/index.js @@ -1,12 +1,12 @@ import React from 'react'; import { ThemeProvider } from 'styled-components'; import PropTypes from 'prop-types'; -// import GlobalStyle from '../GlobalStyle'; +import GlobalStyle from '../GlobalStyle'; import Fonts from '../Fonts'; const Theme = ({ children, theme }) => ( - {/* */} + {children} diff --git a/packages/core/admin/admin/src/pages/App/index.js b/packages/core/admin/admin/src/pages/App/index.js index 40e4c2e2c2..1ffa600906 100644 --- a/packages/core/admin/admin/src/pages/App/index.js +++ b/packages/core/admin/admin/src/pages/App/index.js @@ -14,6 +14,7 @@ import { TrackingContext, } from '@strapi/helper-plugin'; import { SkipToContent } from '@strapi/parts'; +import { useIntl } from 'react-intl'; import PrivateRoute from '../../components/PrivateRoute'; import { createRoute, makeUniqueRoutes } from '../../utils'; import AuthPage from '../AuthPage'; @@ -27,6 +28,7 @@ const AuthenticatedApp = lazy(() => function App() { const toggleNotification = useNotification(); + const { formatMessage } = useIntl(); const [{ isLoading, hasAdmin, uuid }, setState] = useState({ isLoading: true, hasAdmin: false }); const authRoutes = useMemo(() => { @@ -106,7 +108,7 @@ function App() { return ( }> - Skip to content + {formatMessage({ id: 'skipToContent' })} {authRoutes} diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js b/packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js index f90b2152a1..a6b4d59641 100644 --- a/packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js +++ b/packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js @@ -3,11 +3,11 @@ import { Box, Stack, H1, Text, Subtitle, Button, Checkbox, TextInput, Main } fro import PropTypes from 'prop-types'; import styled from 'styled-components'; import { useIntl } from 'react-intl'; -import { Formik, Form } from 'formik'; +import { Formik } from 'formik'; import { Column } from '../../../../layouts/UnauthenticatedLayout'; import { useConfigurations } from '../../../../hooks'; -import FormikFocusError from './FormikFocusError'; +import Form from './Form'; const AuthButton = styled(Button)` display: inline-block; @@ -32,9 +32,8 @@ const Login = ({ onSubmit, schema }) => { > {({ values, errors, handleChange }) => (
- - strapi-app-logo +

{formatMessage({ id: 'Auth.form.welcome.title' })}

diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Login/FormikFocusError.js b/packages/core/admin/admin/src/pages/AuthPage/components/Login/Form.js similarity index 76% rename from packages/core/admin/admin/src/pages/AuthPage/components/Login/FormikFocusError.js rename to packages/core/admin/admin/src/pages/AuthPage/components/Login/Form.js index 7a4eea21ac..97fa4fc2ac 100644 --- a/packages/core/admin/admin/src/pages/AuthPage/components/Login/FormikFocusError.js +++ b/packages/core/admin/admin/src/pages/AuthPage/components/Login/Form.js @@ -1,7 +1,7 @@ -import { useEffect } from 'react'; -import { useFormikContext, getIn } from 'formik'; +import React, { useEffect } from 'react'; +import { Form, useFormikContext, getIn } from 'formik'; -const FormikFocusError = () => { +const FormWithFocus = props => { const { isSubmitting, isValidating, errors, touched } = useFormikContext(); useEffect(() => { @@ -30,7 +30,7 @@ const FormikFocusError = () => { } }, [errors, isSubmitting, isValidating, touched]); - return null; + return ; }; -export default FormikFocusError; +export default FormWithFocus; diff --git a/packages/core/admin/ee/admin/pages/AuthPage/components/Providers/SSOProviders.js b/packages/core/admin/ee/admin/pages/AuthPage/components/Providers/SSOProviders.js index 6730817f51..4c9620694e 100644 --- a/packages/core/admin/ee/admin/pages/AuthPage/components/Providers/SSOProviders.js +++ b/packages/core/admin/ee/admin/pages/AuthPage/components/Providers/SSOProviders.js @@ -1,7 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Text, Row, Grid, GridItem } from '@strapi/parts'; +import { Text, Row, Grid, GridItem, Tooltip } from '@strapi/parts'; import styled from 'styled-components'; +import { useIntl } from 'react-intl'; import { Link } from 'react-router-dom'; const SSOButton = styled.a` @@ -12,7 +13,11 @@ const SSOButton = styled.a` height: ${48 / 16}rem; border: 1px solid ${({ theme }) => theme.colors.neutral150}; border-radius: ${({ theme }) => theme.borderRadius}; - text-decoration: none; + text-decoration: inherit; + &:link { + text-decoration: none; + } + color: ${({ theme }) => theme.colors.neutral600}; `; const SSOProvidersWrapper = styled(Row)` @@ -29,13 +34,15 @@ const SSOProvidersWrapper = styled(Row)` const SSOProviderButton = ({ provider }) => { return ( - - {provider.icon ? ( - {provider.displayName} - ) : ( - {provider.displayName} - )} - + + + {provider.icon ? ( + + ) : ( + {provider.displayName} + )} + + ); }; @@ -48,6 +55,8 @@ SSOProviderButton.propTypes = { }; const SSOProviders = ({ providers, displayAllProviders }) => { + const { formatMessage } = useIntl(); + if (displayAllProviders) { return ( @@ -69,9 +78,15 @@ const SSOProviders = ({ providers, displayAllProviders }) => { ))} - - ••• - + + + ••• + + );