updating ui to match config-py branch

9 files changed, 30 insertions, 48 deletions

diff --git a/extension/media/continue-dev-square.png b/extension/media/continue-dev-square.png
new file mode 100644
index 00000000..e4b62556
--- /dev/null
+++ b/extension/media/continue-dev-square.png
diff --git a/extension/package-lock.json b/extension/package-lock.json
index 6020e303..28b15e01 100644
--- a/extension/package-lock.json
+++ b/extension/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "continue",
-  "version": "0.0.196",
+  "version": "0.0.197",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "continue",
-      "version": "0.0.196",
+      "version": "0.0.197",
       "license": "Apache-2.0",
       "dependencies": {
         "@electron/rebuild": "^3.2.10",
diff --git a/extension/package.json b/extension/package.json
index ddd5b89e..80807d41 100644
--- a/extension/package.json
+++ b/extension/package.json
@@ -14,7 +14,7 @@
   "displayName": "Continue",
   "pricing": "Free",
   "description": "The open-source coding autopilot",
-  "version": "0.0.196",
+  "version": "0.0.197",
   "publisher": "Continue",
   "engines": {
     "vscode": "^1.67.0"
@@ -157,7 +157,7 @@
         {
           "id": "continue",
           "title": "Continue  ",
-          "icon": "react-app/dist/play_button.png"
+          "icon": "react-app/dist/continue-dev-square.png"
         }
       ]
     },
diff --git a/extension/react-app/public/continue-dev-square.png b/extension/react-app/public/continue-dev-square.png
new 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
diff --git a/extension/src/debugPanel.ts b/extension/src/debugPanel.ts
index f97cf846..6da79cdc 100644
--- a/extension/src/debugPanel.ts
+++ b/extension/src/debugPanel.ts
@@ -262,6 +262,7 @@ export function setupDebugPanel(
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@300&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
         
         <title>Continue</title>
       </head>