From 5137d0f42ed78a530523e6a8dc119cfc617c0ca0 Mon Sep 17 00:00:00 2001
From: h16nning <henning.flath@t-online.de>
Date: Tue, 6 Feb 2024 23:31:44 +0100
Subject: [PATCH] Improved Stat, translation fix

- Stat component uses  mantine-color-light variables, more compact code
- Stat component in deck section more responsive
- Fixed trailing comma in welcome message in HomeView when no user name is given
---
 src/components/HomeView.tsx                   |  6 +++-
 src/components/custom/Stat/Stat.module.css    | 27 +++++++----------
 src/components/custom/Stat/Stat.tsx           | 30 +++++--------------
 .../deck/HeroDeckSection/HeroDeckSection.tsx  |  4 +--
 .../FinishedLearningView.tsx                  |  2 +-
 .../learning/LearnView/LearnView.tsx          | 11 +++----
 src/i18n/locales/de/translation.json          |  5 +++-
 src/i18n/locales/en/translation.json          |  3 +-
 src/i18n/locales/sv/translation.json          |  3 +-
 9 files changed, 40 insertions(+), 51 deletions(-)

diff --git a/src/components/HomeView.tsx b/src/components/HomeView.tsx
index 8c75ecd..372cbfe 100644
--- a/src/components/HomeView.tsx
+++ b/src/components/HomeView.tsx
@@ -38,7 +38,11 @@ export default function HomeView({
               <IconMenu2 />
             </ActionIcon>
           )}
-          <Title order={3}>{t("home.welcome-back", { name: userName })}</Title>
+          <Title order={3}>
+            {t(userName ? "home.welcome-user" : "home.welcome", {
+              name: userName,
+            })}
+          </Title>
         </Group>
 
         <Stack gap="sm" align="flex-end" w="100%">
diff --git a/src/components/custom/Stat/Stat.module.css b/src/components/custom/Stat/Stat.module.css
index f76d6ec..58bcb9f 100644
--- a/src/components/custom/Stat/Stat.module.css
+++ b/src/components/custom/Stat/Stat.module.css
@@ -1,33 +1,26 @@
 .stat {
   padding: 0.75rem;
   border-radius: var(--mantine-radius-sm);
-  position: relative;
-}
-
-.statBackground {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: 1px solid;
-  border-radius: var(--mantine-radius-sm);
-  opacity: light-dark(0.2, 0.2);
-  z-index: 0;
+  width: 100%;
+  max-width: 7rem;
 }
 
 .statIcon {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1rem;
+  height: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+  stroke-width: 1.7;
   opacity: initial;
 }
 
 .statValue {
   font-weight: 700;
   font-size: var(--mantine-font-size-md);
+
 }
 
 .statName {
-  font-size: var(--mantine-font-size-xs);
-  font-weight: 400;
+  font-weight: 500;
+  font-size: var(--mantine-font-size-sm);
 }
diff --git a/src/components/custom/Stat/Stat.tsx b/src/components/custom/Stat/Stat.tsx
index bf2c5c9..40d648e 100644
--- a/src/components/custom/Stat/Stat.tsx
+++ b/src/components/custom/Stat/Stat.tsx
@@ -22,32 +22,18 @@ export default function Stat({
     <Box
       component="div"
       className={classes.stat}
-      miw={width ?? "6rem"}
       style={{
         color: `var(--mantine-color-${color}-${scheme === "light" ? 9 : 2})`,
+        backgroundColor: `var(--mantine-color-${color}-light)`,
       }}
     >
-      <Box
-        component="div"
-        className={classes.statBackground}
-        style={{
-          backgroundColor: `var(--mantine-color-${color}-${
-            scheme === "light" ? 4 : 7
-          })`,
-          borderColor: `var(--mantine-color-${color}-${
-            scheme === "light" ? 5 : 5
-          })`,
-        }}
-      />
-      <Group align="center" gap="xs">
-        <Icon className={classes.statIcon} />
-        <Stack gap="0rem" align="start">
-          <Text className={classes.statValue}>{value}</Text>
-          <Text className={classes.statName} opacity="0.7">
-            {name}
-          </Text>
-        </Stack>
-      </Group>
+      <Stack gap="0" w="100%" align="center">
+        <Text className={classes.statValue}>{value}</Text>
+        <Group align="center" gap="4px" wrap="nowrap" opacity={0.8}>
+          <Icon className={classes.statIcon} />
+          <Text className={classes.statName}>{name}</Text>
+        </Group>
+      </Stack>
     </Box>
   );
 }
diff --git a/src/components/deck/HeroDeckSection/HeroDeckSection.tsx b/src/components/deck/HeroDeckSection/HeroDeckSection.tsx
index 4c90b64..dca216d 100644
--- a/src/components/deck/HeroDeckSection/HeroDeckSection.tsx
+++ b/src/components/deck/HeroDeckSection/HeroDeckSection.tsx
@@ -70,8 +70,8 @@ function HeroDeckSection({
             </Button>
           </Stack>
         ) : (
-          <Stack gap="md" align="center">
-            <Group>
+          <Stack gap="md" align="center" w="100%">
+            <Group wrap="nowrap" w="100%" justify="center">
               <Stat
                 value={stats.newCards ?? 0}
                 name={t("deck.new-cards-label")}
diff --git a/src/components/learning/FinishedLearningView/FinishedLearningView.tsx b/src/components/learning/FinishedLearningView/FinishedLearningView.tsx
index 2cf8caf..0aa77b7 100644
--- a/src/components/learning/FinishedLearningView/FinishedLearningView.tsx
+++ b/src/components/learning/FinishedLearningView/FinishedLearningView.tsx
@@ -52,7 +52,7 @@ function FinishedLearningView({
         <Text style={{ textAlign: "center" }}>
           You learned all cards for today of this deck.
         </Text>
-        <Group>
+        <Group wrap="nowrap">
           <Stat
             name="Duration"
             value={
diff --git a/src/components/learning/LearnView/LearnView.tsx b/src/components/learning/LearnView/LearnView.tsx
index a673397..2e84fb5 100644
--- a/src/components/learning/LearnView/LearnView.tsx
+++ b/src/components/learning/LearnView/LearnView.tsx
@@ -36,9 +36,13 @@ function LearnView() {
   >(undefined);
 
   useEffect(() => {
-    if (useZenMode && !fullscreen) {
+    toggle();
+    return () => {
       toggle();
-    }
+    };
+  }, []);
+
+  useEffect(() => {
     getCardsOf(deck).then((cards) => setCardSet(cards ?? null));
   }, [deck]);
 
@@ -72,9 +76,6 @@ function LearnView() {
   useEffect(() => {
     if (controller.learningIsFinished) {
       stopwatchResult.pause();
-      if (fullscreen) {
-        toggle();
-      }
     }
   }, [controller.learningIsFinished]);
 
diff --git a/src/i18n/locales/de/translation.json b/src/i18n/locales/de/translation.json
index 73e2a3f..9e0a7f1 100644
--- a/src/i18n/locales/de/translation.json
+++ b/src/i18n/locales/de/translation.json
@@ -1,5 +1,8 @@
 {
-  "home": { "welcome-back": "Wilkommen zurück, {{name}}!" },
+  "home": {
+    "welcome": "Willkomen!",
+    "welcome-user": "Willkommen zurück, {{name}}!"
+  },
   "deck": {
     "new-deck-button": "Neues Deck",
     "review-cards-label": "Wiederholen",
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index 6562f9f..8a8d2c6 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -1,6 +1,7 @@
 {
   "home": {
-    "welcome-back": "Welcome back, {{name}}!"
+    "welcome": "Welcome!",
+    "welcome-user": "Welcome back, {{name}}!"
   },
   "deck": {
     "new-deck-button": "New Deck",
diff --git a/src/i18n/locales/sv/translation.json b/src/i18n/locales/sv/translation.json
index 709b0c9..3d6f96e 100644
--- a/src/i18n/locales/sv/translation.json
+++ b/src/i18n/locales/sv/translation.json
@@ -1,6 +1,7 @@
 {
   "home": {
-    "welcome-back": "Välkommen tillbaka, {{name}}!"
+    "welcome": "Välkommen",
+    "welcome-user": "Välkommen tillbaka, {{name}}!"
   },
   "deck": {
     "new-deck": "Ny bunt",