1 files changed, 51 insertions, 28 deletions

diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index 3ae8e14e..ed73ce85 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import {
   defaultBorderRadius,
-  vscBackground,
+  secondaryDark,
   vscForeground,
 } from "../components";
 import Loader from "../components/Loader";
@@ -32,11 +32,30 @@ import {
   setBottomMessage,
   setBottomMessageCloseTimeout,
 } from "../redux/slices/uiStateSlice";
+import RingLoader from "../components/RingLoader";
 
 const TopGUIDiv = styled.div`
   overflow: hidden;
 `;
 
+const BottomMessageDiv = styled.div<{ displayOnBottom: boolean }>`
+  position: fixed;
+  bottom: ${(props) => (props.displayOnBottom ? "50px" : undefined)};
+  top: ${(props) => (props.displayOnBottom ? undefined : "50px")};
+  left: 0;
+  right: 0;
+  margin: 8px;
+  margin-top: 0;
+  background-color: ${secondaryDark};
+  color: ${vscForeground};
+  border-radius: ${defaultBorderRadius};
+  padding: 12px;
+  z-index: 100;
+  box-shadow: 0px 0px 2px 0px ${vscForeground};
+  max-height: 50vh;
+  overflow: scroll;
+`;
+
 const UserInputQueueItem = styled.div`
   border-radius: ${defaultBorderRadius};
   color: gray;
@@ -384,11 +403,31 @@ function GUI(props: GUIProps) {
       >
         {typeof client === "undefined" && (
           <>
-            <Loader />
-            <p style={{ textAlign: "center" }}>Loading Continue server...</p>
-            {/* <p style={{ textAlign: "center" }}>
-              Make sure you have a folder opened in VS Code
-            </p> */}
+            <RingLoader />
+            <p
+              style={{
+                textAlign: "center",
+                margin: "0px",
+                fontSize: "14px",
+              }}
+            >
+              Continue Server Starting
+            </p>
+            <p
+              style={{
+                margin: "auto",
+                textAlign: "center",
+                marginTop: "4px",
+                fontSize: "12px",
+                cursor: "pointer",
+                opacity: 0.7,
+              }}
+              onClick={() => {
+                postVscMessage("toggleDevTools", {});
+              }}
+            >
+              <u>Click to view logs</u>
+            </p>
           </>
         )}
         {history?.timeline.map((node: HistoryNode, index: number) => {
@@ -463,7 +502,8 @@ function GUI(props: GUIProps) {
         />
         <ContinueButton onClick={onMainTextInput} />
       </TopGUIDiv>
-      <div
+      <BottomMessageDiv
+        displayOnBottom={displayBottomMessageOnBottom}
         onMouseEnter={() => {
           dispatch(setBottomMessageCloseTimeout(undefined));
         }}
@@ -472,27 +512,10 @@ function GUI(props: GUIProps) {
             dispatch(setBottomMessage(undefined));
           }
         }}
-        style={{
-          position: "fixed",
-          bottom: displayBottomMessageOnBottom ? "50px" : undefined,
-          top: displayBottomMessageOnBottom ? undefined : "50px",
-          left: "0",
-          right: "0",
-          margin: "8px",
-          marginTop: "0px",
-          backgroundColor: vscBackground,
-          color: vscForeground,
-          borderRadius: defaultBorderRadius,
-          padding: "12px",
-          zIndex: 100,
-          boxShadow: `0px 0px 4px 0px ${vscForeground}`,
-          maxHeight: "50vh",
-          overflow: "scroll",
-        }}
         hidden={!bottomMessage}
       >
         {bottomMessage}
-      </div>
+      </BottomMessageDiv>
       <Footer dataSwitchChecked={dataSwitchChecked}>
         {vscMediaUrl && (
           <a
@@ -536,14 +559,14 @@ If you already have an LLM deployed on your own infrastructure, or would like to
           }}
           text="Clear"
         >
-          <TrashIcon width="1.5em" height="1.5em" />
+          <TrashIcon width="1.4em" height="1.4em" />
         </HeaderButtonWithText>
         <a
           href="https://continue.dev/docs/how-to-use-continue"
           className="no-underline"
         >
           <HeaderButtonWithText text="Docs">
-            <BookOpenIcon width="1.5em" height="1.5em" />
+            <BookOpenIcon width="1.4em" height="1.4em" />
           </HeaderButtonWithText>
         </a>
         <HeaderButtonWithText
@@ -557,7 +580,7 @@ If you already have an LLM deployed on your own infrastructure, or would like to
           }}
           text="Feedback"
         >
-          <ChatBubbleOvalLeftEllipsisIcon width="1.5em" height="1.5em" />
+          <ChatBubbleOvalLeftEllipsisIcon width="1.4em" height="1.4em" />
         </HeaderButtonWithText>
       </Footer>
     </>