From 342ff4e8d152eb2889058a760d043590f3e94978 Mon Sep 17 00:00:00 2001
From: Chris Beer <chris@cbeer.info>
Date: Mon, 11 Dec 2023 08:09:59 -0800
Subject: [PATCH] Pull ScrollIndicatedDialogContent styles up
---
.../ScrollIndicatedDialogContent.js | 42 ++++++++++---------
1 file changed, 22 insertions(+), 20 deletions(-)
diff --git a/src/components/ScrollIndicatedDialogContent.js b/src/components/ScrollIndicatedDialogContent.js
index b05d29be3..5e9770bc4 100644
--- a/src/components/ScrollIndicatedDialogContent.js
+++ b/src/components/ScrollIndicatedDialogContent.js
@@ -1,5 +1,26 @@
import PropTypes from 'prop-types';
import DialogContent from '@mui/material/DialogContent';
+import { styled } from '@mui/material/styles';
+
+const Root = styled(DialogContent, { name: 'ScrollIndicatedDialogContent', slot: 'root' })(({ theme }) => ({
+ /* Shadow covers */
+ background: `linear-gradient(${theme.palette.background.paper} 30%, rgba(255, 255, 255, 0)), `
+ + `linear-gradient(rgba(255, 255, 255, 0), ${theme.palette.background.paper} 70%) 0 100%, `
+ // Shaddows
+ + 'radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), '
+ + 'radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%,',
+ /* Shadow covers */
+ background: `linear-gradient(${theme.palette.background.paper} 30%, rgba(255, 255, 255, 0)), ` // eslint-disable-line no-dupe-keys
+ + `linear-gradient(rgba(255, 255, 255, 0), ${theme.palette.background.paper} 70%) 0 100%, `
+ // Shaddows
+ + 'radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), '
+ + 'radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;',
+
+ backgroundAttachment: 'local, local, scroll, scroll',
+ backgroundRepeat: 'no-repeat',
+ backgroundSize: '100% 40px, 100% 40px, 100% 14px, 100% 14px',
+ overflowY: 'auto',
+}));
/**
* ScrollIndicatedDialogContent ~ Inject a style into the DialogContent component
@@ -10,26 +31,7 @@ export function ScrollIndicatedDialogContent(props) {
const ourClassName = [className, classes.shadowScrollDialog].join(' ');
return (
- <DialogContent
- sx={{
- /* Shadow covers */
- background: `linear-gradient(${'background.paper'} 30%, rgba(255, 255, 255, 0)), `
- + `linear-gradient(rgba(255, 255, 255, 0), ${'background.paper'} 70%) 0 100%, `
- // Shaddows
- + 'radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), '
- + 'radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%,',
- /* Shadow covers */
- background: `linear-gradient(${'background.paper'} 30%, rgba(255, 255, 255, 0)), ` // eslint-disable-line no-dupe-keys
- + `linear-gradient(rgba(255, 255, 255, 0), ${'background.paper'} 70%) 0 100%, `
- // Shaddows
- + 'radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), '
- + 'radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;',
-
- backgroundAttachment: 'local, local, scroll, scroll',
- backgroundRepeat: 'no-repeat',
- backgroundSize: '100% 40px, 100% 40px, 100% 14px, 100% 14px',
- overflowY: 'auto',
- }}
+ <Root
className={ourClassName}
{...otherProps}
/>
--
GitLab