summaryrefslogtreecommitdiff
path: root/extension/react-app/src
diff options
context:
space:
mode:
authorNate Sesti <sestinj@gmail.com>2023-07-25 17:30:12 -0700
committerNate Sesti <sestinj@gmail.com>2023-07-25 17:30:12 -0700
commit2375ca5ff9b054d5128d5e4fc8507f925b25aebf (patch)
treee51759a2f1ef9d1fcf2d8a046e788dbd803a759d /extension/react-app/src
parent509d6c22805675a21aeaa15187223ede705b3819 (diff)
downloadsncontinue-2375ca5ff9b054d5128d5e4fc8507f925b25aebf.tar.gz
sncontinue-2375ca5ff9b054d5128d5e4fc8507f925b25aebf.tar.bz2
sncontinue-2375ca5ff9b054d5128d5e4fc8507f925b25aebf.zip
updating ui to match config-py branch
Diffstat (limited to 'extension/react-app/src')
-rw-r--r--extension/react-app/src/components/ComboBox.tsx17
-rw-r--r--extension/react-app/src/components/ContinueButton.tsx5
-rw-r--r--extension/react-app/src/index.css4
-rw-r--r--extension/react-app/src/pages/gui.tsx43
4 files changed, 25 insertions, 44 deletions
diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 1e2ca135..bf07cb93 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -68,7 +68,7 @@ const Ul = styled.ul<{
${(props) =>
props.showAbove
? `transform: translateY(-${props.ulHeightPixels + 8}px);`
- : `transform: translateY(${2 * mainInputFontSize}px);`}
+ : `transform: translateY(${5 * mainInputFontSize}px);`}
position: absolute;
background: ${vscBackground};
color: ${vscForeground};
@@ -79,15 +79,9 @@ const Ul = styled.ul<{
padding: 0;
${({ hidden }) => hidden && "display: none;"}
border-radius: ${defaultBorderRadius};
- outline: 0.5px solid gray;
+ outline: 1px solid ${lightGray};
z-index: 2;
- // Get rid of scrollbar and its padding
- scrollbar-width: none;
-ms-overflow-style: none;
- &::-webkit-scrollbar {
- width: 0px;
- background: transparent; /* make scrollbar transparent */
- }
`;
const Li = styled.li<{
@@ -95,14 +89,15 @@ const Li = styled.li<{
selected: boolean;
isLastItem: boolean;
}>`
- background-color: ${vscBackground};
- ${({ highlighted }) => highlighted && "background: #ff000066;"}
+ background-color: ${({ highlighted }) =>
+ highlighted ? lightGray : secondaryDark};
+ ${({ highlighted }) => highlighted && `background: ${vscBackground};`}
${({ selected }) => selected && "font-weight: bold;"}
padding: 0.5rem 0.75rem;
display: flex;
flex-direction: column;
${({ isLastItem }) => isLastItem && "border-bottom: 1px solid gray;"}
- border-top: 1px solid gray;
+ /* border-top: 1px solid gray; */
cursor: pointer;
`;
diff --git a/extension/react-app/src/components/ContinueButton.tsx b/extension/react-app/src/components/ContinueButton.tsx
index d7739b20..6d753988 100644
--- a/extension/react-app/src/components/ContinueButton.tsx
+++ b/extension/react-app/src/components/ContinueButton.tsx
@@ -26,7 +26,8 @@ function ContinueButton(props: { onClick?: () => void; hidden?: boolean }) {
return (
<StyledButton
hidden={props.hidden}
- className="m-auto"
+ style={{ fontSize: "10px" }}
+ className="m-auto press-start-2p"
onClick={props.onClick}
>
{vscMediaUrl ? (
@@ -34,7 +35,7 @@ function ContinueButton(props: { onClick?: () => void; hidden?: boolean }) {
) : (
<Play />
)}
- Continue
+ CONTINUE
</StyledButton>
);
}
diff --git a/extension/react-app/src/index.css b/extension/react-app/src/index.css
index bac7fe97..68f9d0ab 100644
--- a/extension/react-app/src/index.css
+++ b/extension/react-app/src/index.css
@@ -25,3 +25,7 @@ body {
margin: 0px;
height: 100%;
}
+
+.press-start-2p {
+ font-family: "Press Start 2P", "Lexend", sans-serif;
+}
diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index 49f41dcf..70031d40 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -64,6 +64,9 @@ function GUI(props: GUIProps) {
const vscMachineId = useSelector(
(state: RootStore) => state.config.vscMachineId
);
+ const vscMediaUrl = useSelector(
+ (state: RootStore) => state.config.vscMediaUrl
+ );
const [dataSwitchChecked, setDataSwitchChecked] = useState(false);
const dataSwitchOn = useSelector(
(state: RootStore) => state.config.dataSwitchOn
@@ -395,37 +398,15 @@ function GUI(props: GUIProps) {
</b>
</div>
<Footer dataSwitchChecked={dataSwitchChecked}>
- <div
- style={{
- display: "flex",
- gap: "4px",
- marginRight: "auto",
- alignItems: "center",
- }}
- onMouseEnter={() => {
- setShowDataSharingInfo(true);
- }}
- onMouseLeave={() => {
- setShowDataSharingInfo(false);
- }}
- >
- <ReactSwitch
- height={20}
- handleDiameter={20}
- width={40}
- onChange={() => {
- posthog?.capture("data_switch_toggled", {
- vscMachineId: vscMachineId,
- dataSwitchChecked: !dataSwitchChecked,
- });
- postVscMessage("toggleDataSwitch", { on: !dataSwitchChecked });
- setDataSwitchChecked((prev) => !prev);
- }}
- onColor="#12887a"
- checked={dataSwitchChecked}
- />
- <span style={{ cursor: "help", fontSize: "14px" }}>Collect Data</span>
- </div>
+ {vscMediaUrl && (
+ <a
+ href="https://github.com/continuedev/continue"
+ style={{ marginRight: "auto" }}
+ >
+ <img src={`${vscMediaUrl}/continue-dev-square.png`} width="22px" />
+ </a>
+ )}
+ {/* <p style={{ margin: "0", marginRight: "auto" }}>Continue</p> */}
<HeaderButtonWithText
onClick={() => {
// Show the dialog