rf/locale: improve recently played display styling, [m] improve en-US

.gitignore

@@ -24,7 +24,10 @@ dist-ssr
 *.sw?
 
 # Bun
-bun.lockb
+bun.lock*
+
+# pnpm
+pnpm-lock.yaml
 
 # ts build info
 tsconfig.app.tsbuildinfo

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:",
+    "myLastDescription": "I'm listening to:",
-    "lastLink": "Check this song page on Last.FM",
+    "lastLink": "View on Last.FM",
     "music": "Music",
     "currentlyListening": "I'm currently listening to it!",
     "lastUpdate": "Last update: "

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>

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>
+            <MusicTitle>{t("myLast")}</MusicTitle>
-            <h3>{t("myLastDescription")}</h3>
+            <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"] ?

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;
+`;