feat: added custom button #190

components/LeftPanel/LeftPanel.tsx

@@ -1,8 +1,10 @@
 import { useTranslation } from 'react-i18next';
-import { Button, Players } from 'components';
+import { Button, CustomButton, Players } from 'components';
 import { LeftPanelPropsI } from './LeftPanelProps';
 import styles from './LeftPanel.module.scss';
-import React from "react";
+import React from 'react';
+import disputeIcon from 'public/images/disputeIcon.svg';
+
 export const LeftPanel: React.FC<LeftPanelPropsI> = ({
   players,
   isDisputAvailable,
@@ -21,13 +23,21 @@ export const LeftPanel: React.FC<LeftPanelPropsI> = ({
       <Players player1={players[0]} player2={players[1]} {...props} />
       <div className={styles.buttons}>
         <Button
-          size="sm"
-          color="red"
+          size='sm'
+          color='red'
           borderless
-          title="Dispute move"
+          title='Dispute move'
           disabled={!isDisputAvailable}
           onClick={onRunDisput}
         />
+        <CustomButton
+          size='sm'
+          color='transparent'
+          radius='sm'
+          text='Dispute Move'
+          image={disputeIcon.src}
+          imageSize='40'
+        />
       </div>
     </div>
   );

components/shared/ui/CustomButton/CustomButton.tsx

@@ -6,9 +6,15 @@ import Link from 'next/link';
 export const CustomButton = (props: CustomButtonProps) => {
   const { size, color, radius, text, image, imagePosition, link, imageSize } = props;
 
-  const buttonClasses = cn(styles.button, styles[`size-${size}`], styles[`color-${color}`], styles[`radius-${radius}`], {
-    [styles['text-center']]: imagePosition === 'left' || imagePosition === 'right',
-  });
+  const buttonClasses = cn(
+    styles.button,
+    styles[`size-${size}`],
+    styles[`color-${color}`],
+    styles[`radius-${radius}`],
+    {
+      [styles['text-center']]: imagePosition === 'left' || imagePosition === 'right',
+    },
+  );
 
   const imageStyles = {
     width: imageSize ? `${imageSize}px` : undefined,
@@ -19,19 +25,27 @@ export const CustomButton = (props: CustomButtonProps) => {
     return (
       <Link href={link} target='_blank'>
         <a target='_blank' className={buttonClasses}>
-          {imagePosition === 'left' && <img src={image} alt='Button Image' className={styles.image} style={imageStyles} />}
+          {imagePosition === 'left' && (
+            <img src={image} alt='Button Image' className={styles.image} style={imageStyles} />
+          )}
           <span className={styles.text}>{text}</span>
-          {imagePosition === 'right' && <img src={image} alt='Button Image' className={styles.image} style={imageStyles} />}
+          {imagePosition === 'right' && (
+            <img src={image} alt='Button Image' className={styles.image} style={imageStyles} />
+          )}
         </a>
       </Link>
     );
   }
 
   return (
     <button className={buttonClasses}>
-      {imagePosition === 'left' && <img src={image} alt='Button Image' className={styles.image} style={imageStyles} />}
+      {imagePosition === 'left' && (
+        <img src={image} alt='Button Image' className={styles.image} style={imageStyles} />
+      )}
       <span className={styles.text}>{text}</span>
-      {imagePosition === 'right' && <img src={image} alt='Button Image' className={styles.image} style={imageStyles} />}
+      {imagePosition === 'right' && (
+        <img src={image} alt='Button Image' className={styles.image} style={imageStyles} />
+      )}
     </button>
   );
 };