From 8d72b0f1e7eef36345ce675939eb8fe9d1c8237d Mon Sep 17 00:00:00 2001
From: Aidan <aidan@p0ntus.com>
Date: Thu, 27 Mar 2025 14:10:09 -0400
Subject: [PATCH] rf/locale: improve recently played display styling, [m]
 improve en-US

---
 src/locales/en-us.json    |  4 ++--
 src/pages/home/index.tsx  |  2 +-
 src/pages/music/index.tsx |  6 +++---
 src/pages/music/styles.ts | 10 ++++++++++
 4 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/music/styles.ts

diff --git a/src/locales/en-us.json b/src/locales/en-us.json
index fd7aaa0..3d84929 100644
--- a/src/locales/en-us.json
+++ b/src/locales/en-us.json
@@ -9,8 +9,8 @@
     "projects": "Projects",
     "send": "Send",
     "myLast": "My Last.FM Status",
-    "myLastDescription": "Take a look on my last played song:",
-    "lastLink": "Check this song page on Last.FM",
+    "myLastDescription": "I'm listening to:",
+    "lastLink": "View on Last.FM",
     "music": "Music",
     "currentlyListening": "I'm currently listening to it!",
     "lastUpdate": "Last update: "
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 7e95f23..84a27ca 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -29,7 +29,7 @@ export default function Home() {
   return (
     <MainContainer>
       <TopSection>
-        <Avatar src="https://avatars.githubusercontent.com/u/53719063?v=4" alt="Giv's Gh picture" />
+        <Avatar src="https://avatars.githubusercontent.com/u/53719063?v=4" alt="GitHub Profile Picture" />
         <Paragraph>
           <span ref={typedElement} />
         </Paragraph>
diff --git a/src/pages/music/index.tsx b/src/pages/music/index.tsx
index 6fd53da..1081a88 100644
--- a/src/pages/music/index.tsx
+++ b/src/pages/music/index.tsx
@@ -4,7 +4,7 @@ import { useQuery } from '@tanstack/react-query'
 import { Paragraph } from "../../components/Paragraph/styles";
 import { useTranslation } from "react-i18next";
 import { IconLink } from "../home/styles";
-
+import { MusicDescription, MusicTitle } from "./styles";
 
 export default function Music() {
     const { t } = useTranslation()
@@ -14,8 +14,8 @@ export default function Music() {
     })
     return (
         <MainContainer>
-            <h1>{t("myLast")}</h1>
-            <h3>{t("myLastDescription")}</h3>
+            <MusicTitle>{t("myLast")}</MusicTitle>
+            <MusicDescription>{t("myLastDescription")}</MusicDescription>
             <Paragraph>{lastResponse?.recenttracks?.track[0].name} - {lastResponse?.recenttracks?.track[0].artist["#text"]}</Paragraph>
             <IconLink target="blank" href={lastResponse?.recenttracks?.track[0].url}>{t("lastLink")}</IconLink>
             {lastResponse?.recenttracks?.track[0]?.date?.["#text"] ?
diff --git a/src/pages/music/styles.ts b/src/pages/music/styles.ts
new file mode 100644
index 0000000..d1ccf8c
--- /dev/null
+++ b/src/pages/music/styles.ts
@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+export const MusicTitle = styled.h1`
+  padding-bottom: 1rem;
+`;
+
+export const MusicDescription = styled.h3`
+  font-size: 1.5rem;
+  font-weight: 400;
+`;
\ No newline at end of file