feat: add common border radiius to all buttons

Signed-off-by: amitamrutiya <amitamrutiya2210@gmail.com>

Author: amitamrutiya

src/custom/CatalogDetail/ActionButton.tsx

@@ -50,7 +50,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
       {showOpenPlaygroundAction && (
         <ActionButton
           sx={{
-            borderRadius: '0.2rem',
+            borderRadius: theme.shape.borderRadius,
             backgroundColor: theme.palette.background.cta?.default,
             color: theme.palette.text.inverse,
             gap: '10px',
@@ -81,7 +81,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
               sx={{
                 backgroundColor: showOpenPlaygroundAction ? 'transparent' : undefined,
                 color: theme.palette.text.default,
-                borderRadius: '0.2rem',
+                borderRadius: theme.shape.borderRadius,
                 gap: '10px',
                 border: `1px solid ${theme.palette.border.normal}`
               }}
@@ -100,7 +100,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
           )}
           <ActionButton
             sx={{
-              borderRadius: '0.2rem',
+              borderRadius: theme.shape.borderRadius,
               backgroundColor: 'transparent',
               border: `1px solid ${theme.palette.border.normal}`,
               gap: '10px',
@@ -129,7 +129,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
         {showInfoAction && (
           <ActionButton
             sx={{
-              borderRadius: '0.2rem',
+              borderRadius: theme.shape.borderRadius,
               backgroundColor: 'transparent',
               border: `1px solid ${theme.palette.border.normal}`,
               gap: '10px',
@@ -144,7 +144,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
         {showDeleteAction && (
           <UnpublishAction
             sx={{
-              borderRadius: '0.2rem',
+              borderRadius: theme.shape.borderRadius,
               gap: '10px'
             }}
             onClick={handleDelete}

src/custom/DashboardWidgets/GettingStartedWidget/ActionButtonCard.tsx

@@ -194,7 +194,13 @@ const ActionButtonCard = ({
           <CustomComponentWrapper>{customComponent}</CustomComponentWrapper>
           {actionButton && (
             <CardActions>
-              <Button disabled={disabled} variant="contained" href={href} onClick={onClick}>
+              <Button
+                disabled={disabled}
+                variant="contained"
+                href={href}
+                onClick={onClick}
+                size="small"
+              >
                 {showProgress ? (percentage === 100 ? 'Revisit' : btnTitle) : btnTitle}
               </Button>
             </CardActions>

src/custom/Workspaces/styles.tsx

@@ -1,7 +1,6 @@
 import { Box, Button, Card, Checkbox, Grid, IconButton, Typography } from '../../base';
 import { DeleteIcon, EditIcon } from '../../icons';
 import { styled, useTheme } from '../../theme';
-import { charcoal } from '../../theme/colors/colors';
 import { CustomTooltip } from '../CustomTooltip';
 
 export const ModalActionDiv = styled('div')({
@@ -181,7 +180,6 @@ export const AllocationWorkspace = styled(AllocationButton)({
 
 export const PopupButton = styled(Button)(({ theme }) => ({
   width: '100%',
-  borderRadius: '4px',
   background: theme.palette.background.brand?.default,
   boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.25)',
   display: 'flex',
@@ -215,21 +213,6 @@ export const TabCount = styled('p')<TabStyleProps>(({ theme, textColor }) => ({
   color: textColor || theme.palette.text.constant?.white
 }));
 
-export const ViewButton = styled(Button)(({ theme }) => ({
-  width: '100%',
-  borderRadius: '4px',
-  background: theme.palette.text.default,
-  boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.25)',
-  display: 'flex',
-  flexDirection: 'column',
-  marginBottom: '10px',
-  color: `${charcoal[40]}30 !important`,
-  '&:hover': {
-    background: theme.palette.text.default
-  },
-  padding: '15px 10px'
-}));
-
 interface IconWrapperProps {
   disabled?: boolean;
 }

src/theme/components/button.modifier.ts

@@ -13,6 +13,7 @@ export const MuiButton: Components<Theme>['MuiButton'] = {
       } = theme;
       return {
         ...textB2SemiBold,
+        borderRadius: '0.5rem',
         fontWeight: 500,
         '&.MuiButton-contained': {
           color: constant?.white,

src/theme/theme.ts

@@ -26,6 +26,9 @@ export const createCustomTheme = (mode: PaletteMode, brandPalette?: Interactiven
     },
     components,
     typography: typography(mode),
-    breakpoints: {}
+    breakpoints: {},
+    shape: {
+      borderRadius: 8
+    }
   });
 };