Merge pull request #11119 from strapi/fix-hp-icons

Fix social links
This commit is contained in:
cyril lopez 2021-09-29 10:33:20 +02:00 committed by GitHub
commit 9b1b4832fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 188 additions and 41 deletions

View File

@ -53,7 +53,11 @@ const ContentBlocks = () => {
iconBackground="warning100"
/>
</BlockLink>
<BlockLink href="https://strapi.io/blog" target="_blank" rel="noopener noreferrer nofollow">
<BlockLink
href="https://strapi.io/blog/categories/tutorials"
target="_blank"
rel="noopener noreferrer nofollow"
>
<ContentBox
title={formatMessage({
id: 'app.components.BlockLink.tutorial',

View File

@ -16,10 +16,57 @@ import ExternalLink from '@strapi/icons/ExternalLink';
import Github from '@strapi/icons/Github';
import Slack from '@strapi/icons/Slack';
import Reddit from '@strapi/icons/Reddit';
import Strapi from '@strapi/icons/Strapi';
import Twitter from '@strapi/icons/Twitter';
import Medium from '@strapi/icons/Medium';
import Discourse from '@strapi/icons/Discourse';
const StyledReddit = styled(Reddit)`
> path:first-child {
fill: #ff4500;
}
> path:last-child {
fill: ${({ theme }) => theme.colors.neutral0};
}
`;
const StyledStrapi = styled(Strapi)`
> path:first-child {
fill: #8e75ff;
}
> path:nth-child(2) {
fill: #8e75ff;
}
> path:nth-child(3) {
fill: #8e75ff;
}
`;
const StyledTwitter = styled(Twitter)`
path {
fill: #1da1f2 !important;
}
`;
const StyledDiscourse = styled(Discourse)`
> path:first-child {
fill: #231f20;
}
> path:nth-child(2) {
fill: #fff9ae;
}
> path:nth-child(3) {
fill: #00aeef;
}
> path:nth-child(4) {
fill: #00a94f;
}
> path:nth-child(5) {
fill: #f15d22;
}
> path:nth-child(6) {
fill: #e31b23;
}
`;
const socialLinks = [
{
name: 'Github',
@ -36,27 +83,33 @@ const socialLinks = [
{
name: 'Reddit',
link: 'https://www.reddit.com/r/Strapi/',
icon: <Reddit />,
icon: <StyledReddit />,
alt: 'reddit',
},
{
name: 'Twitter',
link: 'https://twitter.com/strapijs',
icon: <Twitter />,
icon: <StyledTwitter />,
alt: 'twitter',
},
{
name: 'Medium',
link: 'https://medium.com/@strapi',
icon: <Medium />,
icon: <StyledStrapi />,
alt: 'medium',
},
{
name: 'Forum',
link: 'https://forum.strapi.io',
icon: <Discourse />,
icon: <StyledDiscourse />,
alt: 'forum',
},
{
name: 'Career',
link: 'https://strapi.io/careers',
icon: <StyledStrapi />,
alt: 'career',
},
];
const LinkCustom = styled(LinkButton)`
@ -115,7 +168,10 @@ const SocialLinks = () => {
})}
</WordWrap>
</Stack>
<Link href="https://strapi.io/" endIcon={<ExternalLink />}>
<Link
href="https://portal.productboard.com/strapi/1-roadmap/tabs/2-under-consideration"
endIcon={<ExternalLink />}
>
{formatMessage({
id: 'app.components.HomePage.roadmap',
defaultMessage: 'See our road map',

View File

@ -520,6 +520,54 @@ describe('Homepage', () => {
display: flex;
}
.c55 > path:first-child {
fill: #ff4500;
}
.c55 > path:last-child {
fill: #ffffff;
}
.c57 > path:first-child {
fill: #8e75ff;
}
.c57 > path:nth-child(2) {
fill: #8e75ff;
}
.c57 > path:nth-child(3) {
fill: #8e75ff;
}
.c56 path {
fill: #1da1f2 !important;
}
.c58 > path:first-child {
fill: #231f20;
}
.c58 > path:nth-child(2) {
fill: #fff9ae;
}
.c58 > path:nth-child(3) {
fill: #00aeef;
}
.c58 > path:nth-child(4) {
fill: #00a94f;
}
.c58 > path:nth-child(5) {
fill: #f15d22;
}
.c58 > path:nth-child(6) {
fill: #e31b23;
}
.c49 {
display: -webkit-box;
display: -webkit-flex;
@ -812,7 +860,7 @@ describe('Homepage', () => {
</a>
<a
class="c23"
href="https://strapi.io/blog"
href="https://strapi.io/blog/categories/tutorials"
rel="noopener noreferrer nofollow"
target="_blank"
>
@ -946,7 +994,7 @@ describe('Homepage', () => {
</div>
<a
class="c39"
href="https://strapi.io/"
href="https://portal.productboard.com/strapi/1-roadmap/tabs/2-under-consideration"
rel="noreferrer noopener"
target="_blank"
>
@ -1087,6 +1135,7 @@ describe('Homepage', () => {
class="c50 c51"
>
<svg
class="c55"
fill="none"
height="1em"
viewBox="0 0 24 24"
@ -1129,6 +1178,7 @@ describe('Homepage', () => {
class="c50 c51"
>
<svg
class="c56"
fill="none"
height="1em"
viewBox="0 0 24 24"
@ -1181,47 +1231,30 @@ describe('Homepage', () => {
class="c50 c51"
>
<svg
class="c57"
fill="none"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<rect
fill="#D8D8D8"
height="23"
rx="1.5"
stroke="#979797"
width="23"
x="0.5"
y="0.5"
/>
<mask
height="24"
id="medium_svg__a"
maskUnits="userSpaceOnUse"
style="mask-type: alpha;"
width="24"
x="0"
y="0"
>
<rect
fill="#fff"
height="23"
rx="1.5"
stroke="#fff"
width="23"
x="0.5"
y="0.5"
/>
</mask>
<path
d="M22 0H2a2 2 0 00-2 2v20a2 2 0 002 2h20a2 2 0 002-2V2a2 2 0 00-2-2z"
fill="#12100E"
clip-rule="evenodd"
d="M23.497 0H7.68v8.035h7.783c.278 0 .503.224.503.502v7.783H24V.502A.502.502 0 0023.497 0z"
fill="#8E75FF"
fill-rule="evenodd"
/>
<path
d="M5.727 8.027a.624.624 0 00-.203-.527L4.02 5.686v-.27h4.674l3.613 7.923 3.177-7.924h4.456v.271L18.65 6.92a.376.376 0 00-.143.362v9.067a.376.376 0 00.143.361l1.257 1.235v.27h-6.322v-.27l1.302-1.265c.128-.128.128-.165.128-.36V8.99l-3.62 9.195h-.49L6.691 8.99v6.163a.85.85 0 00.233.707l1.694 2.054v.271H3.815v-.27L5.51 15.86a.82.82 0 00.218-.707V8.027z"
fill="#fff"
clip-rule="evenodd"
d="M7.68 0v8.035H.252a.25.25 0 01-.178-.429L7.68 0zM16.395 23.926a.251.251 0 01-.43-.178V16.32H24l-7.605 7.606z"
fill="#8E75FF"
fill-rule="evenodd"
opacity="0.405"
/>
<path
d="M7.68 8.035h8.034c.14 0 .252.112.252.25v8.035H8.183a.502.502 0 01-.503-.502V8.035z"
fill="#8E75FF"
opacity="0.405"
/>
</svg>
</div>
@ -1251,6 +1284,7 @@ describe('Homepage', () => {
class="c50 c51"
>
<svg
class="c58"
fill="none"
height="1em"
viewBox="0 0 24 24"
@ -1291,6 +1325,59 @@ describe('Homepage', () => {
</a>
</div>
</div>
<div
class="c46"
>
<div
class=""
>
<a
aria-disabled="false"
class="c47 c48 c49"
href="https://strapi.io/careers"
rel="noreferrer noopener"
target="_blank"
>
<div
aria-hidden="true"
class="c50 c51"
>
<svg
class="c57"
fill="none"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M23.497 0H7.68v8.035h7.783c.278 0 .503.224.503.502v7.783H24V.502A.502.502 0 0023.497 0z"
fill="#8E75FF"
fill-rule="evenodd"
/>
<path
clip-rule="evenodd"
d="M7.68 0v8.035H.252a.25.25 0 01-.178-.429L7.68 0zM16.395 23.926a.251.251 0 01-.43-.178V16.32H24l-7.605 7.606z"
fill="#8E75FF"
fill-rule="evenodd"
opacity="0.405"
/>
<path
d="M7.68 8.035h8.034c.14 0 .252.112.252.25v8.035H8.183a.502.502 0 01-.503-.502V8.035z"
fill="#8E75FF"
opacity="0.405"
/>
</svg>
</div>
<span
class="c52 c53 c54"
>
Career
</span>
</a>
</div>
</div>
</div>
</aside>
</div>