fix colors and hover box behavior

4 files changed, 22 insertions, 19 deletions

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 4a1cdbc0..a14e2280 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -20,7 +20,10 @@ import { ContextItem } from "../../../schema/FullState";
 import { postVscMessage } from "../vscode";
 import { GUIClientContext } from "../App";
 import { MeiliSearch } from "meilisearch";
-import { setBottomMessageCloseTimeout } from "../redux/slices/uiStateSlice";
+import {
+  setBottomMessage,
+  setBottomMessageCloseTimeout,
+} from "../redux/slices/uiStateSlice";
 import { useDispatch } from "react-redux";
 
 const SEARCH_INDEX_NAME = "continue_context_items";
@@ -307,13 +310,14 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
             },
             onFocus: (e) => {
               setFocused(true);
-              dispatch(setBottomMessageCloseTimeout(undefined));
+              dispatch(setBottomMessage(undefined));
             },
             onBlur: (e) => {
               setFocused(false);
               postVscMessage("blurContinueInput", {});
             },
             onKeyDown: (event) => {
+              dispatch(setBottomMessage(undefined));
               if (event.key === "Enter" && event.shiftKey) {
                 // Prevent Downshift's default 'Enter' behavior.
                 (event.nativeEvent as any).preventDownshiftDefault = true;
@@ -363,7 +367,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
               }
             },
             onClick: () => {
-              dispatch(setBottomMessageCloseTimeout(undefined));
+              dispatch(setBottomMessage(undefined));
             },
             ref: inputRef,
           })}
diff --git a/extension/react-app/src/components/Onboarding.tsx b/extension/react-app/src/components/Onboarding.tsx
index 231c1e93..6d0e0b28 100644
--- a/extension/react-app/src/components/Onboarding.tsx
+++ b/extension/react-app/src/components/Onboarding.tsx
@@ -1,5 +1,3 @@
-import { useSelector } from "react-redux";
-import { RootStore } from "../redux/store";
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import { ArrowLeft, ArrowRight } from "@styled-icons/heroicons-outline";
@@ -14,6 +12,8 @@ const StyledDiv = styled.div`
   height: 100%;
   background-color: #1e1e1e;
   z-index: 200;
+
+  color: white;
 `;
 
 const StyledSpan = styled.span`
@@ -38,7 +38,7 @@ const Onboarding = () => {
   useEffect(() => {
     const hasVisited = localStorage.getItem("hasVisited");
     if (hasVisited) {
-      setCounter(4);
+      setCounter(0);
     } else {
       setCounter(0);
       localStorage.setItem("hasVisited", "true");
@@ -60,13 +60,6 @@ const Onboarding = () => {
           alignItems: "center",
           height: "100%",
           textAlign: "center",
-          background: `linear-gradient(
-            101.79deg,
-            #12887a66 0%,
-            #87245c66 32%,
-            #e1263766 63%,
-            #ffb21566 100%
-          )`,
           paddingLeft: "16px",
           paddingRight: "16px",
         }}
diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx
index 548fdf9d..e3d05711 100644
--- a/extension/react-app/src/components/PillButton.tsx
+++ b/extension/react-app/src/components/PillButton.tsx
@@ -186,7 +186,7 @@ const PillButton = (props: PillButtonProps) => {
                 backgroundColor={"#cc000055"}
                 onClick={() => {
                   client?.deleteContextWithIds([props.item.description.id]);
-                  dispatch(setBottomMessageCloseTimeout(undefined));
+                  dispatch(setBottomMessage(undefined));
                 }}
               >
                 <Trash style={{ margin: "auto" }} width="1.6em"></Trash>
diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index 5d893de9..9bb558c7 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -178,7 +178,7 @@ function GUI(props: GUIProps) {
       ) {
         client?.deleteAtIndex(history.current_index);
       } else if (e.key === "Escape") {
-        dispatch(setBottomMessageCloseTimeout(undefined));
+        dispatch(setBottomMessage(undefined));
       }
     };
     window.addEventListener("keydown", listener);
@@ -409,7 +409,7 @@ function GUI(props: GUIProps) {
           borderRadius: defaultBorderRadius,
           padding: "12px",
           zIndex: 100,
-          boxShadow: `0px 0px 6px 0px ${vscForeground}`,
+          boxShadow: `0px 0px 4px 0px ${vscForeground}`,
           maxHeight: "50vh",
           overflow: "scroll",
         }}
@@ -419,11 +419,17 @@ function GUI(props: GUIProps) {
       </div>
       <Footer dataSwitchChecked={dataSwitchChecked}>
         {vscMediaUrl && (
-          <a href="https://github.com/continuedev/continue">
-            <img src={`${vscMediaUrl}/continue-dev-square.png`} width="22px" />
+          <a
+            href="https://github.com/continuedev/continue"
+            style={{ marginRight: "auto" }}
+          >
+            <img
+              src={`${vscMediaUrl}/continue-dev-square.png`}
+              width="22px"
+              style={{ backgroundColor: "black", color: "red" }}
+            />
           </a>
         )}
-        <p style={{ margin: "0", marginRight: "auto" }}>Continue</p>
         <HeaderButtonWithText
           onClick={() => {
             // Show the dialog