fix: sign in btn + colors

gui/src/components/PageHeader.tsx

@@ -8,7 +8,7 @@ export interface PageHeaderProps {
   showBorder?: boolean;
 }
 
-export default function PageHeader({
+export function PageHeader({
   onTitleClick,
   title,
   rightContent,
@@ -22,27 +22,26 @@ export default function PageHeader({
           : ""
       }`}
     >
-      <div className="flex w-full items-center justify-between pr-4">
-        {title && (
-          <>
-            <div
-              className="flex cursor-pointer items-center transition-colors duration-200 hover:text-zinc-100"
-              onClick={onTitleClick}
-            >
-              <ArrowLeftIcon className="ml-3 inline-block h-3 w-3" />
-              <span
-                className="mx-2 inline-block text-base font-bold"
-                style={{
-                  fontSize: fontSize(-2),
-                }}
-              >
-                {title}
-              </span>
-            </div>
-          </>
-        )}
-      </div>
-      <div className="ml-auto">{rightContent}</div>
+      {title ? (
+        <div
+          className="flex cursor-pointer items-center transition-colors duration-200 hover:text-zinc-100"
+          onClick={onTitleClick}
+        >
+          <ArrowLeftIcon className="ml-3 inline-block h-3 w-3" />
+          <span
+            className="mx-2 inline-block text-base font-bold"
+            style={{
+              fontSize: fontSize(-2),
+            }}
+          >
+            {title}
+          </span>
+        </div>
+      ) : (
+        <div />
+      )}
+
+      {rightContent && <div className="pr-2">{rightContent}</div>}
     </div>
   );
 }

gui/src/components/StepContainer/ThinkingIndicator.tsx

@@ -1,7 +1,7 @@
+import { ChatHistoryItem } from "core";
 import { useEffect, useState } from "react";
 import { useAppSelector } from "../../redux/hooks";
 import { selectDefaultModel } from "../../redux/slices/configSlice";
-import { ChatHistoryItem } from "core";
 
 interface ThinkingIndicatorProps {
   historyItem: ChatHistoryItem;
@@ -37,7 +37,7 @@ const ThinkingIndicator = ({ historyItem }: ThinkingIndicatorProps) => {
 
   return (
     <div className="px-2 py-2">
-      <span className="text-stone-500">{`Thinking.${".".repeat(animation)}`}</span>
+      <span className="text-lightgray">{`Thinking.${".".repeat(animation)}`}</span>
     </div>
   );
 };

gui/src/components/dialogs/AddDocsDialog.tsx

@@ -84,7 +84,7 @@ function AddDocsDialog() {
       <div className="">
         <h1 className="mb-0 hidden sm:block">Add documentation</h1>
         <h1 className="sm:hidden">Add docs</h1>
-        <p className="m-0 mt-2 p-0 text-stone-500">
+        <p className="text-lightgray m-0 mt-2 p-0">
           For the @docs context provider
         </p>
         <div className="mt-3">
@@ -160,7 +160,7 @@ function AddDocsDialog() {
           <div className="flex flex-row items-end justify-between pb-3">
             <div>
               <InformationCircleIcon className="h-3 w-3" />
-              <p className="mt-2 flex flex-row items-center gap-1 p-0 px-1 text-xs text-stone-500">
+              <p className="text-lightgray mt-2 flex flex-row items-center gap-1 p-0 px-1 text-xs">
                 Closing this dialog will not affect indexing progress
               </p>
             </div>

gui/src/components/indexing/ChatIndexingPeeks.tsx

@@ -35,7 +35,7 @@ function ChatIndexingPeek({ state }: ChatIndexingPeekProps) {
     <div className="flex flex-row items-center border-0 border-t border-solid border-t-zinc-700 px-3 py-0.5">
       <div className="group flex flex-1 cursor-pointer flex-row items-center gap-2">
         <div className={`flex flex-row items-center gap-2`}>
-          <p className="m-0 p-0 text-xs text-stone-500 group-hover:underline">
+          <p className="text-lightgray m-0 p-0 text-xs group-hover:underline">
             {state.displayName}
           </p>
         </div>
@@ -47,17 +47,17 @@ function ChatIndexingPeek({ state }: ChatIndexingPeekProps) {
             }}
           />
         </div>
-        <div className="xs:flex hidden flex-row items-center gap-1 text-stone-500">
+        <div className="xs:flex text-lightgray hidden flex-row items-center gap-1">
           <span className="text-xs no-underline">
             {state.progressPercentage.toFixed(0)}%
           </span>
           <ArrowPathIcon
-            className={`animate-spin-slow inline-block h-4 w-4 text-stone-500`}
+            className={`animate-spin-slow text-lightgray inline-block h-4 w-4`}
           ></ArrowPathIcon>
         </div>
       </div>
       <EyeSlashIcon
-        className="ml-6 h-4 w-4 cursor-pointer text-stone-500 hover:opacity-80"
+        className="text-lightgray ml-6 h-4 w-4 cursor-pointer hover:opacity-80"
         onClick={(e) => {
           dispatch(
             setIndexingChatPeekHidden({ type: state.type, hidden: true }),

gui/src/components/mainInput/Lump/sections/docs/DocsDetailsDialog.tsx

@@ -65,8 +65,8 @@ function DocsDetailsDialog({ startUrl }: DocsDetailsDialogProps) {
     if (data) {
       comp = (
         <div className="flex flex-col gap-0.5">
-          <p className="m-0 mt-2 p-0 text-stone-500">{`Title: ${data.config.title}`}</p>
-          <p className="m-0 p-0 text-stone-500">{`Pre-indexed doc: ${data.isPreIndexedDoc}`}</p>
+          <p className="text-lightgray m-0 mt-2 p-0">{`Title: ${data.config.title}`}</p>
+          <p className="text-lightgray m-0 p-0">{`Pre-indexed doc: ${data.isPreIndexedDoc}`}</p>
           {!data.chunks?.length ? (
             <div>No article chunks</div>
           ) : (
@@ -145,7 +145,7 @@ function DocsDetailsDialog({ startUrl }: DocsDetailsDialogProps) {
     <div className="px-2 py-4 sm:px-4">
       <h3>Docs index</h3>
       <p
-        className="m-0 mt-1 cursor-pointer p-0 text-stone-500 hover:underline"
+        className="text-lightgray m-0 mt-1 cursor-pointer p-0 hover:underline"
         onClick={(e) => {
           e.stopPropagation();
           ideMessenger.post("openUrl", startUrl);

gui/src/components/mainInput/Lump/sections/docs/DocsIndexingPeeks.tsx

@@ -21,14 +21,14 @@ function DocsIndexingPeek({ status }: DocsIndexingPeekProps) {
 
   return (
     <div
-      className="flex cursor-pointer flex-row items-center gap-2 rounded-md px-1 text-stone-500 hover:bg-gray-700/10"
+      className="text-lightgray flex cursor-pointer flex-row items-center gap-2 rounded-md px-1 hover:bg-gray-700/10"
       onClick={() => {
         // navigate("/more"); TODO
         dispatch(setShowDialog(false));
         dispatch(setDialogMessage(undefined));
       }}
     >
-      <p className="m-0 p-0 text-stone-500 group-hover:underline">
+      <p className="text-lightgray m-0 p-0 group-hover:underline">
         {status.title}
       </p>
       <div className="my-2 h-1.5 flex-1 rounded-md border border-solid border-gray-400">
@@ -39,12 +39,12 @@ function DocsIndexingPeek({ status }: DocsIndexingPeekProps) {
           }}
         />
       </div>
-      <div className="xs:flex hidden flex-row items-center gap-1 text-stone-500">
+      <div className="xs:flex text-lightgray hidden flex-row items-center gap-1">
         <span className="text-xs no-underline">
           {progressPercentage.toFixed(0)}%
         </span>
         {/* <ArrowPathIcon
-          className={`animate-spin-slow inline-block h-4 w-4 text-stone-500`}
+          className={`animate-spin-slow inline-block h-4 w-4 text-lightgray`}
         ></ArrowPathIcon> */}
       </div>
     </div>

gui/src/pages/config/AccountButton.tsx

@@ -17,7 +17,7 @@ export function AccountButton() {
 
   return (
     <Popover className="relative">
-      <Popover.Button className="bg-vsc-background hover:bg-vsc-input-background text-vsc-foreground mr-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border-none">
+      <Popover.Button className="bg-vsc-background hover:bg-vsc-input-background text-vsc-foreground flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border-none">
         <UserCircleIcon className="h-6 w-6" />
       </Popover.Button>
 

gui/src/pages/config/ConfigItemSelect.tsx

@@ -0,0 +1,87 @@
+/**
+ * A component that displays config items either as tabs (on large screens) or a popover select (on small screens)
+ */
+interface ConfigItemSelectProps {
+  items: {
+    id: string;
+    label: string;
+    icon: React.ReactNode;
+  }[];
+  activeId: string;
+  onSelect: (id: string) => void;
+}
+
+import { Popover } from "@headlessui/react";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import PopoverTransition from "../../components/mainInput/InputToolbar/bottom/PopoverTransition";
+import { fontSize } from "../../util";
+
+export function ConfigItemSelect({
+  items,
+  activeId,
+  onSelect,
+}: ConfigItemSelectProps) {
+  const activeItem = items.find((item) => item.id === activeId);
+
+  const tabContent = (
+    <div className="hidden border-0 border-b-[1px] border-solid border-b-zinc-700 p-0.5 sm:flex sm:justify-center md:grid md:grid-cols-2 md:gap-x-2">
+      {items.map((item) => (
+        <div
+          style={{ fontSize: fontSize(-2) }}
+          key={item.id}
+          className={`hover:bg-vsc-input-background flex cursor-pointer items-center justify-center gap-1.5 rounded-md px-2 py-2 ${
+            activeId === item.id ? "" : "text-gray-400"
+          }`}
+          onClick={() => onSelect(item.id)}
+        >
+          {item.icon}
+          {item.label}
+        </div>
+      ))}
+    </div>
+  );
+
+  // Render popover on smaller screens
+  const popoverContent = (
+    <div className="mt-2 px-1.5 sm:hidden">
+      <Popover className="relative">
+        <Popover.Button
+          className="flex w-full items-center justify-between gap-2 rounded-md border border-zinc-700 px-3 py-2"
+          style={{ fontSize: fontSize(-2) }}
+        >
+          <div className="flex items-center gap-2">
+            {activeItem?.icon}
+            <span>{activeItem?.label}</span>
+          </div>
+          <ChevronDownIcon className="h-4 w-4" />
+        </Popover.Button>
+
+        <PopoverTransition>
+          <Popover.Panel className="bg-vsc-input-background absolute z-10 mt-1 w-full rounded-md border border-zinc-700 py-1">
+            {items.map((item) => (
+              <div
+                key={item.id}
+                className={`hover:bg-vsc-input-background flex cursor-pointer items-center gap-2 px-3 py-2 ${
+                  activeId === item.id ? "bg-vsc-input-background" : ""
+                }`}
+                onClick={() => {
+                  onSelect(item.id);
+                }}
+              >
+                {item.icon}
+                <span>{item.label}</span>
+              </div>
+            ))}
+          </Popover.Panel>
+        </PopoverTransition>
+      </Popover>
+    </div>
+  );
+
+  return (
+    <>
+      {tabContent}
+      {popoverContent}
+    </>
+  );
+}

gui/src/pages/config/IndexingProgress/IndexingProgressIndicator.tsx

@@ -1,10 +1,10 @@
-import { IndexingProgressUpdate } from "core";
-import { getProgressPercentage } from "./IndexingProgress";
 import {
   ArrowPathIcon,
-  PauseCircleIcon,
   CheckCircleIcon,
+  PauseCircleIcon,
 } from "@heroicons/react/24/outline";
+import { IndexingProgressUpdate } from "core";
+import { getProgressPercentage } from "./IndexingProgress";
 
 export interface IndexingProgressIndicatorProps {
   update: IndexingProgressUpdate;
@@ -28,13 +28,13 @@ function IndexingProgressIndicator({ update }: IndexingProgressIndicatorProps) {
     update.status !== "disabled" && progressPercentage !== "100";
 
   return (
-    <div className="flex items-center justify-between gap-1 text-stone-500">
+    <div className="text-lightgray flex items-center justify-between gap-1">
       {showProgress && <span className="text-xs">{progressPercentage}%</span>}
 
       {Icon && (
         <div className="flex items-center">
           <Icon
-            className={`inline-block h-4 w-4 align-top text-stone-500 ${
+            className={`text-lightgray inline-block h-4 w-4 align-top ${
               animateIcon ? "animate-spin-slow" : ""
             }`}
           ></Icon>

gui/src/pages/config/IndexingProgress/IndexingProgressSubtext.tsx

@@ -27,15 +27,15 @@ function IndexingProgressSubtext({
   return (
     <div className="flex justify-between">
       <span
-        className={`inline-block cursor-pointer text-xs text-stone-500 underline`}
+        className={`text-lightgray inline-block cursor-pointer text-xs underline`}
         onClick={onClick}
       >
         {STATUS_TO_SUBTITLE_TEXT[update.status]}
       </span>
 
       <div className={`${showIndexingDesc ? "w-2/3" : "flex-1"}`}>
         {showIndexingDesc && (
-          <span className="block truncate text-right text-xs text-stone-500">
+          <span className="text-lightgray block truncate text-right text-xs">
             {update.desc}
           </span>
         )}

gui/src/pages/config/IndexingSettingsSection.tsx

@@ -7,7 +7,7 @@ export function IndexingSettingsSection() {
     <div className="py-5">
       <div>
         <h3 className="mx-auto mb-1 mt-0 text-xl">@codebase index</h3>
-        <span className="w-3/4 text-xs text-stone-500">
+        <span className="text-lightgray w-3/4 text-xs">
           Local embeddings of your codebase
         </span>
       </div>

gui/src/pages/config/KeyboardShortcuts.tsx

@@ -198,7 +198,7 @@ function KeyboardShortcuts() {
 
   return (
     <div className="flex max-w-[400px] flex-col">
-      <h3 className="mx-auto mb-1 text-xl">Keyboard shortcuts</h3>
+      <h3 className="mb-2 text-xl">Keyboard shortcuts</h3>
       <div className="flex flex-col items-center justify-center gap-x-3 gap-y-3 p-1">
         {shortcuts.map((shortcut, i) => {
           return (

gui/src/pages/config/MCPServersPreview.tsx

@@ -85,7 +85,7 @@ function MCPServerPreview({ server }: MCPServerStatusProps) {
                 <code key={idx}>{tool.name}</code>
               ))}
               {server.tools.length === 0 && (
-                <span className="text-stone-500">No tools</span>
+                <span className="text-lightgray">No tools</span>
               )}
             </ToolTip>
           </div>
@@ -100,7 +100,7 @@ function MCPServerPreview({ server }: MCPServerStatusProps) {
                 <code key={idx}>{prompt.name}</code>
               ))}
               {server.prompts.length === 0 && (
-                <span className="text-stone-500">No prompts</span>
+                <span className="text-lightgray">No prompts</span>
               )}
             </ToolTip>
           </div>
@@ -115,7 +115,7 @@ function MCPServerPreview({ server }: MCPServerStatusProps) {
                 <code key={idx}>{resource.name}</code>
               ))}
               {server.resources.length === 0 && (
-                <span className="text-stone-500">No resources</span>
+                <span className="text-lightgray">No resources</span>
               )}
             </ToolTip>
           </div>