chore: style updates

This commit is contained in:
Anoop M D 2022-01-08 00:56:10 +05:30
parent f817aa3d9d
commit 8da4e71d47
14 changed files with 23 additions and 15 deletions

View File

@ -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 {

View File

@ -1,7 +1,6 @@
import styled from 'styled-components';
const StyledWrapper = styled.div`
background-color: #f2f2f2;
`;
export default StyledWrapper;

View File

@ -3,6 +3,7 @@ import styled from 'styled-components';
const StyledWrapper = styled.div`
div.CodeMirror {
border: solid 1px #e1e1e1;
height: 96%;
}
textarea.cm-editor {

View File

@ -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;

View File

@ -50,6 +50,10 @@ const StyledWrapper = styled.div`
box-shadow: none !important;
}
}
.react-tabs__tab-panel--selected {
height: 90%;
}
`;
export default StyledWrapper;

View File

@ -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>

View File

@ -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}

View File

@ -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;

View File

@ -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 ? (

View File

@ -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"

View File

@ -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>

View File

@ -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 {

View File

@ -1,6 +1,10 @@
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
.CodeMirror-gutters {
background-color: #f6f8fa;
}
@keyframes fade-in {
from {
opacity: 0;

View File

@ -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 {