Merge branch 'master' into docs/update-readme-with-training

Author: amitamrutiya

src/custom/CatalogDetail/ActionButton.tsx

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

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/components/table.modifier.ts

@@ -20,7 +20,20 @@ const MuiTableBody: Components<Theme>['MuiTableBody'] = {
 const MuiTableCell: Components<Theme>['MuiTableCell'] = {
   styleOverrides: {
     root: ({ theme }) => {
-      return { borderBottom: `1px solid ${theme.palette.icon.disabled}` };
+      return {
+        borderBottom: `1px solid ${theme.palette.icon.disabled}`,
+        backgroundColor: 'transparent !important'
+      };
+    },
+    head: {
+      '& div': {
+        fontSize: '1rem',
+        fontWeight: 'bold'
+      },
+      '& .MuiButton-root': {
+        fontWeight: 'bold',
+        textTransform: 'uppercase !important'
+      }
     }
   }
 };
@@ -29,7 +42,10 @@ const MuiTableFooter: Components<Theme>['MuiTableFooter'] = {
   styleOverrides: {
     root: ({ theme }) => {
       return {
-        backgroundColor: theme.palette.background.card
+        backgroundColor:
+          theme.palette.mode == 'dark'
+            ? theme.palette.background.card
+            : theme.palette.background.surfaces
       };
     }
   }
@@ -39,7 +55,10 @@ const MuiTableHead: Components<Theme>['MuiTableHead'] = {
   styleOverrides: {
     root: ({ theme }) => {
       return {
-        backgroundColor: theme.palette.background.card,
+        backgroundColor:
+          theme.palette.mode == 'dark'
+            ? theme.palette.background.card
+            : theme.palette.background.surfaces,
         fontWeight: 'bold',
         textTransform: 'uppercase'
       };
@@ -62,7 +81,8 @@ const MuiTableSortLabel: Components<Theme>['MuiTableSortLabel'] = {
     root: ({ theme }) => {
       return {
         '& .MuiTableSortLabel-icon': {
-          color: `${theme.palette.icon.default} !important`
+          color: `${theme.palette.icon.default} !important`,
+          height: 'auto !important'
         }
       };
     }
@@ -81,7 +101,10 @@ const MuiToolbar: Components<Theme>['MuiToolbar'] = {
   styleOverrides: {
     root: ({ theme }) => {
       return {
-        backgroundColor: theme.palette.background.card,
+        backgroundColor:
+          theme.palette.mode == 'dark'
+            ? theme.palette.background.card
+            : theme.palette.background.surfaces,
         color: theme.palette.text.default
       };
     }

src/theme/theme.ts

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