From 1251485b2674184b04a4eafb5a414e15746991fe Mon Sep 17 00:00:00 2001
From: "Anton@habdevs" <hramickih@yandex.ru>
Date: Thu, 7 Sep 2023 21:39:28 +0500
Subject: [PATCH] feat: added custom button #190

---
 components/LeftPanel/LeftPanel.tsx            | 20 +++++++++----
 .../shared/ui/CustomButton/CustomButton.tsx   | 28 ++++++++++++++-----
 public/images/disputeIcon.svg                 |  5 ++++
 3 files changed, 41 insertions(+), 12 deletions(-)
 create mode 100644 public/images/disputeIcon.svg

diff --git a/components/LeftPanel/LeftPanel.tsx b/components/LeftPanel/LeftPanel.tsx
index e4e2399..fba442c 100644
--- a/components/LeftPanel/LeftPanel.tsx
+++ b/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>
   );
diff --git a/components/shared/ui/CustomButton/CustomButton.tsx b/components/shared/ui/CustomButton/CustomButton.tsx
index 9aa9bb0..dccc8b3 100644
--- a/components/shared/ui/CustomButton/CustomButton.tsx
+++ b/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,9 +25,13 @@ 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>
     );
@@ -29,9 +39,13 @@ export const CustomButton = (props: CustomButtonProps) => {
 
   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>
   );
 };
diff --git a/public/images/disputeIcon.svg b/public/images/disputeIcon.svg
new file mode 100644
index 0000000..30686a8
--- /dev/null
+++ b/public/images/disputeIcon.svg
@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.75 22C12.75 22 20.75 18 20.75 12V5L12.75 2L4.75 5V12C4.75 18 12.75 22 12.75 22Z" stroke="#8777DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.75 8V12" stroke="#8777DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.75 16H12.76" stroke="#8777DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>