From 0fb6777c44de5c7953a71f8d18aaa2073c064de8 Mon Sep 17 00:00:00 2001
From: Wojciech Mista <wojciech.mista@hotmail.com>
Date: Wed, 24 Apr 2024 13:16:06 +0200
Subject: [PATCH] Fix note text colors (#4822)

---
 .changeset/nervous-ducks-fix.md          |  5 +++++
 src/components/Timeline/TimelineNote.tsx | 12 ++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/nervous-ducks-fix.md

diff --git a/.changeset/nervous-ducks-fix.md b/.changeset/nervous-ducks-fix.md
new file mode 100644
index 00000000000..d0dd8434419
--- /dev/null
+++ b/.changeset/nervous-ducks-fix.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+History component's texts will now have unified colors
diff --git a/src/components/Timeline/TimelineNote.tsx b/src/components/Timeline/TimelineNote.tsx
index a6bd3e8a2c1..96833e21fb5 100644
--- a/src/components/Timeline/TimelineNote.tsx
+++ b/src/components/Timeline/TimelineNote.tsx
@@ -1,8 +1,8 @@
 import { GiftCardEventFragment, OrderEventFragment } from "@dashboard/graphql";
 import { getUserInitials, getUserName } from "@dashboard/misc";
-import { Card, CardContent, Typography } from "@material-ui/core";
+import { Card, CardContent } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
-import { vars } from "@saleor/macaw-ui-next";
+import { Text, vars } from "@saleor/macaw-ui-next";
 import React from "react";
 
 import { DateTime } from "../Date";
@@ -64,7 +64,7 @@ const NoteMessage: React.FC<NoteMessageProps> = ({ message }) => (
         return <br key={`break-${string}`} />;
       }
 
-      return <Typography key={`note-${string}`}>{string}</Typography>;
+      return <Text key={`note-${string}`}>{string}</Text>;
     })}
   </>
 );
@@ -116,10 +116,10 @@ export const TimelineNote: React.FC<TimelineNoteProps> = ({
     <div className={classes.root}>
       <TimelineAvatar user={user} app={app} className={classes.avatar} />
       <div className={classes.title}>
-        <Typography>{userDisplayName}</Typography>
-        <Typography>
+        <Text size={3}>{userDisplayName}</Text>
+        <Text size={3} color="default2" whiteSpace="nowrap">
           <DateTime date={date} plain={hasPlainDate} />
-        </Typography>
+        </Text>
       </div>
       <Card className={classes.card} elevation={16}>
         <CardContent className={classes.cardContent}>