From 0c2fbe1acc7a5e0ccc4630ae43accdb05c650686 Mon Sep 17 00:00:00 2001
From: Adil Alimbetov <cheepo2109@gmail.com>
Date: Wed, 20 May 2020 12:19:28 +0600
Subject: [PATCH] Removed nested card in Status component (#832)

* Removed nested padding on card component

* updated to use spacing function

* Refactored noPadding implementation

* Removed noPadding by default

* trying to fix merge conflict

* Added back no padding after merge conflict
---
 .../src/components/Status/Status.stories.tsx  |  2 +-
 .../core/src/layout/InfoCard/InfoCard.tsx     | 24 +++++++++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/components/Status/Status.stories.tsx b/packages/core/src/components/Status/Status.stories.tsx
index 0e3717d082..140b2e6b3f 100644
--- a/packages/core/src/components/Status/Status.stories.tsx
+++ b/packages/core/src/components/Status/Status.stories.tsx
@@ -68,7 +68,7 @@ const containerStyle = { width: 600 };
 
 export const Default = () => (
   <div style={containerStyle}>
-    <InfoCard title="Available status types">
+    <InfoCard title="Available status types" noPadding>
       <Table
         options={{
           search: false,
diff --git a/packages/core/src/layout/InfoCard/InfoCard.tsx b/packages/core/src/layout/InfoCard/InfoCard.tsx
index a2585a3006..9be29b5a6b 100644
--- a/packages/core/src/layout/InfoCard/InfoCard.tsx
+++ b/packages/core/src/layout/InfoCard/InfoCard.tsx
@@ -24,21 +24,28 @@ import {
   withStyles,
   makeStyles,
 } from '@material-ui/core';
+import classNames from 'classnames';
 import ErrorBoundary from '../ErrorBoundary';
 import BottomLink, { Props as BottomLinkProps } from '../BottomLink';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   header: {
     padding: theme.spacing(2, 2, 2, 2.5),
   },
+  noPadding: {
+    padding: 0,
+    '&:last-child': {
+      paddingBottom: 0,
+    },
+  },
 }));
 
-const BoldHeader = withStyles((theme) => ({
+const BoldHeader = withStyles(theme => ({
   title: { fontWeight: 700 },
   subheader: { paddingTop: theme.spacing(1) },
 }))(CardHeader);
 
-const CardActionsTopRight = withStyles((theme) => ({
+const CardActionsTopRight = withStyles(theme => ({
   root: {
     display: 'inline-block',
     padding: theme.spacing(8, 8, 0, 0),
@@ -127,6 +134,7 @@ type Props = {
   cardClassName?: string;
   actionsTopRight?: ReactNode;
   className?: string;
+  noPadding?: boolean;
 };
 
 const InfoCard: FC<Props> = ({
@@ -144,6 +152,7 @@ const InfoCard: FC<Props> = ({
   cardClassName,
   actionsTopRight,
   className,
+  noPadding,
 }) => {
   const classes = useStyles();
 
@@ -156,7 +165,7 @@ const InfoCard: FC<Props> = ({
 
   if (variant) {
     const variants = variant.split(/[\s]+/g);
-    variants.forEach((name) => {
+    variants.forEach(name => {
       calculatedStyle = {
         ...calculatedStyle,
         ...VARIANT_STYLES.card[name as keyof typeof VARIANT_STYLES['card']],
@@ -189,7 +198,12 @@ const InfoCard: FC<Props> = ({
           <CardActionsTopRight>{actionsTopRight}</CardActionsTopRight>
         )}
         {divider && <Divider />}
-        <CardContent className={cardClassName} style={calculatedCardStyle}>
+        <CardContent
+          className={classNames(cardClassName, {
+            [classes.noPadding]: noPadding,
+          })}
+          style={calculatedCardStyle}
+        >
           {children}
         </CardContent>
         {actions && (