chore: finalize branded styling

Author: ranst91

typescript-sdk/apps/dojo/package.json

@@ -38,6 +38,7 @@
     "@mdx-js/react": "^3.1.0",
     "@monaco-editor/react": "^4.7.0",
     "@next/mdx": "^15.2.3",
+    "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.3",

typescript-sdk/apps/dojo/src/app/[integrationId]/feature/layout.tsx

@@ -55,5 +55,5 @@ export default function FeatureLayout({ children, params }: Props) {
     }
   }, [children, codeFiles, readme, view])
 
-  return <div className="bg-white rounded-lg w-full h-full">{content}</div>;
+  return <div className="bg-white rounded-lg overflow-hidden w-full h-full">{content}</div>;
 }

typescript-sdk/apps/dojo/src/app/globals.css

@@ -129,17 +129,23 @@
   --spacing-spacing-18: 72px;
 
   /* CopilotCloud Border Radius */
-  --radius-xs: 2px;
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
-  --radius-2xl: 20px;
-  --radius-3xl: 24px;
+  --radius-xs: 4px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-2xl: 48px;
+  --radius-3xl: 200px;
 
   /* Font Families */
   --font-family-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
   --font-family-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, monospace;
+  
+  /* Elevation/Shadows */
+  --shadow-sm: 0px 1px 3px 0px rgba(1, 5, 7, 0.08);
+  --shadow-md: 0px 6px 6px -2px rgba(1, 5, 7, 0.08);
+  --shadow-lg: 0px 16px 24px -8px rgba(1, 5, 7, 0.12);
+  --shadow-xl: 0px 24px 32px -12px rgba(1, 5, 7, 0.16);
 }
 
 :root {
@@ -234,6 +240,6 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground font-sans;
   }
 }

typescript-sdk/apps/dojo/src/components/demo-list/demo-list.tsx

@@ -14,7 +14,11 @@ export function DemoList({ demos, selectedDemo, onSelect, llmSelector }: DemoLis
   return (
     <div className="h-full">
       <div className="px-4 pt-3 pb-2">
-        <h2 className="text-xs uppercase tracking-wider font-semibold text-muted-foreground mb-1">
+        <h2
+          className={cn(
+            "transition-all duration-300 ease-in-out inline-block whitespace-nowrap paragraphs-Small-Regular-Uppercase text-[10px] text-palette-text-secondary opacity-100 scale-100 w-fit",
+          )}
+        >
           Demos
         </h2>
         {llmSelector && <div className="mt-2">{llmSelector}</div>}

typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import Image from "next/image";
+import { EyeIcon as Eye, CodeIcon as Code, BookOpenTextIcon as Book } from "@phosphor-icons/react";
+import { cn } from "@/lib/utils";
 import { useRouter, usePathname } from "next/navigation";
 import { DemoList } from "@/components/demo-list/demo-list";
 import { ThemeToggle } from "@/components/ui/theme-toggle";
-import { Eye, Code, Book, ChevronDown } from "lucide-react";
+import { ChevronDown } from "lucide-react";
 import featureConfig from "@/config";
 import {
   DropdownMenu,
@@ -98,8 +99,10 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) {
     }
   }, []);
 
+  const tabClass = `cursor-pointer flex-1 h-8 px-2 text-sm text-primary shadow-none bg-none border-none font-medium gap-1 rounded-lg data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-none`
+
   return (
-    <div className={`flex flex-col h-full bg-white/50 border-r
+    <div className={`flex flex-col h-full bg-white/50 border-2 overflow-hidden border-palette-border-default
       ${isMobile ? 'w-80 shadow-xl' : 'w-74 min-w-[296px] flex-shrink-0 rounded-lg'}
     `}>
       {/* Sidebar Header */}
@@ -111,7 +114,7 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) {
             </h1>
           </div>
 
-          <ThemeToggle />
+          {/*<ThemeToggle />*/}
         </div>
       </div>
 
@@ -120,21 +123,23 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) {
       <div className="p-4 border-b">
         {/* Integration picker */}
         {!frameworkPickerHidden&& (
-          <div className="mb-1">
-            <label className="block text-sm font-medium text-muted-foreground mb-2">Integrations</label>
+          <div className="mb-spacing-4">
+            <SectionTitle title="Integrations" />
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="w-full justify-between">
-                  {currentIntegration ? currentIntegration.name : "Select Integration"}
-                  <ChevronDown className="h-4 w-4 opacity-50" />
-                </Button>
+                <div className="flex items-center justify-between h-spacing-8 rounded-sm gap-spacing-2 px-spacing-3 transition-colors hover:bg-palette-surface-containerHovered cursor-pointer">
+                  <span className="pb-[2px] text-palette-text-primary font-medium leading-[22px] inline-block truncate">
+                    {currentIntegration ? currentIntegration.name : "Select Integration"}
+                  </span>
+                  <ChevronDown className="text-palette-icon-default transition-transform" size={16} />
+                </div>
               </DropdownMenuTrigger>
-              <DropdownMenuContent className="w-56">
+              <DropdownMenuContent className="w-64 bg-palette-surface-container border-palette-border-container shadow-elevation-md">
                 {menuIntegrations.map((integration) => (
                   <DropdownMenuItem
                     key={integration.id}
                     onClick={() => handleIntegrationSelect(integration.id)}
-                    className="cursor-pointer"
+                    className="cursor-pointer hover:bg-palette-grey-200 text-palette-text-primary text-base h-10 rounded-sm"
                   >
                     <span>{integration.name}</span>
                   </DropdownMenuItem>
@@ -147,30 +152,30 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) {
         {/* Preview/Code Tabs */}
         {!viewPickerHidden &&
         <div className="mb-1">
-          <label className="block text-sm font-medium text-muted-foreground mb-2">View</label>
+          <SectionTitle title="View" />
           <Tabs
             value={view}
             onValueChange={tab => setView(tab as View)}
-            className="w-full"
+            className="w-full rounded-lg bg-none border-none"
           >
-            <TabsList className="w-full h-9 border shadow-sm rounded-lg p-1">
+            <TabsList className="w-full rounded-lg h-8 p-0 bg-transparent border-none">
               <TabsTrigger
                 value="preview"
-                className="flex-1 h-7 px-2 text-sm font-medium gap-1 rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow"
+                className={tabClass}
               >
                 <Eye className="h-3 w-3" />
                 <span>Preview</span>
               </TabsTrigger>
               <TabsTrigger
                 value="code"
-                className="flex-1 h-7 px-2 text-sm font-medium gap-1 rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow"
+                className={tabClass}
               >
                 <Code className="h-3 w-3" />
                 <span>Code</span>
               </TabsTrigger>
               <TabsTrigger
                 value="readme"
-                className="flex-1 h-7 px-2 text-sm font-medium gap-1 rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow"
+                className={tabClass}
               >
                 <Book className="h-3 w-3" />
                 <span>Docs</span>
@@ -199,3 +204,28 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) {
     </div>
   );
 }
+
+function SectionTitle({ title }: { title: string }) {
+  return (
+    <div
+      className={cn(
+        "items-center",
+        "flex px-spacing-1 gap-spacing-2 mb-2",
+      )}
+    >
+      <label
+        className={cn(
+          "transition-all duration-300 ease-in-out inline-block whitespace-nowrap paragraphs-Small-Regular-Uppercase text-[10px] text-palette-text-secondary opacity-100 scale-100 w-fit",
+        )}
+      >
+        {title}
+      </label>
+      <div
+        className={cn(
+          "h-[1px] bg-palette-border-container transition-all duration-300 ease-[cubic-bezier(0.36,0.01,0.22,1)]",
+          "w-full",
+        )}
+      />
+    </div>
+  );
+}