Skip to content

Commit

Permalink
Adding effects to icon on hover (OWASP#426)
Browse files Browse the repository at this point in the history
* updated index.css

* feature: "effect-on-icon-hover'

* separated className logic

* Update DisplayIcon.tsx

---------

Co-authored-by: Arkadii Yakovets <[email protected]>
Co-authored-by: Kate Golovanova <[email protected]>
  • Loading branch information
3 people authored Jan 12, 2025
1 parent e535b6a commit bcfdddc
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 2 deletions.
26 changes: 24 additions & 2 deletions frontend/src/components/DisplayIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,33 @@ export default function DisplayIcon({
icons: IconType
idx: number
}) {
// className for the container
const containerClassName = [
'flex flex-col items-center justify-center gap-1 border-b border-l border-t border-border px-4 pb-1 sm:border-t-0',
idx === 0 || (idx === -1 && Object.keys(icons).length === 1)
? 'rounded-bl-none sm:rounded-bl-md'
: '',
idx === -1 ? 'border-r sm:border-r-0' : '',
item === 'idx_updated_at' || item === 'idx_stars_count' ? 'rotate-container' : '',
item === 'idx_forks_count' || item === 'idx_contributors_count' ? 'flip-container' : '',
]
.filter(Boolean)
.join(' ')

// className for the FontAwesome icon
const iconClassName = [
'text-gray-600 dark:text-gray-300',
item === 'idx_updated_at' || item === 'idx_stars_count' ? 'icon-rotate' : '',
item === 'idx_forks_count' || item === 'idx_contributors_count' ? 'icon-flip' : '',
]
.filter(Boolean)
.join(' ')

return icons[item] ? (
<div
data-tooltip-id={`icon-tooltip-${item}`}
data-tooltip-content={`${Icons[item as keyof typeof Icons]?.label}`}
className={`flex flex-col items-center justify-center gap-1 border-b border-l border-border px-4 pb-1 ${idx === 0 || (idx === -1 && Object.keys(icons).length === 1) ? 'rounded-bl-none sm:rounded-bl-md' : ''} ${idx === -1 ? 'border-r sm:border-r-0' : ''} border-t sm:border-t-0`}
className={containerClassName}
>
{/* Display formatted number if the value is a number */}
<span className="text-gray-600 dark:text-gray-300">
Expand All @@ -28,7 +50,7 @@ export default function DisplayIcon({
</span>
<span>
<FontAwesomeIconWrapper
className="text-gray-600 dark:text-gray-300"
className={iconClassName}
icon={Icons[item as IconKeys]?.icon} // Display corresponding icon
/>
</span>
Expand Down
16 changes: 16 additions & 0 deletions frontend/src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -174,3 +174,19 @@ a {
@apply bg-background text-foreground;
}
}

.icon-rotate {
transition: transform 2.5s ease;
}

.rotate-container:hover .icon-rotate {
transform: rotate(360deg);
}

.icon-flip {
transition: transform 1s ease;
}

.flip-container:hover .icon-flip {
transform: rotateY(180deg);
}

0 comments on commit bcfdddc

Please sign in to comment.