Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style: dynamic logo colors for brands #1894

Merged
merged 2 commits into from
Jul 6, 2023
Merged

style: dynamic logo colors for brands #1894

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb30f86
Implemented colored Hover Effect in logos
Shriansh2002 Jun 28, 2023
db547c4
Merge branch 'master' into master
derberg Jul 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions components/logos/Adidas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
export default function AdidasLogo({ className }) {
return (
<svg className={className || 'inline-block'} fill="currentColor" viewBox="0 0 1065.5 254.5">
<g id="XMLID_1_">
<path id="XMLID_16_" d="M1030.713,10.174c12.585,0,22.597,10.299,22.597,23.741c0,12.299-10.012,22.596-22.597,22.596
return (
<svg className={className || 'inline-block'} fill="currentColor" viewBox="0 0 1065.5 254.5">
<g id="XMLID_1_">
<path id="XMLID_16_" d="M1030.713,10.174c12.585,0,22.597,10.299,22.597,23.741c0,12.299-10.012,22.596-22.597,22.596
c-12.586,0-22.596-10.297-22.596-22.596C1008.117,20.473,1018.413,10.174,1030.713,10.174z M1030.713,13.322
c-11.44,0-19.45,9.15-19.45,20.593c0,10.297,8.296,19.449,19.45,19.449c10.298,0,19.449-9.152,19.449-19.449
C1050.448,22.76,1041.011,13.322,1030.713,13.322z M1035.86,34.201c1.146,0,4.005,0.857,4.005,5.148v7.15h-4.005v-3.146
Expand Down
12 changes: 7 additions & 5 deletions components/logos/Axway.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,15 @@ export default function AxwayLogo({ className }) {
C370.57,205.816,380.632,200.295,380.632,184.834"/>
<path id="Fill-9" d="M419.65,256.613l20.858-47.239l-38.159-79.019h27.239l24.54,53.62l21.841-53.62h26.38l-57.301,126.381
H419.65V256.613z"/>
<g id="Group-13" transform="translate(56.41 .062)">
<path id="Fill-11" fill="currentColor" d="M685.952,97.241v-30.92l-46.381-22.699v46.38L462.394,5.462v30.92l202.699,96.319V87.302
<g className="group-hover:text-[#de262c]">
<g id="Group-13" transform="translate(56.41 .062)">
<path id="Fill-11" fill="currentColor" d="M685.952,97.241v-30.92l-46.381-22.699v46.38L462.394,5.462v30.92l202.699,96.319V87.302
L685.952,97.241z"/>
</g>
<path id="Fill-14" fill="currentColor" d="M564.19,119.436v30.92l32.761,15.461l-52.761,55.46h34.479l61.84-65.399L564.19,119.436z"
/>
<path id="Fill-16" fill="currentColor" d="M721.368,148.516L543.209,63.116v30.921l141.718,68.098L721.368,148.516z" />
</g>
<path id="Fill-14" fill="currentColor" d="M564.19,119.436v30.92l32.761,15.461l-52.761,55.46h34.479l61.84-65.399L564.19,119.436z"
/>
<path id="Fill-16" fill="currentColor" d="M721.368,148.516L543.209,63.116v30.921l141.718,68.098L721.368,148.516z" />
</g>
</g>
</g>
Expand Down
30 changes: 22 additions & 8 deletions components/logos/SAP.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,26 @@
import { useState } from 'react';

export default function SapLogo({ className }) {
return (
<svg className={className || 'inline-block'} fill="currentColor" viewBox="0 0 1024 522">
<linearGradient id="path3060_1_" gradientUnits="userSpaceOnUse" x1="-127.4302" y1="661.6777" x2="-126.4722" y2="661.6777" gradientTransform="matrix(0 513.7015 -513.7015 0 340415.5625 65474.9453)">
<stop offset="0" style={{ stopColor:'currentColor' }} />
<stop offset="1" style={{ stopColor:'currentColor' }} />
</linearGradient>
<path id="path3060" fill="url(#path3060_1_)" d="M13.43,13.621v491.971h502.559l491.915-491.915l0,0H13.43V13.621z" />
<path id="path5384" fill="currentColor" d="M649.993,455.304v36.691h5.538v-15.923h6.229l10.039,15.923h6.23l-10.731-15.923
const [isHovered, setIsHovered] = useState(false);

const handleMouseEnter = () => {
setIsHovered(true);
};
const handleMouseLeave = () => {
setIsHovered(false);
};

return (
<svg className={className || 'inline-block'} fill="currentColor" viewBox="0 0 1024 522"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<linearGradient id="path3060_1_" gradientUnits="userSpaceOnUse" x1="-127.4302" y1="661.6777" x2="-126.4722" y2="661.6777" gradientTransform="matrix(0 513.7015 -513.7015 0 340415.5625 65474.9453)">
<stop offset="0" style={{ stopColor: !isHovered ? 'currentColor' : '#1661BE' }} />
<stop offset="1" style={{ stopColor: !isHovered ? 'currentColor' : '#019CE0' }} />
</linearGradient>
<path id="path3060" fill="url(#path3060_1_)" d="M13.43,13.621v491.971h502.559l491.915-491.915l0,0H13.43V13.621z" />
<path id="path5384" fill="url(#path3060_1_)" d="M649.993,455.304v36.691h5.538v-15.923h6.229l10.039,15.923h6.23l-10.731-15.923
c5.362-0.665,9.692-3.783,9.692-10.385c0-7.232-4.427-10.384-13.152-10.384H649.993z M655.531,460.149h7.614
c3.745,0,7.962,0.609,7.962,5.191c0,5.728-4.271,6.232-9,6.232h-6.576V460.149z M662.454,441.803
c-17.567,0-32.539,13.537-32.539,31.846c0,18.442,14.971,32.192,32.539,32.192c17.324,0,31.846-13.747,31.846-32.192
Expand Down
4 changes: 2 additions & 2 deletions components/logos/Salesforce.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 5 additions & 5 deletions components/logos/Slack.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,25 +20,25 @@ export default function SlackLogo({ className }) {
c18.718,0,36.612-8.433,43.812-20.568v17.483h44.018V338.088H772.978L772.978,338.088z"/>
</g>
<g>
<g>
<g className='group-hover:text-[#E01E5A]'>
<path d="M183.474,430.441c0,15.016-12.136,27.151-27.151,27.151s-27.151-12.136-27.151-27.151
c0-15.015,12.136-27.15,27.151-27.15h27.151V430.441z"/>
<path d="M197.05,430.441c0-15.015,12.136-27.15,27.151-27.15s27.151,12.136,27.151,27.15v67.878
c0,15.015-12.136,27.15-27.151,27.15s-27.151-12.136-27.151-27.15V430.441z"/>
</g>
<g>
<g className='group-hover:text-[#36C5F0]'>
<path d="M224.201,321.427c-15.016,0-27.151-12.136-27.151-27.151s12.136-27.151,27.151-27.151s27.151,12.136,27.151,27.151
v27.151H224.201z"/>
<path d="M224.201,335.208c15.015,0,27.151,12.136,27.151,27.151c0,15.015-12.136,27.15-27.151,27.15h-68.083
c-15.015,0-27.151-12.136-27.151-27.15c0-15.016,12.136-27.151,27.151-27.151H224.201z"/>
</g>
<g>
<g className='group-hover:text-[#2EB67D]'>
<path d="M333.01,362.359c0-15.016,12.136-27.151,27.151-27.151s27.151,12.136,27.151,27.151c0,15.015-12.136,27.15-27.151,27.15
H333.01V362.359z"/>
<path d="M319.435,362.359c0,15.015-12.136,27.15-27.151,27.15c-15.016,0-27.151-12.136-27.151-27.15v-68.083
c0-15.015,12.135-27.151,27.151-27.151c15.015,0,27.151,12.136,27.151,27.151V362.359z"/>
</g>
<g>
<g className='group-hover:text-[#ECB22E]'>
<path d="M292.284,471.168c15.015,0,27.151,12.136,27.151,27.151c0,15.015-12.136,27.15-27.151,27.15
c-15.016,0-27.151-12.136-27.151-27.15v-27.151H292.284z"/>
<path d="M292.284,457.593c-15.016,0-27.151-12.136-27.151-27.151c0-15.015,12.135-27.15,27.151-27.15h68.083
Expand All @@ -47,5 +47,5 @@ export default function SlackLogo({ className }) {
</g>
</g>
</svg>
)
);
}
6 changes: 3 additions & 3 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,13 +54,13 @@ function HomePage() {
</Paragraph>
<ul className="md:grid md:gap-8 md:grid-cols-2 lg:grid-cols-5">
<li className="justify-center flex">
<AdidasLogo className="h-8 text-gray-400" />
<AdidasLogo className="h-8 text-gray-400 hover:text-black" />
</li>
<li className="justify-center flex">
<AxwayLogo className="mt-12 md:-mt-5 lg:-mt-5 h-14 text-gray-400" />
<AxwayLogo className="mt-12 md:-mt-5 lg:-mt-5 h-14 text-gray-400 group hover:text-black" />
</li>
<li className="justify-center flex">
<SlackLogo className="mt-12 md:mt-2 lg:-mt-1 h-10 text-gray-400" />
<SlackLogo className="mt-12 md:mt-2 lg:-mt-1 h-10 text-gray-400 hover:text-black group" />
derberg marked this conversation as resolved.
Show resolved Hide resolved
</li>
<li className="justify-center flex">
<SalesforceLogo className="mt-12 md:mt-2 lg:-mt-4 h-16 text-gray-400" />
Expand Down