From d9a4ed993aad36464776c093333af1a310e5a492 Mon Sep 17 00:00:00 2001 From: Nate Sesti Date: Wed, 26 Jul 2023 00:47:32 -0700 Subject: fix colors and hover box behavior --- extension/react-app/src/components/ComboBox.tsx | 10 +++++++--- extension/react-app/src/components/Onboarding.tsx | 13 +++---------- extension/react-app/src/components/PillButton.tsx | 2 +- extension/react-app/src/pages/gui.tsx | 16 +++++++++++----- 4 files changed, 22 insertions(+), 19 deletions(-) (limited to 'extension/react-app/src') 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)); }} > 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) {