From 6d19323df2be0f8beb45d44d7d97c89fae3b518c Mon Sep 17 00:00:00 2001 From: James Morris Date: Thu, 21 Jul 2022 14:09:08 +0100 Subject: [PATCH] Quick fix for iFrame, negative margins and padding to retain shadow refs https://github.com/TryGhost/Team/issues/1701 --- apps/comments-ui/src/components/CommentsBox.js | 4 +++- apps/comments-ui/src/components/Form.js | 2 +- apps/comments-ui/src/components/Frame.js | 2 +- apps/comments-ui/tailwind.config.js | 10 ++++++++++ 4 files changed, 15 insertions(+), 3 deletions(-) diff --git a/apps/comments-ui/src/components/CommentsBox.js b/apps/comments-ui/src/components/CommentsBox.js index 6705d43bed..d3accef697 100644 --- a/apps/comments-ui/src/components/CommentsBox.js +++ b/apps/comments-ui/src/components/CommentsBox.js @@ -67,7 +67,9 @@ const CommentsBox = (props) => { const containerClass = darkMode() ? 'dark' : ''; const style = { - '--gh-accent-color': accentColor ?? 'blue' + '--gh-accent-color': accentColor ?? 'blue', + paddingLeft: 32, + paddingRight: 32 }; return (
diff --git a/apps/comments-ui/src/components/Form.js b/apps/comments-ui/src/components/Form.js index 11c45c24d9..09572f0ac9 100644 --- a/apps/comments-ui/src/components/Form.js +++ b/apps/comments-ui/src/components/Form.js @@ -200,7 +200,7 @@ const Form = (props) => { transition duration-200 -mt-[12px] -mr-3 mb-10 -ml-[12px] pt-3 pb-2 px-3 bg-white dark:bg-[rgba(255,255,255,0.08)] - rounded-md shadow-lg dark:shadow-transparent hover:shadow-xl + rounded-md shadow-formlg dark:shadow-transparent hover:shadow-formxl ${!commentsCount && !props.isEdit && !props.isReply && '-mt-0 -mr-0 -ml-0'} ${isFocused ? 'cursor-default' : 'cursor-pointer'}` }> diff --git a/apps/comments-ui/src/components/Frame.js b/apps/comments-ui/src/components/Frame.js index 5533d7e12a..346d49d69a 100644 --- a/apps/comments-ui/src/components/Frame.js +++ b/apps/comments-ui/src/components/Frame.js @@ -65,7 +65,7 @@ const Frame = ({ ); - const mergedStyle = {...iframeStyle, ...style}; + const mergedStyle = {...iframeStyle, ...style, marginLeft: -32, marginRight: -32, width: 'calc(100% + 64px)'}; // negative margins to handle comment form shadows // For now we're using because using a functional component with portal caused some weird issues with modals return ( diff --git a/apps/comments-ui/tailwind.config.js b/apps/comments-ui/tailwind.config.js index 2de023e9ca..c9be92bd9f 100644 --- a/apps/comments-ui/tailwind.config.js +++ b/apps/comments-ui/tailwind.config.js @@ -134,6 +134,16 @@ module.exports = { '0px 13px 20px rgba(0, 0, 0, 0.04)', '0px 14px 57px rgba(0, 0, 0, 0.06)' ], + formlg: [ + '0px 0px 1px rgba(0, 0, 0, 0.12)', + '0px 4px 8px rgba(0, 0, 0, 0.03)', + '0px 6px 16px rgba(0, 0, 0, 0.04)' + ], + formxl: [ + '0px 0px 1px rgba(0, 0, 0, 0.12)', + '0px 8px 12px rgba(0, 0, 0, 0.04)', + '0px 12px 20px rgba(0, 0, 0, 0.06)' + ], modal: [ '0 3.8px 2.2px rgba(0, 0, 0, 0.028)', '0 9.2px 5.3px rgba(0, 0, 0, 0.04)',