@medusajs/dashboard 3.0.0-snapshot-20251216145629 → 3.0.0-snapshot-20260102134455

package/src/routes/translations/translation-list/components/translations-completion-section/translations-completion-section.tsx

@@ -1,5 +1,5 @@
 import { AdminTranslationEntityStatistics, HttpTypes } from "@medusajs/types"
-import { Container, Heading, Text, Tooltip } from "@medusajs/ui"
+import { Container, Divider, Heading, Text, Tooltip } from "@medusajs/ui"
 import { useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 
@@ -75,149 +75,210 @@ export const TranslationsCompletionSection = ({
     [localeStats]
   )
 
+  const localeStatsCount = useMemo(() => localeStats.length, [localeStats])
+
   return (
-    <Container className="flex flex-col gap-y-3 px-6 py-4">
-      <div className="flex items-center justify-between">
-        <Heading>{t("translations.completion.heading")}</Heading>
-        <Text size="small" weight="plus" className="text-ui-fg-subtle">
-          {translatedCount.toLocaleString()} {t("general.of")}{" "}
-          {totalCount.toLocaleString()}
-        </Text>
-      </div>
+    <Container className="p-0">
+      <div className="flex flex-col gap-y-4 px-6 py-4">
+        <div className="flex items-center justify-between">
+          <Heading level="h2">{t("translations.completion.heading")}</Heading>
+          <Text size="small" weight="plus" className="text-ui-fg-subtle">
+            {translatedCount.toLocaleString()} {t("general.of")}{" "}
+            {totalCount.toLocaleString()}
+          </Text>
+        </div>
 
-      <div className="flex h-3 w-full overflow-hidden">
-        {percentage > 0 ? (
-          <>
+        <div className="flex h-3 w-full overflow-hidden">
+          {percentage > 0 ? (
+            <>
+              <div
+                className="mr-0.5 h-full rounded-sm transition-all"
+                style={{
+                  width: `${percentage}%`,
+                  backgroundColor: "var(--tag-blue-icon)",
+                  boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
+                }}
+              />
+              <div
+                className="h-full flex-1 rounded-sm"
+                style={{
+                  backgroundColor: "var(--tag-blue-border)",
+                  boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
+                }}
+              />
+            </>
+          ) : (
             <div
-              className="mr-0.5 h-full rounded-sm transition-all"
+              className="h-full w-full rounded-sm"
               style={{
-                width: `${percentage}%`,
-                backgroundColor: "var(--bg-interactive)",
+                backgroundColor: "var(--tag-blue-border)",
+                boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
               }}
             />
-            <div
-              className="h-full flex-1 rounded-sm"
-              style={{
-                backgroundColor: "var(--bg-interactive)",
-                opacity: 0.3,
-              }}
-            />
-          </>
-        ) : (
-          <div
-            className="h-full w-full rounded-full"
-            style={{
-              backgroundColor: "var(--bg-interactive)",
-              opacity: 0.3,
-            }}
-          />
-        )}
-      </div>
+          )}
+        </div>
 
-      <div className="flex items-center justify-between">
-        <Text size="small" weight="plus" className="text-ui-fg-subtle">
-          {percentage.toFixed(1)}%
-        </Text>
-        <Text size="small" weight="plus" className="text-ui-fg-subtle">
-          {remaining.toLocaleString()} {t("general.remaining").toLowerCase()}
-        </Text>
+        <div className="flex items-center justify-between">
+          <Text size="small" weight="plus" className="text-ui-fg-subtle">
+            {percentage.toFixed(1)}%
+          </Text>
+          <Text size="small" weight="plus" className="text-ui-fg-subtle">
+            {remaining.toLocaleString()} {t("general.remaining").toLowerCase()}
+          </Text>
+        </div>
       </div>
 
       {localeStats.length > 0 && (
-        <div className="mt-4 flex flex-col gap-y-2">
-          <div className="flex h-32 w-full items-end gap-1">
-            {localeStats.map((locale) => {
-              const heightPercent = (locale.total / maxTotal) * 100
-              const translatedPercent =
-                locale.total > 0 ? (locale.translated / locale.total) * 100 : 0
-
-              return (
-                <Tooltip
-                  key={locale.code}
-                  open={hoveredLocale === locale.code}
-                  content={
-                    <div className="flex flex-col gap-y-1 p-1">
-                      <Text size="small" weight="plus">
-                        {locale.name}
-                      </Text>
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-x-2">
-                          <div
-                            className="h-2 w-2 rounded-full"
-                            style={{ backgroundColor: "var(--bg-interactive)" }}
-                          />
+        <>
+          <Divider variant="dashed" />
+          <div className="flex flex-col gap-y-3 px-6 pb-6 pt-4">
+            <div className="flex h-32 w-full items-end gap-1">
+              {localeStats.map((locale) => {
+                const heightPercent = (locale.total / maxTotal) * 100
+                const translatedPercent =
+                  locale.total > 0
+                    ? (locale.translated / locale.total) * 100
+                    : 0
+
+                return (
+                  <Tooltip
+                    key={locale.code}
+                    open={hoveredLocale === locale.code}
+                    content={
+                      <div className="flex min-w-[150px] flex-col gap-y-1 p-1">
+                        <Text size="small" weight="plus">
+                          {locale.name}
+                        </Text>
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-x-2">
+                            <div
+                              className="h-2 w-2 rounded-full"
+                              style={{
+                                backgroundColor: "var(--tag-blue-icon)",
+                                boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
+                              }}
+                            />
+                            <Text
+                              size="small"
+                              weight="plus"
+                              className="text-ui-fg-base"
+                            >
+                              {t("translations.completion.translated")}
+                            </Text>
+                          </div>
                           <Text
                             size="small"
                             weight="plus"
-                            className="text-ui-fg-subtle"
+                            className="text-ui-fg-base"
                           >
-                            {t("translations.completion.translated")}
+                            {locale.translated}
+                          </Text>
+                        </div>
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-x-2">
+                            <div
+                              className="h-2 w-2 rounded-full"
+                              style={{
+                                backgroundColor: "var(--tag-blue-border)",
+                                boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
+                              }}
+                            />
+                            <Text
+                              size="small"
+                              weight="plus"
+                              className="text-ui-fg-base"
+                            >
+                              {t("translations.completion.toTranslate")}
+                            </Text>
+                          </div>
+                          <Text
+                            size="small"
+                            weight="plus"
+                            className="text-ui-fg-base"
+                          >
+                            {locale.toTranslate}
                           </Text>
                         </div>
-                        <Text size="small" weight="plus">
-                          {locale.translated}
-                        </Text>
                       </div>
-                      <div className="flex items-center gap-x-2">
-                        <div
-                          className="h-2 w-2 rounded-full"
-                          style={{
-                            backgroundColor: "var(--bg-interactive)",
-                            opacity: 0.3,
-                          }}
-                        />
-                        <Text
-                          size="small"
-                          weight="plus"
-                          className="text-ui-fg-subtle"
-                        >
-                          {t("translations.completion.toTranslate")}
-                        </Text>
-                        <Text size="small" weight="plus">
-                          {locale.toTranslate}
-                        </Text>
+                    }
+                  >
+                    <div className="flex h-full flex-1 items-end justify-center">
+                      <div
+                        className="flex w-full min-w-2 max-w-[96px] flex-col justify-end overflow-hidden rounded-t-sm transition-opacity"
+                        style={{ height: `${heightPercent}%` }}
+                        onMouseEnter={() => setHoveredLocale(locale.code)}
+                        onMouseLeave={() => setHoveredLocale(null)}
+                      >
+                        {translatedPercent === 0 ? (
+                          <div
+                            className="w-full rounded-sm"
+                            style={{
+                              height: "100%",
+                              backgroundColor: "var(--tag-neutral-bg)",
+                              boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
+                            }}
+                          />
+                        ) : (
+                          <>
+                            <div
+                              className="w-full rounded-sm"
+                              style={{
+                                height: `${100 - translatedPercent}%`,
+                                backgroundColor: "var(--tag-blue-border)",
+                                boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
+                                minHeight: locale.toTranslate > 0 ? "2px" : "0",
+                              }}
+                            />
+                            {translatedPercent > 0 && (
+                              <div
+                                className="mt-0.5 w-full rounded-sm"
+                                style={{
+                                  height: `${translatedPercent}%`,
+                                  backgroundColor: "var(--tag-blue-icon)",
+                                  boxShadow:
+                                    "inset 0 0 0 0.5px var(--alpha-250)",
+                                  minHeight:
+                                    locale.translated > 0 ? "2px" : "0",
+                                }}
+                              />
+                            )}
+                          </>
+                        )}
                       </div>
                     </div>
-                  }
-                >
+                  </Tooltip>
+                )
+              })}
+            </div>
+            {localeStatsCount < 9 && (
+              <div className="flex w-full gap-1">
+                {localeStats.map((locale) => (
                   <div
-                    className="flex min-w-2 flex-1 cursor-pointer flex-col justify-end overflow-hidden rounded-t-sm transition-opacity"
-                    style={{ height: `${heightPercent}%` }}
-                    onMouseEnter={() => setHoveredLocale(locale.code)}
-                    onMouseLeave={() => setHoveredLocale(null)}
+                    key={locale.code}
+                    className="flex flex-1 items-center justify-center"
                   >
-                    <div
-                      className="w-full rounded-t-sm"
-                      style={{
-                        height: `${100 - translatedPercent}%`,
-                        backgroundColor: "var(--bg-interactive)",
-                        opacity: 0.3,
-                        minHeight: locale.toTranslate > 0 ? "2px" : "0",
-                      }}
-                    />
-                    {translatedPercent > 0 && (
-                      <div
-                        className="mt-0.5 w-full rounded-sm"
-                        style={{
-                          height: `${translatedPercent}%`,
-                          backgroundColor: "var(--bg-interactive)",
-                          minHeight: locale.translated > 0 ? "2px" : "0",
-                        }}
-                      />
-                    )}
+                    <Text
+                      size="xsmall"
+                      weight="plus"
+                      className="text-ui-fg-subtle min-w-2 whitespace-normal break-words text-center leading-tight"
+                    >
+                      {localeStatsCount < 6 ? locale.name : locale.code}
+                    </Text>
                   </div>
-                </Tooltip>
-              )
-            })}
+                ))}
+              </div>
+            )}
+            {localeStatsCount > 9 && (
+              <Text
+                weight="plus"
+                size="xsmall"
+                className="text-ui-fg-subtle text-center"
+              >
+                {t("translations.completion.footer")}
+              </Text>
+            )}
           </div>
-          <Text
-            size="small"
-            weight="plus"
-            className="text-ui-fg-muted text-center"
-          >
-            {t("translations.completion.footer")}
-          </Text>
-        </div>
+        </>
       )}
     </Container>
   )