feat: Updates modal new design changes (#16553)

* feat: Updates modal new design changes

* Title and Subtitle font changes

* test cases fixed for product updates modal

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");

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");

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<HTMLDivElement>(null);
@@ -166,10 +188,13 @@ function ReleaseComponent({ release }: ReleaseProps) {
 
   return descriptionHtml ? (
     <StyledContainer>
+      <TagContainer>
+        <Tag>{tagName}</Tag>
+        <StyledDate>{moment(publishedAt).format("D MMM YYYY")}</StyledDate>
+      </TagContainer>
       <Text color={Colors.BLACK} type={TextType.H1}>
         {name}
       </Text>
-      <StyledDate>{moment(publishedAt).format("Do MMMM, YYYY")}</StyledDate>
       <StyledContent
         dangerouslySetInnerHTML={{ __html: descriptionHtml }}
         maxHeight={getHeight()}

app/client/src/pages/Applications/ProductUpdatesModal/index.tsx

@@ -9,8 +9,7 @@ import { LayersContext } from "constants/Layers";
 import ReleasesAPI from "api/ReleasesAPI";
 import { resetReleasesCount } from "actions/releasesActions";
 import ReleaseComponent, { Release } from "./ReleaseComponent";
-import { Colors } from "constants/Colors";
-import { Button, Category, ScrollIndicator, Size, Icon } from "design-system";
+import { ScrollIndicator } from "design-system";
 
 const StyledDialog = styled(Dialog)`
   .bp3-dialog-body {
@@ -32,46 +31,6 @@ const Container = styled.div`
   }
 `;
 
-const WhiteOverlay = styled.div`
-  position: absolute;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    0deg,
-    rgba(255, 255, 255, 1) 0%,
-    rgba(255, 255, 255, 0) 100%
-  );
-
-  span {
-    color: ${Colors.CRUSTA};
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-
-    svg {
-      height: 16px;
-      width: 16px;
-      margin-top: 2px;
-    }
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-`;
-
-const Footer = styled.div`
-  display: flex;
-  justify-content: end;
-  margin-top: 24px;
-  a:first-child {
-    margin-right: ${(props) => 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) {
     <StyledDialog
       canEscapeKeyClose
       canOutsideClickClose
-      headerIcon={{
-        name: "file-list-line",
-        bgColor: Colors.GEYSER_LIGHT,
-      }}
       isOpen={isOpen}
       maxHeight={"94vh"}
       onClose={onClose}
@@ -130,38 +74,11 @@ function ProductUpdatesModal(props: ProductUpdatesModalProps) {
       triggerZIndex={Layers.productUpdates}
       width={"580px"}
     >
-      <Container
-        ref={containerRef}
-        style={!showFull ? { overflow: "hidden" } : {}}
-      >
-        {!showFull && (
-          <WhiteOverlay id="white-overlay-product-updates">
-            <span onClick={showFullUpdates}>
-              Show more
-              <Icon name="down-arrow" />
-            </span>
-          </WhiteOverlay>
-        )}
+      <Container ref={containerRef}>
         {releaseItems.map((release: Release, index: number) => (
           <ReleaseComponent key={index} release={release} />
         ))}
       </Container>
-      <Footer>
-        <Button
-          category={Category.tertiary}
-          data-cy="t--product-updates-close-btn"
-          onClick={onClose}
-          size={Size.large}
-          text="CANCEL"
-        />
-        <Button
-          category={Category.primary}
-          data-cy="t--product-updates-ok-btn"
-          onClick={onClose}
-          size={Size.large}
-          text="OK, THANKS"
-        />
-      </Footer>
       <ScrollIndicator containerRef={containerRef} />
     </StyledDialog>
   ) : null;

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;