fix: :lipstick: update font size for input, remove first tutorial step

3 files changed, 34 insertions, 20 deletions

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index f26acdaf..934b7337 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -31,6 +31,7 @@ import { setBottomMessage } from "../redux/slices/uiStateSlice";
 import { useDispatch, useSelector } from "react-redux";
 import { RootStore } from "../redux/store";
 import ContinueButton from "./ContinueButton";
+import { getFontSize } from "../util";
 
 const SEARCH_INDEX_NAME = "continue_context_items";
 
@@ -62,13 +63,16 @@ const HiddenHeaderButtonWithText = styled.button`
   }
 `;
 
-const mainInputFontSize = 13;
+const mainInputFontSize = getFontSize();
 
-const MainTextInput = styled.textarea<{ inQueryForDynamicProvider: boolean }>`
+const MainTextInput = styled.textarea<{
+  inQueryForDynamicProvider: boolean;
+  fontSize?: number;
+}>`
   resize: none;
 
   padding: 8px;
-  font-size: ${mainInputFontSize}px;
+  font-size: ${(props) => props.fontSize || mainInputFontSize}px;
   font-family: inherit;
   border-radius: ${defaultBorderRadius};
   margin: 8px auto;
@@ -114,11 +118,14 @@ const Ul = styled.ul<{
   showAbove: boolean;
   ulHeightPixels: number;
   inputBoxHeight?: string;
+  fontSize?: number;
 }>`
   ${(props) =>
     props.showAbove
       ? `transform: translateY(-${props.ulHeightPixels + 8}px);`
-      : `transform: translateY(${5 * mainInputFontSize - 2}px);`}
+      : `transform: translateY(${
+          5 * (props.fontSize || mainInputFontSize) - 2
+        }px);`}
   position: absolute;
   background: ${vscBackground};
   color: ${vscForeground};
@@ -132,6 +139,7 @@ const Ul = styled.ul<{
   outline: 0.5px solid ${lightGray};
   z-index: 2;
   -ms-overflow-style: none;
+  font-size: ${(props) => props.fontSize || mainInputFontSize}px;
 
   scrollbar-width: none; /* Firefox */
 
@@ -644,6 +652,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
           inQueryForDynamicProvider={
             typeof inQueryForContextProvider !== "undefined"
           }
+          fontSize={getFontSize()}
           disabled={props.disabled}
           placeholder={`Ask a question, '/' for slash commands, '@' to add context`}
           {...getInputProps({
@@ -805,6 +814,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
             items.length === 0 ||
             inputRef.current?.value === ""
           }
+          fontSize={getFontSize()}
         >
           {nestedContextProvider && (
             <div
diff --git a/extension/react-app/src/components/Suggestions.tsx b/extension/react-app/src/components/Suggestions.tsx
index f0ee3bc0..ed2eb558 100644
--- a/extension/react-app/src/components/Suggestions.tsx
+++ b/extension/react-app/src/components/Suggestions.tsx
@@ -109,18 +109,18 @@ const stageDescriptions = [
 ];
 
 const suggestionsStages: any[][] = [
-  [
-    {
-      title: stageDescriptions[0],
-      description: "How does merge sort work?",
-      textInput: "How does merge sort work?",
-    },
-    {
-      title: stageDescriptions[0],
-      description: "How do I sum over a column in SQL?",
-      textInput: "How do I sum over a column in SQL?",
-    },
-  ],
+  // [
+  //   {
+  //     title: stageDescriptions[0],
+  //     description: "How does merge sort work?",
+  //     textInput: "How does merge sort work?",
+  //   },
+  //   {
+  //     title: stageDescriptions[0],
+  //     description: "How do I sum over a column in SQL?",
+  //     textInput: "How do I sum over a column in SQL?",
+  //   },
+  // ],
   [
     {
       title: stageDescriptions[1],
@@ -146,6 +146,7 @@ const suggestionsStages: any[][] = [
     },
   ],
 ];
+const NUM_STAGES = suggestionsStages.length;
 
 const TutorialDiv = styled.div`
   margin: 4px;
@@ -188,11 +189,13 @@ function SuggestionsArea(props: { onClick: (textInput: string) => void }) {
 
   return (
     <>
-      {hide || stage > 2 || !inputsAreOnlyTutorial() || (
+      {hide || stage > NUM_STAGES - 1 || !inputsAreOnlyTutorial() || (
         <TutorialDiv>
           <div className="flex">
             <SparklesIcon width="1.3em" height="1.3em" color="yellow" />
-            <b className="ml-1">Tutorial ({stage + 1}/3)</b>
+            <b className="ml-1">
+              Tutorial ({stage + 1}/{NUM_STAGES})
+            </b>
           </div>
           <p style={{ color: vscForeground, paddingLeft: "4px" }}>
             {stage < suggestionsStages.length &&
@@ -211,7 +214,7 @@ function SuggestionsArea(props: { onClick: (textInput: string) => void }) {
           <div className="grid grid-cols-2 gap-2 mt-2">
             {suggestionsStages[stage]?.map((suggestion) => (
               <SuggestionsDiv
-                disabled={stage > 0 && !codeIsHighlighted}
+                disabled={!codeIsHighlighted}
                 {...suggestion}
                 onClick={() => {
                   if (stage > 0 && !codeIsHighlighted) return;
diff --git a/extension/react-app/src/pages/history.tsx b/extension/react-app/src/pages/history.tsx
index b4f80d70..01cb71e0 100644
--- a/extension/react-app/src/pages/history.tsx
+++ b/extension/react-app/src/pages/history.tsx
@@ -9,6 +9,7 @@ import styled from "styled-components";
 import { ArrowLeftIcon } from "@heroicons/react/24/outline";
 import CheckDiv from "../components/CheckDiv";
 import { temporarilyClearSession } from "../redux/slices/serverStateReducer";
+import { getFontSize } from "../util";
 
 const Tr = styled.tr`
   &:hover {
@@ -110,7 +111,7 @@ function History() {
   const earlier = new Date(0);
 
   return (
-    <div className="overflow-y-scroll">
+    <div className="overflow-y-scroll" style={{ fontSize: getFontSize() }}>
       <div className="sticky top-0" style={{ backgroundColor: vscBackground }}>
         <div
           className="items-center flex m-0 p-0"