diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Admin_settings_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Admin_settings_spec.js index da3daa1229..430185a5e7 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Admin_settings_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Admin_settings_spec.js @@ -269,8 +269,6 @@ describe("Admin settings page", function() { "Product Updates", ); cy.get(".bp3-dialog-close-button").should("be.visible"); - cy.get("[data-cy='t--product-updates-close-btn']").should("be.visible"); - cy.get("[data-cy='t--product-updates-ok-btn']").should("be.visible"); cy.get(".bp3-dialog-close-button").click(); cy.wait(2000); cy.get(".bp3-dialog-container").should("not.exist"); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/ProductUpdates_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/ProductUpdates_spec.js index ef124c354f..263bfa2083 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/ProductUpdates_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/ProductUpdates_spec.js @@ -18,9 +18,7 @@ describe("Check for product updates button and modal", function() { //eslint-disable-next-line cypress/no-unnecessary-waiting cy.wait(500); // modal transition cy.get(".bp3-dialog-container").contains("Product Updates"); - cy.get("[data-cy=t--product-updates-close-btn]").click({ - force: true, - }); + cy.get(".bp3-dialog-close-button").click(); //eslint-disable-next-line cypress/no-unnecessary-waiting cy.wait(500); // modal transition cy.get(".bp3-dialog-container").should("not.exist"); diff --git a/app/client/src/pages/Applications/ProductUpdatesModal/ReleaseComponent.tsx b/app/client/src/pages/Applications/ProductUpdatesModal/ReleaseComponent.tsx index e020f9e344..2cc5a3b100 100644 --- a/app/client/src/pages/Applications/ProductUpdatesModal/ReleaseComponent.tsx +++ b/app/client/src/pages/Applications/ProductUpdatesModal/ReleaseComponent.tsx @@ -12,6 +12,26 @@ const StyledContainer = styled.div` margin-bottom: ${(props) => props.theme.spaces[7]}px; `; +const TagContainer = styled.div` + display: flex; + align-items: baseline; + margin-bottom: 16px; +`; + +const Tag = styled.div` + display: flex; + align-item: center; + justify-content: center; + padding: 4px 8px; + font-size: 13px; + font-weight: 600; + background-color: var(--appsmith-color-black-100); + margin-right: 8px; + text-transform: uppercase; + letter-spacing: 0.6px; + color: var(--appsmith-color-black); +`; + export const StyledSeparator = styled.div` width: 100%; background-color: ${(props) => props.theme.colors.modal.separator}; @@ -21,11 +41,11 @@ export const StyledSeparator = styled.div` const StyledDate = styled.div` font-weight: ${(props) => props.theme.typography.releaseList.fontWeight}; - font-size: ${(props) => props.theme.typography.releaseList.fontSize}px; + font-size: 12px; line-height: ${(props) => props.theme.typography.releaseList.lineHeight}px; letter-spacing: ${(props) => props.theme.typography.releaseList.letterSpacing}px; - color: ${(props) => props.theme.colors.text.normal}; + color: var(--appsmith-color-black-700); margin-top: ${(props) => props.theme.spaces[3]}px; `; @@ -37,7 +57,7 @@ const StyledContent = styled.div<{ maxHeight: number }>` line-height: ${(props) => props.theme.typography.releaseList.lineHeight}px; letter-spacing: ${(props) => props.theme.typography.releaseList.letterSpacing}px; - color: ${(props) => props.theme.colors.text.normal}; + color: var(--appsmith-color-black-700); } a { color: ${(props) => props.theme.colors.modal.link}; @@ -51,12 +71,13 @@ const StyledContent = styled.div<{ maxHeight: number }>` h2 { display: block; - font-size: 1.5em; + font-size: 18px; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; - font-weight: bold; + font-weight: 500; + color: var(--appsmith-color-black); } ul { @@ -78,6 +99,7 @@ export type Release = { descriptionHtml: string; name: string; publishedAt?: string; + tagName: string; }; type ReleaseProps = { @@ -137,7 +159,7 @@ const ReadMore = withTheme( ); function ReleaseComponent({ release }: ReleaseProps) { - const { descriptionHtml, name, publishedAt } = release; + const { descriptionHtml, name, publishedAt, tagName } = release; const [isCollapsed, setCollapsed] = useState(true); const [shouldShowReadMore, setShouldShowReadMore] = useState(false); const contentRef = useRef(null); @@ -166,10 +188,13 @@ function ReleaseComponent({ release }: ReleaseProps) { return descriptionHtml ? ( + + {tagName} + {moment(publishedAt).format("D MMM YYYY")} + {name} - {moment(publishedAt).format("Do MMMM, YYYY")} props.theme.spaces[5]}px; - } -`; - type ProductUpdatesModalProps = { isOpen?: boolean; onClose?: () => void; @@ -89,21 +48,10 @@ function ProductUpdatesModal(props: ProductUpdatesModalProps) { dispatch(resetReleasesCount()); await ReleasesAPI.markAsRead(); }, []); - const [showFull, setShowFull] = useState(false); const onClose = useCallback(() => { props.onClose && props.onClose(); setIsOpen(false); - setShowFull(false); - }, []); - - const showFullUpdates = useCallback(() => { - const ele = document.getElementById("white-overlay-product-updates"); - if (ele) { - const h = ele.offsetHeight; - containerRef.current?.scrollTo({ behavior: "smooth", top: h - 100 }); - } - setShowFull(true); }, []); const Layers = useContext(LayersContext); @@ -113,10 +61,6 @@ function ProductUpdatesModal(props: ProductUpdatesModalProps) { - - {!showFull && ( - - - Show more - - - - )} + {releaseItems.map((release: Release, index: number) => ( ))} -
-
) : null; diff --git a/app/client/src/theme/colors.css b/app/client/src/theme/colors.css index 7c2d69a7e9..4fb922f3a2 100644 --- a/app/client/src/theme/colors.css +++ b/app/client/src/theme/colors.css @@ -12,6 +12,7 @@ --appsmith-color-orange-50 : #FAEAE8; /* black */ + --appsmith-color-black: #000; --appsmith-color-black-900 : #191919; --appsmith-color-black-800 : #393939; --appsmith-color-black-700 : #575757;