From 89799499f4709dc0b2d841bdbd6e91e4e68a8643 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Fri, 22 Oct 2021 12:01:07 +0100
Subject: [PATCH 1/2] [Masonry] Improve demo styles

---
 docs/src/pages/components/masonry/BasicMasonry.js          | 1 +
 docs/src/pages/components/masonry/BasicMasonry.tsx         | 1 +
 docs/src/pages/components/masonry/FixedColumns.js          | 1 +
 docs/src/pages/components/masonry/FixedColumns.tsx         | 1 +
 docs/src/pages/components/masonry/FixedSpacing.js          | 1 +
 docs/src/pages/components/masonry/FixedSpacing.tsx         | 1 +
 docs/src/pages/components/masonry/ImageMasonry.js          | 4 ++++
 docs/src/pages/components/masonry/ImageMasonry.tsx         | 4 ++++
 docs/src/pages/components/masonry/ImageMasonry.tsx.preview | 1 +
 docs/src/pages/components/masonry/ResponsiveColumns.js     | 1 +
 docs/src/pages/components/masonry/ResponsiveColumns.tsx    | 1 +
 docs/src/pages/components/masonry/ResponsiveSpacing.js     | 1 +
 docs/src/pages/components/masonry/ResponsiveSpacing.tsx    | 1 +
 docs/src/pages/components/masonry/SSRMasonry.js            | 1 +
 docs/src/pages/components/masonry/SSRMasonry.tsx           | 1 +
 15 files changed, 21 insertions(+)

diff --git a/docs/src/pages/components/masonry/BasicMasonry.js b/docs/src/pages/components/masonry/BasicMasonry.js
index 2675d14a2208f3..819eeb086c5667 100644
--- a/docs/src/pages/components/masonry/BasicMasonry.js
+++ b/docs/src/pages/components/masonry/BasicMasonry.js
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 8
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/BasicMasonry.tsx b/docs/src/pages/components/masonry/BasicMasonry.tsx
index 2675d14a2208f3..819eeb086c5667 100644
--- a/docs/src/pages/components/masonry/BasicMasonry.tsx
+++ b/docs/src/pages/components/masonry/BasicMasonry.tsx
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 8
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/FixedColumns.js b/docs/src/pages/components/masonry/FixedColumns.js
index 035bef3061f56b..98c5e946e660a0 100644
--- a/docs/src/pages/components/masonry/FixedColumns.js
+++ b/docs/src/pages/components/masonry/FixedColumns.js
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/FixedColumns.tsx b/docs/src/pages/components/masonry/FixedColumns.tsx
index 035bef3061f56b..98c5e946e660a0 100644
--- a/docs/src/pages/components/masonry/FixedColumns.tsx
+++ b/docs/src/pages/components/masonry/FixedColumns.tsx
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/FixedSpacing.js b/docs/src/pages/components/masonry/FixedSpacing.js
index fe5afc26f34ea5..d9433e24b972a6 100644
--- a/docs/src/pages/components/masonry/FixedSpacing.js
+++ b/docs/src/pages/components/masonry/FixedSpacing.js
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/FixedSpacing.tsx b/docs/src/pages/components/masonry/FixedSpacing.tsx
index fe5afc26f34ea5..d9433e24b972a6 100644
--- a/docs/src/pages/components/masonry/FixedSpacing.tsx
+++ b/docs/src/pages/components/masonry/FixedSpacing.tsx
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/ImageMasonry.js b/docs/src/pages/components/masonry/ImageMasonry.js
index 3f370aae552285..bb16bb7cafd629 100644
--- a/docs/src/pages/components/masonry/ImageMasonry.js
+++ b/docs/src/pages/components/masonry/ImageMasonry.js
@@ -8,6 +8,9 @@ import { styled } from '@mui/material/styles';
 const Label = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -25,6 +28,7 @@ export default function ImageMasonry() {
               srcSet={`${item.img}?w=162&auto=format&dpr=2 2x`}
               alt={item.title}
               loading="lazy"
+              style={{ borderBottomLeftRadius: 4, borderBottomRightRadius: 4 }}
             />
           </Stack>
         ))}
diff --git a/docs/src/pages/components/masonry/ImageMasonry.tsx b/docs/src/pages/components/masonry/ImageMasonry.tsx
index 3f370aae552285..bb16bb7cafd629 100644
--- a/docs/src/pages/components/masonry/ImageMasonry.tsx
+++ b/docs/src/pages/components/masonry/ImageMasonry.tsx
@@ -8,6 +8,9 @@ import { styled } from '@mui/material/styles';
 const Label = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -25,6 +28,7 @@ export default function ImageMasonry() {
               srcSet={`${item.img}?w=162&auto=format&dpr=2 2x`}
               alt={item.title}
               loading="lazy"
+              style={{ borderBottomLeftRadius: 4, borderBottomRightRadius: 4 }}
             />
           </Stack>
         ))}
diff --git a/docs/src/pages/components/masonry/ImageMasonry.tsx.preview b/docs/src/pages/components/masonry/ImageMasonry.tsx.preview
index b8e3e3f5301fd4..22ee46c02ebaf9 100644
--- a/docs/src/pages/components/masonry/ImageMasonry.tsx.preview
+++ b/docs/src/pages/components/masonry/ImageMasonry.tsx.preview
@@ -7,6 +7,7 @@
         srcSet={`${item.img}?w=162&auto=format&dpr=2 2x`}
         alt={item.title}
         loading="lazy"
+        style={{ borderBottomLeftRadius: 4, borderBottomRightRadius: 4 }}
       />
     </Stack>
   ))}
diff --git a/docs/src/pages/components/masonry/ResponsiveColumns.js b/docs/src/pages/components/masonry/ResponsiveColumns.js
index 21ec0e2d1d973a..81efcc48d85cb4 100644
--- a/docs/src/pages/components/masonry/ResponsiveColumns.js
+++ b/docs/src/pages/components/masonry/ResponsiveColumns.js
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/ResponsiveColumns.tsx b/docs/src/pages/components/masonry/ResponsiveColumns.tsx
index 21ec0e2d1d973a..81efcc48d85cb4 100644
--- a/docs/src/pages/components/masonry/ResponsiveColumns.tsx
+++ b/docs/src/pages/components/masonry/ResponsiveColumns.tsx
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/ResponsiveSpacing.js b/docs/src/pages/components/masonry/ResponsiveSpacing.js
index f35ba5e5d2d4f0..01ff73bd374359 100644
--- a/docs/src/pages/components/masonry/ResponsiveSpacing.js
+++ b/docs/src/pages/components/masonry/ResponsiveSpacing.js
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/ResponsiveSpacing.tsx b/docs/src/pages/components/masonry/ResponsiveSpacing.tsx
index f35ba5e5d2d4f0..01ff73bd374359 100644
--- a/docs/src/pages/components/masonry/ResponsiveSpacing.tsx
+++ b/docs/src/pages/components/masonry/ResponsiveSpacing.tsx
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/SSRMasonry.js b/docs/src/pages/components/masonry/SSRMasonry.js
index 3cce72dace6405..3089ce899aefee 100644
--- a/docs/src/pages/components/masonry/SSRMasonry.js
+++ b/docs/src/pages/components/masonry/SSRMasonry.js
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 8
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/docs/src/pages/components/masonry/SSRMasonry.tsx b/docs/src/pages/components/masonry/SSRMasonry.tsx
index 3cce72dace6405..3089ce899aefee 100644
--- a/docs/src/pages/components/masonry/SSRMasonry.tsx
+++ b/docs/src/pages/components/masonry/SSRMasonry.tsx
@@ -9,6 +9,7 @@ const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 8
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  border: '1px solid black',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',

From 382344946fb541d4bfa74c8061a24a71e42df9aa Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Sat, 23 Oct 2021 10:13:19 +0100
Subject: [PATCH 2/2] Trigger Build