feat: :lipstick: fixed footer and change button color

1 files changed, 80 insertions, 66 deletions

diff --git a/extension/react-app/src/components/Layout.tsx b/extension/react-app/src/components/Layout.tsx
index 897fd683..143b2302 100644
--- a/extension/react-app/src/components/Layout.tsx
+++ b/extension/react-app/src/components/Layout.tsx
@@ -25,6 +25,7 @@ import { useNavigate } from "react-router-dom";
 import ModelSelect from "./ModelSelect";
 
 // #region Styled Components
+const FOOTER_HEIGHT = "1.8em";
 
 const LayoutTopDiv = styled.div`
   height: 100%;
@@ -58,6 +59,14 @@ const Footer = styled.footer`
   justify-content: right;
   padding: 8px;
   align-items: center;
+  width: calc(100% - 16px);
+  height: ${FOOTER_HEIGHT};
+`;
+
+const GridDiv = styled.div`
+  display: grid;
+  grid-template-rows: 1fr auto;
+  height: 100vh;
 `;
 
 // #endregion
@@ -122,7 +131,77 @@ const Layout = () => {
           }}
           message={dialogMessage}
         />
-        <Outlet />
+
+        <GridDiv>
+          <div style={{ overflow: "scroll" }}>
+            <Outlet />
+          </div>
+          <Footer>
+            {localStorage.getItem("hideFeature") === "true" || (
+              <SparklesIcon
+                className="mr-auto cursor-pointer"
+                onClick={() => {
+                  localStorage.setItem("hideFeature", "true");
+                }}
+                onMouseEnter={() => {
+                  dispatch(
+                    setBottomMessage(
+                      "🎁 New Feature: Use ⌘⇧R automatically debug errors in the terminal (you can click the sparkle icon to make it go away)"
+                    )
+                  );
+                }}
+                onMouseLeave={() => {
+                  dispatch(setBottomMessage(undefined));
+                }}
+                width="1.3em"
+                height="1.3em"
+                color="yellow"
+              />
+            )}
+
+            <ModelSelect />
+            <HeaderButtonWithText
+              onClick={() => {
+                client?.loadSession(undefined);
+              }}
+              text="New Session (⌥⌘N)"
+            >
+              <PlusIcon width="1.4em" height="1.4em" />
+            </HeaderButtonWithText>
+            <HeaderButtonWithText
+              onClick={() => {
+                navigate("/history");
+              }}
+              text="History"
+            >
+              <FolderIcon 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.4em" height="1.4em" />
+              </HeaderButtonWithText>
+            </a>
+            <a
+              href="https://github.com/continuedev/continue/issues/new/choose"
+              className="no-underline"
+            >
+              <HeaderButtonWithText text="Feedback">
+                <ChatBubbleOvalLeftEllipsisIcon width="1.4em" height="1.4em" />
+              </HeaderButtonWithText>
+            </a>
+            <HeaderButtonWithText
+              onClick={() => {
+                navigate("/settings");
+              }}
+              text="Settings"
+            >
+              <Cog6ToothIcon width="1.4em" height="1.4em" />
+            </HeaderButtonWithText>
+          </Footer>
+        </GridDiv>
 
         <BottomMessageDiv
           displayOnBottom={displayBottomMessageOnBottom}
@@ -138,71 +217,6 @@ const Layout = () => {
         >
           {bottomMessage}
         </BottomMessageDiv>
-        <Footer>
-          {localStorage.getItem("hideFeature") === "true" || (
-            <SparklesIcon
-              className="mr-auto cursor-pointer"
-              onClick={() => {
-                localStorage.setItem("hideFeature", "true");
-              }}
-              onMouseEnter={() => {
-                dispatch(
-                  setBottomMessage(
-                    "🎁 New Feature: Use ⌘⇧R automatically debug errors in the terminal (you can click the sparkle icon to make it go away)"
-                  )
-                );
-              }}
-              onMouseLeave={() => {
-                dispatch(setBottomMessage(undefined));
-              }}
-              width="1.3em"
-              height="1.3em"
-              color="yellow"
-            />
-          )}
-
-          <ModelSelect />
-          <HeaderButtonWithText
-            onClick={() => {
-              client?.loadSession(undefined);
-            }}
-            text="New Session (⌥⌘N)"
-          >
-            <PlusIcon width="1.4em" height="1.4em" />
-          </HeaderButtonWithText>
-          <HeaderButtonWithText
-            onClick={() => {
-              navigate("/history");
-            }}
-            text="History"
-          >
-            <FolderIcon 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.4em" height="1.4em" />
-            </HeaderButtonWithText>
-          </a>
-          <a
-            href="https://github.com/continuedev/continue/issues/new/choose"
-            className="no-underline"
-          >
-            <HeaderButtonWithText text="Feedback">
-              <ChatBubbleOvalLeftEllipsisIcon width="1.4em" height="1.4em" />
-            </HeaderButtonWithText>
-          </a>
-          <HeaderButtonWithText
-            onClick={() => {
-              navigate("/settings");
-            }}
-            text="Settings"
-          >
-            <Cog6ToothIcon width="1.4em" height="1.4em" />
-          </HeaderButtonWithText>
-        </Footer>
       </div>
     </LayoutTopDiv>
   );