logo and intl

packages/core/admin/admin/src/pages/HomePage/ContentBlock.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Row } from '@strapi/parts/Row';
-import { Stack } from '@strapi/parts/Stack';
-import { Text, TextButton } from '@strapi/parts/Text';
-
-const IconWrapper = styled(Row)`
-  margin-right: ${({ theme }) => theme.spaces[6]};
-  svg {
-    width: ${32 / 16}rem;
-    height: ${32 / 16}rem;
-  }
-`;
-
-const ContentBox = ({ title, subtitle, icon, iconBackground, endAction }) => {
-  return (
-    <Row background="neutral0" shadow="tableShadow" hasRadius padding={6}>
-      <IconWrapper background={iconBackground} hasRadius padding={3}>
-        {icon}
-      </IconWrapper>
-      <Stack size={endAction ? '' : 1}>
-        <Row>
-          <TextButton>{title}</TextButton>
-          {endAction}
-        </Row>
-        <Text textColor="neutral600">{subtitle}</Text>
-      </Stack>
-    </Row>
-  );
-};
-
-ContentBox.defaultProps = {
-  title: undefined,
-  subtitle: undefined,
-  icon: undefined,
-  iconBackground: undefined,
-  endAction: undefined,
-};
-
-ContentBox.propTypes = {
-  title: PropTypes.string,
-  subtitle: PropTypes.string,
-  icon: PropTypes.node,
-  iconBackground: PropTypes.string,
-  endAction: PropTypes.node,
-};
-
-export default ContentBox;

packages/core/admin/admin/src/pages/HomePage/ContentBlocks.js

@@ -1,47 +1,74 @@
 import React from 'react';
 import styled from 'styled-components';
+import { useIntl } from 'react-intl';
 import { Stack } from '@strapi/parts/Stack';
 import ReadDoc from '@strapi/icons/ReadDoc';
 import CodeExample from '@strapi/icons/CodeExample';
 import Tutorial from '@strapi/icons/Tutorial';
 import Blog from '@strapi/icons/Blog';
-import ContentBlock from './ContentBlock';
+import { ContentBox } from '@strapi/helper-plugin';
 
 const BlockLink = styled.a`
   text-decoration: none;
 `;
 
 const ContentBlocks = () => {
+  const { formatMessage } = useIntl();
+
   return (
     <Stack size={5}>
-      <BlockLink href="https://strapi.io/blog">
-        <ContentBlock
-          title="Read the documentation"
-          subtitle="Discover the concepts, reference, guides and tutorials"
+      <BlockLink href="https://strapi.io/resource-center" target="_blank">
+        <ContentBox
+          title={formatMessage({
+            id: 'app.components.BlockLink.documentation',
+            defaultMessage: 'Read the documentation',
+          })}
+          subtitle={formatMessage({
+            id: 'app.components.BlockLink.documentation.content',
+            defaultMessage: 'Discover the concepts, reference, guides and tutorials',
+          })}
           icon={<ReadDoc />}
           iconBackground="primary100"
         />
       </BlockLink>
-      <BlockLink href="https://strapi.io/blog">
-        <ContentBlock
-          title="Code example"
-          subtitle="Learn by testing real project developed by the community"
+      <BlockLink href="https://strapi.io/starters" target="_blank">
+        <ContentBox
+          title={formatMessage({
+            id: 'app.components.BlockLink.code',
+            defaultMessage: 'Code example',
+          })}
+          subtitle={formatMessage({
+            id: 'app.components.BlockLink.code.content',
+            defaultMessage: 'Learn by testing real project developed by the community',
+          })}
           icon={<CodeExample />}
           iconBackground="warning100"
         />
       </BlockLink>
-      <BlockLink href="https://strapi.io/blog">
-        <ContentBlock
-          title="Tutorial"
-          subtitle="Discover the concepts, reference, guides and tutorials"
+      <BlockLink href="https://strapi.io/blog" target="_blank">
+        <ContentBox
+          title={formatMessage({
+            id: 'app.components.BlockLink.tutorial',
+            defaultMessage: 'Tutorial',
+          })}
+          subtitle={formatMessage({
+            id: 'app.components.BlockLink.tutorial.content',
+            defaultMessage: 'Discover the concepts, reference, guides and tutorials',
+          })}
           icon={<Tutorial />}
           iconBackground="secondary100"
         />
       </BlockLink>
-      <BlockLink href="https://strapi.io/blog">
-        <ContentBlock
-          title="Blog"
-          subtitle="Discover the concepts, reference, guides and tutorials"
+      <BlockLink href="https://strapi.io/blog" target="_blank">
+        <ContentBox
+          title={formatMessage({
+            id: 'app.components.BlockLink.blog',
+            defaultMessage: 'Blog',
+          })}
+          subtitle={formatMessage({
+            id: 'app.components.BlockLink.blog.content',
+            defaultMessage: 'Discover the concepts, reference, guides and tutorials',
+          })}
           icon={<Blog />}
           iconBackground="alternative100"
         />

packages/core/admin/admin/src/pages/HomePage/SocialLinks.js

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-
+import { useIntl } from 'react-intl';
 import { H3, Text } from '@strapi/parts/Text';
 import { Box } from '@strapi/parts/Box';
 import { Stack } from '@strapi/parts/Stack';
@@ -24,7 +24,7 @@ const socialLinks = [
   {
     name: 'Github',
     link: 'https://github.com/strapi/strapi/',
-    icon: <Github />,
+    icon: <Github fill="#7289DA" />,
     alt: 'github',
   },
   {
@@ -84,6 +84,8 @@ const WordWrap = styled(Text)`
 `;
 
 const SocialLinks = () => {
+  const { formatMessage } = useIntl();
+
   return (
     <Box
       background="neutral0"
@@ -97,13 +99,25 @@ const SocialLinks = () => {
       <Box paddingBottom={7}>
         <Stack size={5}>
           <Stack size={3}>
-            <H3>Join the community</H3>
+            <H3>
+              {formatMessage({
+                id: 'app.components.HomePage.community',
+                defaultMessage: 'Join the community',
+              })}
+            </H3>
             <WordWrap textColor="neutral600">
-              Discuss with team members, contributors and developers on different channels
+              {formatMessage({
+                id: 'app.components.HomePage.community.content',
+                defaultMessage:
+                  'Discuss with team members, contributors and developers on different channels',
+              })}
             </WordWrap>
           </Stack>
           <Link href="https://strapi.io/" endIcon={<ExternalLink />}>
-            see our road map
+            {formatMessage({
+              id: 'app.components.HomePage.roadmap',
+              defaultMessage: 'See our road map',
+            })}
           </Link>
         </Stack>
       </Box>

packages/core/admin/admin/src/pages/HomePage/index.js

@@ -5,9 +5,9 @@
  */
 /* eslint-disable */
 import React, { memo, useMemo } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
+import styled from 'styled-components';
 import { useModels } from '../../hooks';
-
 import SocialLinks from './SocialLinks';
 import HomeHeader from './HomeHeader';
 import ContentBlocks from './ContentBlocks';
@@ -17,10 +17,18 @@ import { Layout } from '@strapi/parts/Layout';
 import { Main } from '@strapi/parts/Main';
 import { Box } from '@strapi/parts/Box';
 import { Grid, GridItem } from '@strapi/parts/Grid';
+import Logo from '../../assets/images/homepage-logo.png';
+
+const LogoContainer = styled(Box)`
+  position: absolute;
+  top: 0;
+  right: 0;
+  img {
+    width: ${150 / 16}rem;
+  }
+`;
 
 const HomePage = ({ history: { push } }) => {
-  // const { formatMessage } = useIntl();
-  // const { error, isLoading, posts } = useFetch();
   // // Temporary until we develop the menu API
   const { collectionTypes, singleTypes, isLoading: isLoadingForModels } = useModels();
 
@@ -47,9 +55,12 @@ const HomePage = ({ history: { push } }) => {
   return (
     <Layout>
       <FormattedMessage id="HomePage.helmet.title">
-        {title => <PageTitle title={title} />}
+        {title => <PageTitle title={title[0]} />}
       </FormattedMessage>
       <Main labelledBy="homepage">
+        <LogoContainer>
+          <img alt="" src={Logo} />
+        </LogoContainer>
         <Box padding={10}>
           <Grid>
             <GridItem col={8} s={12}>

packages/core/admin/admin/src/translations/en.json

@@ -62,13 +62,7 @@
   "Documentation": "Documentation",
   "Email": "Email",
   "Files Upload": "Files Upload",
-  "HomePage.community": "Join the Community",
-  "HomePage.greetings": "Hi {name}!",
   "HomePage.helmet.title": "Homepage",
-  "HomePage.roadmap": "See our roadmap",
-  "HomePage.welcome.congrats": "Congrats!",
-  "HomePage.welcome.congrats.content": "You are logged as the first administrator. To discover the powerful features provided by Strapi,",
-  "HomePage.welcome.congrats.content.bold": "we recommend you to create your first Collection-Type.",
   "Media Library": "Media Library",
   "New entry": "New entry",
   "Password": "Password",
@@ -205,10 +199,14 @@
   "app.components.go-back": "Go back",
   "app.components.ToggleCheckbox.on-label": "On",
   "app.components.ToggleCheckbox.off-label": "Off",
+  "app.components.BlockLink.blog": "Blog",
+  "app.components.BlockLink.blog.content": "Discover the concepts, reference guides and tutorials.",
   "app.components.BlockLink.code": "Code examples",
   "app.components.BlockLink.code.content": "Learn by testing real projects developed the community.",
   "app.components.BlockLink.documentation": "Read the documentation",
   "app.components.BlockLink.documentation.content": "Discover the concepts, reference guides and tutorials.",
+  "app.components.BlockLink.tutorial": "Tutorial",
+  "app.components.BlockLink.tutorial.content": "Discover the concepts, reference guides and tutorials.",
   "app.components.Button.cancel": "Cancel",
   "app.components.Button.confirm": "Confirm",
   "app.components.Button.reset": "Reset",
@@ -220,9 +218,10 @@
   "app.components.DownloadInfo.text": "This could take a minute. Thanks for your patience.",
   "app.components.EmptyAttributes.title": "There are no fields yet",
   "app.components.HomePage.button.blog": "See more on the blog",
-  "app.components.HomePage.community": "Find the community on the web",
+  "app.components.HomePage.community": "Join the community",
   "app.components.HomePage.community.content": "Discuss with team members, contributors and developers on different channels.",
   "app.components.HomePage.create": "Create your first Content type",
+  "app.components.HomePage.roadmap": "See our roadmap",
   "app.components.HomePage.welcome": "Welcome on board 👋",
   "app.components.HomePage.welcome.again": "Welcome 👋",
   "app.components.HomePage.welcomeBlock.content": "Congrats! You are logged as the first administrator. To discover the powerful features provided by Strapi, we recommend you to create your first Content type!",

packages/core/helper-plugin/lib/src/components/ContentBox/index.js

@@ -15,7 +15,7 @@ const IconWrapper = styled(Row)`
 
 const ContentBox = ({ title, subtitle, icon, iconBackground, endAction }) => {
   return (
-    <Row shadow="tableShadow" hasRadius padding={6}>
+    <Row shadow="tableShadow" hasRadius padding={6} background="neutral0">
       <IconWrapper background={iconBackground} hasRadius padding={3}>
         {icon}
       </IconWrapper>