fix: display custom logo when using a proxy server (#7235)

Co-authored-by: Martin Jagodic <[email protected]>

Author: MichalRsa

packages/decap-cms-backend-proxy/src/AuthenticationPage.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import { Icon, buttons, shadows, GoBackButton } from 'decap-cms-ui-default';
+import { Icon, buttons, shadows, GoBackButton, renderPageLogo } from 'decap-cms-ui-default';
 
 const StyledAuthenticationPage = styled.section`
   display: flex;
@@ -11,11 +11,6 @@ const StyledAuthenticationPage = styled.section`
   height: 100vh;
 `;
 
-const PageLogoIcon = styled(Icon)`
-  color: #c4c6d2;
-  margin-top: -300px;
-`;
-
 const LoginButton = styled.button`
   ${buttons.button};
   ${shadows.dropDeep};
@@ -51,7 +46,7 @@ export default class AuthenticationPage extends React.Component {
 
     return (
       <StyledAuthenticationPage>
-        <PageLogoIcon size="300px" type="decap-cms" />
+        {renderPageLogo(config.logo_url)}
         <LoginButton disabled={inProgress} onClick={this.handleLogin}>
           {inProgress ? t('auth.loggingIn') : t('auth.login')}
         </LoginButton>

packages/decap-cms-ui-default/src/AuthenticationPage.js

@@ -111,4 +111,4 @@ AuthenticationPage.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-export default AuthenticationPage;
+export { AuthenticationPage as default, renderPageLogo };

packages/decap-cms-ui-default/src/index.js

@@ -10,7 +10,7 @@ import Loader from './Loader';
 import FieldLabel from './FieldLabel';
 import IconButton from './IconButton';
 import Toggle, { ToggleContainer, ToggleBackground, ToggleHandle } from './Toggle';
-import AuthenticationPage from './AuthenticationPage';
+import AuthenticationPage, { renderPageLogo } from './AuthenticationPage';
 import WidgetPreviewContainer from './WidgetPreviewContainer';
 import ObjectWidgetTopBar from './ObjectWidgetTopBar';
 import GoBackButton from './GoBackButton';
@@ -63,6 +63,7 @@ export const DecapCmsUiDefault = {
   zIndex,
   reactSelectStyles,
   GlobalStyles,
+  renderPageLogo,
 };
 export {
   Dropdown,
@@ -97,4 +98,5 @@ export {
   reactSelectStyles,
   GlobalStyles,
   GoBackButton,
+  renderPageLogo,
 };