Skip to content

Commit 27db8e6

Browse files
brunobergherbrunobergher
committed
Visual tweaks to CloudView
1 parent 95f1fe0 commit 27db8e6

File tree

2 files changed

+46
-34
lines changed

2 files changed

+46
-34
lines changed

‎webview-ui/src/components/cloud/CloudView.tsx‎

Lines changed: 38 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@ import { vscode } from "@src/utils/vscode"
99
import { telemetryClient } from "@src/utils/TelemetryClient"
1010
import { ToggleSwitch } from "@/components/ui/toggle-switch"
1111
import { renderCloudBenefitsContent } from "./CloudUpsellDialog"
12-
import { TriangleAlert } from "lucide-react"
12+
import { CircleAlert, Info, Lock, TriangleAlert } from "lucide-react"
1313
import { cn } from "@/lib/utils"
1414
import { Tab, TabContent, TabHeader } from "../common/Tab"
1515
import { Button } from "@/components/ui/button"
1616
import { OrganizationSwitcher } from "./OrganizationSwitcher"
17+
import { StandardTooltip } from "../ui"
1718

1819
// Define the production URL constant locally to avoid importing from cloud package in tests
1920
const PRODUCTION_ROO_CODE_API_URL = "https://app.roocode.com"
@@ -163,11 +164,11 @@ export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone, orga
163164
<Button onClick={onDone}>{t("settings:common.done")}</Button>
164165
</TabHeader>
165166

166-
<TabContent>
167+
<TabContent className="pt-10">
167168
{isAuthenticated ? (
168169
<>
169170
{userInfo && (
170-
<div className="flex flex-col items-center mb-6">
171+
<div className="flex flex-col items-start ml-4 mb-6">
171172
<div className="w-16 h-16 mb-3 rounded-full overflow-hidden">
172173
{userInfo?.picture ? (
173174
<img
@@ -190,15 +191,15 @@ export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone, orga
190191

191192
{/* Organization Switcher - moved below email */}
192193
{organizations && organizations.length > 0 && (
193-
<div className="w-full max-w-sm mt-4">
194+
<div className="w-full max-w-60 mt-4">
194195
<OrganizationSwitcher userInfo={userInfo} organizations={organizations} />
195196
</div>
196197
)}
197198
</div>
198199
)}
199200

200201
{/* Task Sync Toggle - Always shown when authenticated */}
201-
<div className="border-t border-vscode-widget-border pt-4 mt-4">
202+
<div className="mt-4 p-4 border-b border-t border-vscode-widget-border pl-4 max-w-140">
202203
<div className="flex items-center gap-3 mb-2">
203204
<ToggleSwitch
204205
checked={taskSyncEnabled}
@@ -208,21 +209,25 @@ export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone, orga
208209
data-testid="task-sync-toggle"
209210
disabled={!!userInfo?.organizationId}
210211
/>
211-
<span className="font-medium text-vscode-foreground">{t("cloud:taskSync")}</span>
212+
<span className="font-medium text-vscode-foreground flex items-center">
213+
{t("cloud:taskSync")}
214+
{userInfo?.organizationId && (
215+
<StandardTooltip content={t("cloud:taskSyncManagedByOrganization")}>
216+
<div className="bg-vscode-badge-background text-vscode-badge-foreground/80 p-1.5 ml-2 -mb-2 relative -top-1 rounded-full inline-block cursor-help">
217+
<Lock className="size-3 block" />
218+
</div>
219+
</StandardTooltip>
220+
)}
221+
</span>
212222
</div>
213-
<div className="text-vscode-descriptionForeground text-sm mt-1 mb-4 ml-8">
223+
<div className="text-vscode-descriptionForeground text-sm mt-1 ml-8">
214224
{t("cloud:taskSyncDescription")}
215225
</div>
216-
{userInfo?.organizationId && (
217-
<div className="text-vscode-descriptionForeground text-sm mt-1 mb-4 ml-8 italic">
218-
{t("cloud:taskSyncManagedByOrganization")}
219-
</div>
220-
)}
221226

222227
{/* Remote Control Toggle - Only shown when both extensionBridgeEnabled and featureRoomoteControlEnabled are true */}
223228
{userInfo?.extensionBridgeEnabled && featureRoomoteControlEnabled && (
224229
<>
225-
<div className="flex items-center gap-3 mb-2">
230+
<div className="flex items-center gap-3 mt-4 mb-2">
226231
<ToggleSwitch
227232
checked={remoteControlEnabled}
228233
onChange={handleRemoteControlToggle}
@@ -235,37 +240,42 @@ export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone, orga
235240
{t("cloud:remoteControl")}
236241
</span>
237242
</div>
238-
<div className="text-vscode-descriptionForeground text-sm mt-1 mb-4 ml-8">
243+
<div className="text-vscode-descriptionForeground text-sm mt-1 mb-2 ml-8">
239244
{t("cloud:remoteControlDescription")}
240245
{!taskSyncEnabled && (
241-
<div className="text-vscode-errorForeground mt-2">
246+
<div className="text-vscode-editorWarning-foreground mt-2">
247+
<CircleAlert className="inline size-3 mr-1 mb-0.5 text-vscode-editorWarning-foreground" />
242248
{t("cloud:remoteControlRequiresTaskSync")}
243249
</div>
244250
)}
245251
</div>
246252
</>
247253
)}
254+
</div>
248255

249-
{/* Info text about usage metrics */}
250-
<div className="text-vscode-descriptionForeground text-sm mt-4 mb-4 ml-8 italic">
251-
{t("cloud:usageMetricsAlwaysReported")}
252-
</div>
253-
254-
<hr className="border-vscode-widget-border mb-4" />
256+
<div className="text-vscode-descriptionForeground text-sm mt-4 mb-8 pl-4">
257+
<Info className="inline size-3 mr-1 mb-0.5 text-vscode-descriptionForeground" />
258+
{t("cloud:usageMetricsAlwaysReported")}
255259
</div>
256260

257-
<div className="flex flex-col gap-2 mt-4">
258-
<VSCodeButton appearance="secondary" onClick={handleVisitCloudWebsite} className="w-full">
261+
<div className="flex flex-col gap-2 mt-4 pl-4">
262+
<VSCodeButton
263+
appearance="secondary"
264+
onClick={handleVisitCloudWebsite}
265+
className="w-full max-w-80">
259266
{t("cloud:visitCloudWebsite")}
260267
</VSCodeButton>
261-
<VSCodeButton appearance="secondary" onClick={handleLogoutClick} className="w-full">
268+
<VSCodeButton
269+
appearance="secondary"
270+
onClick={handleLogoutClick}
271+
className="w-full max-w-80">
262272
{t("cloud:logOut")}
263273
</VSCodeButton>
264274
</div>
265275
</>
266276
) : (
267277
<>
268-
<div className="flex flex-col items-start gap-4 px-8">
278+
<div className="flex flex-col items-start gap-4 px-8 max-w-100">
269279
<div className={cn(authInProgress && "opacity-50")}>{renderCloudBenefitsContent(t)}</div>
270280

271281
{!authInProgress && (
@@ -320,10 +330,10 @@ export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone, orga
320330
</>
321331
)}
322332
{cloudApiUrl && cloudApiUrl !== PRODUCTION_ROO_CODE_API_URL && (
323-
<div className="ml-8 mt-6 flex justify-start">
333+
<div className="ml-4 mt-6 flex">
324334
<div className="inline-flex items-center gap-2 text-xs">
325-
<TriangleAlert className="size-4 text-vscode-descriptionForeground" />
326-
<span className="text-vscode-foreground/75">{t("cloud:cloudUrlPillLabel")}: </span>
335+
<TriangleAlert className="size-3 text-vscode-descriptionForeground" />
336+
<span className="text-vscode-foreground/75">{t("cloud:cloudUrlPillLabel")} </span>
327337
<button
328338
onClick={handleOpenCloudUrl}
329339
className="text-vscode-textLink-foreground hover:text-vscode-textLink-activeForeground underline cursor-pointer bg-transparent border-none p-0">

‎webview-ui/src/components/cloud/OrganizationSwitcher.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -74,10 +74,10 @@ export const OrganizationSwitcher = ({ userInfo, organizations, onOrganizationCh
7474
?.organization.image_url
7575
}
7676
alt=""
77-
className="w-4 h-4 rounded object-cover"
77+
className="w-4.5 h-4.5 rounded-full object-cover overflow-clip"
7878
/>
7979
) : (
80-
<Building2 className="w-4 h-4" />
80+
<Building2 className="w-4.5 h-4.5" />
8181
)}
8282
<span className="truncate">
8383
{
@@ -88,7 +88,9 @@ export const OrganizationSwitcher = ({ userInfo, organizations, onOrganizationCh
8888
</>
8989
) : (
9090
<>
91-
<User className="w-4 h-4" />
91+
<div className="p-0.5 bg-vscode-button-background rounded-full flex items-center justify-center bg-vscode-button-background text-vscode-button-foreground text-xs">
92+
<User className="w-4 h-4 text-vscode-button-foreground" />
93+
</div>
9294
<span>{t("cloud:personalAccount")}</span>
9395
</>
9496
)}
@@ -98,7 +100,7 @@ export const OrganizationSwitcher = ({ userInfo, organizations, onOrganizationCh
98100
<SelectContent>
99101
<SelectItem value="personal">
100102
<div className="flex items-center gap-2">
101-
<User className="w-4 h-4" />
103+
<User className="w-4.5 h-4.5" />
102104
<span>{t("cloud:personalAccount")}</span>
103105
</div>
104106
</SelectItem>
@@ -110,10 +112,10 @@ export const OrganizationSwitcher = ({ userInfo, organizations, onOrganizationCh
110112
<img
111113
src={org.organization.image_url}
112114
alt=""
113-
className="w-4 h-4 rounded object-cover"
115+
className="w-4.5 h-4.5 rounded-full object-cover overflow-clip"
114116
/>
115117
) : (
116-
<Building2 className="w-4 h-4" />
118+
<Building2 className="w-4.5 h-4.5" />
117119
)}
118120
<span className="truncate">{org.organization.name}</span>
119121
</div>

0 commit comments

Comments
 (0)