Skip to content

fix: enchanced the look of the clickable logos from non clickable in the home page #5320

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

Open
vaidik-bajpai wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fix: enchanced the look of the clickable logos from non clickable in the home page #5320

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
53d9c32
enhc: enchanced the look of Governance Board overview sections by add…
vaidik-bajpai Apr 5, 2026
64378e9
fix: enchanced the look of the clickable logos from non clickable in …
vaidik-bajpai Apr 5, 2026
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
12 changes: 6 additions & 6 deletions components/SupportUs/SupportUs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ export default function SupportUs({ className = '' }: SupportUsProps): React.Rea
href={item.href}
target='_blank'
rel='noopener noreferrer'
className='relative block w-2/3 p-4 text-center sm:w-1/3 sm:p-0 md:w-1/3 lg:w-1/5'
className='group relative block w-2/3 p-4 text-center sm:w-1/3 sm:p-0 md:w-1/3 lg:w-1/5'
>
<img className={item.imgClass} src={item.imgSrc} title={item.imgTitle} alt={item.imgTitle} />
<img className={`${item.imgClass} group-hover:scale-105 group-hover:brightness-110 transition-all duration-300`} src={item.imgSrc} title={item.imgTitle} alt={item.imgTitle} />
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 5, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Fix Prettier-blocking JSX formatting on image tags.

The pipeline is failing at Line 33, Line 48, and Line 63 due to inline <img> formatting. Please apply multiline JSX formatting to unblock CI.

💡 Suggested formatting patch 
-              <img className={`${item.imgClass} group-hover:scale-105 group-hover:brightness-110 transition-all duration-300`} src={item.imgSrc} title={item.imgTitle} alt={item.imgTitle} />
+              <img
+                className={`${item.imgClass} group-hover:scale-105 group-hover:brightness-110 transition-all duration-300`}
+                src={item.imgSrc}
+                title={item.imgTitle}
+                alt={item.imgTitle}
+              />
@@
-              <img className={`${item.imgClass} group-hover:scale-105 group-hover:brightness-110 transition-all duration-300`} src={item.imgSrc} title={item.imgTitle} alt={item.imgTitle} />
+              <img
+                className={`${item.imgClass} group-hover:scale-105 group-hover:brightness-110 transition-all duration-300`}
+                src={item.imgSrc}
+                title={item.imgTitle}
+                alt={item.imgTitle}
+              />
@@
-              <img className={`${item.imgClass} group-hover:scale-105 group-hover:brightness-110 transition-all duration-300`} src={item.imgSrc} title={item.imgTitle} alt={item.imgTitle} />
+              <img
+                className={`${item.imgClass} group-hover:scale-105 group-hover:brightness-110 transition-all duration-300`}
+                src={item.imgSrc}
+                title={item.imgTitle}
+                alt={item.imgTitle}
+              />

Also applies to: 48-48, 63-63

🧰 Tools
🪛 GitHub Actions: PR testing - if Node project

[error] 33-33: ESLint (prettier/prettier): Prettier formatting error. Replace the single-line JSX className/src/title/alt with the suggested multi-line formatting.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@components/SupportUs/SupportUs.tsx` at line 33, In SupportUs component update
the single-line <img> elements (the ones using template string className like
`${item.imgClass} group-hover:...` with src={item.imgSrc} title={item.imgTitle}
alt={item.imgTitle}) to multiline JSX: put the opening tag on its own line,
place each prop (className, src, title, alt) on its own indented line, and close
the tag on a new line (/>); apply the same multiline formatting to all three
occurrences of the <img> in this component to satisfy Prettier and unblock CI.

</a>
))}
</div>
Expand All @@ -43,9 +43,9 @@ export default function SupportUs({ className = '' }: SupportUsProps): React.Rea
href={item.href}
target='_blank'
rel='noopener noreferrer'
className='relative block w-2/3 p-4 text-center sm:w-1/3 sm:p-0 md:w-1/3 lg:w-1/5'
className='group relative block w-2/3 p-4 text-center sm:w-1/3 sm:p-0 md:w-1/3 lg:w-1/5'
>
<img className={item.imgClass} src={item.imgSrc} title={item.imgTitle} alt={item.imgTitle} />
<img className={`${item.imgClass} group-hover:scale-105 group-hover:brightness-110 transition-all duration-300`} src={item.imgSrc} title={item.imgTitle} alt={item.imgTitle} />
</a>
))}
</div>
Expand All @@ -58,9 +58,9 @@ export default function SupportUs({ className = '' }: SupportUsProps): React.Rea
href={item.href}
target='_blank'
rel='noopener noreferrer'
className='relative block w-2/3 p-4 text-center sm:w-1/3 sm:p-0 md:w-1/3 lg:w-1/5'
className='group relative block w-2/3 p-4 text-center sm:w-1/3 sm:p-0 md:w-1/3 lg:w-1/5'
>
<img className={item.imgClass} src={item.imgSrc} title={item.imgTitle} alt={item.imgTitle} />
<img className={`${item.imgClass} group-hover:scale-105 group-hover:brightness-110 transition-all duration-300`} src={item.imgSrc} title={item.imgTitle} alt={item.imgTitle} />
</a>
))}
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/logos/Axway.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ C370.57,205.816,380.632,200.295,380.632,184.834'
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 className='group-hover:text-[#de262c]'>
<g>
<g id='Group-13' transform='translate(56.41 .062)'>
<path
id='Fill-11'
Expand Down
17 changes: 3 additions & 14 deletions components/logos/SAP.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,15 @@
import React, { useState } from 'react';
import React from 'react';

/**
* @description Logo for SAP
* @param {string} className - used to style the svg
*/
export default function SapLogo({ className }: { className?: string }) {
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'
Comment on lines 9 to 12
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 5, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Fix Prettier formatting to unblock CI.

The pipeline is failing due to multi-line prop formatting. Reformat the SVG opening tag to satisfy Prettier.

🔧 Suggested fix 
-    <svg
-      className={className || 'inline-block'}
-      fill='currentColor'
-      viewBox='0 0 1024 522'
-    >
+    <svg className={className || 'inline-block'} fill='currentColor' viewBox='0 0 1024 522'>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<svg
className={className || 'inline-block'}
fill='currentColor'
viewBox='0 0 1024 522'
<svg className={className || 'inline-block'} fill='currentColor' viewBox='0 0 1024 522'>
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project

[error] 9-9: ESLint (prettier/prettier): Prettier formatting error. Replace multi-line className/fill/viewBox props with the suggested single-line formatting.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@components/logos/SAP.tsx` around lines 9 - 12, Update the SVG opening tag in
the SAP component so it matches Prettier's expected formatting: put the entire
<svg ...> start tag and its attributes (className, fill, viewBox, etc.) on a
single line or each prop on its own line consistently (e.g., <svg
className={className || 'inline-block'} fill="currentColor" viewBox="0 0 1024
522">), replacing the current broken multi-line prop layout in the SAP.tsx
component.

onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<linearGradient
id='path3060_1_'
Expand All @@ -31,8 +20,8 @@ export default function SapLogo({ className }: { className?: string }) {
y2='661.6777'
gradientTransform='matrix(0 513.7015 -513.7015 0 340415.5625 65474.9453)'
>
<stop offset='0' style={{ stopColor: isHovered ? '#1661BE' : 'currentColor' }} />
<stop offset='1' style={{ stopColor: isHovered ? '#019CE0' : 'currentColor' }} />
<stop offset='0' style={{ stopColor: 'currentColor' }} />
<stop offset='1' style={{ stopColor: 'currentColor' }} />
</linearGradient>
<path
id='path3060'
Expand Down
3 changes: 1 addition & 2 deletions components/logos/Salesforce.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,11 @@ import React from 'react';
export default function SalesforceLogo({ className }: { className?: string }) {
return (
<svg className={className || 'inline-block'} fill='currentColor' viewBox='0 0 256 180'>
<g className='group'>
<g>
<path
d='M106.553203,159.610976 C114.801129,168.204994 126.284107,173.534815 138.983873,173.534815 C155.865892,173.534815 170.594851,164.121105 178.438396,150.146262 C185.254593,153.191874 192.799405,154.885905 200.737669,154.885905 C231.186506,154.885905 255.871995,129.985475 255.871995,99.2706935 C255.871995,68.5522694 231.186506,43.651839 200.737669,43.651839 C197.021731,43.651839 193.389583,44.0234329 189.877657,44.7338328 C182.970383,32.4129469 169.807947,24.0885163 154.700107,24.0885163 C148.375726,24.0885163 142.393793,25.5493901 137.067615,28.1469039 C130.065621,11.6765534 113.751923,0.127999726 94.7387049,0.127999726 C74.9385822,0.127999726 58.0638501,12.6565411 51.5864595,30.2271008 C48.7557888,29.6259931 45.8231119,29.3126885 42.8139304,29.3126885 C19.23958,29.3126885 0.127998772,48.6209959 0.127998772,72.4430755 C0.127998772,88.4070383 8.71473094,102.34545 21.4727861,109.802829 C18.8461277,115.846693 17.3852539,122.517167 17.3852539,129.53009 C17.3852539,156.926028 39.6262381,179.134225 67.0586069,179.134225 C83.1646497,179.134225 97.4782987,171.476477 106.553203,159.610976'
fill='currentColor'
transform='translate(127.999997, 89.631112) scale(1, -1) translate(-127.999997, -89.631112)'
className='group-hover:text-[#009EDB]'
></path>
<path
d='M37.1700744,75.3309413 C37.009779,74.9119875 37.2283636,74.8245536 37.2793667,74.7516921 C37.7602528,74.4019567 38.2484251,74.1505844 38.7402405,73.8700675 C41.3486835,72.4856983 43.8114035,72.0813168 46.3870588,72.0813168 C51.6330895,72.0813168 54.8900002,74.8719136 54.8900002,79.3638274 L54.8900002,79.4512613 C54.8900002,83.6043689 51.2141357,85.1126027 47.7641419,86.2018827 L47.3160434,86.3476058 C44.7148866,87.1927996 42.4707512,87.921415 42.4707512,89.6336611 L42.4707512,89.724738 C42.4707512,91.1892549 43.7822589,92.2676057 45.8150958,92.2676057 C48.0738034,92.2676057 50.755108,91.5171318 52.4819264,90.5626457 C52.4819264,90.5626457 52.9883141,90.2347688 53.174111,90.7265842 C53.2761172,90.9888857 54.1504556,93.3423133 54.2415326,93.5973287 C54.3398956,93.8742026 54.1650279,94.0782149 53.9865172,94.1875072 C52.0156126,95.3860795 49.2905911,96.2057718 46.4708496,96.2057718 L45.9462465,96.2021287 C41.1446712,96.2021287 37.7930405,93.3022395 37.7930405,89.1454888 L37.7930405,89.058055 C37.7930405,84.6754335 41.4907635,83.2546335 44.9553296,82.2637166 L45.5127204,82.092492 C48.0373727,81.3165166 50.2122895,80.6498336 50.2122895,78.872012 L50.2122895,78.7845782 C50.2122895,77.1597659 48.7987757,75.9502644 46.5182096,75.9502644 C45.6329419,75.9502644 42.8095574,75.9684798 39.760302,77.8956674 C39.3923513,78.110609 39.1774097,78.2672613 38.8932497,78.4384859 C38.7438836,78.5332059 38.3686467,78.6971444 38.2047082,78.2016859 L37.1700744,75.3309413 L37.1700744,75.3309413 Z'
Expand Down
8 changes: 4 additions & 4 deletions components/logos/Slack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ c18.718,0,36.612-8.433,43.812-20.568v17.483h44.018V338.088H772.978L772.978,338.0
/>
</g>
<g>
<g className='group-hover:text-[#E01E5A]'>
<g>
<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'
Expand All @@ -44,7 +44,7 @@ c0-15.015,12.136-27.15,27.151-27.15h27.151V430.441z'
c0,15.015-12.136,27.15-27.151,27.15s-27.151-12.136-27.151-27.15V430.441z'
/>
</g>
<g className='group-hover:text-[#36C5F0]'>
<g>
<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'
Expand All @@ -54,7 +54,7 @@ v27.151H224.201z'
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 className='group-hover:text-[#2EB67D]'>
<g>
<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'
Expand All @@ -64,7 +64,7 @@ H333.01V362.359z'
c0-15.015,12.135-27.151,27.151-27.151c15.015,0,27.151,12.136,27.151,27.151V362.359z'
/>
</g>
<g className='group-hover:text-[#ECB22E]'>
<g>
<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'
Expand Down
2 changes: 1 addition & 1 deletion components/sponsors/GoldSponsors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default function GoldSponsors({ className = '' }: GoldSponsorsProps): Rea
key={index}
href={sponsor.website}
target='_blank'
className='relative block w-2/3 p-4 text-center sm:w-1/2 sm:p-0 md:w-1/3 lg:w-1/5'
className='group relative block w-2/3 p-4 text-center sm:w-1/2 sm:p-0 md:w-1/3 lg:w-1/5'
rel='noopener noreferrer'
data-testid='GoldSponsors-link'
>
Expand Down
2 changes: 1 addition & 1 deletion components/sponsors/PlatinumSponsors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default function PlatinumSponsors({ className = '', showSupportBanner = t
<a
href={sponsor.website}
target='_blank'
className='relative block p-4 text-center sm:p-0'
className='group relative block p-4 text-center sm:p-0'
rel='noopener noreferrer'
data-testid='Sponsors-link'
>
Expand Down
2 changes: 1 addition & 1 deletion components/sponsors/SilverSponsors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default function SilverSponsors({ className = '' }: SilverSponsorsProps):
key={index}
href={sponsor.website}
target='_blank'
className='relative block w-2/3 p-4 text-center sm:w-1/2 md:w-1/3 lg:w-1/4'
className='group relative block w-2/3 p-4 text-center sm:w-1/2 md:w-1/3 lg:w-1/4'
rel='noopener noreferrer'
data-testid='SilverSponsors-link'
>
Expand Down
2 changes: 1 addition & 1 deletion components/sponsors/SponsorImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ interface SponsorImageProps {
export default function SponsorImage({ src, alt = 'Sponsor logo', className }: SponsorImageProps) {
return (
<div className='flex size-full items-center justify-center'>
<img src={src} alt={alt} className={twMerge('max-h-9 sm:max-h-12 w-auto object-contain', className)} />
<img src={src} alt={alt} className={twMerge('max-h-9 sm:max-h-12 w-auto object-contain group-hover:scale-110 group-hover:brightness-110 transition-all duration-300', className)} />
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 5, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Resolve the Prettier failure on the <img> JSX.

Line 16 is failing lint formatting in CI; reformat this element to multiline JSX.

💡 Suggested formatting patch 
-      <img src={src} alt={alt} className={twMerge('max-h-9 sm:max-h-12 w-auto object-contain group-hover:scale-110 group-hover:brightness-110 transition-all duration-300', className)} />
+      <img
+        src={src}
+        alt={alt}
+        className={twMerge(
+          'max-h-9 sm:max-h-12 w-auto object-contain group-hover:scale-110 group-hover:brightness-110 transition-all duration-300',
+          className
+        )}
+      />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<img src={src} alt={alt} className={twMerge('max-h-9 sm:max-h-12 w-auto object-contain group-hover:scale-110 group-hover:brightness-110 transition-all duration-300', className)} />
<img
src={src}
alt={alt}
className={twMerge(
'max-h-9 sm:max-h-12 w-auto object-contain group-hover:scale-110 group-hover:brightness-110 transition-all duration-300',
className
)}
/>
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project

[error] 16-16: ESLint (prettier/prettier): Prettier formatting error. Replace the inline JSX src/alt/className (twMerge) expression with the suggested multi-line twMerge(...) formatting.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@components/sponsors/SponsorImage.tsx` at line 16, The single-line <img>
element in SponsorImage.tsx violates Prettier; reformat the JSX to a multiline
element so attributes are each on their own lines. Locate the img element inside
the SponsorImage component (the line using twMerge('...', className) with src
and alt props) and break it into multiple lines: put the opening tag on its own
line, place src={src}, alt={alt}, className={twMerge(..., className)} each on
separate lines, then close the tag on its own line; keep the same props/order
and no code changes beyond formatting.

</div>
);
}
6 changes: 3 additions & 3 deletions pages/[lang]/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,13 +59,13 @@ export default function HomePage() {
</Paragraph>
<ul className='md:grid md:grid-cols-2 md:gap-8 lg:grid-cols-5'>
<li className='flex justify-center'>
<AdidasLogo className='h-8 text-gray-400 hover:text-black' />
<AdidasLogo className='h-8 text-gray-400' />
</li>
<li className='flex justify-center'>
<AxwayLogo className='group mt-12 h-14 text-gray-400 hover:text-black md:-mt-5 lg:-mt-5' />
<AxwayLogo className='mt-12 h-14 text-gray-400 md:-mt-5 lg:-mt-5' />
</li>
<li className='flex justify-center'>
<SlackLogo className='group mt-12 h-10 text-gray-400 hover:text-black md:mt-2 lg:-mt-1' />
<SlackLogo className='mt-12 h-10 text-gray-400 md:mt-2 lg:-mt-1' />
</li>
<li className='flex justify-center'>
<SalesforceLogo className='mt-12 h-16 text-gray-400 md:mt-2 lg:-mt-4' />
Expand Down
6 changes: 3 additions & 3 deletions pages/community/board.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function Board() {
return (
<CommunityLayout membership={Membership.BOARD}>
<div className='mx-auto my-0 grid max-w-xl lg:max-w-screen-xl lg:grid-cols-3 lg:gap-8' data-testid='GB-content'>
<div>
<div className='rounded-md border border-gray-200 p-4 text-center shadow-md'>
<h3 className='text-primary-800 mb-2 font-semibold lg:text-center lg:text-2xl'>
What is the Governance Board?
</h3>
Expand All @@ -27,7 +27,7 @@ export default function Board() {
.
</p>
</div>
<div>
<div className='rounded-md border border-gray-200 p-4 text-center shadow-md'>
<h3 className='text-primary-800 mb-2 font-semibold lg:text-center lg:text-2xl'>
How can I become a Board Member?
</h3>
Expand All @@ -46,7 +46,7 @@ export default function Board() {
.
</p>
</div>
<div>
<div className='rounded-md border border-gray-200 p-4 text-center shadow-md'>
<h3 className='text-primary-800 mb-2 font-semibold lg:text-center lg:text-2xl'>
What are the responsibilities of a board member?
</h3>
Expand Down
Loading