Update arrow icons viewBox

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/Icons/IconArrowDown.tsx

@@ -7,8 +7,8 @@ const IconArrowDown: FC<IIconProps> = (props: SVGProps<SVGSVGElement>) => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      viewBox='0 0 24 24'
       data-testid='icon-arrow-down'
+      viewBox='7 10 10 5'
       {...props}
     >
       <path fill='currentColor' d='m7 10l5 5l5-5z'></path>

src/Components/Icons/IconArrowUp.tsx

@@ -7,8 +7,8 @@ const IconArrowUp: FC<IIconProps> = (props: SVGProps<SVGSVGElement>) => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      viewBox='0 0 24 24'
       data-testid='icon-arrow-up'
+      viewBox='7 9 10 5'
       {...props}
     >
       <path fill='currentColor' d='m7 14l5-5l5 5z'></path>

src/Components/Icons/icons.stories.tsx

@@ -24,8 +24,10 @@ const Template = () => {
                 key={iconName}
                 className='flex flex-col items-center justify-center gap-2 p-8'
               >
-                <Icon className='h-16 w-16 text-primary' />
-                <span className='font-bold text-primary'>{iconName}</span>
+                <Icon className='h-16 w-16 text-white' />
+                <span className='font-bold text-primary-text-color'>
+                  {iconName}
+                </span>
               </div>
             );
           })}

src/Components/Reactions/index.tsx

@@ -19,14 +19,14 @@ const Reactions: FC<IReactionsProps> = ({
 }) => {
   return (
     <div className='flex gap-4 py-2 text-primary-text-color'>
-      <div className='flex gap-4'>
+      <div className='flex gap-8'>
         <div className='my-0 flex items-center justify-center gap-1'>
           {isLiking ? (
             <IconSpinner className='w-5' />
           ) : (
             <>
               <IconArrowUp
-                className={classNames("w-12", {
+                className={classNames("w-6", {
                   "fill-primary-text-color": !hasLiked,
                   "cursor-not-allowed text-primary": hasLiked || isDisliking,
                   "cursor-pointer hover:text-primary": !hasLiked
@@ -43,7 +43,7 @@ const Reactions: FC<IReactionsProps> = ({
           ) : (
             <>
               <IconArrowDown
-                className={classNames("w-12", {
+                className={classNames("w-6", {
                   "fill-primary-text-color": !hasDisliked,
                   "cursor-not-allowed text-rose-500": hasDisliked || isLiking,
                   "cursor-pointer hover:text-rose-500":