mirror of
https://github.com/usebruno/bruno.git
synced 2024-11-21 15:33:11 +01:00
chore: style updates
This commit is contained in:
parent
f817aa3d9d
commit
8da4e71d47
@ -12,7 +12,7 @@ const Wrapper = styled.div`
|
||||
background-color: white;
|
||||
font-size: 0.8125rem;
|
||||
color: rgb(48 48 48);
|
||||
background: #f9f9f9;
|
||||
background: #fff;
|
||||
box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;
|
||||
|
||||
.tippy-content {
|
||||
|
@ -1,7 +1,6 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
background-color: #f2f2f2;
|
||||
`;
|
||||
|
||||
export default StyledWrapper;
|
@ -3,6 +3,7 @@ import styled from 'styled-components';
|
||||
const StyledWrapper = styled.div`
|
||||
div.CodeMirror {
|
||||
border: solid 1px #e1e1e1;
|
||||
height: 96%;
|
||||
}
|
||||
|
||||
textarea.cm-editor {
|
||||
|
@ -169,7 +169,7 @@ export default class QueryEditor extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<StyledWrapper
|
||||
className="mt-4"
|
||||
className="mt-4 h-full"
|
||||
aria-label="Query Editor"
|
||||
ref={node => {
|
||||
this._node = node;
|
||||
|
@ -50,6 +50,10 @@ const StyledWrapper = styled.div`
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.react-tabs__tab-panel--selected {
|
||||
height: 90%;
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledWrapper;
|
@ -6,8 +6,8 @@ import RequestHeaders from '../RequestHeaders';
|
||||
|
||||
const RequestPane = ({onRunQuery, schema, leftPaneWidth, value, onQueryChange}) => {
|
||||
return (
|
||||
<StyledWrapper className="">
|
||||
<Tabs className='react-tabs mt-1 flex flex-grow flex-col' forceRenderTabPanel>
|
||||
<StyledWrapper className="h-full">
|
||||
<Tabs className='react-tabs mt-1 flex flex-grow flex-col h-full' forceRenderTabPanel>
|
||||
<TabList>
|
||||
<Tab tabIndex="-1">Query</Tab>
|
||||
<Tab tabIndex="-1">Headers</Tab>
|
||||
|
@ -113,7 +113,7 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<StyledWrapper className="flex flex-col flex-grow">
|
||||
<div
|
||||
className="pb-4 px-4"
|
||||
style={{
|
||||
@ -128,9 +128,9 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
|
||||
collections={collections}
|
||||
/>
|
||||
</div>
|
||||
<section className="main">
|
||||
<section className="main flex flex-grow">
|
||||
<section className="request-pane px-4">
|
||||
<div style={{width: `${leftPaneWidth}px`}}>
|
||||
<div style={{width: `${leftPaneWidth}px`, height: 'calc(100% - 5px)'}}>
|
||||
<RequestPane
|
||||
onRunQuery={runQuery}
|
||||
schema={schema}
|
||||
|
@ -21,6 +21,7 @@ const Wrapper = styled.div`
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
cursor: pointer;
|
||||
font-size: 0.8125rem;
|
||||
|
||||
.tab-container {
|
||||
border-left: 1px solid #dcdcdc;
|
||||
|
@ -50,7 +50,7 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
|
||||
return <li key={rt.id} className={getTabClassname(rt, index)} role="tab" onClick={() => handleClick(rt)}>
|
||||
<div className="flex items-center justify-between tab-container">
|
||||
<div className="flex items-center tab-label">
|
||||
<span className="tab-method" style={{fontSize: 13, color: getMethodColor(rt.method)}}>{rt.method}</span>
|
||||
<span className="tab-method" style={{color: getMethodColor(rt.method)}}>{rt.method}</span>
|
||||
<span className="text-gray-700 ml-1 tab-name">{rt.name}</span>
|
||||
</div>
|
||||
{rt.id === activeRequestTabId ? (
|
||||
|
@ -37,7 +37,7 @@ const QueryResult = ({data, isLoading, width}) => {
|
||||
}, [editor.current, cmEditor, data]);
|
||||
|
||||
return (
|
||||
<StyledWrapper className="mt-4" style={{position: 'relative'}}>
|
||||
<StyledWrapper className="mt-4 w-full" style={{position: 'relative', height: '90%'}}>
|
||||
{isLoading && (
|
||||
<div className="overlay">
|
||||
<div style={{marginBottom: 15, fontSize: 26}}>
|
||||
@ -58,7 +58,6 @@ const QueryResult = ({data, isLoading, width}) => {
|
||||
id="operation"
|
||||
style={{
|
||||
width: `${width}px`,
|
||||
height: '400px'
|
||||
}}
|
||||
ref={editor}
|
||||
className="cm-editor"
|
||||
|
@ -42,7 +42,7 @@ const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<StyledWrapper className="">
|
||||
<StyledWrapper className="flex flex-col h-full">
|
||||
<div className="flex items-center tabs mt-1" role="tablist">
|
||||
<div className={getTabClassname('response')} role="tab" onClick={() => setSelectedTab('response')}>Response</div>
|
||||
<div className={getTabClassname('headers')} role="tab" onClick={() => setSelectedTab('headers')}>Headers</div>
|
||||
@ -54,7 +54,7 @@ const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
|
||||
</div>
|
||||
) : null }
|
||||
</div>
|
||||
<section>
|
||||
<section className="flex flex-grow">
|
||||
{getTabPanel(selectedTab)}
|
||||
</section>
|
||||
</StyledWrapper>
|
||||
|
@ -7,7 +7,6 @@ const Wrapper = styled.div`
|
||||
user-select: none;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
background-color: #f4f4f4;
|
||||
font-weight: 600;
|
||||
|
||||
.rotate-90 {
|
||||
|
@ -1,6 +1,10 @@
|
||||
import { createGlobalStyle } from 'styled-components';
|
||||
|
||||
const GlobalStyle = createGlobalStyle`
|
||||
.CodeMirror-gutters {
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
@ -4,11 +4,12 @@ const Wrapper = styled.div`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: calc(100vh - 38px);
|
||||
min-height: 100vh;
|
||||
|
||||
aside {
|
||||
min-width: 230px;
|
||||
border-right: solid 1px #e1e1e1;
|
||||
background-color: #F6F8FA;
|
||||
}
|
||||
|
||||
section.main {
|
||||
|
Loading…
Reference in New Issue
Block a user