From c9d9dc5e3422749f2ccf46093438aea608524102 Mon Sep 17 00:00:00 2001
From: LeticiadelaOsa <deletidev@gmail.com>
Date: Tue, 10 Sep 2024 19:23:49 +0200
Subject: [PATCH] use the default border in border selection

---
 src/pods/canvas/canvas.model.ts                 | 10 +++++-----
 .../border-radius/border-radius.component.tsx   | 17 +++++++++++------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/pods/canvas/canvas.model.ts b/src/pods/canvas/canvas.model.ts
index 3c652813..e5a4fc52 100644
--- a/src/pods/canvas/canvas.model.ts
+++ b/src/pods/canvas/canvas.model.ts
@@ -382,7 +382,7 @@ export const generateDefaultOtherProps = (
         backgroundColor: INPUT_SHAPE.DEFAULT_FILL_BACKGROUND,
         textColor: INPUT_SHAPE.DEFAULT_FILL_TEXT,
         strokeStyle: [],
-        borderRadius: '12',
+        borderRadius: `${INPUT_SHAPE.DEFAULT_CORNER_RADIUS}`,
       };
     case 'tooltip':
       return {
@@ -403,7 +403,7 @@ export const generateDefaultOtherProps = (
         backgroundColor: BASIC_SHAPE.DEFAULT_FILL_BACKGROUND,
         textColor: BASIC_SHAPE.DEFAULT_FILL_TEXT,
         strokeStyle: [],
-        borderRadius: '12',
+        borderRadius: `${INPUT_SHAPE.DEFAULT_CORNER_RADIUS}`,
       };
     case 'combobox':
       return {
@@ -411,7 +411,7 @@ export const generateDefaultOtherProps = (
         backgroundColor: BASIC_SHAPE.DEFAULT_FILL_BACKGROUND,
         textColor: BASIC_SHAPE.DEFAULT_FILL_TEXT,
         strokeStyle: [],
-        borderRadius: '12',
+        borderRadius: `${INPUT_SHAPE.DEFAULT_CORNER_RADIUS}`,
       };
     case 'modal':
     case 'buttonBar':
@@ -433,7 +433,7 @@ export const generateDefaultOtherProps = (
         backgroundColor: '#FFFF99',
         textColor: '#000000',
         strokeStyle: [],
-        borderRadius: '12',
+        borderRadius: `${INPUT_SHAPE.DEFAULT_CORNER_RADIUS}`,
       };
 
     case 'circle':
@@ -450,7 +450,7 @@ export const generateDefaultOtherProps = (
         stroke: '#000000',
         backgroundColor: '#ffffff',
         strokeStyle: [],
-        borderRadius: '12',
+        borderRadius: `${INPUT_SHAPE.DEFAULT_CORNER_RADIUS}`,
       };
     case 'line':
       return {
diff --git a/src/pods/properties/components/border-radius/border-radius.component.tsx b/src/pods/properties/components/border-radius/border-radius.component.tsx
index 1cc2cb38..356d36a1 100644
--- a/src/pods/properties/components/border-radius/border-radius.component.tsx
+++ b/src/pods/properties/components/border-radius/border-radius.component.tsx
@@ -1,3 +1,4 @@
+import { BASIC_SHAPE } from '@/common/components/front-components/shape.const';
 import classes from './border-radius.module.css';
 
 interface Props {
@@ -6,6 +7,10 @@ interface Props {
   onChange: (borderRadius: string) => void;
 }
 
+const BORDER_RADIUS_NONE = '0';
+const BORDER_RADIUS_SMALL = `${BASIC_SHAPE.DEFAULT_CORNER_RADIUS}`;
+const BORDER_RADIUS_BIG = '12';
+
 export const BorderRadius: React.FC<Props> = props => {
   const { label, borderRadius, onChange } = props;
 
@@ -14,8 +19,8 @@ export const BorderRadius: React.FC<Props> = props => {
       <p>{label}</p>
       <div className={classes.buttonsContainer}>
         <button
-          onClick={() => onChange('0')}
-          className={`${classes.button} ${borderRadius === '0' ? classes.active : ''}`}
+          onClick={() => onChange(BORDER_RADIUS_NONE)}
+          className={`${classes.button} ${borderRadius === BORDER_RADIUS_NONE ? classes.active : ''}`}
           style={{ borderRadius: '0' }}
         >
           <svg
@@ -35,8 +40,8 @@ export const BorderRadius: React.FC<Props> = props => {
           </svg>
         </button>
         <button
-          onClick={() => onChange('12')}
-          className={`${classes.button} ${borderRadius === '12' ? classes.active : ''}`}
+          onClick={() => onChange(BORDER_RADIUS_SMALL)}
+          className={`${classes.button} ${borderRadius === BORDER_RADIUS_SMALL ? classes.active : ''}`}
           style={{ borderRadius: '0' }}
         >
           <svg
@@ -56,8 +61,8 @@ export const BorderRadius: React.FC<Props> = props => {
           </svg>
         </button>
         <button
-          onClick={() => onChange('30')}
-          className={`${classes.button} ${borderRadius === '30' ? classes.active : ''}`}
+          onClick={() => onChange(BORDER_RADIUS_BIG)}
+          className={`${classes.button} ${borderRadius === BORDER_RADIUS_BIG ? classes.active : ''}`}
           style={{ borderRadius: '0' }}
         >
           <svg