fix: show proposal published and edit dates

This commit displays the missing "published" timestamp event for
proposals that have been edited. Also, display timestamps for mobile
views and adds e2e tests to prevent this from happening further.

src/components/Proposal/Proposal.jsx

@@ -207,8 +207,7 @@ const Proposal = React.memo(function Proposal({
     isAuthor && isEditableProposal(proposal, voteSummary) && !isLegacy;
   const { apiInfo } = useLoader();
   const mobile = useMediaQuery("(max-width: 560px)");
-  const showEditedDate = version > 1 && timestamp !== publishedat && !mobile;
-  const showPublishedDate = publishedat && !mobile && !showEditedDate;
+  const showEditedDate = version > 1 && timestamp !== publishedat;
   const showExtendedVersionPicker =
     extended && version > 1 && !isCensored && (isVetted || isAuthor || isAdmin);
   const showVersionAsText = !extended && !mobile;
@@ -343,11 +342,13 @@ const Proposal = React.memo(function Proposal({
                       timestamp={linkby}
                     />
                   )}
-                  {showPublishedDate && (
+                  <span data-testid="proposal-published-timestamp">
                     <Event event="published" timestamp={publishedat} />
-                  )}
+                  </span>
                   {showEditedDate && (
-                    <Event event="edited" timestamp={timestamp} />
+                    <span data-testid="proposal-edited-timestamp">
+                      <Event event="edited" timestamp={timestamp} />
+                    </span>
                   )}
                   {showVersionAsText && (
                     <Text

src/components/RecordWrapper/RecordWrapper.jsx

@@ -103,9 +103,7 @@ export const Subtitle = ({ children, separatorSymbol = "•" }) => (
   <Join
     className={classNames("margin-top-s", styles.subtitleWrapper)}
     SeparatorComponent={() => (
-      <span className="text-secondary-color margin-left-s margin-right-s">
-        {separatorSymbol}
-      </span>
+      <span className={styles.subtitleSeparator}>{separatorSymbol}</span>
     )}>
     {children}
   </Join>
@@ -115,9 +113,7 @@ export const JoinTitle = ({ children, className, separatorSymbol = "•" }) => (
   <Join
     className={classNames(className, styles.flexWrap)}
     SeparatorComponent={() => (
-      <span className="text-secondary-color margin-left-s margin-right-s">
-        {separatorSymbol}
-      </span>
+      <span className={styles.subtitleSeparator}>{separatorSymbol}</span>
     )}>
     {children}
   </Join>

src/components/RecordWrapper/RecordWrapper.module.css

@@ -19,6 +19,12 @@
   flex-wrap: wrap;
 }
 
+.subtitleSeparator {
+  margin-right: var(--spacing-small);
+  margin-left: var(--spacing-small);
+  color: var(--text-secondary-color);
+}
+
 .flexWrap {
   flex-wrap: wrap;
 }
@@ -150,4 +156,17 @@ div.darkActionsTooltip {
   .title {
     max-width: 100%;
   }
+
+  .subtitleWrapper {
+    flex-flow: column;
+    max-width: 100%;
+  }
+
+  .subtitleWrapper > .subtitleSeparator {
+    display: none;
+  }
+
+  .subtitleWrapper > *:not(:first-child) {
+    padding-top: 1rem;
+  }
 }

teste2e/cypress/e2e/proposal/edit.js

@@ -41,6 +41,8 @@ describe("Proposal Edit", () => {
           .its("status")
           .should("eq", 200);
         cy.findByText(/version 2/).should("exist");
+        cy.findByTestId("proposal-published-timestamp").should("be.visible");
+        cy.findByTestId("proposal-edited-timestamp").should("be.visible");
       }
     );
   });
@@ -67,6 +69,8 @@ describe("Proposal Edit", () => {
         cy.identity();
         cy.visit(`record/${shortRecordToken(censorshiprecord.token)}`);
         cy.findByTestId(/record-edit-button/i).should("not.exist");
+        cy.findByTestId("proposal-published-timestamp").should("be.visible");
+        cy.findByTestId("proposal-edited-timestamp").should("not.exist");
       }
     );
   });