From 0181d6236d8b74c80adb62648fd6571431cf3210 Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Thu, 3 Aug 2023 22:15:06 -0700
Subject: feat: :lipstick: small ui tweaks, detached child process

---
 extension/react-app/src/pages/gui.tsx | 42 ++++++++++++++++++-----------------
 1 file changed, 22 insertions(+), 20 deletions(-)

(limited to 'extension/react-app/src/pages/gui.tsx')

diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index d3a8f566..54897944 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";
@@ -37,6 +37,24 @@ 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;
@@ -463,7 +481,8 @@ function GUI(props: GUIProps) {
         />
         <ContinueButton onClick={onMainTextInput} />
       </TopGUIDiv>
-      <div
+      <BottomMessageDiv
+        displayOnBottom={displayBottomMessageOnBottom}
         onMouseEnter={() => {
           dispatch(setBottomMessageCloseTimeout(undefined));
         }}
@@ -472,27 +491,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
-- 
cgit v1.2.3-70-g09d2

