Some work on Cloud Docs

Author: brunobergher

docs/provider/overview.md

@@ -17,70 +17,26 @@ Connect your Roo Code extension to Roo Code Cloud to sync your prompts, access o
 
 ## Getting Started
 
-To connect to Roo Code Cloud, click the **cloud icon** <Codicon name="cloud" /> in the top right corner of the Roo Code plugin.
+To connect your extension to to Roo Code Cloud:
 
-<img src="/img/login/login-13.png" alt="Roo Code Cloud initial connection screen" width="600" />
+1. Go to the  **Cloud** <Codicon name="cloud" /> tab in the top right corner of the Roo Code extension.
+   <img src="/img/login/login-0.png" alt="Tab location in the extensio" width="400" />
+2. Click on the big blue button (and click on "Open" if asked).
+3. Sign up for or sign in to your account, using the auth method of your choice
+4. Review and accept the terms of service and privacy policy
+5. The next page will attempt to redirect you back to VS Code, accept it
+   <img src="/img/login/login-3.png" alt="Account creation confirmation popup" width="500" />
+6. You'll be logged in
 
-Click the **Connect** button to begin the authentication process. You'll be redirected to the Roo Code Cloud website.
+### If you're not taken to your IDE
 
-## Sign In Options
+<img src="/img/login/login-11.png" alt="IDE selector for VS Code forks" width="500" />
 
-You'll see the sign-in page with multiple authentication options:
+From the screen above, you can:
+- Click on the logo for your IDE (eg VS Code, Trae) and see if the popup appears, or
+- Copy the URL from the box below and, in the extension, click on "Having Trouble?" and paste it in
 
-<img src="/img/login/login-6.png" alt="Roo Code Cloud sign in page" width="600" />
-
-Choose your preferred login method:
-- **GitHub** - Sign in with your existing GitHub account
-- **Google** - Sign in with your existing Google account  
-- **Email** - Enter your email address to continue with email authentication
-
-## Creating a New Account
-
-If you don't have an account yet, you have two options to create one:
-
-### Option 1: Sign Up with GitHub or Google
-
-The quickest way: sign in with GitHub or Google, accept the Terms, and you're in.
-
-<img src="/img/login/login-8.png" alt="Terms of Service agreement form after OAuth authentication" width="600" />
-
-After creation:
-- If connecting from VS Code: you'll see a confirmation popup
-- If signing up directly at app.roocode.com: you'll land on your dashboard
-
-<img src="/img/login/login-9.png" alt="Roo Code Cloud dashboard after direct signup" width="600" />
-
-### Option 2: Sign Up with Email
-
-Alternatively, sign up with email: fill the form (email and password required), accept the Terms, and submit.
-
-<img src="/img/login/login-7.png" alt="Roo Code Cloud signup form" width="600" />
-
-After creation:
-- If connecting from VS Code: you'll see this confirmation popup:
-  <img src="/img/login/login-3.png" alt="Account creation confirmation popup" width="600" />
-- If signing up directly at app.roocode.com: you'll land on your dashboard:
-  <img src="/img/login/login-9.png" alt="Roo Code Cloud dashboard after direct signup" width="600" />
-
-## IDE Selection
-
-The authentication page includes a selector for other VS Code-compatible IDEs:
-
-<img src="/img/login/login-11.png" alt="IDE selector for VS Code forks" width="600" />
-
-This allows you to connect Roo Code Cloud to various VS Code forks and compatible editors.
-
-## Authentication Complete
-
-Once authenticated, you'll be redirected back to your IDE where you'll see your connected account:
-
-<img src="/img/dashboard/dashboard-3.png" alt="Successfully connected Roo Code Cloud account" width="600" />
-
-Key controls:
-- [Task Sync](/roo-code-cloud/task-sync) — enabled automatically after connecting
-- [Roomote Control](/roo-code-cloud/roomote-control) — Pro feature; see [Billing & Subscriptions](/roo-code-cloud/billing-subscriptions#pro-plan-20month)
-
-Your Roo Code extension is now connected to Roo Code Cloud and ready to sync your data and enable collaboration features.
+Your Roo Code VS Code extension is now connected to Roo Code Cloud and ready to sync your data and enable collaboration features.
 
 ## Authentication Security
 

docs/roo-code-cloud/login.mdx

@@ -17,6 +17,14 @@ Roo Code Cloud transforms AI development with autonomous agents that work indepe
 
 It also augments the Roo Code VS Code extension capabilities.
 
+## Getting Started
+
+You can start:
+- By directly **[signing up for a Roo Code account](https://app.roocode.com/sign-up)** and setting up your agent team
+- Or by **[connecting from the VS Code extension](/roo-code-cloud/login)** to your account
+
+If you chose the Roo Code Cloud Provider when signing up, you already have an account and only need to sign in.
+
 ## Core Capabilities
 
 ### Autonomous Cloud Agents
@@ -42,7 +50,7 @@ Bring AI directly to where your team collaborates.
 More integrations coming soon.
 
 ### Roomote Control
-Control your IDE from anywhere.
+Control Roo Code in your IDE from anywhere.
 - **Task sync**: See all of your local tasks from a single place.
 - **Roomote Control**: Start/stop tasks, answer questions, course-correct, all from the web.
 - **Continue from anywhere**: Pick up tasks on your mobile device or a different computer.
@@ -51,16 +59,4 @@ Control your IDE from anywhere.
 
 ### Unified Analytics
 - **Cross-provider tracking**: Monitor token usage and cost for all tasks across all models and workspaces.
-- **Team insights**: Understand how your organization leverages AI.
-
-## Getting Started
-
-You can start:
-- By directly **[signing up for a Roo Code account](/roo-code-cloud/sign-up)** and setting up your agent team
-- Or by **[connecting from the VS Code extension](/roo-code-cloud/login)**
-
-1.  to link Roo Code with the cloud.
-1.  to link Roo Code with the cloud.
-2. **[Explore Cloud Agents](/roo-code-cloud/cloud-agents)** to understand the different types of agents available.
-3. **[Set up Integrations](/roo-code-cloud/github-integration)** for GitHub and Slack to bring agents into your workflow.
-4. **[Use Free Models](/providers/roo-code-cloud)** to power your development without costs.
+- **Team insights**: Understand how your organization leverages AI.

docs/roo-code-cloud/what-is-roo-code-cloud.md

@@ -301,8 +301,8 @@ const config: Config = {
     navbar: {
       logo: {
         alt: 'Roo Code Logo',
-        src: 'img/roo-code-logo-white.png',
-        srcDark: 'img/roo-code-logo-dark.png',
+        src: 'img/roo-code-logo-dark.svg',
+        srcDark: 'img/roo-code-logo-white.svg',
       },
       items: [
         {
@@ -315,8 +315,8 @@ const config: Config = {
       style: 'dark',
       logo: {
         alt: 'Roo Code Logo',
-        src: 'img/roo-code-logo-white.png',
-        srcDark: 'img/roo-code-logo-dark.png',
+        src: 'img/roo-code-logo-dark.svg',
+        srcDark: 'img/roo-code-logo-white.svg',
         width: 120,
         height: 24,
       },

docusaurus.config.ts

@@ -26,7 +26,7 @@
   --border: 0 0% 89.8%;
   --input: 0 0% 89.8%;
   --ring: 0 0% 3.9%;
-  --radius: 1.5rem;
+  --radius: 0.5rem;
 
   --chart-1: 0 100% 50%;
   --chart-2: 29 100% 50%;
@@ -51,6 +51,8 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
   --ifm-background-color: hsl(var(--background));
   --ifm-font-color-base: hsl(var(--foreground));
+
+  --block-shadow: 0 4px 10px rgba(0,0,0,0.075);
 }
 
 /* Dark mode - force pure black background */
@@ -450,7 +452,8 @@ pre {
 
 /* Logo height */
 .navbar__logo {
-  height: 32px; /* h-8 */
+  height: 26px;
+  margin-top: 8px;
   width: auto;
 }
 
@@ -1617,17 +1620,17 @@ main[class*="docMainContainer"] {
 /* Code blocks with roocode.com styling */
 .theme-code-block {
   margin: 2rem 0; /* More spacing */
-  border-radius: calc(var(--radius) + 4px) !important;
+  border-radius: calc(var(--radius)) !important;
   overflow: hidden;
+  box-shadow: var(--block-shadow) !important;
 }
 
 /* Code block container */
 .prism-code {
-  background: hsl(var(--background) / 0.6) !important;
   border: 1px solid hsl(var(--border) / 0.3) !important;
-  font-size: 0.875rem !important; /* Consistent with roocode.com */
+  font-size: 1rem !important;
   line-height: 1.7 !important;
-  padding: 1.5rem !important;
+  padding: 1rem !important;
 }
 
 /* Inline code styling */
@@ -1691,11 +1694,19 @@ main[class*="docMainContainer"] {
   margin: 2rem 0;
   border-collapse: separate;
   border-spacing: 0;
-  border: 1px solid hsl(var(--border) / 0.5);
-  border-radius: calc(var(--radius) + 4px);
+  border-radius: calc(var(--radius)/2);
+  box-shadow: var(--block-shadow);
   overflow: hidden;
   background: hsl(var(--background) / 0.3);
-  backdrop-filter: blur(16px);
+}
+
+.theme-doc-markdown table tr {
+  border: none;
+}
+
+.theme-doc-markdown th,
+.theme-doc-markdown td {
+  vertical-align: top;
 }
 
 .theme-doc-markdown th {
@@ -1704,11 +1715,13 @@ main[class*="docMainContainer"] {
   text-align: left;
   font-weight: 600;
   color: hsl(var(--foreground));
-  border-bottom: 1px solid hsl(var(--border) / 0.5);
+  border: none;
+  border-bottom: 2px solid hsl(var(--border) / 0.5);
 }
 
 .theme-doc-markdown td {
   padding: 0.75rem 1rem;
+  border: none;
   border-bottom: 1px solid hsl(var(--border) / 0.3);
   color: hsl(var(--foreground) / 0.9); /* Match body text brightness */
 }
@@ -1820,14 +1833,25 @@ main[class*="docMainContainer"] {
   font-weight: 500;
 }
 
-/* Images with roocode.com styling */
 .theme-doc-markdown img {
   max-width: 100%;
   height: auto;
-  border-radius: calc(var(--radius) + 4px);
-  border: 1px solid hsl(var(--border) / 0.3);
-  margin: 2rem 0;
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  border-radius: var(--radius);
+  outline: 1px solid hsl(var(--border));
+  margin: 1rem 0;
+  overflow: hidden;
+  box-shadow: var(--block-shadow);
+  transition: transform 0.1s;
+}
+
+.theme-doc-markdown img:hover {
+  outline-width: 3px;
+  transform: scale(1.025);
+}
+
+.theme-doc-markdown li img {
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
 }
 
 /* Image captions */
@@ -2100,7 +2124,7 @@ html {
 }
 
 .footer__logo-container img {
-  height: 24px !important; /* Smaller than navbar logo */
+  height: 20px !important; /* Smaller than navbar logo */
   width: auto !important;
 }
 
@@ -2124,6 +2148,7 @@ html {
 
 .footer__social-icons svg {
   display: inline-block !important;
+  height: 20px;
   visibility: visible !important;
 }
 

src/css/custom.css

@@ -20,7 +20,7 @@ export default function FooterLayout({
           <div className="footer__brand">
             {logo && <div className="footer__logo-container">{logo}</div>}
             <div className="footer__tagline">
-              Empowering developers to build better software faster with AI-powered tools and insights.
+              Your AI Software Engineering Team. Interactive in the IDE, autonomous in the cloud.
             </div>
             <div className="footer__social-icons">
               <SocialIcons />