make product update text a more readable

This commit is contained in:
miloschwartz
2025-12-06 21:31:12 -05:00
parent b329dbb585
commit 8df3fa0ac0
3 changed files with 35 additions and 33 deletions

View File

@@ -2,7 +2,7 @@ import path from "path";
import { fileURLToPath } from "url"; import { fileURLToPath } from "url";
// This is a placeholder value replaced by the build process // This is a placeholder value replaced by the build process
export const APP_VERSION = "1.12.3"; export const APP_VERSION = "1.13.0";
export const __FILENAME = fileURLToPath(import.meta.url); export const __FILENAME = fileURLToPath(import.meta.url);
export const __DIRNAME = path.dirname(__FILENAME); export const __DIRNAME = path.dirname(__FILENAME);

View File

@@ -154,7 +154,7 @@ export function LayoutSidebar({
</div> </div>
</div> </div>
<div className="p-4 flex flex-col shrink-0"> <div className="p-4 pt-1 flex flex-col shrink-0">
{canShowProductUpdates && ( {canShowProductUpdates && (
<div className="mb-3"> <div className="mb-3">
<ProductUpdates isCollapsed={isSidebarCollapsed} /> <ProductUpdates isCollapsed={isSidebarCollapsed} />

View File

@@ -180,33 +180,33 @@ function ProductUpdatesListPopup({
<div <div
className={cn( className={cn(
"relative z-1 cursor-pointer block", "relative z-1 cursor-pointer block",
"rounded-md border bg-muted p-2 py-3 w-full flex items-start gap-2 text-sm", "rounded-md border bg-muted p-2 py-3 w-full flex flex-col gap-2 text-sm",
"transition duration-300 ease-in-out", "transition duration-300 ease-in-out",
"data-closed:opacity-0 data-closed:translate-y-full" "data-closed:opacity-0 data-closed:translate-y-full"
)} )}
> >
<div className="rounded-md bg-muted-foreground/20 p-2"> <div className="flex items-center gap-2">
<BellIcon className="flex-none size-4" /> <div className="rounded-md bg-muted-foreground/20 p-2">
</div> <BellIcon className="flex-none size-4" />
<div className="flex flex-col gap-2 flex-1"> </div>
<div className="flex justify-between items-center w-full"> <div className="flex justify-between items-center flex-1">
<p className="font-medium text-start"> <p className="font-medium text-start">
{t("productUpdateWhatsNew")} {t("productUpdateWhatsNew")}
</p> </p>
<div className="p-1 cursor-pointer ml-auto"> <div className="p-1 cursor-pointer">
<ChevronRightIcon className="size-4 flex-none" /> <ChevronRightIcon className="size-4 flex-none" />
</div> </div>
</div> </div>
<small
className={cn(
"text-start text-muted-foreground",
"overflow-hidden h-8",
"[-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]"
)}
>
{updates[0]?.contents}
</small>
</div> </div>
<small
className={cn(
"text-start text-muted-foreground",
"overflow-hidden h-8",
"[-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]"
)}
>
{updates[0]?.contents}
</small>
</div> </div>
</PopoverTrigger> </PopoverTrigger>
</Transition> </Transition>
@@ -332,20 +332,31 @@ function NewVersionAvailable({
<div <div
className={cn( className={cn(
"relative z-2", "relative z-2",
"rounded-md border bg-muted p-2 py-3 w-full flex items-start gap-2 text-sm", "rounded-md border bg-muted p-2 py-3 w-full flex flex-col gap-2 text-sm",
"transition duration-300 ease-in-out", "transition duration-300 ease-in-out",
"data-closed:opacity-0 data-closed:translate-y-full" "data-closed:opacity-0 data-closed:translate-y-full"
)} )}
> >
{version && ( {version && (
<> <>
<div className="rounded-md bg-muted-foreground/20 p-2"> <div className="flex items-center gap-2">
<RocketIcon className="flex-none size-4" /> <div className="rounded-md bg-muted-foreground/20 p-2">
</div> <RocketIcon className="flex-none size-4" />
<div className="flex flex-col gap-2"> </div>
<p className="font-medium"> <p className="font-medium flex-1">
{t("pangolinUpdateAvailable")} {t("pangolinUpdateAvailable")}
</p> </p>
<button
className="p-1 cursor-pointer"
onClick={() => {
setOpen(false);
onDimiss();
}}
>
<XIcon className="size-4 flex-none" />
</button>
</div>
<div className="flex flex-col gap-2">
<small className="text-muted-foreground"> <small className="text-muted-foreground">
{t("pangolinUpdateAvailableInfo", { {t("pangolinUpdateAvailableInfo", {
version: version.pangolin.latestVersion version: version.pangolin.latestVersion
@@ -362,15 +373,6 @@ function NewVersionAvailable({
<ArrowRight className="flex-none size-3" /> <ArrowRight className="flex-none size-3" />
</a> </a>
</div> </div>
<button
className="p-1 cursor-pointer"
onClick={() => {
setOpen(false);
onDimiss();
}}
>
<XIcon className="size-4 flex-none" />
</button>
</> </>
)} )}
</div> </div>