Merge pull request #972 from layer5io/revert-958-add-border-rad

Revert "feat: add common border radius to all buttons"

Author: amitamrutiya

src/custom/CatalogDetail/ActionButton.tsx

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

src/custom/DashboardWidgets/GettingStartedWidget/ActionButtonCard.tsx

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

src/custom/Workspaces/styles.tsx

@@ -1,6 +1,7 @@
 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')({
@@ -180,6 +181,7 @@ 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',
@@ -213,6 +215,21 @@ 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,7 +13,6 @@ export const MuiButton: Components<Theme>['MuiButton'] = {
       } = theme;
       return {
         ...textB2SemiBold,
-        borderRadius: '0.5rem',
         fontWeight: 500,
         '&.MuiButton-contained': {
           color: constant?.white,

src/theme/theme.ts

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