improve: script ui

packages/bruno-app/src/components/RequestPane/Script/StyledWrapper.js

@@ -1,12 +1,41 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  div.CodeMirror {
-    height: inherit;
+  height: 100%;
+
+  .script-tabs {
+    display: flex;
+    gap: 1px;
+    padding: 0 1px;
+    border-bottom: 1px solid ${(props) => props.theme.requestTabs.bottomBorder};
   }
 
-  div.title {
-    color: var(--color-tab-inactive);
+  .tab {
+    padding: 8px 16px;
+    font-size: 13px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: ${(props) => props.theme.requestTabs.color};
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s ease;
+    position: relative;
+
+    &:hover {
+      color: ${(props) => props.theme.requestTabs.icon.hoverColor};
+      background: ${(props) => props.theme.requestTabs.icon.hoverBg};
+    }
+
+    &.active {
+      color: ${(props) => props.theme.tabs.active.color};
+      border-bottom: solid 2px ${(props) => props.theme.tabs.active.border};
+      background: ${(props) => props.theme.requestTabs.active.bg};
+    }
+  }
+
+  div.CodeMirror {
+    height: calc(100vh - 290px);
+    background: ${(props) => props.theme.codemirror.bg};
   }
 `;
 

packages/bruno-app/src/components/RequestPane/Script/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
@@ -8,6 +8,7 @@ import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
 
 const Script = ({ item, collection }) => {
+  const [activeTab, setActiveTab] = useState('pre-request');
   const dispatch = useDispatch();
   const requestScript = item.draft ? get(item, 'draft.request.script.req') : get(item, 'request.script.req');
   const responseScript = item.draft ? get(item, 'draft.request.script.res') : get(item, 'request.script.res');
@@ -39,9 +40,24 @@ const Script = ({ item, collection }) => {
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
   return (
-    <StyledWrapper className="w-full flex flex-col">
-      <div className="flex flex-col flex-1 mt-2 gap-y-2">
-        <div className="title text-xs">Pre Request</div>
+    <StyledWrapper className="w-full flex flex-col mt-4">
+      <div className="script-tabs">
+        <button
+          className={`tab ${activeTab === 'pre-request' ? 'active' : ''}`}
+          onClick={() => setActiveTab('pre-request')}
+        >
+          Pre Request
+        </button>
+        <button
+          className={`tab ${activeTab === 'post-response' ? 'active' : ''}`}
+          onClick={() => setActiveTab('post-response')}
+        >
+          Post Response
+        </button>
+      </div>
+
+      <div className="flex flex-col flex-1 mt-2">
+        {activeTab === 'pre-request' && (
           <CodeEditor
             collection={collection}
             value={requestScript || ''}
@@ -53,9 +69,9 @@ const Script = ({ item, collection }) => {
             onRun={onRun}
             onSave={onSave}
           />
-      </div>
-      <div className="flex flex-col flex-1 mt-2 gap-y-2">
-        <div className="title text-xs">Post Response</div>
+        )}
+
+        {activeTab === 'post-response' && (
           <CodeEditor
             collection={collection}
             value={responseScript || ''}
@@ -67,6 +83,7 @@ const Script = ({ item, collection }) => {
             onRun={onRun}
             onSave={onSave}
           />
+        )}
       </div>
     </StyledWrapper>
   );