Edit a test to check timestamp color's value on timeline and thread panel (#10265)

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

cypress/e2e/threads/threads.spec.ts

@@ -54,9 +54,20 @@ describe("Threads", () => {
             cy.visit("/#/room/" + roomId);
         });
 
+        // --MessageTimestamp-color = #acacac = rgb(172, 172, 172)
+        // See: _MessageTimestamp.pcss
+        const MessageTimestampColor = "rgb(172, 172, 172)";
+
         // User sends message
         cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello Mr. Bot{enter}");
 
+        // Check the colour of timestamp on the main timeline
+        cy.get(".mx_RoomView_body .mx_EventTile_last .mx_EventTile_line .mx_MessageTimestamp").should(
+            "have.css",
+            "color",
+            MessageTimestampColor,
+        );
+
         // Wait for message to send, get its ID and save as @threadId
         cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "Hello Mr. Bot")
             .invoke("attr", "data-scroll-tokens")
@@ -78,6 +89,13 @@ describe("Threads", () => {
         // User responds in thread
         cy.get(".mx_ThreadView .mx_BasicMessageComposer_input").type("Test{enter}");
 
+        // Check the colour of timestamp on EventTile in a thread (mx_ThreadView)
+        cy.get(".mx_ThreadView .mx_EventTile_last .mx_EventTile_line .mx_MessageTimestamp").should(
+            "have.css",
+            "color",
+            MessageTimestampColor,
+        );
+
         // User asserts summary was updated correctly
         cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_sender").should("contain", "Tom");
         cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Test");
@@ -130,6 +148,10 @@ describe("Threads", () => {
         cy.get(".mx_ThreadPanel .mx_EventTile_last").within(() => {
             cy.get(".mx_EventTile_body").should("contain", "Hello Mr. Bot");
             cy.get(".mx_ThreadSummary_content").should("contain", "How are things?");
+
+            // Check the colour of timestamp on thread list
+            cy.get(".mx_EventTile_details .mx_MessageTimestamp").should("have.css", "color", MessageTimestampColor);
+
             // User opens thread via threads list
             cy.get(".mx_EventTile_line").click();
         });

res/css/views/messages/_MessageTimestamp.pcss

@@ -16,8 +16,9 @@ limitations under the License.
 
 .mx_MessageTimestamp {
     --MessageTimestamp-max-width: 80px;
+    --MessageTimestamp-color: $event-timestamp-color;
 
-    color: $event-timestamp-color;
+    color: var(--MessageTimestamp-color);
     font-size: $font-10px;
     font-variant-numeric: tabular-nums;
     display: block; /* enable the width setting below */

res/css/views/right_panel/_ThreadPanel.pcss

@@ -130,7 +130,7 @@ limitations under the License.
     }
 
     .mx_MessageTimestamp {
-        color: $event-timestamp-color;
+        color: var(--MessageTimestamp-color); /* TODO: check whether needed or not */
     }
 
     .mx_BaseCard_footer {