fix: update ui

2024-06-19 13:11:39 +02:00
parent 29e8a56f74
commit 4233ecae42
9 changed files with 26 additions and 28 deletions
@@ -33,8 +33,15 @@ export default async function NextLevel({
  }
  return (
    <section>
-      <Body color="pale">{formatMessage({ id: "Next level" })}:</Body>
-      <Title className={styles.nextLevel} color="pale" level="h3">
+      <Body color="pale" textAlign="center">
+        {formatMessage({ id: "Next level" })}:
+      </Body>
+      <Title
+        className={styles.nextLevel}
+        color="pale"
+        level="h3"
+        textAlign="center"
+      >
        {nextLevel?.name || "N/A"}
        <BiroScript>{formatMessage({ id: "Coming up" })}!</BiroScript>
      </Title>
@@ -8,6 +8,6 @@
  .nextLevel {
    gap: var(--Spacing-x1);
    grid-template-columns: auto auto;
-    justify-content: flex-start;
+    justify-content: center;
  }
 }
@@ -13,17 +13,19 @@ export default async function Points({ user }: UserProps) {
  return (
    <section className={styles.points}>
      <article>
-        <Body color="pale">{formatMessage({ id: "Total Points" })}</Body>
-        <Title color="pale" level="h2">
+        <Body color="pale" textAlign="center">
+          {formatMessage({ id: "Total Points" })}
+        </Body>
+        <Title color="pale" level="h2" textAlign="center">
          {membership ? membership.currentPoints : "N/A"}
        </Title>
      </article>
      <article>
-        <Body color="pale">
+        <Body color="pale" textAlign="center">
          {formatMessage({ id: "Points until next level" })}
          {/* TODO */}
        </Body>
-        <Title color="pale" level="h2">
+        <Title color="pale" level="h2" textAlign="center">
          {membership ? membership.currentPoints : "N/A"}
        </Title>
      </article>
@@ -12,7 +12,7 @@ export default function Stats({ user, lang }: UserProps & LangParams) {
  return (
    <section className={styles.stats}>
      <Points user={user} />
-      <Divider variant="default" />
+      <Divider variant="default" color="peach" />
      <NextLevel user={user} lang={lang} />
    </section>
  )