pl-fe: add too many subtle animations

Signed-off-by: mkljczk <git@mkljczk.pl>

packages/pl-fe/src/components/ui/accordion.tsx

@@ -72,8 +72,10 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
             </button>
           )}
           <Icon
-            src={expanded ? require('@tabler/icons/outline/chevron-up.svg') : require('@tabler/icons/outline/chevron-down.svg')}
-            className='size-5 text-gray-700 dark:text-gray-600'
+            src={require('@tabler/icons/outline/chevron-down.svg')}
+            className={clsx('size-5 text-gray-700 transition-transform dark:text-gray-600', {
+              'rotate-180': expanded,
+            })}
           />
         </HStack>
       </button>

packages/pl-fe/src/components/ui/button/index.tsx

@@ -16,6 +16,8 @@ interface IButton extends Pick<
   block?: boolean;
   /** URL to an SVG icon to render inside the button. */
   icon?: string;
+  /** Class name to apply to the icon element inside the button. */
+  iconClassName?: string;
   /** URL to an SVG icon to render inside the button next to the text. */
   secondaryIcon?: string;
   /** A predefined button size. */
@@ -36,6 +38,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>(({
   children,
   disabled = false,
   icon,
+  iconClassName,
   secondaryIcon,
   onClick,
   size = 'md',
@@ -72,7 +75,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>(({
       type={type}
       data-testid='button'
     >
-      {icon ? <Icon src={icon} className='size-4' /> : null}
+      {icon ? <Icon src={icon} className={clsx('size-4', iconClassName)} /> : null}
 
       {body && (
         <span>{body}</span>