scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-09-07 08:26:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve ShareButton UI responsiveness and styling details

Browse source 
Co-authored-by: matt <matt@roocode.com>
This commit is contained in:
Cursor Agent 2025-07-10 14:56:08 +00:00
parent 356d421344
commit ca0110ae92
1 changed files with 36 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
webview-ui/src/components/chat/ShareButton.tsx
View file

@ -163,12 +163,12 @@ export const ShareButton = ({ item, disabled = false }: ShareButtonProps) => {
</Button>
</PopoverTrigger>
</StandardTooltip>
<PopoverContent className="w-56 p-0" align="start">
<PopoverContent className="w-64 sm:w-72 md:w-80 p-0" align="start">
{shareSuccess ? (
<div className="p-3">
<div className="p-3 sm:p-4">
<div className="flex items-center gap-2 text-sm text-green-600 dark:text-green-400">
<span className="codicon codicon-check"></span>
<span>
<span className="codicon codicon-check flex-shrink-0"></span>
<span className="break-words">
{shareSuccess.visibility === "public"
? t("chat:task.shareSuccessPublic")
: t("chat:task.shareSuccessOrganization")}
@ -182,26 +182,30 @@ export const ShareButton = ({ item, disabled = false }: ShareButtonProps) => {
{cloudUserInfo?.organizationName && (
<CommandItem
onSelect={() => handleShare("organization")}
className="cursor-pointer">
<div className="flex items-center gap-2">
<span className="codicon codicon-organization text-sm"></span>
<div className="flex flex-col">
<span className="text-sm">
className="cursor-pointer p-3 sm:p-4">
<div className="flex items-start gap-2 w-full">
<span className="codicon codicon-organization text-sm flex-shrink-0 mt-0.5"></span>
<div className="flex flex-col min-w-0 flex-1">
<span className="text-sm font-medium leading-tight">
{t("chat:task.shareWithOrganization")}
</span>
<span className="text-xs text-vscode-descriptionForeground">
<span className="text-xs text-vscode-descriptionForeground mt-1 break-words leading-relaxed">
{t("chat:task.shareWithOrganizationDescription")}
</span>
</div>
</div>
</CommandItem>
)}
<CommandItem onSelect={() => handleShare("public")} className="cursor-pointer">
<div className="flex items-center gap-2">
<span className="codicon codicon-globe text-sm"></span>
<div className="flex flex-col">
<span className="text-sm">{t("chat:task.sharePublicly")}</span>
<span className="text-xs text-vscode-descriptionForeground">
<CommandItem
onSelect={() => handleShare("public")}
className="cursor-pointer p-3 sm:p-4">
<div className="flex items-start gap-2 w-full">
<span className="codicon codicon-globe text-sm flex-shrink-0 mt-0.5"></span>
<div className="flex flex-col min-w-0 flex-1">
<span className="text-sm font-medium leading-tight">
{t("chat:task.sharePublicly")}
</span>
<span className="text-xs text-vscode-descriptionForeground mt-1 break-words leading-relaxed">
{t("chat:task.sharePubliclyDescription")}
</span>
</div>
@ -228,36 +232,36 @@ export const ShareButton = ({ item, disabled = false }: ShareButtonProps) => {
{/* Connect to Cloud Modal */}
<Dialog open={connectModalOpen} onOpenChange={setConnectModalOpen}>
<DialogContent className="max-w-sm">
<DialogHeader className="text-center">
<DialogTitle className="text-lg font-medium text-vscode-foreground">
<DialogContent className="max-w-sm sm:max-w-md w-[calc(100vw-2rem)] mx-4">
<DialogHeader className="text-center space-y-3">
<DialogTitle className="text-lg sm:text-xl font-medium text-vscode-foreground leading-tight">
{t("account:cloudBenefitsTitle")}
</DialogTitle>
</DialogHeader>
<div className="flex flex-col space-y-6">
<div>
<p className="text-md text-vscode-descriptionForeground mb-4">
<div className="space-y-4">
<p className="text-sm sm:text-base text-vscode-descriptionForeground leading-relaxed">
{t("account:cloudBenefitsSubtitle")}
</p>
<ul className="text-sm text-vscode-descriptionForeground space-y-2">
<li className="flex items-start">
<span className="mr-2 text-vscode-foreground">•</span>
{t("account:cloudBenefitSharing")}
<ul className="text-sm text-vscode-descriptionForeground space-y-3">
<li className="flex items-start gap-3">
<span className="text-vscode-foreground flex-shrink-0 mt-0.5">•</span>
<span className="leading-relaxed">{t("account:cloudBenefitSharing")}</span>
</li>
<li className="flex items-start">
<span className="mr-2 text-vscode-foreground">•</span>
{t("account:cloudBenefitHistory")}
<li className="flex items-start gap-3">
<span className="text-vscode-foreground flex-shrink-0 mt-0.5">•</span>
<span className="leading-relaxed">{t("account:cloudBenefitHistory")}</span>
</li>
<li className="flex items-start">
<span className="mr-2 text-vscode-foreground">•</span>
{t("account:cloudBenefitMetrics")}
<li className="flex items-start gap-3">
<span className="text-vscode-foreground flex-shrink-0 mt-0.5">•</span>
<span className="leading-relaxed">{t("account:cloudBenefitMetrics")}</span>
</li>
</ul>
</div>
<div className="flex flex-col gap-4">
<Button onClick={handleConnectToCloud} className="w-full">
<Button onClick={handleConnectToCloud} className="w-full h-10 sm:h-11 text-sm sm:text-base">
{t("account:connect")}
</Button>
</div>