chore: pr #766 ux polish

This commit is contained in:
Anoop M D 2023-10-25 23:29:59 +05:30
parent 36f19ec7bc
commit 32b696da57
4 changed files with 7 additions and 5 deletions

View File

@ -2,6 +2,7 @@ import styled from 'styled-components';
const StyledWrapper = styled.div` const StyledWrapper = styled.div`
font-size: 0.8125rem; font-size: 0.8125rem;
color: ${(props) => props.theme.requestTabPanel.responseStatus};
`; `;
export default StyledWrapper; export default StyledWrapper;

View File

@ -2,6 +2,7 @@ import React from 'react';
import StyledWrapper from './StyledWrapper'; import StyledWrapper from './StyledWrapper';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import get from 'lodash/get'; import get from 'lodash/get';
import { IconDownload } from '@tabler/icons';
const ResponseSave = ({ item }) => { const ResponseSave = ({ item }) => {
const { ipcRenderer } = window; const { ipcRenderer } = window;
@ -21,9 +22,9 @@ const ResponseSave = ({ item }) => {
}; };
return ( return (
<StyledWrapper className="ml-4"> <StyledWrapper className="ml-4 flex items-center">
<button onClick={saveResponseToFile} disabled={!response.dataBuffer}> <button onClick={saveResponseToFile} disabled={!response.dataBuffer} title="Save response to file">
Save Response <IconDownload size={16} strokeWidth={1.5} />
</button> </button>
</StyledWrapper> </StyledWrapper>
); );

View File

@ -6,7 +6,7 @@ import StyledWrapper from './StyledWrapper';
// Todo: text-error class is not getting pulled in for 500 errors // Todo: text-error class is not getting pulled in for 500 errors
const StatusCode = ({ status }) => { const StatusCode = ({ status }) => {
const getTabClassname = (status) => { const getTabClassname = (status) => {
return classnames('', { return classnames('ml-2', {
'text-ok': status >= 100 && status < 200, 'text-ok': status >= 100 && status < 200,
'text-ok': status >= 200 && status < 300, 'text-ok': status >= 200 && status < 300,
'text-error': status >= 300 && status < 400, 'text-error': status >= 300 && status < 400,

View File

@ -113,10 +113,10 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
</div> </div>
{!isLoading ? ( {!isLoading ? (
<div className="flex flex-grow justify-end items-center"> <div className="flex flex-grow justify-end items-center">
<ResponseSave item={item} />
<StatusCode status={response.status} /> <StatusCode status={response.status} />
<ResponseTime duration={response.duration} /> <ResponseTime duration={response.duration} />
<ResponseSize size={response.size} /> <ResponseSize size={response.size} />
<ResponseSave item={item} />
</div> </div>
) : null} ) : null}
</div> </div>