revert: #463 - style and right pane updates

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

@@ -1,16 +1,6 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  .scroll {
-    ::-webkit-scrollbar {
-      width: 0px;
-    }
-
-    ::-webkit-scrollbar-button {
-      display: none;
-    }
-  }
-
   table {
     width: 100%;
     border-collapse: collapse;

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { useDispatch } from 'react-redux';
@@ -6,23 +6,11 @@ import { addAssertion, updateAssertion, deleteAssertion } from 'providers/ReduxS
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import AssertionRow from './AssertionRow';
 import StyledWrapper from './StyledWrapper';
-import { useTheme } from 'providers/Theme/index';
 
 const Assertions = ({ item, collection }) => {
   const dispatch = useDispatch();
-  const { theme } = useTheme();
   const assertions = item.draft ? get(item, 'draft.request.assertions') : get(item, 'request.assertions');
 
-  const [countItems, setCountItems] = useState(assertions.length);
-  const ref = useRef();
-
-  useEffect(() => {
-    setCountItems(assertions.length);
-    if (assertions.length > countItems) {
-      ref.current.scrollIntoView();
-    }
-  }, [assertions]);
-
   const handleAddAssertion = () => {
     dispatch(
       addAssertion({
@@ -71,9 +59,8 @@ const Assertions = ({ item, collection }) => {
 
   return (
     <StyledWrapper className="w-full">
-      <div className="scroll" style={{ maxHeight: '55vh', overflowY: 'auto' }}>
       <table>
-          <thead style={{ backgroundColor: theme.table.thead.bg, position: 'sticky', top: -1, zIndex: 2 }}>
+        <thead>
           <tr>
             <td>Expr</td>
             <td>Operator</td>
@@ -100,8 +87,6 @@ const Assertions = ({ item, collection }) => {
             : null}
         </tbody>
       </table>
-        <div ref={ref} />
-      </div>
       <button className="btn-add-assertion text-link pr-2 py-3 mt-2 select-none" onClick={handleAddAssertion}>
         + Add Assertion
       </button>

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

@@ -1,16 +1,6 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  .scroll {
-    ::-webkit-scrollbar {
-      width: 0px;
-    }
-
-    ::-webkit-scrollbar-button {
-      display: none;
-    }
-  }
-
   table {
     width: 100%;
     border-collapse: collapse;

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
@@ -12,17 +12,8 @@ import StyledWrapper from './StyledWrapper';
 
 const QueryParams = ({ item, collection }) => {
   const dispatch = useDispatch();
-  const { storedTheme, theme } = useTheme();
+  const { storedTheme } = useTheme();
   const params = item.draft ? get(item, 'draft.request.params') : get(item, 'request.params');
-  const [countItems, setCountItems] = useState(params.length);
-  const ref = useRef();
-
-  useEffect(() => {
-    setCountItems(params.length);
-    if (params.length > countItems) {
-      ref.current.scrollIntoView();
-    }
-  }, [params]);
 
   const handleAddParam = () => {
     dispatch(
@@ -74,9 +65,8 @@ const QueryParams = ({ item, collection }) => {
 
   return (
     <StyledWrapper className="w-full">
-      <div className="scroll" style={{ maxHeight: '55vh', overflowY: 'auto' }}>
       <table>
-          <thead style={{ backgroundColor: theme.table.thead.bg, position: 'sticky', top: -1, zIndex: 2 }}>
+        <thead>
           <tr>
             <td>Name</td>
             <td>Value</td>
@@ -140,8 +130,6 @@ const QueryParams = ({ item, collection }) => {
             : null}
         </tbody>
       </table>
-        <div ref={ref} />
-      </div>
       <button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={handleAddParam}>
         +&nbsp;<span>Add Param</span>
       </button>

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

@@ -1,16 +1,6 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  .scroll {
-    ::-webkit-scrollbar {
-      width: 0px;
-    }
-
-    ::-webkit-scrollbar-button {
-      display: none;
-    }
-  }
-
   table {
     width: 100%;
     border-collapse: collapse;

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
@@ -13,19 +13,9 @@ const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
 const RequestHeaders = ({ item, collection }) => {
   const dispatch = useDispatch();
-  const { storedTheme, theme } = useTheme();
+  const { storedTheme } = useTheme();
   const headers = item.draft ? get(item, 'draft.request.headers') : get(item, 'request.headers');
 
-  const [countItems, setCountItems] = useState(headers.length);
-  const ref = useRef();
-
-  useEffect(() => {
-    setCountItems(headers.length);
-    if (headers.length > countItems) {
-      ref.current.scrollIntoView();
-    }
-  }, [headers]);
-
   const addHeader = () => {
     dispatch(
       addRequestHeader({
@@ -74,9 +64,8 @@ const RequestHeaders = ({ item, collection }) => {
 
   return (
     <StyledWrapper className="w-full">
-      <div class="scroll" style={{ maxHeight: '55vh', overflowY: 'auto' }}>
       <table>
-          <thead style={{ backgroundColor: theme.table.thead.bg, position: 'sticky', top: -1, zIndex: 2 }}>
+        <thead>
           <tr>
             <td>Name</td>
             <td>Value</td>
@@ -148,9 +137,7 @@ const RequestHeaders = ({ item, collection }) => {
               })
             : null}
         </tbody>
-          <div ref={ref} />
       </table>
-      </div>
       <button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
         + Add Header
       </button>

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

@@ -38,7 +38,7 @@ const Script = ({ item, collection }) => {
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
   return (
-    <StyledWrapper className="w-full h-1/2 flex flex-col">
+    <StyledWrapper className="w-full flex flex-col">
       <div className="flex-1 mt-2">
         <div className="mb-1 title text-xs">Pre Request</div>
         <CodeEditor

packages/bruno-app/src/components/RequestTabPanel/index.js

@@ -150,7 +150,7 @@ const RequestTabPanel = () => {
       <div className="pt-4 pb-3 px-4">
         <QueryUrl item={item} collection={collection} handleRun={handleRun} />
       </div>
-      <section className="main flex flex-grow relative">
+      <section className="main flex flex-grow pb-4 relative">
         <section className="request-pane">
           <div
             className="px-4"

packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   table {
+    width: 100%;
     border-collapse: collapse;
 
     thead {

packages/bruno-app/src/components/ResponsePane/StyledWrapper.js

@@ -1,8 +1,6 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  height: 80vh;
-  overflow-y: auto;
   div.tabs {
     div.tab {
       padding: 6px 0px;

packages/bruno-app/src/components/TextareaEditor/StyledTextarea.js

@@ -16,14 +16,6 @@ const StyledTextarea = styled.textarea`
     border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
     outline: ${(props) => props.theme.modal.input.focusBorder} !important;
   }
-
-  ::-webkit-scrollbar {
-    width: 0px;
-  }
-
-  ::-webkit-scrollbar-button {
-    display: none;
-  }
 `;
 
 export default StyledTextarea;

packages/bruno-app/src/pageComponents/Index/index.js

@@ -57,7 +57,7 @@ export default function Main() {
     <div>
       <StyledWrapper className={className}>
         <Sidebar />
-        <section className="flex flex-grow flex-col overflow-hidden">
+        <section className="flex flex-grow flex-col overflow-auto">
           {showHomePage ? (
             <Welcome />
           ) : (

packages/bruno-app/src/themes/dark.js

@@ -223,7 +223,6 @@ const darkTheme = {
   table: {
     border: '#333',
     thead: {
-      bg: '#4d4d4d',
       color: 'rgb(204, 204, 204)'
     },
     striped: '#2A2D2F',

packages/bruno-app/src/themes/light.js

@@ -227,7 +227,6 @@ const lightTheme = {
   table: {
     border: '#efefef',
     thead: {
-      bg: '#f4f4f4',
       color: '#616161'
     },
     striped: '#f3f3f3',