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

Jump to bottom

fix: added the hover affect to icons #2669

Merged
merged 12 commits into from
Mar 22, 2024
Merged

fix: added the hover affect to icons #2669

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
53b838d
Added the hover affect to icons
sagarkori143 Feb 18, 2024
c989429
Merge branch 'master' into icons
sagarkori143 Mar 1, 2024
f51df3a
Added requested changes
sagarkori143 Mar 3, 2024
3758e4c
final
sagarkori143 Mar 4, 2024
46bfdb2
Merge branch 'master' into icons
akshatnema Mar 6, 2024
cfa09d9
Merge branch 'asyncapi:master' into icons
sagarkori143 Mar 10, 2024
35f5e4b
Merge branch 'master' into icons
sagarkori143 Mar 10, 2024
3ee94e7
Requested changes done :)
sagarkori143 Mar 10, 2024
bd88d7d
Merge branch 'icons' of github.com:sagarkori143/website into icons
sagarkori143 Mar 10, 2024
e6ce92d
Final commit
sagarkori143 Mar 10, 2024
f0364f5
Update components/icons/Twitter.js
akshatnema Mar 22, 2024
520f4a6
Merge branch 'master' into icons
akshatnema Mar 22, 2024
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
10 changes: 6 additions & 4 deletions components/icons/Github.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
export default function IconGithub({ className }) {

return (
<svg
className={className}
fill="currentColor"
viewBox="0 0 24 24"
fill='currentColor'
viewBox="0 0 48 48"
>
<path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
<path d="M44,24c0,8.96-5.88,16.54-14,19.08V38c0-1.71-0.72-3.24-1.86-4.34c5.24-0.95,7.86-4,7.86-9.66c0-2.45-0.5-4.39-1.48-5.9 c0.44-1.71,0.7-4.14-0.52-6.1c-2.36,0-4.01,1.39-4.98,2.53C27.57,14.18,25.9,14,24,14c-1.8,0-3.46,0.2-4.94,0.61 C18.1,13.46,16.42,12,14,12c-1.42,2.28-0.84,4.74-0.3,6.12C12.62,19.63,12,21.57,12,24c0,5.66,2.62,8.71,7.86,9.66 c-0.67,0.65-1.19,1.44-1.51,2.34H16c-1.44,0-2-0.64-2.77-1.68c-0.77-1.04-1.6-1.74-2.59-2.03c-0.53-0.06-0.89,0.37-0.42,0.75 c1.57,1.13,1.68,2.98,2.31,4.19C13.1,38.32,14.28,39,15.61,39H18v4.08C9.88,40.54,4,32.96,4,24C4,12.95,12.95,4,24,4 S44,12.95,44,24z" />
</svg>
)
);
}

11 changes: 11 additions & 0 deletions components/icons/GithubFilled.js
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sagarkori143 To provide hover effect inside the icons, can't we use CSS in the same icon to provide color to the icon, on hover?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did check about it and results came out as adding some custom classes and so on. But I will give it one more try. Will give you update about this very soon.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I applied hover properties to the existing imported icons. Please have a look.

Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export default function GithubFilled({ className }) {
return (
<svg
className={className}
fill="#000000"
viewBox="0 0 24 24"
>
<path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
</svg>
)
}
28 changes: 15 additions & 13 deletions components/icons/LinkedIn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
export default function IconLinkedIn({ className }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 21 22"
enableBackground="new 0 0 21 22"
fill="currentColor"
className={className}
>
<path d="M5,3c0,1.1-0.7,2-2,2C1.8,5,1,4.1,1,3.1C1,2,1.8,1,3,1S5,1.9,5,3z M1,19h4V6H1V19z M14.6,6.2c-2.1,0-3.3,1.2-3.8,2h-0.1
l-0.2-1.7H6.9C6.9,7.6,7,8.9,7,10.4V19h4v-7.1c0-0.4,0-0.7,0.1-1c0.3-0.7,0.8-1.6,1.9-1.6c1.4,0,2,1.2,2,2.8V19h4v-7.4
C19,7.9,17.1,6.2,14.6,6.2z"/>
</svg>
)
}
<svg
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
clipRule="evenodd"
/>
</svg>
);
}


15 changes: 15 additions & 0 deletions components/icons/LinkedInFilled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export default function LinkedInFilled({ className }) {
return (
<svg
aria-hidden="true"
fill="#0077b5"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
clipRule="evenodd"
/>
</svg>
)
}
25 changes: 14 additions & 11 deletions components/icons/Twitter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
export default function IconTwitter({ className }) {
return (
<svg className={className} width="50px" height="50px" viewBox="0 0 1200 1227" fill="currentColor" >
<path
fillRule="evenodd"
d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
fill="currentColor"
clip-fillrule="evenodd" >
</path>
</svg>
)


export default function IconTwitter({ className, isHovered, setIsHovered }) {
akshatnema marked this conversation as resolved.
Show resolved Hide resolved
return (
<svg
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
x="0px" y="0px"
width="20" height="20"
viewBox="0 0 24 24">
<path d="M 2.3671875 3 L 9.4628906 13.140625 L 2.7402344 21 L 5.3808594 21 L 10.644531 14.830078 L 14.960938 21 L 21.871094 21 L 14.449219 10.375 L 20.740234 3 L 18.140625 3 L 13.271484 8.6875 L 9.2988281 3 L 2.3671875 3 z M 6.2070312 5 L 8.2558594 5 L 18.033203 19 L 16.001953 19 L 6.2070312 5 z" />
</svg>
);
}

11 changes: 11 additions & 0 deletions components/icons/TwitterFilled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export default function TwitterFilled({ className }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px" y="0px"
width="20" height="20"
viewBox="0 0 24 24">
<path d="M 2.3671875 3 L 9.4628906 13.140625 L 2.7402344 21 L 5.3808594 21 L 10.644531 14.830078 L 14.960938 21 L 21.871094 21 L 14.449219 10.375 L 20.740234 3 L 18.140625 3 L 13.271484 8.6875 L 9.2988281 3 L 2.3671875 3 z M 6.2070312 5 L 8.2558594 5 L 18.033203 19 L 16.001953 19 L 6.2070312 5 z" />
</svg>
);
}
74 changes: 40 additions & 34 deletions pages/community/tsc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,13 @@ import TSCMembersList from "../../config/MAINTAINERS.json";
import {sortBy} from 'lodash';
import NewsletterSubscribe from "../../components/NewsletterSubscribe";
import TextLink from '../../components/typography/TextLink';
import { useState } from 'react';
import GithubFilled from '../../components/icons/GithubFilled';
import IconGithub from '../../components/icons/Github';
import IconLinkedIn from '../../components/icons/LinkedIn';
import LinkedInFilled from '../../components/icons/LinkedInFilled';
import IconTwitter from '../../components/icons/Twitter';
import TwitterFilled from '../../components/icons/TwitterFilled';

function addAdditionalUserInfo(user) {
const userData = {
Expand Down Expand Up @@ -241,44 +248,43 @@ function QuestionCard() {
}

function TwitterSVG() {
return (
<svg
className="w-5 h-5"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
</svg>
);
const [ isHovered, setIsHovered ] = useState(false);

return (
<div
className="relative w-5 h-5"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{isHovered ? <TwitterFilled /> : <IconTwitter />}
</div>
);
}

function GithubSVG() {
return (
<svg
className="w-5 h-5"
fill="currentColor"
aria-hidden="true"
viewBox="0 0 48 48"
>
<path d="M44,24c0,8.96-5.88,16.54-14,19.08V38c0-1.71-0.72-3.24-1.86-4.34c5.24-0.95,7.86-4,7.86-9.66c0-2.45-0.5-4.39-1.48-5.9 c0.44-1.71,0.7-4.14-0.52-6.1c-2.36,0-4.01,1.39-4.98,2.53C27.57,14.18,25.9,14,24,14c-1.8,0-3.46,0.2-4.94,0.61 C18.1,13.46,16.42,12,14,12c-1.42,2.28-0.84,4.74-0.3,6.12C12.62,19.63,12,21.57,12,24c0,5.66,2.62,8.71,7.86,9.66 c-0.67,0.65-1.19,1.44-1.51,2.34H16c-1.44,0-2-0.64-2.77-1.68c-0.77-1.04-1.6-1.74-2.59-2.03c-0.53-0.06-0.89,0.37-0.42,0.75 c1.57,1.13,1.68,2.98,2.31,4.19C13.1,38.32,14.28,39,15.61,39H18v4.08C9.88,40.54,4,32.96,4,24C4,12.95,12.95,4,24,4 S44,12.95,44,24z" />
</svg>
);
const [ isHovered, setIsHovered ] = useState(false);

return (
<div
className="relative w-5 h-5"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{isHovered ? <GithubFilled /> : <IconGithub />}
</div>
);
}

function LinkedInSVG() {
return (
<svg
className="w-5 h-5"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
clipRule="evenodd"
/>
</svg>
);
const [ isHovered, setIsHovered ] = useState(false);

return (
<div
className="relative w-5 h-5"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{isHovered ? <LinkedInFilled /> : <IconLinkedIn />}
</div>
);
}
2 changes: 1 addition & 1 deletion pages/tools/generator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function GeneratorPage() {
className="w-full mb-2 sm:w-auto sm:mb-0 sm:mr-2"
/> */}
<GithubButton
className="w-full sm:w-auto"
className="ml-2 block mt-2 md:mt-0 md:inline-block w-full sm:w-auto"
href="https://www.github.com/asyncapi/generator"
/>
<Button text="View Docs" href="/docs/tools/generator" className="ml-2 mt-2 md:mt-0 w-full sm:w-auto"/>
Expand Down
Loading