diff options
Diffstat (limited to 'extension/react-app')
| -rw-r--r-- | extension/react-app/public/continue-dev-square.png | bin | 0 -> 36355 bytes | |||
| -rw-r--r-- | extension/react-app/src/components/ComboBox.tsx | 17 | ||||
| -rw-r--r-- | extension/react-app/src/components/ContinueButton.tsx | 5 | ||||
| -rw-r--r-- | extension/react-app/src/index.css | 4 | ||||
| -rw-r--r-- | extension/react-app/src/pages/gui.tsx | 43 | 
5 files changed, 25 insertions, 44 deletions
diff --git a/extension/react-app/public/continue-dev-square.png b/extension/react-app/public/continue-dev-square.png Binary files differnew file mode 100644 index 00000000..e4b62556 --- /dev/null +++ b/extension/react-app/public/continue-dev-square.png 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  | 
