Improve mode names UI consistency

CHANGELOG.md

@@ -1,18 +1,19 @@
 # Roo Code Changelog
 
-## [3.28.1] - 2025-09-11
+## [3.28.0] - 2025-09-10
 
-![3.28.1 Release - Kangaroo riding rocket to the clouds](/releases/3.28.1-release.png)
+![3.29.0 - Refactor UI components for improved styling and functionality](/releases/3.28.0-release.png)
+
+- Updated mode names and descriptions in `mode.ts` for clarity.
+- Enhanced `ApiConfigSelector` with new styles and improved layout.
+- Refined `AutoApproveMenu` for better user experience and visual consistency.
+- Modified `ChatTextArea` to streamline controls and improve accessibility.
+- Introduced `ModeIcon` component for better icon representation in `ModeSelector`.
+- Improved popover styling for a more modern look.
+
+- These changes aim to enhance the overall user interface and experience across the application.
 
-- Announce Roo Code Cloud!
-- Add cloud task button for opening tasks in Roo Code Cloud (thanks @app/roomote!)
-- Make Posthog telemetry the default (thanks @mrubens!)
-- Show notification when the checkpoint initialization fails (thanks @app/roomote!)
-- Bust cache in generated image preview (thanks @mrubens!)
-- Fix: Center active mode in selector dropdown on open (#7882 by @hannesrudolph, PR by @app/roomote)
-- Fix: Preserve first message during conversation condensing (thanks @daniel-lxs!)
 
-## [3.28.0] - 2025-09-10
 
 ![3.28.0 Release - Continue tasks in Roo Code Cloud](/releases/3.28.0-release.png)
 

apps/web-evals/src/components/ui/command.tsx

@@ -102,7 +102,7 @@ function CommandItem({ className, ...props }: React.ComponentProps<typeof Comman
 		<CommandPrimitive.Item
 			data-slot="command-item"
 			className={cn(
-				"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-xs px-2 py-1.5 outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-xl px-2 py-1.5 outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				"text-foreground active:opacity-80 cursor-pointer group",
 				className,
 			)}

apps/web-evals/src/components/ui/dialog.tsx

@@ -47,7 +47,7 @@ function DialogContent({ className, children, ...props }: React.ComponentProps<t
 				)}
 				{...props}>
 				{children}
-				<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+				<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xl opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
 					<XIcon />
 					<span className="sr-only">Close</span>
 				</DialogPrimitive.Close>

apps/web-evals/src/components/ui/dropdown-menu.tsx

@@ -29,7 +29,7 @@ function DropdownMenuContent({
 				data-slot="dropdown-menu-content"
 				sideOffset={sideOffset}
 				className={cn(
-					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl border p-1 shadow-md",
 					className,
 				)}
 				{...props}

apps/web-evals/src/components/ui/select.tsx

@@ -92,7 +92,7 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
 		<SelectPrimitive.Item
 			data-slot="select-item"
 			className={cn(
-				"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-xs py-1.5 pr-8 pl-2 outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+				"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-xl py-1.5 pr-8 pl-2 outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
 				"text-foreground active:opacity-80 cursor-pointer group",
 				className,
 			)}

apps/web-roo-code/src/components/chromes/footer.tsx

@@ -235,20 +235,20 @@ export function Footer() {
 											</button>
 
 											{privacyDropdownOpen && (
-												<div className="absolute z-50 mt-2 w-44 origin-top-left scale-95 rounded-md border border-border bg-background shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-100 ease-out data-[state=open]:scale-100 max-xs:right-0 max-xs:origin-top-right xs:left-0">
+												<div className="absolute z-50 mt-2 w-44 origin-top-left scale-95 rounded-2xl border border-border bg-background shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-100 ease-out data-[state=open]:scale-100 max-xs:right-0 max-xs:origin-top-right xs:left-0">
 													<div className="flex flex-col gap-1 p-2 text-sm text-muted-foreground">
 														<a
 															href={EXTERNAL_LINKS.PRIVACY_POLICY_EXTENSION}
 															target="_blank"
 															rel="noopener noreferrer"
 															onClick={() => setPrivacyDropdownOpen(false)}
-															className="rounded-md px-3 py-2 transition-colors hover:bg-accent/50 hover:text-foreground">
+															className="rounded-2xl px-3 py-2 transition-colors hover:bg-accent/50 hover:text-foreground">
 															Extension
 														</a>
 														<Link
 															href={INTERNAL_LINKS.PRIVACY_POLICY_WEBSITE}
 															onClick={() => setPrivacyDropdownOpen(false)}
-															className="rounded-md px-3 py-2 transition-colors hover:bg-accent/50 hover:text-foreground">
+															className="rounded-2xl px-3 py-2 transition-colors hover:bg-accent/50 hover:text-foreground">
 															Roo Code Cloud
 														</Link>
 													</div>

apps/web-roo-code/src/components/chromes/nav-bar.tsx

@@ -92,7 +92,7 @@ export function NavBar({ stars, downloads }: NavBarProps) {
 					<Link
 						href={EXTERNAL_LINKS.MARKETPLACE}
 						target="_blank"
-						className="hidden items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-all duration-200 hover:bg-primary/80 hover:shadow-lg hover:scale-105 md:flex">
+						className="hidden items-center gap-1.5 rounded-2xl bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-all duration-200 hover:bg-primary/80 hover:shadow-lg hover:scale-105 md:flex">
 						<VscVscode className="-mr-[2px] mt-[1px] h-4 w-4" />
 						<span>
 							Install <span className="font-black max-lg:text-xs">&middot;</span>
@@ -178,18 +178,18 @@ export function NavBar({ stars, downloads }: NavBarProps) {
 						<Link
 							href={EXTERNAL_LINKS.GITHUB}
 							target="_blank"
-							className="inline-flex items-center gap-2 rounded-md p-2 text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
+							className="inline-flex items-center gap-2 rounded-2xl p-2 text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
 							onClick={() => setIsMenuOpen(false)}>
 							<RxGithubLogo className="h-5 w-5" />
 							{stars !== null && <span>{stars}</span>}
 						</Link>
-						<div className="flex items-center rounded-md p-2 transition-colors hover:bg-accent">
+						<div className="flex items-center rounded-2xl p-2 transition-colors hover:bg-accent">
 							<ThemeToggle />
 						</div>
 						<Link
 							href={EXTERNAL_LINKS.MARKETPLACE}
 							target="_blank"
-							className="inline-flex items-center gap-2 rounded-md p-2 text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
+							className="inline-flex items-center gap-2 rounded-2xl p-2 text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
 							onClick={() => setIsMenuOpen(false)}>
 							<VscVscode className="h-5 w-5" />
 							{downloads !== null && <span>{downloads}</span>}

apps/web-roo-code/src/components/enterprise/contact-form.tsx

@@ -190,7 +190,7 @@ export function ContactForm({ formType, buttonText, buttonClassName }: ContactFo
 								id="name"
 								name="name"
 								type="text"
-								className={`w-full rounded-md border ${
+								className={`w-full rounded-2xl border ${
 									formErrors.name ? "border-red-500" : "border-input"
 								} bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring`}
 								placeholder="Your name"
@@ -206,7 +206,7 @@ export function ContactForm({ formType, buttonText, buttonClassName }: ContactFo
 								id="company"
 								name="company"
 								type="text"
-								className={`w-full rounded-md border ${
+								className={`w-full rounded-2xl border ${
 									formErrors.company ? "border-red-500" : "border-input"
 								} bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring`}
 								placeholder="Your company"
@@ -222,7 +222,7 @@ export function ContactForm({ formType, buttonText, buttonClassName }: ContactFo
 								id="email"
 								name="email"
 								type="email"
-								className={`w-full rounded-md border ${
+								className={`w-full rounded-2xl border ${
 									formErrors.email ? "border-red-500" : "border-input"
 								} bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring`}
 								placeholder="[email protected]"
@@ -238,7 +238,7 @@ export function ContactForm({ formType, buttonText, buttonClassName }: ContactFo
 								id="website"
 								name="website"
 								type="url"
-								className={`w-full rounded-md border ${
+								className={`w-full rounded-2xl border ${
 									formErrors.website ? "border-red-500" : "border-input"
 								} bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring`}
 								placeholder="https://example.com"
@@ -253,7 +253,7 @@ export function ContactForm({ formType, buttonText, buttonClassName }: ContactFo
 							<select
 								id="engineerCount"
 								name="engineerCount"
-								className={`w-full rounded-md border ${
+								className={`w-full rounded-2xl border ${
 									formErrors.engineerCount ? "border-red-500" : "border-input"
 								} bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring`}
 								defaultValue="1-10">
@@ -270,7 +270,7 @@ export function ContactForm({ formType, buttonText, buttonClassName }: ContactFo
 						</div>
 
 						{submitStatus === "error" && (
-							<div className="rounded-md bg-red-50 p-3 text-sm text-red-500 dark:bg-red-900/20">
+							<div className="rounded-2xl bg-red-50 p-3 text-sm text-red-500 dark:bg-red-900/20">
 								There was an error submitting your request. Please try again later.
 							</div>
 						)}

apps/web-roo-code/src/components/homepage/code-example.tsx

@@ -54,7 +54,7 @@ export function CodeExample() {
 
 	return (
 		<div className="relative z-10 w-full max-w-[90vw] rounded-lg border border-border bg-background/50 p-2 shadow-2xl backdrop-blur-sm sm:max-w-[500px]">
-			<div className="rounded-md bg-muted p-1.5 dark:bg-gray-900 sm:p-2">
+			<div className="rounded-2xl bg-muted p-1.5 dark:bg-gray-900 sm:p-2">
 				<div className="flex items-center justify-between border-b border-border px-2 py-1.5 sm:px-3 sm:py-2">
 					<div className="flex items-center space-x-1.5">
 						<div className="h-2.5 w-2.5 rounded-full bg-red-500 sm:h-3 sm:w-3" />

apps/web-roo-code/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-2xl text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 	{
 		variants: {
 			variant: {
@@ -18,8 +18,8 @@ const buttonVariants = cva(
 			},
 			size: {
 				default: "h-9 px-4 py-2",
-				sm: "h-8 rounded-md px-3 text-xs",
-				lg: "h-10 rounded-md px-8",
+				sm: "h-8 rounded-2xl px-3 text-xs",
+				lg: "h-10 rounded-2xl px-8",
 				icon: "h-9 w-9",
 			},
 		},

packages/types/src/mode.ts

@@ -136,7 +136,7 @@ export type CustomSupportPrompts = z.infer<typeof customSupportPromptsSchema>
 export const DEFAULT_MODES: readonly ModeConfig[] = [
 	{
 		slug: "architect",
-		name: "🏗️ Architect",
+		name: " Architect",
 		roleDefinition:
 			"You are Roo, an experienced technical leader who is inquisitive and an excellent planner. Your goal is to gather information and get context to create a detailed plan for accomplishing the user's task, which the user will review and approve before they switch into another mode to implement the solution.",
 		whenToUse:
@@ -148,7 +148,7 @@ export const DEFAULT_MODES: readonly ModeConfig[] = [
 	},
 	{
 		slug: "code",
-		name: "💻 Code",
+		name: "Code",
 		roleDefinition:
 			"You are Roo, a highly skilled software engineer with extensive knowledge in many programming languages, frameworks, design patterns, and best practices.",
 		whenToUse:
@@ -158,7 +158,7 @@ export const DEFAULT_MODES: readonly ModeConfig[] = [
 	},
 	{
 		slug: "ask",
-		name: "❓ Ask",
+		name: " Ask",
 		roleDefinition:
 			"You are Roo, a knowledgeable technical assistant focused on answering questions and providing information about software development, technology, and related topics.",
 		whenToUse:
@@ -170,7 +170,7 @@ export const DEFAULT_MODES: readonly ModeConfig[] = [
 	},
 	{
 		slug: "debug",
-		name: "🪲 Debug",
+		name: " Debug",
 		roleDefinition:
 			"You are Roo, an expert software debugger specializing in systematic problem diagnosis and resolution.",
 		whenToUse:
@@ -182,7 +182,8 @@ export const DEFAULT_MODES: readonly ModeConfig[] = [
 	},
 	{
 		slug: "orchestrator",
-		name: "🪃 Orchestrator",
+		// here material icons
+		name: " Orchestrator",
 		roleDefinition:
 			"You are Roo, a strategic workflow orchestrator who coordinates complex tasks by delegating them to appropriate specialized modes. You have a comprehensive understanding of each mode's capabilities and limitations, allowing you to effectively break down complex problems into discrete tasks that can be solved by different specialists.",
 		whenToUse:

webview-ui/package.json

@@ -67,6 +67,7 @@
 		"remark-gfm": "^4.0.1",
 		"remark-math": "^6.0.0",
 		"remove-markdown": "^0.6.0",
+		"postcss": "^8.4.49",
 		"shell-quote": "^1.8.2",
 		"shiki": "^3.2.1",
 		"source-map": "^0.7.4",