added navbar and response UI

Author: ywy-w

main.js

@@ -117,8 +117,8 @@ function createWindow() {
   mainWindow = new BrowserWindow({
     width: 2000,
     height: 1000,
-    minWidth: 1304,
-    minHeight: 700,
+    minWidth: 1000,
+    minHeight: 600,
     backgroundColor: '-webkit-linear-gradient(top, #3dadc2 0%,#2f4858 100%)',
     show: false,
     webPreferences: {

src/client/components-v2/main/GRPCComposer.tsx

@@ -176,7 +176,7 @@ export default function GRPCComposer(props) {
   };
 
   return(
-    <Box className="is-flex is-flex-direction-column is-justify-content-space-between is-tall" id = "composer-grpc">
+    <Box className="is-flex is-flex-direction-column is-justify-content-space-between" id = "composer-grpc">
         <div
           className="is-flex-grow-3 add-vertical-scroll"
           style={{ overflowX: 'hidden' }}

src/client/components-v2/main/GraphQLComposer.tsx

@@ -236,7 +236,7 @@ export default function GraphQLComposer(props) {
   };
 
   return(
-    <Box className="is-flex is-flex-direction-column is-justify-content-space-between is-tall" id = "composer-graphql">
+    <Box className="is-flex is-flex-direction-column is-justify-content-space-between" id = "composer-graphql">
         <div
           className="is-flex-grow-3 add-vertical-scroll"
           style={{ overflowX: 'hidden' }}

src/client/components-v2/main/MainContainer.tsx

@@ -109,7 +109,7 @@ function MainContainer(props) {
           element={<WebhookComposer {...props} />}
         />
       </Routes>
-      <Divider orientation="horizontal"/>
+      {/* <Divider orientation="horizontal"/> */}
       <ResponsePaneContainer />
     </Box>
   )

src/client/components-v2/main/OpenAPIComposer.tsx

@@ -120,7 +120,7 @@ export default function OpenAPIComposer(props) {
   };
 
   return(
-    <Box className="is-flex is-flex-direction-column is-justify-content-space-between is-tall" id= "composer-openapi">
+    <Box className="is-flex is-flex-direction-column is-justify-content-space-between" id= "composer-openapi">
         <div
           className="is-flex-grow-3 add-vertical-scroll"
           style={{ overflowX: 'hidden' }}

src/client/components-v2/main/WebRTCComposer.tsx

@@ -107,7 +107,7 @@ export default function WebRTCComposer(props) {
   };
 
   return(
-    <Box className="is-flex is-flex-direction-column is-justify-content-space-between is-tall"
+    <Box className="is-flex is-flex-direction-column is-justify-content-space-between"
     id = "composer-webrtc">        <div
           className="is-flex-grow-3 add-vertical-scroll"
           style={{ overflowX: 'hidden' }}

src/client/components-v2/main/WebSocketComposer.tsx

@@ -103,7 +103,7 @@ export default function WebSocketComposer(props) {
   };
 
   return(
-    <Box className="is-flex is-flex-direction-column is-justify-content-space-between is-tall" id = "composer-websocket">
+    <Box className="is-flex is-flex-direction-column is-justify-content-space-between" id = "composer-websocket">
         <div
           className="is-flex-grow-3 add-vertical-scroll"
           style={{ overflowX: 'hidden' }}

src/client/components-v2/main/response/ResponsePaneContainer.tsx

@@ -40,9 +40,9 @@ const ResponsePaneContainer = () => {
 
   return (
     <div
-      className={`${isDark ? 'is-dark-400' : 'is-divider-neutral-300'} box is-child`} // gigi playing with css
+      className={`${isDark ? 'is-dark-400' : 'is-divider-neutral-300'} box is-3 add-vertical-scroll`} // gigi playing with css
       // className={`${isDark ? 'is-dark-400' : ''} column is-one-third is-flex is-flex-direction-column is-tall`}
-      style={{ height: '50vh', margin: "10px"}}
+      style={{ height: '50vh', margin: "0px", padding: "0px"}}
       id="responses"
     >
 
@@ -51,7 +51,9 @@ const ResponsePaneContainer = () => {
 
 
       {/* HEADER */}
-      <div className="hero is-primary is-flex is-flex-direction-row is-justify-content-center">
+      <div className="hero is-primary is-flex is-flex-direction-row is-justify-content-center"
+        style={{padding: "10px"}}
+        >
         <ResponseTime currentResponse={currentResponse} />
         {currentResponse.responseSize && (
           <div className="response-size-placement">